Cómo publicar activos estáticos con políticas eficientes para el caché

Almacenar el HTTP en el caché puede acelerar el tiempo de carga de su página en las visitas habituales.

Cuando un navegador solicita un recurso, el servidor que lo proporciona puede indicarle a dicho navegador cuánto tiempo debe almacenar temporalmente o guardar el recurso en el caché. Ante cualquier solicitud que se efectúe de forma sucesiva de ese recurso, el navegador utilizará su propia copia local en vez de obtenerla de la red.

# Cómo puede fallar la auditoría de las políticas en el caché de Lighthouse

Lighthouse etiqueta todos los recursos estáticos que no se almacenan en el caché:

Lighthouse considerará que un recurso puede almacenarse en el caché si se cumplen todas las condiciones que se indican a continuación:

• El recurso es una fuente, imagen, archivo multimedia, script o una hoja de estilo.
• El recurso tiene un Código de estado HTTP 200, 203, o 206.
• El recurso carece de una política explícita de exclusión del caché.

Cuando una página no aprueba la auditoría, Lighthouse muestra los resultados en una tabla con tres columnas:

# Cómo almacenar en caché los recursos estáticos mediante el almacenamiento HTTP

Configure su servidor para que devuelva el encabezado HTTP Cache-Control como respuesta:

Cache-Control: max-age=31536000

El directorio max-age le indica al navegador cuánto tiempo debe almacenar el recurso en segundos en el caché. En este ejemplo se establece la duración en 31,536,000, que corresponde a 1 año: 60 segundos × 60 minutos × 24 horas × 365 días = 31,536,000 segundos.

Cuando sea posible, almacene en el caché los activos estáticos inmutables durante mucho tiempo, como un año o más.

No use no-cache si el recurso cambia y la actualización es importante, pero si aún desea obtener algunos de los beneficios respecto a la velocidad del almacenamiento en caché. El navegador seguirá almacenando en el caché un recurso que está configurado como no-cache pero primero efectuará una verificación con el servidor para garantizar que el recurso aún esté actualizado.

No siempre es bueno que la duración del caché sea por tiempo prolongado. En última instancia, depende de usted decidir cuál será la duración óptima del caché para sus recursos.

Hay muchas directorios por personalizar conforme el caché del navegador almacene diferentes recursos. Obtenga más información sobre el almacenamiento de los recursos en el caché en El caché HTTP: su guía sobre la primera línea de defensa y Cómo configurar el codelab de comportamiento para el almacenamiento HTTP.

# Cómo verificar las respuestas que se almacenan en el caché de Chrome DevTools

Para conocer los recursos que obtiene el navegador a partir de su caché, abra la pestaña Network en Chrome DevTools:

1. Press Control+Shift+J (or Command+Option+J on Mac) to open DevTools.
2. Click the Network tab.

El tamaño de la columna en Chrome DevTools puede ayudarle a verificar que un recurso se almacenó en el caché:

Chrome publica los recursos más solicitados desde la memoria caché, que es muy rápida, pero se borra cuando se cierra el navegador.

Para verificar que el encabezado Cache-Control de un recurso se establezca como se espera, revise los datos del encabezado HTTP:

1. Haga clic en la URL de la solicitud, debajo de la columna Name en la tabla Solicitudes.
2. Haga clic en la pestaña Encabezados.

# Orientación específica del Stack

# Drupal

Establezca la Browser and proxy cache maximum age en la sección Administration > Configuration > Development de la página. Consulte Recursos sobre el rendimiento de Drupal.

# Joomla

Consulte Caché.

# WordPress

Consulte el Caché del navegador.

# Recursos

• Código fuente para la auditoría: Cómo publicar activos estáticos con Políticas eficientes para el caché
• Requisitos para especificar los controles del caché
• Control del caché (MDN)