Cómo aprovechar el almacenamiento en caché del navegador en WordPress (con video)

Última actualización - 8 de julio de 2021

Si posee o ejecuta un sitio web de WordPress, querrá mejorar constantemente la forma en que se ve y funciona. Sin embargo, cuantos más complementos, creadores de páginas y elementos de contenido utilice, más lento será su sitio web.

Y un sitio web de carga lenta es un gran desvío para los visitantes, independientemente de cuán bien se vea su sitio web o cuán esencial sea el trabajo que realiza.

Es por eso que administrar un sitio web de WordPress requiere que haga uso de todas y cada una de las medidas de rendimiento del sitio web que pueda encontrar. Y una medida importante que vale la pena tomar es aprovechar el almacenamiento en caché del navegador.

En este artículo, aprenderá lo que significa y cómo puede aprovechar el almacenamiento en caché del navegador en WordPress.

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

Cada vez que un usuario accede a su sitio web, los recursos como imágenes, JavaScript, CSS y otros deben cargarse en su computadora desde el servidor. Esto significa que el usuario necesita cargar repetidamente los mismos recursos entre páginas y visitas al sitio posteriores.

Introduzca: almacenamiento en caché.

El almacenamiento en caché indica el período de tiempo durante el cual los navegadores almacenan localmente los recursos almacenables en caché disponibles en el sitio web. Cuando un usuario solicita la página web, la información se obtiene instantáneamente de su computadora.

De esa manera, puede aprovechar el almacenamiento en caché del navegador en WordPress para proporcionar un rendimiento más rápido del sitio web.

Puede usar herramientas como Google PageSpeed ​​Insights y GTmetrix para probar si su sitio web ya aprovecha el almacenamiento en caché del navegador.

Simplemente pegue la URL de su sitio web en el campo proporcionado y haga clic en "Analizar". La herramienta le dará a su sitio web una puntuación, entre 0 y 100 en el caso de PageSpeed ​​y una calificación alfabética en el caso de GTmetrix.

La herramienta también le proporcionará sugerencias para mejorar el rendimiento de su sitio web. Una sugerencia común es optar por aprovechar el almacenamiento en caché del navegador en WordPress. Si recibe esta sugerencia, aquí hay dos formas de hacerlo.

Aproveche manualmente el almacenamiento en caché del navegador en WordPress

Puede aprovechar manualmente el almacenamiento en caché del navegador en WordPress agregando un poco de código al archivo .htaccess. De hecho, necesita agregar tres piezas de código para tres propósitos diferentes:

1. Agregar encabezados de caducidad
2. Agregar encabezados de control de caché
3. Desactivar etiquetas electrónicas

Para agregar este código, debe acceder a los archivos de su sitio web, lo que puede hacer iniciando sesión en su cuenta de alojamiento o cPanel. Debe navegar hasta el administrador de archivos y la opción "Activar los archivos ocultos" en la configuración del sitio web.

Luego encontrará el archivo .htaccess en la carpeta public_html. Haga clic derecho en el archivo y edítelo para agregar el código proporcionado a continuación.

1. Agregue el código de almacenamiento en caché del navegador

Copie el código a continuación y péguelo al final del contenido del archivo .htaccess. No realice ningún otro cambio en el archivo.

 #Personalizar caducidad de inicio de caché: ajuste el período según sus necesidades
<IfModule mod_expires.c>
FileETag MTime Tamaño
AddOutputFilterByType DEFLATE texto/texto sin formato/texto html/texto xml/aplicación css/aplicación xml/aplicación xhtml+xml/aplicación rss+xml/aplicación javascript/x-javascript
ExpiresActive On
ExpiresByType text/html "acceso 600 segundos"
ExpiresByType aplicación/xhtml+xml "acceso 600 segundos"
ExpiresByType text/css "acceso 1 mes"
ExpiresByType texto/javascript "acceso 1 mes"
ExpiresByType text/x-javascript "acceso 1 mes"
Aplicación ExpiresByType/javascript "acceso 1 mes"
ExpiresByType aplicación/x-javascript "acceso 1 mes"
Aplicación ExpiresByType/x-shockwave-flash "acceso 1 mes"
Aplicación ExpiresByType/pdf "acceso 1 mes"
ExpiresByType image/x-icon "acceso 1 año"
ExpiresByType image/jpg "acceso 1 año"
ExpiresByType image/jpeg "acceso 1 año"
ExpiresByType image/png "acceso 1 año"
ExpiresByType image/gif "acceso 1 año"
ExpiresDefault "acceso 1 mes"

