Cómo servir activos con una política de caché eficiente en WordPress Cómo aplicar la política de caché eficiente en los activos de WordPress

¿Te has preguntado alguna vez por qué tu sitio WordPress parece lento a pesar de tus mejores esfuerzos? El secreto podría estar en cómo estás sirviendo tus activos.

Cuando los navegadores no almacenan y recuperan archivos como imágenes, CSS y JavaScript de forma eficiente, pueden producirse retrasos innecesarios y una experiencia de usuario deficiente. Por eso necesitamos un almacenamiento en caché eficiente para acelerar tu sitio y proporcionar una experiencia de usuario sin interrupciones.

Sin duda, el almacenamiento en caché puede parecer un laberinto tecnológico, pero ¿y si te dijéramos que hay un camino directo a través de él?

En esta guía, te guiaremos a través de los pasos esenciales para servir activos con una política de caché eficiente en WordPress.

Empecemos.

Comprender los Activos Estáticos y el Almacenamiento en Caché

Los activos estáticos y el almacenamiento en caché son dos aspectos fundamentales del desarrollo web para mejorar el rendimiento del sitio, los tiempos de carga y la experiencia del usuario. De hecho, borrar la caché puede proporcionar a tu sitio un aumento instantáneo del rendimiento. Consulta nuestra guía para aprender "cómo borrar eficazmente la caché de WordPress."

Gestionando adecuadamente los activos estáticos y aplicando estrategias eficaces de almacenamiento en caché, los sitios web pueden ofrecer contenidos de forma más eficiente, lo que contribuye a la satisfacción general del usuario y a la clasificación SEO.

Entendamos ambas cosas con más detalle.

¿Qué son los activos estáticos?

Los activos estáticos son archivos como imágenes, hojas de estilo CSS y scripts JavaScript que permanecen inalterados a lo largo del tiempo. Estos archivos son cruciales para los aspectos visuales y funcionales de un sitio web, y se entregan a los navegadores de los usuarios exactamente como se almacenan en el servidor.

¿Qué es el almacenamiento en caché?

El almacenamiento en caché es una técnica utilizada para guardar copias de archivos o datos en una ubicación de almacenamiento temporal, de modo que las futuras peticiones de esos datos puedan ser atendidas más rápidamente.

Aunque se pueden utilizar varios tipos de técnicas de almacenamiento en caché para mantener la relevancia del blog, describiré dos tipos de almacenamiento en caché: el almacenamiento en caché de página y el almacenamiento en caché estático.

Caché de página vs. Caché estático de activos

El almacenamiento en caché de páginas implica almacenar una versión completa renderizada de una página web, mientras que el almacenamiento en caché de activos estáticos almacena archivos individuales como imágenes y hojas de estilo.

El almacenamiento en caché de páginas es beneficioso para sitios dinámicos con contenido que no cambia con frecuencia, mientras que el almacenamiento en caché de activos estáticos es crucial para que todos los sitios web reduzcan los tiempos de carga y el uso del ancho de banda del servidor.

Consulta la tabla siguiente para ver una comparación detallada de la caché de páginas y la caché de activos estáticos:

¿Qué hace que un activo estático sea almacenable en caché?

Los activos estáticos se consideran almacenables en caché cuando no cambian con frecuencia y pueden ser almacenados por un navegador o una CDN para su reutilización en múltiples cargas de página. Las imágenes, los archivos CSS, los archivos JavaScript y las fuentes son ejemplos comunes de activos estáticos.

Para que un activo sea almacenable en caché, debe tener las cabeceras de caché HTTP adecuadas, como Cache-Control y Expires, que indican al navegador cuánto tiempo debe almacenarse el activo.

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

Una política de almacenamiento en caché es un conjunto de reglas definidas por cabeceras HTTP que dictan cómo y durante cuánto tiempo los navegadores y las cachés intermedias deben almacenar un recurso concreto. Una política de almacenamiento en caché bien definida ayuda a reducir los tiempos de carga, la carga del servidor y el uso de ancho de banda.

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

Una política de almacenamiento en caché sólida afecta directamente tanto a la experiencia del usuario (UX) como a la optimización para motores de búsqueda (SEO). Los tiempos de carga más rápidos, resultantes de un almacenamiento en caché eficaz, conducen a una experiencia de usuario más fluida y receptiva. Esto es crucial, ya que es probable que los usuarios abandonen un sitio si tarda demasiado en cargarse.

