¿Cómo conseguir una puntuación de 100/100 en Google PageSpeed Insights con WordPress?

Google PageSpeed Insights

Para un consultor SEO Asturias que se dedique al posicionamiento web, Galicia, Cantabria, León o cualquier otra región de la geografía española, es normal trabajar con un montón de clientes, e incluso alguna agencia SEO en Asturias a diario. Con las últimas actualizaciones del algoritmo de Google, es fundamental contar con un buen diseño web Asturias, Galicia, Cantabria, León o cualquier otra provincia española, además de tener una buena velocidad de carga, tanto de cara al presupuesto de rastreo de Google como de cara a servir información lo más rápipo posible a los usuarios, se ha convertido en un requisito muy importante de cara a lograr un óptimo posicionamiento web orgánico o SEO, por lo que no es raro que los clientes o incluso el CEO de una empresa pidan a su agencia o desarrollador de WordPress que mejore su puntuación en Google PageSpeed Insights. Google hace un buen trabajo en la promoción de esta herramienta para los consumidores, y éstos a menudo, no siempre entienden que no tener una puntuación perfecta no es el fin del mundo. Esto suele ser muy frustrante. Sin embargo, hoy vamos a ver algunos consejos y estrategias que pueden ayudar a obtener un 100/100 en Google PageSpeed Insights con su sitio de WordPress.

¿Cómo de importante es Google PageSpeed Insights?

Google PageSpeed Insights es una herramienta para la medición del rendimiento de un sitio web creada por Google para ayudar a identificar fácilmente maneras de hacer tu sitio web más rápido y más optimizado para móviles, siguiendo las recomendaciones sobre las mejores prácticas web. Una cosa muy importante que hay que recordar, es que no siempre hay que obsesionarse con el marcador 100/100. Esto podría no ser posible en todos los escenarios, dependiendo de cómo esté configurado tu sitio de WordPress. Con una gran cantidad de temas multipropósito y sitios con decenas de scripts externos, será una tarea casi imposible lograr una puntuación perfecta. Lo cual está perfectamente bien.

Es recomendable consultar la velocidad de tu sitio, más allá de las puntuaciones. Las puntuaciones con herramientas como Pingdom, GTMetrix, y Google PageSpeed Insights pueden llevarte, a veces, por mal camino. Sobre todo porque algunos de ellos ni siquiera soportan los protocolos HTTP/2 todavía. Lo que realmente importa es asegurar que tu sitio carga rápidamente y que el rendimiento percibido está también a la altura. El rendimiento percibido es cómo sienten los usuarios que carga de rápido tu sitio web.

Puntuación 100/100 en Google PageSpeed Insights en un host compartido

100/100 Google PageSpeed Insights

Parecía que podía ser divertido explorar el nuevo tema Twenty Seventeen en WordPress 4.7. Este es el primer tema por defecto de WordPress que está dirigido a las empresas en lugar de un blog típico, ¡lo que es emocionante! Así que hoy vamos a ver la forma de conseguir una puntuación perfecta 100/100 tanto en el escritorio y como en móviles. Hemos instalado en el WordPress herramientas y servicios comunes que muchos sitios utilizan, como Google Analytics, Akismet, Yoast SEO, etc. Esta prueba se ha hecho en un host compartido se bajo presupuesto.

Si bien este es un pequeño sitio, es una buena base para entender, al menos un poco, cómo funciona Google PageSpeed Insights, así que vamos al lío.

Como ya hemos comentado, para esta prueba contamos con un WordPress 4.7 con el tema Twenty Seventeen que se ejecuta en unos servidores compartidos de bajo presupuesto (Apache). SSL está configurado y se han instalado los siguientes plugins:

También tenemos Google Analytics ejecutándose dentro de las etiquetas <body> de nuestro archivo header.php. La única modificación que hemos hecho es añadir una imagen principal al clásico post por defecto del blog "¡Hola mundo!". Testeamos el sitio de prueba a través de Google PageSpeed y se obtienen unas puntuaciones de 69/100 en versión para escritorio y de 58/100 en versión para móvil. Así que, definitivamente, hay algunas mejoras que se deben hacer. Vamos a indagar en cada uno de los puntos para ver cómo podemos solucionarlos.

Habilitar compresión

Vamos a comenzar con la versión de escritorio, ya que muchas de las correcciones se aplicarán también para móviles. La primera recomendación de Google PageSpeed Insights que tenemos que solucionar es la advertencia de habilitar la compresión.

