Blog sobre desarrollo WordPress en Español Desarrollo WordPress en Español
google pagespeed insights

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.

Puede que también te interese

Sanitizando: cómo validar y escapar datos en WordPress
Sanitizando: cómo validar y escapar datos en WordPress
En éste artículo vamos a aprender a hacer un tratamiento de datos correcto en WordPress. Éste punto es imprescindible para cualquier desarrollo a medida que…
Theme Customization API: Cómo añadir nuestras propias opciones en el personalizador de WordPress
Theme Customization API: Cómo añadir nuestras propias opciones en el personalizador de WordPress
El personalizador de WordPress fue añadido en la versión 3.4, y te permite de una forma visual hacer y ver cómo quedan los cambios que…
Cómo solucionar el error de sintaxis en WordPress
Cómo solucionar el error de sintaxis en WordPress
WordPress es el CMS más utilizado para crear páginas web. Además, con una diferencia notable con respecto a otras alternativas. Es por esto que la…
Cómo realizar un formulario de contacto personalizado en WordPress sin Plugins
Cómo realizar un formulario de contacto personalizado en WordPress sin Plugins
Para realizar un formulario de contacto personalizado en WordPress podemos utilizar los conocidos plugins contact form 7 o gravity forms. Si no queremos recurrir al…