Cómo servir activos estáticos con una política de caché eficiente

Sitios web como GTMetrix y Google PageSpeed ​​Insights brindan sugerencias sobre cómo mejorar el rendimiento de su sitio web. Si está leyendo esto, al menos es consciente de que cada sitio web tiene oportunidades para mejorar el rendimiento, ya sea mediante optimizaciones manuales o mediante el uso de complementos como 10Web Booster.

En ambas herramientas, puede ver una sugerencia paraservir activos estáticos con una política de caché eficiente .Esta sugerencia es almacenar archivos localmente para que las visitas repetidas al sitio sean más rápidas. Los pasos para mejorar esta recomendación no mejoran la visita inicial al sitio (hay otras mejoras para eso). Aún así, todas las visitas posteriores se beneficiarán del aprovechamiento de la memoria caché del navegador.

Cabe señalar que la sugerencia de servir activos estáticos con una política de caché eficiente también se conoce como aprovechar el almacenamiento en caché del navegador o el almacenamiento en caché del navegador en WordPress.

Este artículo explica cómo servir activos estáticos con una política de caché eficiente y cómo una política de caché eficiente puede mejorar el rendimiento de su sitio web.

Al usar GTMetrix, la sugerencia se verá como el siguiente ejemplo en la página de resultados. Destacará los ahorros potenciales de implementar el almacenamiento en caché del navegador.

En Google PageSpeed ​​Insights, la sugerencia tiene un aspecto similar y brinda información similar.

Las sugerencias son similares porque GTMetrix y PageSpeed ​​Insights usan la herramienta Lighthouse para su marco de análisis de páginas web. Lighthouse es una herramienta de código abierto destinada a mejorar el rendimiento del sitio y puede ejecutarse en muchos formatos diferentes.

Tomemos un momento para refrescarnos rápidamente y recordar cómo se mide el rendimiento de un sitio web mediante una colección de métricas, la más importante de las cuales es Core Web Vitals.

Aquí hay un resumen:

• Pintura con contenido más grande ( LCP ): la medida de cuánto tiempo tarda el objeto más grande en cargarse en la ventana gráfica de la página.
• First Input Delay ( FID ): mide la capacidad de respuesta del sitio web. Mide el tiempo entre que el usuario hace clic o interactúa con el sitio y el sitio responde.
• Cambio de diseño acumulativo ( CLS ): mide cuánto cambia inesperadamente el diseño de una página.

Una forma de tener un impacto positivo tanto en LCP como en FID es servir activos estáticos con una política de caché eficiente, lo que significa que el navegador sabe que puede almacenar localmente un recurso durante un cierto período de tiempo.

Una política de caché eficiente significará tiempos de carga más rápidos porque no importa cuán rápida sea su velocidad de Internet, la carga desde un caché local será más rápida y ahorrará tiempo.

Hay algunos componentes, así que hablemos de ellos con más detalle.

Cómo servir activos estáticos con una política de caché eficiente

Para comprender cómo brindar recursos estáticos con una política de caché eficiente, primero debemos comprender los diferentes aspectos, como los recursos estáticos, el almacenamiento en caché y una política de almacenamiento en caché. Vamos a desglosarlos aquí.

¿Qué son los activos estáticos?

Los activos estáticos son archivos. Cuando nos referimos a activos estáticos en este artículo, nos referimos a archivos individuales que no se espera que cambien pronto o con frecuencia.

Los archivos como imágenes, javascript, archivos CSS y fuentes son archivos que podrían considerarse activos estáticos. Con respecto a WordPress, estos archivos CSS, javascript e imágenes y fuentes generalmente serían parte de un tema, un complemento o contenido de usuario.

Los archivos y las páginas que se generan dinámicamente no se consideran activos estáticos. Un ejemplo de esto dentro de WordPress serían las páginas estáticas generadas por los complementos de almacenamiento en caché. Esto se desarrolla en la siguiente sección.

¿Qué es el almacenamiento en caché?

El almacenamiento en caché es el proceso de almacenar respuestas en un caché para que la próxima vez que se haga la misma pregunta, la respuesta se pueda devolver más rápido.

Artículos relacionados

¿Cómo borrar el caché de WordPress de forma segura y eficiente?

Encuentre el mejor complemento de almacenamiento en caché de WordPress con nuestras 5 mejores selecciones

Si ha trabajado anteriormente con complementos de almacenamiento en caché de WordPress, es posible que esté familiarizado con el almacenamiento en caché de página completa. El almacenamiento en caché de páginas es diferente del almacenamiento en caché de activos estáticos.

Almacenamiento en caché de páginas frente a almacenamiento en caché de activos estáticos

Este artículo analiza específicamente el almacenamiento en caché de activos (archivos) estáticos. Esto no debe confundirse con el almacenamiento en caché de página completa, que almacena las páginas generadas para su uso posterior.

