Precarga de imágenes con PHP en Wordpress

Una de las maneras de optimizar la carga de una página Web y mejorar su performance es reducir el número de elementos que se llaman desde el servidor. Esto incluye los css, js, imágenes y cualquier otro elemento con una URL.

Mi solución para reducir la carga de elementos es simple. Cargar la imagen desde PHP y convertirla en texto (cifrado), para incrustarla en el código Web de la página. El resultado tiene tres consecuencias inmediatas:

1. Ya no se vuelven a llamar estas imágenes con una URL, por lo tanto se reduce el número de llamadas al servidor.
2. El peso de las imágenes se suma al peso de la página.
3. Las imágenes embebidas forman parte del código de la página y se guardan en el caché junto con ella.

¿Quieres probar? Recuerda cambiar el tamaño de la imagen. En el siguiente ejemplo se utiliza el thumbnail.

<!-- post thumbnail -->

<?php if ( has_post_thumbnail()) :  ?>

<a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">

<?php

$img = get_the_post_thumbnail_url($post->ID, 'thumbnail');

$img_alt = get_post_meta(get_post_thumbnail_id( $post->ID ), '_wp_attachment_image_alt', true);

$imageInfo = getimagesize($img);

$imageMime = $imageInfo['mime'];

$imgdata = file_get_contents($img);

$imgbase64 = 'data:' . $imageMime . ';base64,' . base64_encode($imgdata);

?><img src="<?php echo $imgbase64; ?>" class="post-thumbnail wp-post-image" alt="<?php echo $img_alt; ?>">

</a>

<?php endif; ?>

<!-- /post thumbnail -->

Así se ve

Código embebido (inspeccionado)

Código embebido (código fuente)