Aproveche el almacenamiento en caché del navegador en WordPress para optimizar el tiempo de carga de la página

Los usuarios del sitio web de WordPress siempre están buscando algo listo para usar y con el objetivo de lograr ese puntaje comparativo de más de 90 Google PageSpeed ​​Insights es bastante posible. En general, existen varias técnicas para acelerar los sitios web de WordPress, pero entre todas, el almacenamiento en caché del navegador es el problema más común durante el análisis de optimización de la velocidad del sitio web.

Para supervisar y probar el rendimiento de su sitio web, puede utilizar una serie de herramientas en línea como Google PageSpeed ​​Insights, GTMetrix y Pingdom. Proporcionan resultados precisos y lo ayudan a comprender dónde su sitio web necesita mejoras. Mientras probaba el rendimiento del sitio, es posible que haya recibido una notificación de advertencia de "Aprovechar el almacenamiento en caché del navegador".

Hoy, vamos a discutir cómo puede resolver este problema. Entonces, no perdamos el tiempo y profundicemos.

¿Qué es una caché de navegador y cómo funciona?

Cada vez que una persona visita su sitio web, el navegador envía una solicitud para cargar activos como HTML, Scripts, Imágenes, CSS, etc. desde el servidor. Luego, el servidor responde a la solicitud del navegador. Según el tamaño del activo solicitado y el tiempo de proceso del servidor, la respuesta puede tardar un poco en responder. En última instancia, da como resultado un aumento de la carga en el servidor y ralentiza el sitio web del usuario.

En esta situación, la caché del navegador funciona mejor. Almacena contenido estático en el navegador de un usuario, la primera vez que un visitante visita un sitio web. Si su sitio web no está configurado correctamente con la caché del navegador y está probando la velocidad de su sitio web utilizando cualquiera de las herramientas de prueba de rendimiento mencionadas anteriormente, la herramienta definitivamente mostrará un mensaje de advertencia para aprovechar el almacenamiento en caché del navegador.

Según Google, la respuesta del servidor debe incluir a continuación dos etiquetas en el encabezado:

Cache-Control define cómo y durante cuánto tiempo el navegador y otros cachés intermedios pueden almacenar en caché la respuesta individual.

ETag proporciona un token de revalidación que el navegador envía automáticamente para verificar si el recurso ha cambiado desde la última vez que se solicitó.

¿Qué es el aprovechamiento del almacenamiento en caché del navegador?

En palabras simples, aprovechar el almacenamiento en caché del navegador ayuda a reducir las solicitudes HTTP para cargar páginas más rápido y también mejora el tiempo de respuesta del servidor.

Echemos un vistazo a un ejemplo en vivo. Probé mi sitio web usando Think with Google y aquí está el resultado.

Probémoslo con la herramienta Google PageSpeed ​​Insights.

Bien, pueden ver que el rendimiento general de mi sitio web es bastante bueno. Pero hay margen para mejorarlo. Muestra que mis URL internas se pueden almacenar en caché.

Corregir la advertencia "Aprovechar el almacenamiento en caché del navegador"

Para corregir la advertencia "Aprovechar el almacenamiento en caché del navegador", deberá realizar los dos pasos siguientes.

1. Cambiar los encabezados de solicitud para usar la caché
2. Optimizar la política de almacenamiento en caché

1. Cambiar los encabezados de la solicitud para usar la caché

Una forma de mejorar la velocidad y la respuesta de su sitio web es cambiar los encabezados de solicitud para usar la caché. Vamos a agregar algunas líneas de código a nuestro archivo .htaccess de WordPress.

Nota: .htaccess es la sala de control de un sitio web. Si no se configura correctamente, ¡puede dañar el sitio completo mientras lo hace! Aprenda a proteger su WordPress con un archivo .htaccess .

Para aprovechar el almacenamiento en caché del navegador en WordPress, acceda al directorio principal de su instalación de WordPress, busque el archivo .htaccess y ábralo con cualquier editor de código. Simplemente, pegue las líneas que se indican a continuación en la parte superior del archivo .htaccess de WordPress.

 ## EXPIRA CACHING ##

<IfModule mod_expires.c>

Caduca Activo en
ExpiresByType image / jpg "acceso 1 año"
ExpiresByType image / jpeg "acceso 1 año"
ExpiresByType image / gif "acceso 1 año"
ExpiresByType image / png "acceso 1 año"
ExpiresByType text / css "acceso 1 mes"
ExpiresByType text / html "acceso 1 mes"
Solicitud ExpiresByType / pdf "acceso 1 mes"
ExpiresByType text / x-javascript "acceso 1 mes"
Aplicación ExpiresByType / x-shockwave-flash "acceso 1 mes"
ExpiresByType image / x-icon "acceso 1 año"
Caduca por defecto "acceso 1 mes"

</IfModule>

## EXPIRA CACHING ##

2. Optimizar la política de almacenamiento en caché