En cuanto al SEO, la velocidad del sitio es un factor de clasificación conocido para Google. Los sitios web más rápidos se ven favorecidos en las clasificaciones de los motores de búsqueda, lo que aumenta su visibilidad y, potencialmente, su tráfico.

Cómo comprobar si el caché del navegador está activado en tu sitio web

Cómo aprovechar la caché de navegador en tu sitio WordPress puede mejorar el rendimiento de tu sitio, así como resolver el problema de los activos estáticos. Para comprobar si el almacenamiento en caché del navegador está activado en tu sitio, puedes utilizar las herramientas de desarrollo del navegador o herramientas en línea como PageSpeed Insights de Google.

Para ello

• En tu navegador, haz clic con el botón derecho del ratón > Inspeccionar.
• Ve a la pestaña Red y comprueba si las cabeceras Cache-Control y Expires están correctamente configuradas.

PageSpeed Insights de Google proporciona una interfaz más fácil de usar, analizando el rendimiento de tu sitio y señalando explícitamente qué activos necesitan optimizaciones de caché.

Identificar el problema "Servir activos estáticos con una política de caché eficiente

El problema "Servir activos estáticos con una política de caché eficiente" se pone de manifiesto en las herramientas de rendimiento de sitios web cuando los recursos estáticos no se almacenan en caché de forma efectiva, lo que provoca tiempos de carga del usuario más largos.

Para identificar el problema, necesitamos comprender dos cosas principales:

• Uno: la causa del problema
• Dos: Cómo PageSpeed Insights interpreta el problema.

Causas del problema

Éstas son las principales causas del problema.

Falta de política de caché

Esto ocurre cuando los activos estáticos de un sitio web, como imágenes, JavaScript o archivos CSS, no se sirven con las cabeceras de control de caché adecuadas. Sin estas cabeceras, los navegadores no almacenan en caché estos recursos, lo que provoca descargas innecesarias y un aumento de los tiempos de carga para los visitantes que vuelven.

Corta duración de la caché

Incluso cuando la caché está activada, una duración de caché muy corta puede provocar problemas de rendimiento similares a los de no tener caché en absoluto. Lo ideal es que los activos estáticos que no cambian con frecuencia tengan una duración de caché larga para maximizar las ventajas de rendimiento.

Políticas de caché incoherentes

Las incoherencias en las políticas de caché entre distintos tipos de activos o distintas páginas de un sitio pueden dar lugar a un comportamiento de caché subóptimo, en el que algunos activos se almacenan en caché de forma eficiente mientras que otros no.

No utilizar la caché del navegador

No aprovechar la caché del navegador significa que los navegadores de los usuarios no almacenarán copias de los activos estáticos para una recuperación más rápida en visitas posteriores, lo que puede ralentizar significativamente el rendimiento del sitio web.

Nota: Aprende a aprovechar la caché del navegador para servir activos estáticos.

Mala configuración general

Esto puede incluir varios problemas, como cabeceras de control de caché incorrectas, ajustes del servidor mal configurados o problemas con el archivo .htaccess del sitio web (en el caso de servidores Apache).

¿Cómo interpreta PageSpeed Insights este problema?

He aquí cómo PageSpeed Insights interpreta esta cuestión:

• En primer lugar, analiza las cabeceras de los activos estáticos servidos desde tu sitio web.
• A continuación, examina las cabeceras cache-control y expires para determinar durante cuánto tiempo los navegadores almacenan en caché cada activo.
• Si la herramienta detecta que estos recursos tienen un TTL (Time To Live) de caché corto o no se almacenan en caché en absoluto, señala el problema y ofrece recomendaciones para mejorarlo.

Así, averiguando la causa, puedes solucionar el problema estratégicamente.

Soluciones para servir activos con políticas de caché eficientes

Para ayudarte a servir activos con una política de caché eficiente, cubriremos dos enfoques que te ayudarán a mejorar el rendimiento de las aplicaciones web.

1. Enfoque manual
2. Enfoque Plugin

Método manual

Veamos primero cómo solucionar este problema manualmente.

Paso 1: Identificar los activos estáticos