De acuerdo con Google, para solucionar este problema es necesario habilitar la compresión Gzip. Por desgracia, el host compartido no tiene habilitada esta opción en sus servidores de forma automática, así que tenemos que hacerlo de forma manual.

Todos los navegadores modernos admiten y negocian automáticamente la compresión GZip para todas las peticiones HTTP. Habilitar la compresión de Gzip puede reducir el tamaño de la transferencia de la respuesta hasta en un 90%, lo que puede reducir significativamente la cantidad de tiempo para descargar el recurso, reducir el uso de datos para el cliente y mejorar el tiempo de visualización inicial de sus páginas.

Hay un par de maneras para hacer esto. La primera, y una de los más fáciles es mediante el uso de un plugin que permite el almacenamiento en caché que soporte Gzip. WP Rocket por ejemplo, añade la regla de la compresión gzip en el archivo .htaccess utilizando automáticamente el módulo mod_deflate. W3 Total Cache también tiene una manera de habilitar en su sección de rendimiento.

La segunda forma de habilitar la compresión Gzip es editando el archivo .htaccess. La mayoría de hosts compartidos utilizan Apache, donde se puede añadir el siguiente código al archivo .htaccess. Se puede encontrar el archivo .htaccess en la raíz de su sitio de WordPress a través del FTP.


<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Hay que asegurarse de añadirlo por debajo del contenido actual de su archivo .htaccess. Ejemplo a continuación:

Si se ejecuta en NGINX, simplemente hay que añadir lo siguiente al archivo nginx.conf.


36 gzip on;
37 gzip_disable "MSIE [1-6]\.(?!.*SV1)";
38 gzip_vary on;
39 gzip_types text/plain text/css text/javascript application/javascript application/x-javascript;

Una herramienta como Check Gzip Compression puede mostrar cómo se redujeron los bytes de la web al activar la compresión Gzip. A continuación se muestra un ejemplo de lo que guardamos en nuestro sitio de prueba.

Si analizamos el sitio web en Google PageSpeed Insights nuevamente podemos ver que la advertencia de compresión Gzip se ha ido y ha aumentado nuestra puntuación de escritorio de 69/100 a 80/100 y nuestra puntuación de móvil de 58/100 a 67/100.

Optimizar imágenes

La siguiente recomendación de Google PageSpeed Insights que hay que corregir es la advertencia de Optimizar imágenes. Nuestra entrada por defecto del blog "¡Hola mundo!" tiene una imagen destacada que está lanzando este error.

Esta es una advertencia muy importante y útil. De acuerdo con HTTP Archive, en noviembre de 2016, las imágenes representaban, en promedio, el 65% del peso total de una página web. Optimizar las imágenes puede ser una de las maneras más fáciles de ver mejoras de rendimiento en su sitio web de WordPress.

Hay un par de maneras de corregir esto. La primera es utilizar un plugin de optimización de imágenes. Un plugin puede pasar y optimizar en masa toda la biblioteca de WordPress y también optimizarlas automáticamente cuando los cargue. En realidad, tenemos una guía completa sobre cómo optimizar sus imágenes de WordPress. A continuación se presentan algunos plugins de optimización de imagen populares:

Estos plugins solucionarán el problema, pero las imágenes también se pueden comprimir antes de cargarlos en una herramienta como Adobe Photoshop, Gimp o Affinity Photo. A continuación se muestra la imagen principal que está causando esa advertencia. Podemos comprimirla de antemano, tanto reduciéndola de tamaño como reduciendo la calidad. Lo mejor es mantener las imágenes lo más pequeñas posibles. Esta imagen pesaba originalmente 2.32 MB, después de reescalarla y comprimirla, ahora su peso es 99.38 kB. Recuerda, lo mejor es cargar imágenes a escala y no confiar en CSS para cambiar el tamaño de ellas. Esto ralentiza el sitio web.

Si analizamos el sitio a través de Google PageSpeed Insights nuevamente podemos ver que la advertencia Optimizar imágenes ya se ha ido y ha aumentado nuestra puntuación de escritorio de 80/100 a 88/100 y nuestra puntuación de móvil de 67/100 a 73/100. ¡Estamos progresando!

Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página

La siguiente recomendación de Google PageSpeed Insights que debemos corregir es la advertencia de Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página. En realidad, tenemos un mensaje completo en profundidad sobre el bloqueo JavaScript y CSS.

