Almacenamiento en caché del navegador de WordPress

Acelere su sitio web de WordPress drásticamente con el uso del almacenamiento en caché del navegador, también conocido como almacenamiento en caché de caducidad .

Muchos proveedores de pruebas y optimización de velocidad se referirán a esto como " Caché del navegador ", " Aprovechar el almacenamiento en caché del navegador ", " Encabezados de caducidad", " Encabezados de caché ", " Control de caché " y " Caché web ". Tal y como indica Google PageSpeed ​​Insights, GTMetrix y MaxCDN siguen esta guía para configurarlo correctamente.

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

El almacenamiento en caché del navegador es el método en el que su servidor web le dice al navegador que almacene una página o recursos específicos durante un cierto período de tiempo para que no tengan que descargarse del servidor cada vez que se cargan las páginas. Esto puede almacenar en caché una página completa y/o recursos como JavaScript, CSS, imágenes (jpeg, png, gif, etc.) y mucho más.

Su sitio web de WordPress se cargará normalmente para cada usuario la primera vez, pero a partir de entonces será notablemente más rápido a medida que naveguen por las páginas y realicen acciones. Los recursos se almacenan en el navegador y, como resultado, se cargan localmente en lugar de descargarse nuevamente.

La importancia del almacenamiento en caché del navegador

En última instancia, el propósito y la importancia del almacenamiento en caché del navegador es acelerar su sitio web de WordPress para sus usuarios para que tengan una experiencia más agradable. Esto podría conducir a un aumento del tráfico, mejores clasificaciones de búsqueda e incluso mejores tasas de conversión sobre lo que está tratando de lograr.

Como efecto adicional adicional, la carga se elimina de su servidor web al no descargar recursos en cada carga de página para el mismo visitante y también ahorra ancho de banda en su servidor web.

El caché web proporciona velocidad mutua al servidor y al usuario

Implementación de la memoria caché del navegador

Configurar el almacenamiento en caché del navegador de apalancamiento en su sitio web de WordPress es realmente muy rápido y fácil, pero la configuración puede diferir según su configuración y el servidor web que esté utilizando. De forma predeterminada, la configuración más común es WordPress ejecutándose en un servidor web Apache, pero hay otros servidores web populares disponibles, como Nginx, IIS, etc.

El uso de un complemento de almacenamiento en caché del navegador Leverage de WordPress simplifica la implementación.

Para hacerlo aún más fácil, hay varios complementos de almacenamiento en caché del navegador de WordPress disponibles. Hemos usado, probado y recomendado el complemento WordPress Leverage Browser Caching Ninjas. Es un complemento de instalación y activación que hace el resto por usted, así de simple.

Caché del navegador Apache

Apache usa un archivo .htaccess para el almacenamiento en caché del navegador. Debe haber un archivo .htaccess en la raíz de su instalación de WordPress y, si no lo hay, puede crear uno y colocar las siguientes líneas de código en él, en la parte superior:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

(https://gist.github.com/tribulant/36be0f683eedfa468f51)

Nginx aprovecha el almacenamiento en caché del navegador

Si está ejecutando un servidor Nginx (En-gine-ex), la configuración es diferente a la de Apache anterior. Deberá agregar el siguiente código a su archivo de configuración de vhost, que generalmente se encuentra en /etc/nginx/sites-enabled/default . Agregue lo siguiente a su bloque de servidor:

location ~* \.(jpg|jpeg|png|gif|ico|css|js)$ {
expires 365d;
}

(https://gist.github.com/tribulant/19bb56a222af41854ecc)

luztpd

Lighttpd utiliza el módulo mod_expire para controlar los encabezados que proporcionan el almacenamiento en caché del contenido por parte del navegador. Esto puede entrar en la configuración del núcleo de Lighttpd en consecuencia.

$HTTP["url"] =~ "^/images/" {
expire.url = ( "" => "access plus 1 hours" )
}

(https://gist.github.com/tribulant/26263533eee33e3b61ed)

Aproveche el almacenamiento en caché del navegador de Microsoft IIS

Configurar el almacenamiento en caché del navegador para IIS (Internet Information Services) es muy fácil.

Selecciónelo en la interfaz Administration Tools y abra sus propiedades. Después de seleccionar la pestaña HTTP Headers , debería ver dos áreas interesantes; Enable Content Expiration y Custom HTTP headers . El primero debe explicarse por sí mismo y el segundo se puede usar para aplicar encabezados de control de caché.

Tecnicidad del almacenamiento en caché del navegador

El servidor web logra aprovechar el almacenamiento en caché del navegador mediante el envío de encabezados HTTP al navegador antes de que se envíe el HTML. Le dicen al navegador ciertas cosas sobre el contenido HTML que está a punto de seguir, como el tipo de contenido, la fecha actual, los detalles del servidor, el control de caché y la caducidad, etc.

Los encabezados Cache-Control , Expires y Etag son los que le dan instrucciones al caché del navegador. Estos encabezados se crean automáticamente mediante los métodos mencionados anteriormente para aprovechar el almacenamiento en caché del navegador en Apache, Nginx e IIS, por lo que no necesita entrar en detalles a menos que esté interesado.

Encabezado de control de caché

Cache-Control le da al navegador ciertas instrucciones, como por cuánto tiempo el contenido se considera "nuevo", estado público/privado de almacenamiento en caché, validación y más.

Control de caché: edad máxima = 3600, público

(https://gist.github.com/tribulant/6309926734d3c127064c)

Caduca Encabezado

El encabezado Expires proporciona una fecha HTTP solo hasta que el recurso debe y puede almacenarse en caché.

Caduca: sábado 28 de noviembre de 2015 a las 05:36:25 GMT

(https://gist.github.com/tribulant/1b655d60a8a665b18b85)

Encabezado de etiqueta

Etag se introdujo en HTTP 1.1 como un método de validación con un token enviado por el servidor y utilizado por el navegador para verificar si la representación del contenido ha cambiado. Hasta Etag , los navegadores han utilizado principalmente el encabezado Last-Modified pero Etag es más relevante ahora. De todos modos, la mayoría de los servidores web generarán encabezados Last-Modified y Etag .

Etag: "pub1259380237;gz"

(https://gist.github.com/tribulant/2b542d76410bc047be00)

El resultado final del almacenamiento en caché del navegador

El almacenamiento en caché del navegador es mutuamente beneficioso tanto para usted (su servidor web) como para sus usuarios al proporcionar velocidad y rendimiento a ambas partes.

Con el almacenamiento en caché del navegador, sea fuerte y agresivo, su servidor web es lo suficientemente inteligente como para saber cuándo han cambiado los recursos para generar encabezados actualizados para que los usuarios obtengan contenido nuevo según sea necesario. No se asuste de que sus usuarios se queden atascados en contenido antiguo, no es el caso.

El almacenamiento en caché del navegador web es muy recomendable para los sitios web de WordPress y, en última instancia, el complemento WordPress Leverage Browser Caching Ninjas recomendado hará el truco. ¡Simplemente instale, active y listo!