En primer lugar, debes identificar qué activos estáticos se están sirviendo sin una política de caché o con una ineficiente. Puedes hacerlo siguiendo los pasos que se indican a continuación:

• Ve a Google Pagespeed Insights.
• Introduce tu URL.
• En la sección de diagnósticos, puedes ver los recursos en 'servir activos estáticos con una política de caché eficiente'.
• Despliégalos para identificar los activos estáticos. En mi caso, encontré 35 recursos después de ejecutar la prueba.

Paso 2: Configurar las cabeceras HTTP

A continuación, debes configurar tu servidor para incluir cabeceras HTTP específicas que indiquen al navegador cuánto tiempo debe almacenar en caché los activos estáticos. Las principales cabeceras en las que debes centrarte son Cache-Control y, opcionalmente, Expires.

Debes configurar las cabeceras HTTP de forma diferente para los distintos servidores.

Si tu servidor ejecuta Apache, añade las siguientes líneas a tu archivo .htaccess:

<IfModule mod_expires.c>

ExpiresActive On

# Images

ExpiresByType image/jpeg "access plus 1 year"

ExpiresByType image/png "access plus 1 year"

ExpiresByType image/gif "access plus 1 year"

ExpiresByType image/webp "access plus 1 year"

ExpiresByType image/svg+xml "access plus 1 year"

# Fonts

ExpiresByType font/ttf "access plus 1 year"

ExpiresByType font/woff "access plus 1 year"

ExpiresByType font/woff2 "access plus 1 year"

# CSS, JavaScript

ExpiresByType text/css "access plus 1 month"

ExpiresByType application/javascript "access plus 1 month"

# Others

ExpiresDefault "access plus 2 days"

</IfModule>

If your server is running Nginx, add the following lines to your server block configuration:

location ~* \.(jpg|jpeg|png|gif|webp|svg|ttf|woff|woff2|css|js)$ {

expires 1y;

add_header Cache-Control "public, max-age=31536000, immutable";

}

location ~* \.(zip|pdf)$ {

expires 7d;

add_header Cache-Control "public, max-age=604800";

}

Paso 3: Prueba las configuraciones

Tras actualizar la configuración del servidor, debes borrar la caché de tu servidor (si procede) y probar la configuración:

• Visitando tu sitio web en un navegador.
• Abre las Herramientas de desarrollo del navegador ( botón derecho → Inspeccionar).
• Ve a la pestaña Red.
• Recarga la página.
• Haz clic en un activo estático en la pestaña Red y busca la cabecera Cache-Control en la sección de cabeceras.

Paso 4: Volver a ejecutar las pruebas de rendimiento

Vuelve a utilizar herramientas como Google PageSpeed Insights, Lighthouse o WebPageTest para asegurarte de que el problema se ha resuelto y para comprobar si se ha producido alguna mejora en la puntuación de rendimiento.

• Después de ajustar la configuración, el número de recursos se redujo de 35 a 29.

Método Plugin

Puedes solucionar el problema de "servir activos estáticos con una política de caché eficiente" fácilmente utilizando el plugin de caché. Consulta nuestra lista de mejores plugins de caché para WordPress.

He aquí cómo...

Plugin Breeze

A efectos de demostración, utilizaré Brisa Plugin. El plugin Breeze está desarrollado por Cloudways, y todos los usuarios de Cloudways obtienen este plugin por defecto.

• Primero, instala y activa el plugin.
• Ve a configuración > Activar el almacenamiento en caché del navegador

Esto debería solucionar el problema. Más información sobre la configuración del plugin Breeze en guía.

Plugin W3 Total Cache

Como ya hemos comentado, la mayoría de los plugins de caché te permiten servir activos estáticos. A continuación te explicamos cómo servir activos estáticos con el plugin W3 Total Cache.

• Descarga y activa el plugin Plugin W3 Total Cache.
• Ir a Ajustes > Caché del Navegador
• Para cada elemento CSS & JS, HTML & XML, marca el encabezado de caducidad y establece la duración del encabezado de caducidad en 31536000 segundos.

Además, consulta nuestra guía "Cómo utilizar el plugin W3 Total Cache de WordPress para conseguir sitios web más rápidos" para obtener información adicional.

Consejos para una estrategia óptima de almacenamiento en caché