Tanto el almacenamiento en caché de páginas como el almacenamiento en caché de archivos ayudan a mejorar el rendimiento de un sitio. Cuando hablamos del almacenamiento en caché de activos estáticos, nos referimos a activos específicos como javascript, CSS y archivos de imagen.

El almacenamiento en caché de la página almacena los resultados de una página de WordPress generada dinámicamente y reserva esa versión durante un período de tiempo específico. Los cachés de página generalmente se almacenan en un servidor o red perimetral, como una CDN, y los activos estáticos se almacenan localmente en la máquina del usuario.

El almacenamiento en caché con respecto a cómo servimos activos estáticos con una política de caché eficiente significa decirle al navegador cuánto tiempo puede almacenar un recurso localmente en el navegador antes de tener que volver a descargarlo.

¿Qué hace que un activo estático se pueda almacenar en caché?

Según GTMetrix, un activo se puede almacenar en caché si cumple con los siguientes requisitos:

• Es una fuente, CSS, javascript o archivo multimedia.
• Devuelve un código de estado HTTP 200, 203 o 206
• No tiene una política explícita de no caché.

¿Qué es una política de almacenamiento en caché?

Hemos analizado qué es un activo estático y qué significa almacenar en caché un activo.

Los términos frescura y obsoleto se pueden usar aquí para describir el estado de un archivo almacenado en caché. Si un archivo está bien para ser extraído de la memoria caché, podría llamarse fresco . Cuando caduca, se llamaría obsoleto .

Una política responderá preguntas como por cuánto tiempo se considera que un archivo está actualizado y cómo comprobar que un archivo está actualizado. La política establece que debemos verificar con el servidor solo después de un período de tiempo específico o informarnos para verificar con el servidor en cada solicitud, pero solo volver a descargar el archivo si ha cambiado.

Algunos términos más que será bueno entender antes de seguir avanzando.

¿Cómo se ven afectados UX y SEO por una política de caché?

La experiencia del usuario (UX) y la optimización de motores de búsqueda (SEO) están estrechamente unidas. Según Google, los estudios muestran que los usuarios se preocupan por la capacidad de respuesta del sitio, por lo que Google clasifica más alto las páginas de capacidad de respuesta.

Si los activos estáticos se almacenan en caché de manera efectiva, la página se procesará más rápido debido al tiempo reducido que lleva cargar estos activos. La reducción de tiempo conduce a mejoras en los principales elementos vitales de la web, como LCP y FID y, en última instancia, a una clasificación más alta en los motores de búsqueda.

Puede leer más sobre cómo los datos vitales básicos de la web impactan en la clasificación de la página aquí.

Cómo arreglar el servicio de activos estáticos con un problema de política de caché eficiente

Reparar manualmente

Servir activos estáticos con una política de caché eficiente no es una configuración específica de WordPress, puede configurarlo manualmente modificando el archivo de configuración de su servidor web o usar un complemento como el alojamiento 10Web Booster para asegurarse de que su sitio esté configurado con configuraciones de almacenamiento en caché optimizadas.

Esta sección cubrirá la edición de los archivos de configuración de un servidor web directamente para habilitar el control de caché y los encabezados HTTP caducados en sus servidores, de modo que cuando sirva activos estáticos, aplique encabezados HTTP en la respuesta.

Cuando se solicita un recurso, el servidor web responde con el recurso y alguna información adicional en lo que se denomina encabezados HTTP. Piense en los encabezados HTTP como metadatos sobre la conexión. En el caso del almacenamiento en caché, los encabezados HTTPCache-ControlyExpirescontrolan cómo almacenamos en caché un activo.

El encabezado de control de caché contiene instrucciones sobre si y/o cómo almacenar en caché el activo estático. Hay muchas directivas para el control de caché, así que comprendamos algunas de las más populares.

Estos son algunos ejemplos de cómo puede verse un encabezado de control de caché.

Ejemplo: almacenar en caché un activo durante siete días
Cache-Control: max-age=604800

Ejemplo: se puede almacenar en un caché compartido hasta por siete días
Cache-Control: public, max-age=604800

Ejemplo: Puede almacenarse, pero debe revalidarse en cada solicitud
Cache-Control: no-cache

Ejemplo: no se puede almacenar en caché
Cache-Control: no-store

El encabezado de control de caché es más nuevo y tiene más opciones, pero en el caso de que no se admita el control de caché, el encabezado HTTP expira realiza la misma tarea de encabezado e indica cuánto tiempo es válido un activo antes de necesitar revalidación. (Tenga en cuenta que la directiva max-age en el encabezado Cache-Control tiene prioridad sobre Expires)
Expires: Wed Feb 13 21:01:38 CST 2023

Modificar la configuración de un servidor directamente

Primero, veamos la “manera difícil” para que entendamos qué sucede cuando usamos otras herramientas y servicios que nos facilitan las cosas.

apache

