¿Cómo Resolver Los Errores “Leverage Browser Caching” En WordPress?

Actualizado August 22, 2017

Si alguna vez ha ejecutado su sitio web WordPress a través de Google PageSpeed Insights o Pingdom entonces probablemente habrá visto ese gran error de Leverage Browser Caching de color amarillo. Y eso es probablemente porque está leyendo esta publicación. Hoy vamos a ver qué es lo que significa esta advertencia, cómo le afecta, y cuáles son sus opciones en cuanto a su sitio WordPress.

¿Qué es la Advertencia de Leverage Browser Caching?

La advertencia de Leverage Browser Caching, como se muestra a continuación en la captura de pantalla, se refiere a la cache de su navegador. Cada vez que visita un sitio web, se descargan muchos recursos, como HTML, CSS, JavaScript e imágenes en la cache local de su navegador. De esta manera no se debe descargarlos cada vez que se vuelva a cargar la página. La advertencia aparece cuando su servidor web o un servidor de terceros no tiene implementadas las cabeceras de HTTP cache correctas. O sí las tiene, pero mal configuradas porque el tiempo de cache es demasiado corto.

leverage-browser-caching-pagespeed-insights

Definir una fecha de expiración o edad en las cabeceras HTTP

También puede ver esta advertencia en el nuevo test de velocidad del sitio web de “think with Google”, que funciona con Google PageSpeed Insights. Este fue diseñado para ser una herramienta de marketing de Google, pero han resultado en muchos clientes ahora simplemente reenviando estos errores a sus webmasters, dejando a los desarrolladores y diseñadores de WordPress buscando maneras de arreglarlo rápidamente para tranquilizar a sus clientes.

think-with-google-test-de-velocidad

Test de velocidad de think with Google

Resolver los Errores Leverage Browser Caching En WordPress

Cuando se trata de resolver los errores de Leverage Browse Caching hay situaciones diferentes en las que se encuentran los usuarios de WordPress. Obviamente, la más común es que su servidor web no está configurado correctamente. La segunda irónicamente es que el script de Google Analytics nos manda la advertencia. Y la tercera es el script de terceros mandando la advertencia. Vea abajo las opciones que tiene.

1. Leverage Browser Caching on Server

La primera y más común razón por la que los errores de Leverage Browser Caching se activan es que su servidor web no tiene las cabeceras adecuadas en su lugar. En la siguiente captura de pantalla en Google PageSpeed Insights verá que la razón es porque una expiración no está especificada. Cuando se trata de caching hay dos métodos principales que se utilizan, Cabeceras de Cache-Control (Cache-Control headers) y cabeceras de expiración (Expires headers). Mientras que la cabecera Cache-Control activa la cache del lado cliente y establece la máxima edad de un recurso, la cabecera de expiración se utiliza para especificar un punto específico en el tiempo a partir del cual el recurso ya no será válido.

leverage-browser-caching-pagespeed-insights-recursos

Errores de Leverage browser caching en Google PageSpeed Insights

Así que ahora vamos a explorar cómo agregar estas cabeceras a su servidor web. Nota: no necesariamente tiene que agregar las dos cabeceras, ya que esto es un poco redundante. Cache-Control es más reciente y por lo general el método recomendado, sin embargo, algunas herramientas de rendimiento web como GTMetrix todavía comprueba las cabeceras de expiración. Todos estos son ejemplos, se puede cambiar tipos de archivos, tiempos de expiración etc. basados en sus necesidades.

¡Importante! Editar su configuración de Nginx o el archivo Apache. htaccess puede romper su sitio si no se hace correctamente. Si no se siente cómodo haciendo esto, consulte primero con su proveedor de hosting o desarrollador de web.

Añadir Cabecera de Cache-Control en Nginx

Puede añadir cabeceras de Cache-Control en Nginx agregando lo siguiente a la ubicación o bloque de servidor de la configuración de su servidor.

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

Entonces ¿qué hace este código exactamente? Básicamente dice al servidor que los tipos de archivos no cambiarán como mínimo hasta un mes. Así en vez de tener que descargar el recurso cada vez, será cacheado en su computadora. De esta manera los visitantes que vuelven reciben el recurso más rápidamente.

Añadir Cabeceras de Expiración en Nginx

Puede añadir cabeceras de Expiración en Nginx agregando lo siguiente a su bloque de servidor. En este ejemplo, puede ver 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 Cabeceras de Cache-Control en Apache

Puede agregar cabeceras de Cache-Control en Apache agregando lo siguiente a su archivo .htaccess.

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

Añadir Cabeceras de Expiración en Apache

Puede agregar cabeceras de Expiración en Apache agregando lo siguiente a su archivo .htaccess.

## EXPIRES HEADER CACHING ##

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"

## EXPIRES HEADER CACHING ##

Si es usted un cliente de Kinsta no tiene que preocuparse por agregar estas cabeceras. Estos ya están establecidas en todos nuestros servidores Nginx. Y recuerde, si utiliza un proveedor de CDN como KeyCDN, estas cabeceras más probablemente ya están establecidas en sus activos.

