El almacenamiento en caché HTTP puede acelerar el tiempo de carga de la página en visitas repetidas.
Cuando un navegador solicita un recurso, el servidor que proporciona el recurso puede indicarle al navegador por cuánto tiempo debe almacenar o almacenar en caché temporalmente el recurso. Para cualquier solicitud posterior de ese recurso, el navegador usa su copia local en lugar de obtenerla de la red.
Cómo falla la auditoría de la política de caché de Lighthouse
Faro marca todos los recursos estáticos que no se almacenan en caché:
Lighthouse considera que un recurso puede almacenarse en caché si se cumplen todas las siguientes condiciones:
- El recurso es una fuente, una imagen, un archivo multimedia, una secuencia de comandos o una hoja de estilo.
- El recurso tiene un código de estado HTTP
200,203o206. - El recurso no tiene una política explícita de no caché.
Cuando una página no pasa la auditoría, Lighthouse enumera los resultados en una tabla con tres columnas:
| URL | La ubicación del recurso que puede almacenarse en caché |
| TTL de caché | La duración actual de la caché del recurso |
| Tamaño de transferencia | Una estimación de los datos que guardarían los usuarios si el recurso marcado se hubiera almacenado en caché |
Cómo almacenar en caché recursos estáticos con almacenamiento en caché HTTP
Configura tu servidor para que muestre el encabezado de respuesta HTTP Cache-Control:
Cache-Control: max-age=31536000
La directiva max-age le indica al navegador cuánto tiempo debe almacenar en caché el recurso en segundos.
En este ejemplo, se establece la duración en 31536000, que corresponde a 1 año:
60 segundos × 60 minutos × 24 horas × 365 días = 3,1536,000 segundos.
Deberías almacenar en caché recursos estáticos inmutables como un año o más.
Usa no-cache si el recurso cambia y la actualidad es importante.
pero quieres obtener algunos
de los beneficios de velocidad del almacenamiento en caché.
El navegador aún almacena en caché un recurso configurado como no-cache
pero verifica primero con el servidor
para asegurarse de que el recurso aún esté actualizado.
Una duración más larga de la caché no siempre es mejor. En última instancia, depende de ti decidir cuál es la duración óptima de la caché para tus recursos.
Existen muchas directivas para personalizar el modo en que el navegador almacena en caché los diferentes recursos. Obtén más información sobre el almacenamiento en caché de recursos en La caché HTTP: tu guía de primera línea de defensa y Cómo configurar el comportamiento del almacenamiento en caché HTTP.
Cómo verificar las respuestas almacenadas en caché en las Herramientas para desarrolladores de Chrome
Para ver los recursos que obtiene el navegador de su caché, haz lo siguiente: Abre la pestaña Red en las Herramientas para desarrolladores de Chrome:
[comentario]: <> (La siguiente lista era un código corto de web.dev, pero no estaba traducido del inglés a ningún idioma).
1. Presiona Control+Shift+J (o Command+Option+J en Mac) para abrir Herramientas para desarrolladores.
2. Haz clic en la pestaña Red.
La columna Size de las Herramientas para desarrolladores de Chrome puede ayudarte a verificar que se almacenó en caché un recurso:
Chrome entrega los recursos más solicitados de 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 esté configurado como se espera, haz lo siguiente:
verifica los datos de su encabezado HTTP:
- Haz clic en la URL de la solicitud, en la columna Nombre de la tabla Solicitudes.
- Haz clic en la pestaña Encabezados.
Cache-Control a través de la pestaña Headers.
Orientación específica de la pila
Drupal
Establece el tiempo máximo de caché del navegador y del proxy en Administración > Configuración > Desarrollo. Consulta los recursos de rendimiento de Drupal.
Joomla
Consulta Caché.
WordPress
Consulta Almacenamiento en caché del navegador.