En el servidor Apache HTTP, el siguiente fragmento podría agregarse a una definición de sitio o un archivo .htaccess.

Al explicar este fragmento, dice que cualquier activo donde la extensión coincida con .ico o .pdf, etc. tendrá el encabezado Cache-Control establecido para el activo.

<filesMatch ".(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$">
    Header set Cache-Control "max-age=3600, public"
</filesMatch>

Con Apache, muchos proveedores de alojamiento le darán la opción de agregar directivas a un archivo .htaccess. Tenga en cuenta que si bien esta es una manera fácil de agregar a la configuración del servidor, se sabe que el uso de archivos .htaccess produce impactos negativos en el rendimiento a nivel del servidor.

Nginx

En Nginx, este fragmento se puede agregar a un bloque de servidor.

Al explicar este fragmento, dice que cualquier recurso en el que la extensión coincida con .ico o .pdf, etc., tendrá establecidos los encabezados de control de caché y caducidad.

location ~* \.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf)$ {
    expires 1h;
    add_header Cache-Control "public, no-transform";
}

Tanto para Apache como para Nginx, mostramos cómo modificar/agregar encabezados. Estamos mostrando los encabezados particulares que usamos para el almacenamiento en caché, pero el método se puede usar para cualquier otra forma de almacenamiento en caché.

Arreglar con un complemento de WordPress

Si lo anterior parece mucho, es porque lo es. Modificar las configuraciones del servidor y mantenerse actualizado sobre los cambios manuales requiere mucho tiempo y es propenso a errores.

El plan gratuito 10Web Booster puede configurar Apache para agregar encabezados para activos estáticos y también agrega encabezados para páginas web en caché. Si aún no está utilizando el alojamiento 10Web y su host usa Apache, esta es una excelente manera de comenzar a implementar una política de caché eficiente.

Si necesita más opciones o más control sobre los encabezados HTTP, puede usar 10Web Booster Pro. 10Web Booster Pro aprovecha su Cloudflare. Cuando usa Cloudflare, agrega los encabezados de control de caché a sus activos estáticos y páginas en caché. Esto evita cualquier configuración o restricción del servidor porque sus visitantes reciben los archivos directamente de Cloudflare.

Lo que hace que el complemento 10Web Booster sea la mejor opción aquí es que hace todo esto y lo hace automáticamente. No necesita administrar ninguna configuración de servidor o archivos .htaccess.

Alternativamente, si usa 10Web Hosting, implementa automáticamente el almacenamiento en caché y no necesita preocuparse por agregar encabezados para activos estáticos.

¿Aún no puede solucionar el problema? Pruebe estos dos consejos

Si implementó los pasos anteriores y aún ve que los activos estáticos del servicio con una política de caché eficiente aún aparecen en sus informes, aquí hay algunas cosas más que puede probar.

Verificación de archivos almacenados en caché

Si GTMetrix y PageSpeed ​​aún informan que debe servir activos estáticos con una política de caché, es posible que desee verificar que su implementación realmente haya realizado los cambios esperados.

En la mayoría de los navegadores, hay una manera fácil de verificar si los archivos provienen de un caché o no.

En Chrome, en vista y Desarrollador, seleccione Herramientas para desarrolladores:

En la pestaña Red, podrá identificar los archivos que provienen de (caché de disco) o (caché de memoria). La diferencia entre el disco y la caché de memoria es que la memoria desaparece cuando se cierra el navegador y el disco persiste cuando se cierra el navegador.

Aumente el tiempo de caché

De acuerdo con las estadísticas de Lighthouse, una política de caché eficiente es aquella que tiene una alta proporción de aciertos y errores de caché, lo que significa que la mayoría de los activos estáticos tienen una edad máxima o caducan establecidos. Para sitios que están en producción o que no cambian con frecuencia, se recomienda una antigüedad máxima de tres meses a incluso un año.

Recomiendan comenzar una política de alrededor de tres meses (alrededor de 7890000 segundos), si ya ha configurado esto, podría valer la pena aumentar la edad máxima a un año o más si su sitio está activo.

Conclusión

Ser capaz de servir activos estáticos con una política de caché eficiente trae mejoras de velocidad al rendimiento de su sitio web.

Este artículo cubrió qué son los activos estáticos, qué son los encabezados HTTP y analizó cómo habilitar y verificar que los encabezados de almacenamiento en caché estén en su lugar.

Analizamos los aspectos prácticos de habilitar manualmente los encabezados modificando las configuraciones del servidor y cómo podemos hacerlo más fácil usando un complemento de WordPress como 10Web Booster y aprovechando la integración de 10Web con Cloudflare para tener acceso para configurar los encabezados HTTP de control de caché.

10Web Booster es mucho más que un complemento de almacenamiento en caché. Puede leer más sobre las muchas características de optimización de velocidad y almacenamiento en caché en este artículo de 10Web Booster .

Preguntas más frecuentes