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

Published on Updated on

Translated to: English, Português, 한국어, Pусский

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é:

Una captura de pantalla sobre los activos estáticos de Lighthouse Serve y una auditoría eficiente de las políticas relacionadas con 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:

URLLa ubicación del recurso que se puede almacenar en el caché
TTL del cachéEl tiempo que se almacena actualmente el recurso en el caché
TamañoUn cálculo de los datos que sus usuarios se ahorrarían si los recursos etiquetados se almacenaran en el caché.

See the Lighthouse performance scoring post to learn how your page's overall performance score is calculated.

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.

Uno de los riesgos de que la duración del caché sea por tiempo prolongado, es que los usuarios no verán las actualizaciones de los archivos estáticos. Puede evitar este problema configurando su herramienta de compilación para incrustar un hash en el nombre de los archivos de sus activos estáticos de forma que cada versión sea única, así se le solicitará al navegador que obtenga la nueva versión desde el servidor. (Para saber cómo incrustar hashes usando webpack, consulte la guía de almacenamiento en caché de webpack).

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é:

El tamaño de la columna

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.
Inspección del encabezado Cache-Control mediante la pestaña Headers
Inspección del encabezado Cache-Control mediante la pestaña Headers.

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

Last updated: Improve article

We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.