Cuando un navegador carga una página web, los recursos JavaScript y CSS normalmente impiden que se muestre la página web hasta que se descarguen y procesen por el navegador. Algunos recursos necesitan ser descargados y procesados antes de mostrar cualquier cosa. Sin embargo, muchos recursos CSS y JavaScript son condicionales -es decir, sólo se aplican en casos específicos- o simplemente no son necesarios para representar el contenido. Para producir la experiencia más rápida posible para sus usuarios, debe intentar eliminar cualquier recurso de bloqueo de visualización que no se requiera para mostrar contenido de la mitad superior de la página.

En cuanto a Quitar el JavaScript que bloquea la visualización de contenido, Google tiene tres recomendaciones:

  1. Si no tiene mucho JavaScript, se puede incluir en línea para eliminar esta advertencia. Puede incluirse JavaScript en línea con un complemento como Autoptimize. Sin embargo, esto realmente sólo es válido para sitios muy pequeños. La mayoría de los sitios de WordPress tienen suficiente JavaScript como para ralentizarte.
  2. La segunda es cargar JavaScript de manera asíncrona. Async Javascript básicamente descarga el archivo durante el análisis HTML y pausará el analizador HTML para ejecutarlo cuando haya finalizado la descarga.
  3. La tercera es aplazar su JavaScript. El atributo defer también descarga el archivo durante el análisis HTML, pero sólo lo ejecuta después de que el análisis se haya completado. Además, los scripts con este atributo se ejecutan en orden de aparición en la página.

En nuestro ejemplo vamos a hacer nuestra carga JavaScript de forma asíncrona. Para ello vamos a utilizar un complemento gratuito llamado Async JavaScript. Puedes descargarlo desde el repositorio de WordPress o buscarlo en tu panel de WordPress en "Plugins> Add New". Al escribir esto, actualmente tiene más de 9.000 instalaciones activas con una clasificación de 4.2 de 5 estrellas. Esencialmente, el complemento agrega el atributo 'async' o 'defer' a todo el JavaScript cargado por la función wp_enqueue_script de WordPress. El desarrollador también tiene una versión premium disponible que le permite elegir los scripts que desea aplazar o de forma asíncrona.

Ejemplo asíncrono

<script src="file1.js" async></script>

Ejemplo aplazado

<script src="file1.js" defer></script>

Después de la instalación, simplemente entre en la configuración y active JavaScript asíncrono.

Y para sitios más grandes, la exclusión de scripts puede resultar útil. O conseguir la versión premium del plugin. No lo necesitaremos en este ejemplo, pero si tienes un sitio con un montón de JavaScript, lo más probable es que termines con cosas rotas si simplemente fijas todo en Async o Defer. En cuyo caso habrá que solucionar los problemas como buenamente se pueda.

Si no desea utilizar un complemento para esto, hay otras alternativas, como agregar el siguiente código a su archivo functions.php.


/*function to add async to all scripts*/
function js_async_attr($tag){
# Add async to all remaining scripts
return str_replace( ' src', ' async="async" src', $tag );
}
add_filter( 'script_loader_tag', 'js_async_attr', 10 );

Ejecutamos nuestro sitio a través de Google PageSpeed ​​Insights de nuevo y, como puede verse, la advertencia de Quitar el JavaScript que bloquea la visualización de contenido se ha corregido y nos queda la advertencia Optimizar la entrega de CSS. CSS, por defecto, bloquea la visualización, lo que incluye CSS provenientes de fuentes web. Para corregirlo vamos a instalar el plugin gratuito Disable Google Fonts. Está disponible en el repositorio de WordPress, pero la versión más reciente está en GitHub, que incluye la nueva fuente Twenty Seventeen Libre Franklin. Lo más probable es que el repositorio se actualice pronto. Después de instalar el plugin, obviamente los enlaces a las fuentes de Google estarán rotos. Así que habrá que ir a las fuentes de Google e introducir el código manualmente. Seleccionamos los mismos tamaños de fuente que están incluidos de forma predeterminada en el tema Twenty Seventeen.

El primer CSS que necesitamos optimizar es el de nuestras fuentes de Google (fonts.googleapis.com).

<link href="https://fonts.googleapis.com/css?family=Libre+Franklin:300,300i,400,400i,600,600i,800,800i" rel="stylesheet">

