La forma correcta de publicar recursos estáticos con una política de caché eficaz en WordPress

Si estás leyendo esto, lo más probable es que hayas probado tu sitio con PageSpeed Insights o GTmetrix y hayas recibido una advertencia que te dice “publica recursos estáticos con una política de caché eficaz“. ¿Qué es? ¿Y cómo te puedes deshacer de la advertencia?

¿Qué significa publicar recursos estáticos con una política de caché eficaz?

Cada vez que un usuario visita una página en una web, el navegador necesita descargar una variedad de recursos: imágenes, fuentes, archivos CSS, archivos JS, archivos de vídeo, etc. El navegador del usuario almacena todos estos recursos localmente para que no tenga que volver a descargarlos la próxima vez que visite la misma página. Esto se llama caché del navegador.

Tú, como propietario del sitio web, puedes (y debes) controlar cuánto tiempo se almacenan los recursos de tu web en los navegadores de los usuarios. ¿Por qué deberías hacer esto? Porque no quieres que tus usuarios tengan que volver a descargar los recursos de tu servidor demasiadas veces. Es malo para ellos porque la página se cargará más lentamente y es malo para ti porque tu servidor tendrá que gestionar más carga y desperdiciar ancho de banda; cuanto menos trabajo tenga que hacer tu servidor, mejor. Por ejemplo, ¿por qué enviarías la misma imagen después de una semana cuando probablemente no haya cambiado? Es mejor si el navegador descarga el archivo por segunda vez únicamente después de 6 meses o un año, un tiempo más razonable.

Por lo tanto, “publicar recursos estáticos con una política de caché eficaz” significa entregar los recursos de tu página web a tus usuarios y decirle a sus navegadores que pueden almacenarlos localmente durante un cierto período de tiempo, que no será demasiado corto.

¿Cómo publicar recursos estáticos con una política de caché eficaz?

Eso depende del servidor web en el que tu web esté alojada. Para averiguarlo, puedes preguntarle a tu proveedor de alojamiento (“hosting”) o usar un servicio en línea como IPLocation.io. Simplemente, haz clic en el enlace e introduce tu sitio web.

Encontrarás el resultado en la siguiente pantalla.

Hay muchos servidores web en el mercado, pero los más comunes son NGINX, Apache y LiteSpeed.

Apache

Si tu servidor web es Apache, solo necesitas añadir algunas líneas de código a tu archivo .htaccess. Y puedes hacerlo con un plugin o manualmente.

Manualmente

Como experto en rendimiento, te recomiendo que utilices este método. Cuantos menos plugins, mejor.

1. Utiliza un cliente FTP como FileZilla o un administrador de archivos que puedes encontrar en el panel de control de tu proveedor de alojamiento para encontrar tu archivo .htaccess. Debería estar ubicado en el directorio raíz del sistema de ficheros de tu web, junto con las carpetas wp-content, wp-admin y wp-includes.

2. Edítalo con un editor de texto. Un bloc de notas también es válido.

3. Añade el siguiente fragmento de código y guarda los cambios:

#### START Cache de navegador ####
<IfModule mod_expires.c>
ExpiresActive on
    ExpiresDefault                              "access plus 1 month"
    ExpiresByType text/cache-manifest           "access plus 0 seconds"
    ExpiresByType text/html                     "access plus 0 seconds"
    ExpiresByType text/xml                      "access plus 0 seconds"
    ExpiresByType application/xml               "access plus 0 seconds"
    ExpiresByType application/json              "access plus 0 seconds"
    ExpiresByType application/rss+xml           "access plus 1 hour"
    ExpiresByType application/atom+xml          "access plus 1 hour"
    ExpiresByType image/x-icon                  "access plus 1 week"
    ExpiresByType image/gif                     "access plus 4 months"
    ExpiresByType image/png                     "access plus 4 months"
    ExpiresByType image/jpeg                    "access plus 4 months"
    ExpiresByType image/webp                    "access plus 4 months"
    ExpiresByType video/ogg                     "access plus 4 months"
    ExpiresByType audio/ogg                     "access plus 4 months"
    ExpiresByType video/mp4                     "access plus 4 months"
    ExpiresByType video/webm                    "access plus 4 months"
    ExpiresByType image/avif                    "access plus 4 months"
    ExpiresByType image/avif-sequence           "access plus 4 months"
    ExpiresByType text/x-component              "access plus 1 month"
    ExpiresByType font/ttf                      "access plus 4 months"
    ExpiresByType font/otf                      "access plus 4 months"
    ExpiresByType font/woff                     "access plus 4 months"
    ExpiresByType font/woff2                    "access plus 4 months"
    ExpiresByType image/svg+xml                 "access plus 4 months"
    ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
    ExpiresByType text/css                      "access plus 1 year"
    ExpiresByType application/javascript        "access plus 1 year"
</IfModule>
#### END Cache de navegador ####

Con un plugin

Si estás utilizando WP Rocket como plugin de caché de páginas (el mejor junto a WP Super Cache, aunque este no permite establecer caché de navegador), te recomiendo que actives la correspondiente opción para configurar las reglas de caché de navegador en el archivo .htaccess. Por cierto, si estás utilizando cualquier otro plugin de caché, te recomiendo que cambies a WP Super Cache o WP Rocket.

WP Rocket no tiene una configuración especial para activar esto, ya que lo hará por ti automáticamente una vez que lo instales y actives.