Puede comprobar sus cabeceras en el panel de red de Chrome DevTools o simplemente volviendo a ejecutar su sitio de WordPress a través de Google PageSpeed Insights otra vez para asegurarle de que la advertencia se haya ido.

cabeceras-caching-wordpress

Cabeceras de caching HTTP

2. Leverage Browser Cache y Google Analytics

La segunda leverage browser caching más común proviene realmente de Google Analytics. Es un poco irónico, debido a que este es un script propio de Google. El problema es que establecen un tiempo de cache bajo de 2 horas en su activo, como se ve en la captura de pantalla de abajo. Probablemente hacen esto porque si por alguna razón modificarán algo en su lado quisieran que todos los usuarios obtuviesen los cambios lo más rápido posible. Sin embargo, hay una manera de evitar esto, y es alojar el script de Google Analytics en su propio servidor. Sin embargo tenga en cuenta que esto no está soportado por Google.

leverage-browser-caching-pagespeed-insights-analytics

Google Analytics caching

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

plugin-google-analytics-alojar-localmente

CAOS plugin

Se puede descargar Complete Analytics Optimization Suite desde el repositorio de WordPress o buscarlo en “Añadir nuevo” plugins en su panel de control de WordPress. El plugin permite alojar localmente su archivo JavaScript (analytics.js) de Google Analytics y mantenerlo actualizado usando wp_cron(). Otras características que incluyen es ser capaz de anonimizar fácilmente la dirección IP de sus visitantes, establecer una tasa de rebote ajustada y la colocación del script (cabecera o pie de página).

Algunos beneficios adicionales para alojar su analytics script localmente es que puede reducir las solicitudes HTTP hacia Google a la mitad y tendrá control total sobre la cache del archivo. Esto significa que se puede utilizar las cabeceras de cache como habíamos mostrado anteriormente.

Simplemente instale el plugin, ingrese su Google Analytics Tracking ID y el plugin agrega el código de seguimiento necesario para Google Analytics a su sitio web de WordPress, descarga y guarda el archivo analytics.js en su servidor y lo mantiene actualizado usando un script programado en wp_cron(). Recomendamos que configure también que cargue en el pie de página. Nota: Este plugin no funcionará con otros plugins de WordPress de Google Analytics.

configuración-local-analytics

Configuración de analytics localmente alojado

3. ¿Qué Pasa Con Scripts De Terceros?

Si tiene algún negocio en su sitio web de WordPress, lo más probable es que tenga una script de terceros ejecutándose para realizar un seguimiento de las conversiones, las pruebas A/B, etc. Esto puede incluir scripts como píxeles de conversión de Facebook, Twitter, CrazyEgg, Hotjar, etc. Lamentablemente ya que no puede alojar a esos localmente no hay nada que se puede hacer ya que usted no tiene control sobre la caching de esos activos de terceros. Pero para muchos sitios menores y bloggers, lo más probable es que pueda deshacerse de ese error de leverage browser caching en conjunto siguiendo las recomendaciones anteriores.

leverage-browser-caching-scripts-de-terceros

Errores de leverage browser caching de scripts de terceros

Resumen

Definitivamente tiene algunas opciones disponibles al tratar de resolver esos errores de leverage browser caching en su sitio WordPress. Para la mayoría de la gente, probablemente se pueda borrar en conjunto. Recuerde que estas herramientas de rendimiento web deben utilizarse como directrices. No recomendamos obsesionarse demasiado con las puntuaciones. Pero resolver los errores por lo general resultará un sitio web más rápido al final.

¿Tiene otro consejo sobre resolver los errores de leverage browser caching? Si es así, no dude en dejarnos un comentario a continuación.

Este artículo fue escrito por Brian Jackson

Brian enfoca en nuestros esfuerzos de marketing a través de las redes sociales: desde el desarrollo de la nueva estrategia de crecimiento online, creación de contenido, optimización técnica de buscadores hasta nuestra expansión en la comunidad WordPress. Es apasionado por Wordpress lleva usándolo desde hace más de 8 años e incluso está desarrollando su propio plugin exclusivo. A Brian le encanta el blogueo, películas, montar en bici y trabajar con sitios web.

Artículos relacionados

  1. Gravatar for this comment's author
    Sergio Daza Ortega mayo 18, 2017 at 8:46 am

    Excelente artículo. Sin embargo he seguido los apsos y aún sigue pareciendo la advertencia en el panel del Page Speed de Google. No encuentra especificado el caché para ningún recurso (js, css, jpeg, png, etc…) No lo entiendo, todo está en orden y aún así sigue mostrándose en los resultados de la medición.

    ¿Por favor pueden darme una mano?

    !Gracias¡

Responder a Sergio Daza Ortega Cancelar respuesta

kinsta newsletter

¿Utilizas WordPress?

¡Únete a más de 20.000 lectores que ya reciben nuestro newsletter semanal GRATUITO con consejos de WordPress sobre cómo generar más tráfico e ingresos para tu negocio!

You have Successfully Subscribed!

Send this to a friend