google pagespeed insights
Web Hosting

Mejora la puntuación de Google PageSpeed Insights: Especificar caché de navegador

Tercera entrada sobre cómo mejorar la puntuación en PageSpeed Insights. En esta ocasión hablaremos sobre cómo especificar caché de navegador.

Para el ejemplo que estoy utilizando y que expuse en la primera entrada, el resultado del test de PageSpeed es el siguiente:

Especificar caché de navegador
Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red.
Aprovechar el almacenamiento en caché del navegador de estos recursos almacenables en caché:
• https://midominio.com/css/bootstrap.css (no se ha especificado el tiempo de expiración)
• https://midominio.com/css/font-awesome.css (no se ha especificado el tiempo de expiración)
• https://midominio.com/css/styles.css (no se ha especificado el tiempo de expiración)
• https://midominio.com/img/vialactea2.jpg (no se ha especificado el tiempo de expiración)
• https://midominio.com/js/bootstrap.js (no se ha especificado el tiempo de expiración)
• https://midominio.com/js/jquery-3.1.1.js (no se ha especificado el tiempo de expiración)
Fuente: Google PageSpeed Insights

Parafraseando a mi amigo Fernando Puente: La caché funciona la segunda vez. Es decir, el almacenamiento de recursos estáticos en caché de navegador puede ahorrarle al usuario tiempo de carga si este visita tu sitio en más de una ocasión. La primera vez se descarga y se cachea, y a partir de la segunda visita el recurso viene de la caché del navegador.

Podemos indicar al navegador que cachee los recursos estáticos de tu web como: CSS, JS, imágenes, PDFs, archivos multimedia, etc…

 

¿Cómo cacheamos los recursos estáticos?

En WordPress existen multitud de plugins de caché, que entre otras muchas cosas, especifican caché de navegador para nuestros recursos estáticos como pueden ser W3TC, o WP Super Cache.

Por ejemplo, W3TC lo que hace es escribir en el archivo .htaccess las siguientes reglas:

Aun así, es posible que sigamos sin pasar esta regla en PageSpeed, ya que es muy probable que en nuestro sitio estemos cargando recursos externos como pueden ser imágenes de gravatar, el código de Google Analytics, banners de afiliados, etc…

recursos externos

No tenemos control sobre estos archivos ya que no están en nuestro servidor, y como puede verse en el ejemplo, la imagen de gravatar expira cada 5 minutos, y el código de google analytics cada 2 horas.

Podemos descargarnos estos archivos a nuestro servidor o utilizar un plugin como CAOS Complete Analytics Optimization Suite para Analytics ó FV Gravatar Caché para la imagen de Gravatar, y ya estarían bajo nuestras reglas.

Web Hosting