El almacenamiento en caché HTTP puede acelerar el tiempo de carga de tu página en visitas repetidas.
Cuando un navegador solicita un recurso, el servidor que lo proporciona puede indicarle al navegador por cuánto tiempo debe almacenar o almacenar en caché el recurso de forma temporal. En el caso de cualquier solicitud posterior para ese recurso, el navegador usa su copia local en lugar de obtenerla de la red.
Cómo falla la auditoría de políticas de caché de Lighthouse
Lighthouse marca todos los recursos estáticos que no están almacenados en caché:
Lighthouse considera que un recurso puede almacenarse en caché si se cumplen todas las condiciones siguientes:
- 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 se puede almacenar 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 tus usuarios si el recurso marcado se hubiera almacenado en caché |
Cómo almacenar en caché recursos estáticos mediante el almacenamiento en caché de 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 el recurso en caché 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 = 31536000 segundos.
Debes almacenar en caché elementos estáticos inmutables durante mucho tiempo, como un año o más.
Usa no-cache si los recursos cambian y la actualización es importante, pero igualmente quieres obtener algunos de los beneficios de velocidad del almacenamiento en caché.
El navegador almacena en caché un recurso configurado como no-cache, pero primero verifica con el servidor para asegurarse de que el recurso siga estando actualizado.
Una duración de caché más larga 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 la forma en que el navegador almacena en caché diferentes recursos. Obtén más información para almacenar recursos en caché en La caché HTTP: tu primera línea de defensa y en el codelab Configura el comportamiento del almacenamiento en caché HTTP.
Cómo verificar las respuestas almacenadas en caché en las Herramientas para desarrolladores de Chrome
Para ver qué recursos obtiene el navegador de su caché, 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 haya almacenado un recurso en caché:
Chrome entrega los recursos más solicitados de la memoria caché, lo cual es muy rápido, pero se borra cuando se cierra el navegador.
Para verificar que el encabezado Cache-Control de un recurso esté configurado como se espera, verifica sus datos del encabezado HTTP:
- Haz clic en la URL de la solicitud, en la columna Nombre de la tabla Requests.
- Haz clic en la pestaña Encabezados.
Cache-Control mediante la pestaña Headers
Orientación específica para pilas
Drupal
Establece el tiempo máximo de caché del navegador y proxy en la página Administración > Configuración > Desarrollo. Consulta los recursos de rendimiento de Drupal.
Joomla
Consulta Caché.
WordPress
Consulta Almacenamiento del navegador en caché.