viernes, 19 de abril de 2019

Precarga de imágenes con PHP en Wordpress

Una de las maneras de optimizar la carga de una página Web 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, 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 imagenes embebidas forman parte del código de la página y se guardan en el caché junto con ella.
¿Quieres probar? Recuerda cammbiar 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)




lunes, 16 de julio de 2018

Corregir AMP con Google Search Console


A lo largo del último año probé varios plugins de AMP. El primero y que me mantuvo en verde por más tiempo fue AMP for Wordpress de la AMP Project, junto con Yoast y Glue de Yoast.

Pero Yoast presentó problemas en mi sitio Web, no podía actualizar la configuración general y tuve que cambiarlo por AIOSEO, quitar el Glue, y buscar otro plugin que prometiera hacer lo mismo y colocar Google Tag Manager para AMP y publicidad de Adsense.

Luego de pasar por varios plugin, encontré Better AMP, que resolvió además los problemas que encontré en otros sitios Web.

Pero junto con esto, comenzaron a aparecer errores y advertencias. Los errores eran míos y algunos son producto de experimentos que no resultaron. Y las advertenncias eran detalles de los microformatos en el sitio. Así que tuve que editar el plugin.

\wp-content\plugins\better-amp\includes\libs\class-bf-json-ld-generator.php

Y con esta pequeña edición, resolví la advertencia y Google Search Console validó prácticamente todas las páginas del sitio. Ahora el blog regresa a verde.

Tráfico AMP 7 días previo a la corrección:

Tráfico AMP 7 días después de la correción:
(pronto)

jueves, 25 de enero de 2018

El nuevo Google Search Console (beta)


Cambió la ruta para acceder a los reportes, cambió el diseño de la plataforma, pero sobre todo cambió el periodo de análisis.

El límite de 999 queries o páginas sigue ahí, no es posible sobrepasar ese límite. Pero al menos sí podemos reconocer la performance de una URL específica, y sus queries, por un periodo de más de un año.

O dicho de otra manera, podemos mostrar la eficacia de la optimización SEO a lo largo del tiempo. Doy un ejemplo.


El gráfico a esta página incluye el tráfico normal y el tráfico amp. En enero de 2017 hice una actualización del contenido, y el resultado fue un aumento inmediato de las impresiones y clics. Y a partir de septiembre de 2017 muestra un crecimiento en búsquedas y clics que sobrepasa a la media.

El aumento de tráfico tiene sentido por dos razones: la primera, es el aumento de búsquedas relacionadas con el tema de la página; y la segunda, es la optimización SEO de la página en sí. Sin la segunda, no habría tenido un aumento significativo de la primera.

¿Quieres saber cómo optimmizar una página usando Google Search Console? 


Este ejercicio aplica tanto para la versión antigua como la nueva.


  1. Selecciona la página.
  2. Accede a las queries de esa página.
  3. Ordena las queries por posición media (de menor a mayor)
  4. Busca aquella query con CTR bajo que tiene posición media por debajo de 2.