Aunque ya hemos visto cómo puedes solucionar fácilmente el problema de "servir activos estáticos con una política de caché eficiente", necesitas una política de caché óptima para evitar este problema en primer lugar.

Aquí te ofreceré algunos consejos para optimizar tu estrategia de almacenamiento en caché:

Utiliza un proveedor de alojamiento eficaz

La elección del proveedor de alojamiento desempeña un papel importante a la hora de establecer la estrategia óptima de almacenamiento en caché. Si tienes un proveedor de alojamiento sólido, puede que no necesites hacer ningún esfuerzo adicional para establecer estrategias de almacenamiento en caché. Tu proveedor de alojamiento se encargaría de la mayoría de los aspectos del almacenamiento en caché.

Debes optar por un proveedor de alojamiento que utilice discos SSD, tenga centros de datos cercanos a tu público principal y ofrezca mecanismos de almacenamiento en caché integrados a nivel de servidor. Además, debe permitirte actualizar fácilmente los recursos durante los picos de tráfico y debe ofrecer soporte para HTTP/2 o HTTP/3.

Utilizar redes de distribución de contenidos (CDN)

Utilizar CDNs también puede solucionar el problema de "servir activos estáticos". Debes asegurarte de elegir la CDN con una amplia red de servidores en todo el mundo para entregar el contenido desde la ubicación más cercana al usuario.

Además, debes asegurarte de que tu CDN está configurada para respetar las cabeceras de caché de tu servidor de origen o establecer políticas de caché adecuadas a nivel de CDN.

Si utilizas Cloudflare CDN, puedes jugar con las reglas de página para solucionar este problema.

• Ve al panel de control de Cloudflare
• Selecciona Caché > Configuración
• Establece el TTL de la caché del navegador en 1 año.

Si eres usuario de cloudways, puedes activar el complemento Cloudflare Enterprise con un solo clic y activar la opción de caché para solucionar el problema de "servir activo estático".

Aprovechando la integración de Cloudflare en Cloudways con un solo clic, tienes el poder de mejorar el rendimiento y la seguridad de tu sitio web sin esfuerzo. Al habilitar Cloudflare, puedes solucionar el problema de "servir activos estáticos con una política de caché eficiente", garantizando que el contenido estático de tu sitio web se entregue de forma rápida y eficiente a tus usuarios.

Retraso del código de terceros

Como todos sabemos, los códigos de terceros son los verdaderos culpables de los tiempos de carga lentos y, por tanto, del problema de los activos estáticos.

Por tanto, tenemos que retrasar el código de terceros. Podemos hacerlo de la siguiente manera

• Utilizando atributos async o defer o scripts no esenciales para evitar que bloqueen el hilo principal. Puedes hacerlo simplemente añadiendo atributos async y deferring a la etiqueta script.
• Puedes añadir un atributo async colocando la siguiente línea en tu archivo HTML bajo la etiqueta script.

<script async src="https://www.cloudways.com/blog/serve-static-assets-with-an-efficient-cache-policy/path-to-your-script.js"></script>

• Puedes añadir el atributo Aplazar colocando la siguiente línea en tu archivo HTML bajo la etiqueta script.

<script defer src="https://www.cloudways.com/blog/serve-static-assets-with-an-efficient-cache-policy/path-to-your-script.js"></script>

• Utilizando adecuadamente los atributos async y defer, puedes optimizar el rendimiento de carga de tu sitio web, proporcionando una experiencia más rápida y fluida a tus usuarios.

Alojar fuentes y analíticas localmente

Utilizar fuentes externas puede ralentizar el sitio web, y podrías enfrentarte al problema de los activos estáticos. Para evitarlo, descarga y sirve las fuentes directamente desde tu servidor en lugar de depender de proveedores de fuentes externos. Para ello,

• Primero, descarga los archivos de fuentes de Google Fonts.

• Sube las fuentes a tu servidor. Puedes utilizar FTP para ello. Arrastra y suelta el archivo de fuentes en tu sitio remoto.

• Crea un archivo CSS que defina reglas @font-face para especificar cómo deben mostrarse las fuentes.

f

ont-family: 'YourFontName';

src: url('/path-to-your-font-directory/your-font-file.woff2') format('woff2'),

url('/path-to-your-font-directory/your-font-file.woff') format('woff'),

