Google PageSpeed Insights es una de varias herramientas útiles para medir el rendimiento de los sitios web. Sin embargo, algunas de sus sugerencias, como la advertencia «Leverage Browser Caching», pueden confundir a los propietarios de sitios inexpertos.
Cuando lo descompones, el almacenamiento en memoria caché no es tan difícil de entender. Con unos pocos ajustes, puedes implementar esta mejor práctica de desarrollo en tu sitio para reducir los tiempos de carga y mejorar tu puntuación de PageSpeed.
En este post, empezaremos con una introducción a la advertencia de Leverage Browser Caching. Luego compartiremos varios consejos para solucionar este problema en tu sitio de WordPress.
¡Veamos!
¿Qué es la advertencia de «Leverage Browser» Caching?
Para entender la advertencia de Leverage Browser Caching, ayuda saber primero un poco sobre Google PageSpeed Insights. Si eres nuevo en la plataforma, te recomendamos que leas nuestra guía completa, Google PageSpeed Insights: Puntuación 100/100 con WordPress.
La advertencia de Leverage Browser Caching es uno de los muchos «diagnósticos» que Google PageSpeed utiliza para volver como una sugerencia para mejorar tu puntuación como la siguiente:
En la versión 5 de Google PageSpeed Insights, este mensaje fue sustituido por la advertencia «Servir los activos estáticos con una política de caché eficiente»:
A pesar del cambio en el lenguaje y la apariencia, la solución a estas advertencias es la misma.
Google sugiere usar el almacenamiento en caché del navegador para reducir los tiempos de carga de la página y mejorar el rendimiento. En resumen, el almacenamiento en caché es cuando los navegadores de los usuarios guardan copias estáticas de las páginas de tu sitio. Luego, en las visitas posteriores, este contenido puede volver a cargarse más rápidamente porque el navegador no tiene que ponerse en contacto con el servidor de tu sitio para acceder a los recursos solicitados.
Sin embargo, cada recurso almacenado en la memoria caché necesita un período de caducidad determinado. Esto indica a los navegadores cuándo el contenido de tu sitio ha quedado obsoleto, para que puedan reemplazar su copia en caché por una versión actualizada.
Si ves la advertencia «Leverage Browser Caching» en los resultados de tu prueba de rendimiento, probablemente significa una de dos cosas:
- Las cabeceras de Control de Caché o Expiración faltan en el servidor de tu sitio o en el de un tercero.
- Los encabezados necesarios están presentes, pero el período de caducidad es muy corto y por lo tanto no tiene mucho impacto en el rendimiento.
Las soluciones a estas advertencias implican arreglar una o ambas cuestiones.
¿Cómo arreglar la advertencia de cacheo del navegador de apalancamiento en WordPress? (3 métodos)
Hay varias maneras de arreglar la advertencia de almacenamiento en caché del navegador en WordPress, dependiendo de la causa. Aquí hay tres soluciones que puedes probar.
1. Añade Cache-Control y Expires Headers
Hay dos encabezados relacionados con el almacenamiento en caché del navegador: Cache-Control y Expires. Al menos uno debe estar presente para permitir el almacenamiento en caché del navegador para tu sitio, ya que así es como los navegadores determinan cuánto tiempo deben retener los recursos antes de actualizarlos.
Una forma sencilla de determinar si esto es lo que está causando la advertencia de Leverage Browser Caching es ver los detalles dados para cada recurso. En la versión 5 de PageSpeed Insights de Google, verás «Ninguno» en la lista de Caché TTL:
Como referencia práctica, las versiones anteriores de Google PageSpeed Insights mostraban un mensaje de «caducidad no especificada» cuando faltaban los encabezados:
Mientras que el encabezado Cache-Control activa el cacheo del lado del cliente y establece la edad máxima de un recurso, el encabezado Expires se utiliza para especificar un momento en el que el recurso ya no es válido.
No es necesario añadir ambos, ya que esto puede ser redundante. El control de la caché es más reciente y suele ser el método recomendado. Sin embargo, algunas herramientas de rendimiento de la web, como GTmetrix, todavía comprueban las cabeceras de Expires.
Si estás alojado en Kinsta, no tienes que preocuparte de poner estas cabeceras. Todos nuestros servidores Nginx ya los incluyen. Aquellos que usan una Red de Entrega de Contenido (CDN) también deberían tener ya estas cabeceras aplicadas.
En el caso de que estés usando un proveedor de alojamiento diferente, asegúrate de hacer una copia de seguridad de tu sitio antes de seguir los pasos que se indican a continuación, ya que al editar . htaccess podría romper tu sitio si no tienes cuidado.
¿Cómo añadir cabeceras de control de caché en Nginx?
Para añadir cabeceras de control de caché en Nginx, puedes añadir lo siguiente al archivo de configuración de tu servidor:
location ~* \.(js|css|png|jpg|jpeg|gif|svg|ico)$ {
expires 30d;
add_header Cache-Control "public, no-transform";
}
Esto le dice a tu servidor que los tipos de archivo especificados no van a cambiar por lo menos en 30 días. Mantendrá los archivos relevantes guardados durante ese período de tiempo antes de actualizarlos.
¿Cómo añadir cabeceras de control de la caché en el Apache?
Si tienes un servidor Apache en su lugar, puedes añadir el siguiente código a tu archivo . htaccess:
<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)$">
Header set Cache-Control "max-age=84600, public"
</filesMatch>
Este recorte debe ser añadido antes de «#BEGIN WordPress» o después de «#END WordPress». En este caso, la caché está programada para expirar después de 84.600 segundos.
¿Cómo añadir cabeceras de caducidad en Nginx?
Puedes añadir las cabeceras de Expires en Nginx añadiendo lo siguiente a tu bloque de servidor. En este ejemplo, puedes ver cómo especificar diferentes tiempos de expiración basados en los tipos de archivos:
location ~* \.(jpg|jpeg|gif|png|svg)$ {
expires 365d;
}
location ~* \.(pdf|css|html|js|swf)$ {
expires 2d;
}¿Cómo añadir cabeceras de caducidades en Apache?
Puedes añadir las cabeceras de Expires en Apache añadiendo lo siguiente a tu 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 image/svg "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 ##Luego puedes revisar los encabezados ejecutando tu sitio a través de Google PageSpeed Insights de nuevo y ver si la advertencia persiste.
2. Aprovechar el almacenamiento en caché del navegador para Google Analytics
Irónicamente, Google Analytics es a veces la causa de la advertencia de caché del navegador y una puntuación imperfecta de PageSpeed. Esto se debe a que tiene un tiempo de caducidad de caché menos de solo dos horas. Esta solía ser la vieja advertencia:
En la versión 5 de PageSpeed Insights, este número ya no da lugar a una advertencia, pero Google Analytics podría seguir figurando como un recurso no optimizado:
No podrás cambiar esto con las cabeceras de Cache-Control o Expires porque el recurso no está en tu servidor. Sin embargo, hay una manera de aprovechar el caché del navegador para Google Analytics alojando el script localmente.
Sin embargo, ten en cuenta que este método no está soportado por Google.
Aprovechar el almacenamiento en caché del navegador para Google Analytics con el paquete completo de optimización de Analytics
Si quieres resolver el problema anterior, hay un plugin gratuito llamado Complete Analytics Optimization Suite (CAOS) desarrollado por Daan van den Bergh que puedes usar:
Puedes descargar CAOS desde el directorio de plugins de WordPress o buscándolo en Plugins > Add New en tu panel de control de WordPress.
Algunos beneficios adicionales de alojar tu script de análisis localmente incluyen que reduce las solicitudes HTTP externas a Google de dos a uno y te permite tener un control total sobre el almacenamiento en caché del archivo. Esto significa que puedes usar las cabeceras de la caché como te mostramos anteriormente.
Para comenzar, instala el plugin y luego ingresa tu ID de rastreo de Google Analytics. El plugin añade el código de seguimiento necesario para Google Analytics a tu sitio web de WordPress, descarga y guarda el archivo analytics.js en tu servidor y lo mantiene actualizado mediante un script programado en wp_cron().
Recomendamos que también se ajuste a la carga en el pie de página:
Ten en cuenta que CAOS no funcionará con otros plugins de Google Analytics WordPress.
Aprovechar el almacenamiento en caché del navegador para Google Analytics con WP-Rocket
Alternativamente, puedes usar el plugin de cacheo de WordPress WP-Rocket para lograr el mismo objetivo:
El complemento de Google Tracking de este plugin te permite alojar tu script de análisis localmente con sólo hacer clic en un botón. Sólo tienes que activar el estado en WP-Rocket > Add-ons.
WP-Rocket y su complemento son compatibles con otros plugins de Google Analytics. Como herramienta premium, tiene un precio con licencias que empiezan en 49 dólares al año.
3. Minimizar el uso de scripts de terceros
A veces el script de Google Analytics puede causar problemas para tu puntuación de Google PageSpeed Insights porque está alojado en el servidor de Google, por lo que no tienes el control de la caché.
Lo mismo ocurre con otros scripts de terceros. Si estás administrando un negocio a través de tu sitio web de WordPress, lo más probable es que tengas otros scripts de terceros ejecutándose para rastrear conversiones, pruebas A/B y más.
Esto podría incluir scripts como píxeles de conversión de Facebook, Crazy Egg, Hotjar y otros. Desafortunadamente, a menos que puedas encontrar una manera de alojar estos scripts localmente, no hay mucho que puedas hacer para controlarlos.
Una opción para los usuarios de Facebook Pixel es usar otro complemento de WP-Rocket. Lo ideal es que minimices el uso de scripts de terceros si quieres mejorar tu puntuación en Google PageSpeed. Por lo tanto, puede que valga la pena realizar una auditoría de tu sitio y eliminar los scripts que no sean necesarios para ejecutarlo.
Resumen
Aunque no es una medida definitiva del rendimiento de tu sitio, Google PageSpeed Insights sigue siendo un indicador decente de cómo funciona. Mejorar tu puntuación resolviendo las advertencias que aparecen en el apartado «Servir los activos estáticos con una política de caché eficaz» puede ayudar a que tu sitio web sea más rápido y más utilizable para los visitantes.
Si ves esta advertencia en Google PageSpeed Insights, puedes resolverla mediante:
- Añadiendo los encabezados de Control de Caché o Expiración.
- Aprovechando el caché del navegador para Google Analytics.
- Minimizar el uso de scripts de terceros.
¿Tienes algún otro consejo sobre cómo arreglar el caché del navegador de apalancamiento? Háznoslo saber en la sección de comentarios de abajo!
Jon es el Director de Operaciones de Kinsta y colabora a diario con los equipos de ventas, atención al cliente y soporte técnico de Kinsta. Jon es un hombre de familia. Así que cuando no está golpeando frenéticamente las teclas de su portátil, suele estar ayudando a uno de sus hijos a arreglar una bicicleta o configurando Netflix para un niño impaciente en edad preescolar.
Deja una respuesta