</IfModule>
#Expira fin de caché

El código anterior le dice al navegador que sirva una versión en caché de la página en lugar de descargar una nueva versión.

La configuración también incluye los siguientes tiempos de actualización/caducidad:

• 600 segundos para HTML
• Un mes CSS y JavaScript
• Un año para las imágenes

Estos períodos de vencimiento aseguran que los visitantes no tengan que descargar ciertos recursos con demasiada frecuencia. Sin embargo, puede editar fácilmente los tiempos de vencimiento si lo necesita.

2. Agregue encabezados de control de caché (Apache)

Necesitamos agregar encabezados de control de caché para especificar las políticas de almacenamiento en caché del navegador con respecto a cómo se almacena en caché un recurso, dónde se almacena en caché y la edad máxima antes de caducar. Sin embargo, ya hemos especificado los tiempos de caducidad anteriormente, por lo que no es necesario que los repitamos aquí.

Copia y pega el siguiente código:

 # BEGIN Encabezados de control de caché

<IfModule mod_expires.c>
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Encabezado agregar Cache-Control "público"
</filesMatch>
<filesMatch "\.(css)$">
Encabezado agregar Cache-Control "público"
</filesMatch>
<filesMatch "\.(js)$">
Encabezado agregar Cache-Control "privado"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Encabezado agregar Cache-Control "privado, debe revalidar"
</filesMatch>
</IfModule>
</IfModule>

3. Apague las etiquetas electrónicas

Desactivaremos las etiquetas electrónicas para obligar a los navegadores a confiar en el control de la memoria caché y caducar los encabezados en lugar de validar los archivos. Aquí está el código:

 <IfModule mod_headers.c>
Encabezado no establecido ETag
</IfModule>
FileETag Ninguno

Almacenamiento en caché del navegador para el servidor NGINX

No podrá ubicar el archivo .htaccess si su sitio web usa NGINX. En ese caso, diríjase a /etc/nginx/sites-enabled/default y pegue el código a continuación:

 servidor {
escuchar 80;
nombre_servidor localhost;
ubicación / {
raíz /usr/share/nginx/html;
índice índice.html índice.htm;
}
ubicación ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expira 365d;
}
ubicación ~* \.(pdf)$ {
expira 30d;
}
}
Agregar encabezados de control de caché (NGINX)
ubicación ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expira 90d;
add_header Cache-Control "público, sin transformación";
}

Después de editar NGINX, guarde el archivo para aprovechar el almacenamiento en caché del navegador en el servidor NGINX.

Aproveche el almacenamiento en caché del navegador en WordPress usando complementos

De hecho, editar el archivo .htaccess puede ser bastante arriesgado, ya que un solo error puede arruinar todo su sitio web. Entonces, si no quiere correr riesgos innecesarios, puede usar complementos como W3 Total Cache y WP Fastest Cache .

Así es como puede aprovechar el almacenamiento en caché del navegador utilizando el complemento W3 Total Cache, uno de los mejores para el trabajo.

Después de instalar el complemento, diríjase a su página de configuración. Aquí, asegúrese de que la memoria caché del navegador esté habilitada. A continuación, diríjase a la configuración de caché del navegador desde la barra lateral. Y asegúrese de que el encabezado de caducidad, el encabezado de control de caché y las opciones de configuración de etiquetas electrónicas estén habilitadas.

Guarde la configuración si ha realizado algún cambio.

Con eso, ha aprovechado con éxito el almacenamiento en caché del navegador en su sitio web de WordPress. Puede asegurarse de que esté habilitado usando la herramienta Insights o GTmetrix nuevamente.

Si prefiere una versión en video, vea el video a continuación:

Otras lecturas:

• Los mejores complementos gratuitos de optimización de bases de datos de WordPress en 2021
• ¿Cómo habilitar la compresión GZIP en el sitio de WordPress?