Si, por alguna razón, no estás utilizando un plugin de caché de páginas, o si estás usando WP Super Cache, solo necesitas instalar y activar el plugin Leverage Browser Caching. No busques una página de ajustes, porque no tiene ninguna.

NGINX

El servidor web NGINX ofrece más rendimiento que Apache, pero no ofrece la posibilidad de añadir configuraciones personalizadas sobre la marcha como Apache y su archivo .htaccess. Además, los proveedores de alojamiento generalmente no te dan acceso a los archivos de configuración de NGINX. Por lo tanto, el primer paso es preguntar a tu proveedor de alojamiento si puede implementar las reglas de caché de navegador por ti.

Si tienes acceso a los archivos de configuración de NGINX, ya sea porque tienes acceso completo a tu servidor (lo administras, para ser exactos) o porque tu proveedor de alojamiento te lo permite, sigue estos pasos.

¡Importante! Se supone aquí que se ha realizado una instalación normal de NGINX, donde los archivos de configuración están en las ubicaciones predeterminadas. Si no puedes encontrar las rutas o los archivos correctos, contacta con tu proveedor de alojamiento.

1) Edita el archivo de configuración predeterminado de NGINX con tu editor de texto favorito. En Linux, se encuentra en /etc/nginx/sites-available/default.

2) Localiza el bloque de configuración server:

. . .
# Default server configuration
#

server {
    listen 80 default_server;
    listen [::]:80 default_server;

. . .

3) Inserta los siguientes fragmentos de código antes y dentro del bloque server:

...
# Default server configuration
#

# Expires map
map $sent_http_content_type $expires {
    default                    off;
    text/html                  epoch;
    text/css                   max;
    application/javascript     max;
    ~image/                    max;
}

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        expires $expires;
...

El primer bloque de código define la duración de la caché para diferentes tipos de archivos de esta manera:

• off significa que no se añadirán reglas de caché al recurso. Básicamente desactiva las cabeceras de caché de NGINX y, por lo tanto, no modifica otras cabeceras de caché provenientes de, por ejemplo, un servidor superior.
• epoch establece la fecha de caducidad de la caché el jueves 01 de enero de 1970 a las 00:00:01 GMT. Esto fuerza la invalidación de la caché para que el recurso siempre se descargue del origen.
• max establece la fecha de caducidad de la caché a 10 años en el futuro. Esto es lo que queremos para los archivos que es poco probable que cambien.
• También puede especificar un tiempo específico, como 1h (1 hora), 4d (4 días), 5m (5 meses) o 3y (3 años).

El segundo bloque de código establece la fecha de caducidad de la caché haciendo referencia al primer bloque.

4) Ahora reinicia NGINX. Si tienes acceso a una terminal de Linux, probablemente puedas ejecutar este comando:

sudo systemctl restart nginx

LiteSpeed

La forma más fácil de configurar la caché del navegador es usar el plugin LiteSpeed Cache. Es el único plugin de caché de páginas que deberías usar si tu servidor web es LiteSpeed.

1) Instala LiteSpeed Cache.

2) En tu panel de WordPress, ve a LiteSpeed Cache > Caché > Navegador.

3) Activa la opción Caché del navegador.

4) Configura el TTL caché de navegador en aproximadamente 6 meses (15778800) o 1 año (31557600).

4) Si estás utilizando OpenLiteSpeed, tienes que seguir estas instrucciones adicionales.

Un apunte sobre las CDN

A veces, tu CDN anula todo lo que hagas en tu servidor, porque una CDN se encuentra en el medio, entre tu servidor y el usuario. Esto, obviamente, solo aplica si estás utilizando una CDN. Si no, simplemente ignora estas líneas.

En Cloudflare, por ejemplo, puedes encontrar esta configuración en Caching > Configuration > Browser Cache TTL:

En este caso en particular, debes seleccionar Respect Existing Headers para que Cloudflare respete lo que estás haciendo en tu servidor.

¿Cuál es el tiempo mínimo que tengo que configurar como tiempo de caché del navegador?

No hay un valor recomendado, ya que cada web es un mundo distinto. Algunas webs se actualizan con mucha frecuencia, mientras que otras no, por lo que sus recursos no cambian tanto.

Dicho esto, probablemente te interese conocer los valores con los que Google está contento. No hay valores oficiales, pero hemos notado que PageSpeed Insights deja de quejarse a partir de los 4 meses (10368000 segundos).

¿Cómo puedo verificar la política de caché?

Si quieres verificar que los cambios que has realizado han funcionado, puedes hacerlo utilizando las herramientas de desarrollo de tu navegador favorito, pero para este propósito en particular me resulta más fácil ejecutar un solo comando: curl

¡Importante! ¡Vacía la caché de tu web después de realizar cualquier cambio en la política de caché del navegador!

1) Abre una terminal. La encontrarás como una aplicación normal.

2) Coge cualquier URL de tu web. Una imagen, un archivo CSS, un archivo JS… Por supuesto, tiene que ser una URL de la cual hayas cambiado el tiempo de caché de navegador. Cojamos esta como ejemplo: https://accelera.site/wp-content/uploads/2022/07/Accelera_Color_Positive.png

3) En la terminal, escribe curl -I y la URL. Ejemplo:

curl -I https://accelera.site/wp-content/uploads/2022/07/Accelera_Color_Positive.png

4) Aquí el resultado:

5) La cabecera cache-control debería tener los cambios que has realizado en segundos como max-age=XXXXX.