url('/path-to-your-font-directory/your-font-file.ttf') format('truetype'),

url('/path-to-your-font-directory/your-font-file.otf') format('opentype');

font-weight: normal;

font-style: normal;

}

• Sustituye 'TuNombreDeFuente' por un nombre para tu fuente, y sustituye /ruta-a-tu-directorio-de-fuentes/tu-archivo-de-fuentes por la ruta y el nombre reales de tus archivos de fuentes.
• Ahora configura tu servidor web para que sirva archivos de fuentes.
• Si utilizas Apache, añade estas líneas a tu archivo .htaccess.

AddType font/woff2 .woff2

AddType font/woff .woff

AddType font/ttf .ttf

AddType font/otf .otf

• Si utilizas Nginx, añade estos archivos al bloque de tu servidor.

location ~* \.(ttf|otf|woff|woff2)$ {

add_header Access-Control-Allow-Origin *;

}

• Incluye el archivo CSS que creaste anteriormente en tus documentos HTML. Puedes hacerlo añadiendo un enlace al archivo CSS en la sección <head> de tu HTML:

<link rel="stylesheet" href="https://www.cloudways.com/path-to-your-css-directory/your-font-stylesheet.css">

Desactivar las funciones de Cloudflare

Algunas de las funciones de Cloudflare pueden aumentar la presión sobre el sitio web e incrementar los tiempos de carga. Debes desactivarlas para evitar el problema de los activos estáticos. Además, configura las reglas de página de Cloudflare para optimizar el almacenamiento en caché de los distintos tipos de contenido.

• Ve a la pestaña Velocidad de tu panel de control de Cloudflare.

• Aquí puedes activar y desactivar el Cargador Cohete según necesites.

Uso de Cloudways para la optimización del almacenamiento en caché

¿Sabías que cuando alojas tu sitio web en Cloudways, ya estás contratando la optimización de la caché?

¿Quieres saber cómo?

En un sitio WordPress alojado en Cloudways, Varnish se activa a través de la interfaz de la plataforma Cloudways, donde los usuarios pueden simplemente activarlo para su servidor. Una vez activado, Varnish funciona como un proxy inverso, interceptando las peticiones HTTP entrantes.

Para los activos estáticos como imágenes, CSS y archivos JavaScript, Varnish comprobará su caché antes de que llegue a la aplicación de WordPress en el servidor. Si el activo está almacenado en caché y no ha caducado según el tiempo de vida (TTL) configurado, servirá este activo directamente al usuario, sin necesidad de que WordPress genere la página.

Esto reduce drásticamente la carga del servidor y acelera el tiempo de respuesta, ya que el servidor web no tiene que servir esos archivos desde cero, lo que se traduce en una experiencia más rápida para el usuario final. Si el contenido no está en la caché o ha caducado, Varnish obtiene el contenido fresco del servidor, lo almacena en caché y lo sirve, asegurándose de que las siguientes peticiones se sirvan desde la caché.

Para activar Varnish, sigue estos pasos:

• Ve a la configuración de tu servidor > Gestionar Servicios
• Haz clic en "Activar" Varnish.

Además, si quieres configurar manualmente Varnish en tu sitio WordPress, consulta nuestra guía detallada sobre "WordPress con Varnish."

Nota: Comprueba también Cómo instalar y configurar Redis en tu sitio WordPress para servir tanto activos dinámicos como estáticos.

Resumen

Servir activos estáticos con una política de caché eficiente es crucial para mejorar el rendimiento y la experiencia de usuario de tu sitio web WordPress. A lo largo de esta guía, hemos navegado por la importancia del almacenamiento en caché, hemos proporcionado pasos prácticos para configurar las políticas de caché y hemos destacado las mejores prácticas para garantizar que tus activos estáticos estén optimizados para la velocidad.

Si necesitas más información, no dudes en ponerte en contacto con nosotros.

Liza Rajput

Liza Rajput es Productora de Contenidos Técnicos en Cloudways. Como ingeniera de software, le encanta jugar con los datos y sus procesos, y desea crecer y destacar en Ciencia de Datos e Ingeniería de Big Data. También es una ávida lectora y una escritora excepcional, con suficiente experiencia en escritura técnica, basada en la investigación y creativa.