A continuación, habrá que añadirlo al archivo footer.php, justo antes de la etiqueta </body">. Nota: Hacerlo de esta manera resultará FOUT, que es lo que se refieren como flash de un texto sin estilo. Pero se librará de la cuestión de bloqueo de visualización. Hay que decidir en el propio sitio si FOUT es una experiencia de usuario aceptable para sus visitantes. También puede utilizar Google Web Font Loader.

Ejecutamos nuestro sitio de prueba en Google PageSpeed ​​Insights nuevamente y ahora bajo la advertencia Optimizar entrega CSS sólo queda con una cosa, el archivo style.css.

Una de las maneras más fáciles de corregirlo es usar un complemento WordPress gratuito llamado Autoptimize, desarrollado por Frank Goossens.

Este plugin es bastante ligero, sólo pesa 176KB para ser exactos. En la actualidad tiene más de 200.000 instalaciones activas con un 4.7 de 5 estrellas. El complemento ayuda con la concatenación de los scripts, minificación, vencimiento de las cabeceras y la posibilidad de mover estilos al header y scripts al footer. Este plugin es totalmente compatible con el plugin Async JavaScript que se utilizó anteriormente.

Después de instalar el complemento, hay que hacer clic en configuración y seleccionar "Optimizar código CSS". A continuación, hay que clicar en la pestaña "avanzado" y habilitar también "agregar CSS en línea" y "Inline All CSS." Nota, dependiendo del tema con el que se esté haciendo esto, no se recomienda utilizar este método. Para sitios grandes, los estilos en línea pueden ser malos, en cuyo caso sería mejor simplemente ignorar esa advertencia específica de Google PageSpeed Insights. Y recuerde que con HTTP/2, la concatenación a veces puede ralentizar su sitio.

También es recomendable activar la opción de código HTML optimizado.

Si analizamos nuestro sitio en Google PageSpeed Insights nuevamente, podemos ver que la advertencia "Eliminar el JavaScript que bloquea la visualización y el CSS del contenido de la mitad superior de la página" ¡ha desaparecido! También se corrigió la advertencia Minificar CSS que estaba más abajo y a la que ni siquiera habíamos llegado aún. Hemos aumentado nuestra puntuación de escritorio de 88/100 a 92/100 y nuestra puntuación de móvil de 73/100 a 89/100. Estamos casi alli.

Especificar caché de navegador

La siguiente recomendación de Google PageSpeed Insights que debemos corregir es la advertencia de especificar el caché del navegador. En realidad, tenemos un mensaje completo y en profundidad sobre el problema de almacenamiento en caché del navegador, ya que pertenece a WordPress.

Añadir cabecera de control de caché en Nginx

Para añadir la cabecera de control de caché en Nginx hay que introducir lo siguiente a la ubicación o bloque del servidor de configuración del servidor.


location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
expires 2d;
add_header Cache-Control "public, no-transform";
}

Añadir cabeceras de expiración en Nginx

Para añadir las cabeceras de expiración en Nginx hay que introducir lo siguiente a su bloque de servidor. En este ejemplo, se ve cómo especificar diferentes tiempos de expiración basados en tipos de archivo.


location ~* \.(jpg|jpeg|gif|png)$ {
expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}

Añadir cabecera de control de caché en Apache

Para añadir la cabecera de control de caché en Apache es necesario introducir lo siguiente en el archivo .htaccess.


<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>

Añadir cabeceras de expiración en Apache

Para añadir las cabeceras de expiración en Apache es necesario introducir lo siguiente en el archivo .htaccess.


## EXPIRES HEADER CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType application/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 2 days"
</IfModule>
## EXPIRES HEADER CACHING ##

¿Recuerdas que activamos la compresión Gzip anteriormente? A continuación, se muestra el archivo .htaccess después de añadir también las cabeceras de expiración. Simplemente hay que colocarlo debajo del bloque de compresión Gzip.

Ejecutamos el sitio de nuevo en Google PageSpeed Insights y ahora, bajo la advertencia de Especificar caché de navegador sólo queda una cosa, y es el script de Google Analytics. Es un poco irónico ya que es el propio script de Google. El problema es que establecen un tiempo de caché bajo en su código, de sólo 2 horas, como se ve en la captura de pantalla de abajo. Lo más probable es que lo hagan por si se modifica algo ahí por alguna razón, quieren que todos los usuarios pueda obtener los cambios lo antes posible. Sin embargo, hay una manera de evitar esto, y es mediante el alojamiento del script de Google Analytics localmente. Sin embargo, hay que tener en cuenta que esto no es compatible con Google.