El segundo paso para acelerar el tiempo de respuesta en su sitio web es optimizar la política de almacenamiento en caché. El código anterior describe los tipos de archivos y sus vencimientos. Depende totalmente de usted cuánto tiempo desea almacenar contenido estático específico en la memoria caché del navegador del usuario. Si su contenido estático como imágenes es a largo plazo. Te sugiero que los establezcas durante un año. Sin embargo, el contenido que sospecha que se puede cambiar en un futuro cercano, se sugiere que establezca la fecha de caducidad durante al menos un mes.

Controles de caché

Si el método anterior no funciona en su servidor, tenemos otra alternativa que puede ayudarlo con los controles de caché para establecer la caducidad del almacenamiento en caché. Todo lo que tiene que hacer es copiar y pegar las siguientes líneas en la parte superior de su archivo .htaccess.

 # 1 mes para la mayoría de los activos estáticos

<filesMatch ". (css | jpg | jpeg | png | gif | js | ico) $">
Encabezado establecido Cache-Control "max-age = 2592000, public"

</filesMatch>

Al igual que en el paso anterior, el código anterior describe la política de caducidad y almacenamiento en caché de diferentes tipos de archivos.

Nota: Este es el valor mínimo que puede eliminar la advertencia. Si el vencimiento es menor que esto, es posible que aún vea la advertencia del navegador de apalancamiento, lo que sugiere aumentar el vencimiento.

Después de configurar correctamente el archivo .htaccess, ahora lo probaremos. Entonces, ¡probemos!

Y se ha corregido la advertencia de "aprovechar el almacenamiento en caché del navegador".

WordPress aprovecha el almacenamiento en caché del navegador para Google Analytics

Si está utilizando cualquier complemento de WordPress para Google Analytics, es posible que aún reciba una advertencia de almacenamiento en caché del navegador, sin importar que haya configurado todo correctamente.

Esto se debe a que Google Analytics establece el tiempo de vencimiento predeterminado de solo dos horas para asegurarse de que reciba las actualizaciones lo más rápido posible.

Hay dos formas de corregir la advertencia de caché del navegador de apalancamiento para Google Analytics.

1. Local : puede crear una copia local de analytics.js y / o ga.js (cualquier archivo con el que esté trabajando aproveche la caché del navegador). Tenga en cuenta que Google no recomienda este método.
2. Plugin: Uso completo Analytics Optimization Suite (CAOS) WordPress plugin que hospeda el archivo de Google Analytics a nivel local y el uso wp_cron () para mantenerlo actualizado.

¿Sigue viendo la advertencia de aprovechar la caché del navegador?

Después de configurar todo correctamente, es posible que todavía vea a Google sugiriendo aprovechar el caché del navegador, como la imagen a continuación.

Como puede ver, los archivos anteriores son integraciones de terceros. Estos no están presentes en nuestro servidor. No hay nada que podamos hacer con ellos excepto eliminarlos. Todas las integraciones de terceros pueden provocar esta advertencia en las herramientas de prueba de velocidad.

Soy cliente de Cloudways, ¿qué gano?

Si usted es un cliente de alojamiento de WordPress optimizado de Cloudways, entonces debe dejar de lado sus preocupaciones sobre la advertencia de caché del navegador de apalancamiento de WordPress que aparece en las herramientas de prueba de velocidad en línea. Porque Cloudways maneja este problema por sí solo. Puede cambiar el tiempo de vencimiento simplemente navegando a Servidor → Configuración y paquetes → Avanzado , desplácese hacia abajo un poco y busque NGINX - Caducidad de caché estática . El valor predeterminado es 43200 min, que equivale a 30 días.

Aproveche el almacenamiento en caché del navegador con W3 Total Cache

El método mencionado anteriormente es la forma manual de eliminar la advertencia de caché del navegador de apalancamiento. Si está utilizando un complemento de almacenamiento en caché como W3 Total Cache , debe habilitar la caché del navegador navegando a Rendimiento → Configuración general .

Luego navegue hasta la caché del navegador y marque debajo de las cinco casillas de verificación.

Desplácese un poco hacia abajo para establecer el tiempo de caducidad de los archivos CSS y JSS. El valor predeterminado es 31536000, que equivale a 365 días. Puede cambiar esto a su período de tiempo requerido.

Desplácese hacia abajo un poco más para establecer un tiempo de vencimiento para HTML y XML.

Para cambiar los valores predeterminados de Medios y otros archivos, desplácese un poco hacia abajo y configure la caducidad. El valor predeterminado es 31536000, que equivale a 365 días.

Pensamientos finales

Aprovechar el almacenamiento en caché del navegador ayuda a mejorar la puntuación de las pruebas de rendimiento web. Recuerde, estas configuraciones son solo para crear pautas básicas y comprensión entre los usuarios de WordPress. Aparte de esto, hay una serie de técnicas que pueden ayudar a las personas a lograr un sitio web más rápido en poco tiempo, en el que lo más importante es elegir el alojamiento de WordPress más rápido.

Si tiene alguna consulta, no dude en preguntar en la sección de comentarios a continuación. Me encantaría responder.