Hay un gran plugin gratuito llamado Complete Analytics Optimization Suite, creado y desarrollado por Daan van den Bergh, que permite alojar Google Analytics localmente en su sitio web de WordPress.

Se puede descargar la suite de optimización completa de Analytics desde el repositorio de WordPress o buscarla en "añadir nuevo" en el pane de plugins del escritorio de WordPress. A la hora de escribir esto, el plugin tiene más de 1.000 instalaciones activas con una puntuación de 5 sobre 5 estrellas. El complemento le permite alojar su archivo JavaScript de Google Analytics (analytics.js) localmente y mantenerlo actualizado mediante wp_cron(). Otras características incluyen ser capaz de anonimizar fácilmente la dirección IP de los visitantes, establecer una tasa de rebote ajustada y cambiar la colocación del script (encabezado o pie de página).

Simplemente hay que instalar el complemento, introducir el ID de seguimiento de Google Analytics y el plugin agrega el código de seguimiento necesario para Google Analytics al sitio web en WordPress, descarga y guarda el archivo analytics.js en su servidor y lo mantiene actualizado mediante una secuencia de comandos programada en wp_cron(). Recomendamos que también se establezca cargarlo en el pie de página. Nota: Este complemento no funcionará con otros complementos de WordPress de Google Analytics.

Si ejecutamos de nuevo el sitio web en Google PageSpeed Insights, vemos que la advertencia Especificar caché de navegador está completamente eliminada. Y hemos aumentado nuestra puntuación de escritorio de 92/100 a 97/100 y nuestra puntuación móvil de 89/100 a 96/100. Tan cerca que casi se puede degustar.

Reducir el tiempo de respuesta del servidor

La siguiente recomendación de Google PageSpeed Insights que necesitamos corregir es la advertencia Reducir el tiempo de respuesta del servidor. La única razón por la que esto está sucediendo es porque estamos en un plan de alojamiento compartido con un presupuesto bajo. El servidor no es rápido y Google lo sabe. Así que para solucionar esto hay que implementar algún tipo de caché para acelerar las cosas. Hay un montón de plugins de almacenamiento en caché. En nuestro ejemplo, vamos a utilizar el plugin gratuito Cache Enabler.

Ahora mismo este plugin tiene tiene más de 10.000 instalaciones activas con una puntuación de 4.6 de 5 estrellas. Es un plugin de almacenamiento en caché ligero para WordPress que hace el sitio web más rápido mediante la generación de archivos HTML estáticos más soporte WebP. No hay ajustes que habilitar, simplemente hay que instalarlo. Este plugin es totalmente compatible con los plugins Async JavaScript y Autoptimize que se utilizaron anteriormente. Si quieres más velocidad, recomendamos añadir el fragmento avanzado para evitar PHP.

Si ejecutamos el sitio en Google PageSpeed Insights nuevamente, se ve que la advertencia Reducir el tiempo de respuesta del servidor ¡ya no aparece! Y hemos aumentado nuestra puntuación de escritorio de 97/100 a 99/100 y nuestra puntuación de móvil de 96/100 a 99/100. Estamos a punto de llegar la meta.

Minificar Javascript

La última recomendación de Google PageSpeed Insights que debemos corregir es la advertencia de Minificar Javascript.

Para solucionar esto, hay que volver a la configuración de plugin Autoptimize y simplemente habilitar la opción Optimizar código JavaScript. Dado que ahora tiene un plugin de caché en ejecución, es posible que también tenga que borrar la caché después de hacer esto para ver los resultados.

¡¡¡Y eso es todo!!! Hemos conseguido levar con éxito el tema de WordPress Twenty Seventeen de 69/100 a 100/100 tanto en el móvil como en el escritorio en un host compartido de bajo presupuesto.

Y aquí están los resultados para móviles. No hubo que hacer nada adicional para móviles. Conseguir llevar la versión de escritorio a 100/100 aumentado automáticamente nuestra versión móvil y las puntuaciones de experiencia de usuario a 100/100 también.

También tenemos un antes y un después con pruebas de velocidad de Pingdom.

Prueba de velocidad antes de las optimizaciones de PageSpeed Insights

Aquí, una prueba de velocidad de Pingdom antes de realizar cualquier optimización en el host compartido.

Prueba de velocidad después de las optimizaciones de PageSpeed Insights

Y aquí, una prueba de velocidad de Pingdom después de realizar cualquier optimización en el host compartido.

★ ★ ★ ★ ★