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

Una de las características de un sitio web fácil de usar es que no hace que los visitantes esperen demasiado mientras se carga. El almacenamiento en caché de activos estáticos es un paso fundamental para mejorar el rendimiento del sitio, pero no ayuda mucho simplemente configurar esto y seguir adelante. Sin una política eficiente de almacenamiento en caché de WordPress, es posible que tenga dificultades para proporcionar tiempos de carga rápidos.

Afortunadamente, aprender a aprovechar el almacenamiento en caché del navegador en WordPress es más fácil de lo que piensa. Puede configurar el almacenamiento en caché del navegador manualmente, y el Sistema de gestión de contenido (CMS) también le permite usar herramientas que lo hacen por usted.

En este artículo, explicaremos cómo funciona el almacenamiento en caché del navegador y discutiremos sus beneficios. También le mostraremos cómo verificar si el almacenamiento en caché está habilitado en su sitio y veremos diferentes formas de activarlo.

¿Qué es el almacenamiento en caché del navegador?

El almacenamiento en caché del navegador es un proceso que guarda copias de los elementos de un sitio web en su computadora. Cuando visitas un sitio web, tu navegador descarga diferentes piezas de contenido, como imágenes y texto. En lugar de descargar este contenido cada vez que visita el sitio, su navegador "caché" o almacena parte de él en caso de que lo necesite más adelante.

La próxima vez que visite el sitio, su navegador verificará qué elementos se almacenan localmente. Luego cargará estos elementos desde el caché en lugar de solicitarlos desde el servidor del sitio. Esto puede hacer que la página se cargue significativamente más rápido, según la cantidad de recursos almacenados en la memoria caché.

Si tuviera que revisar el caché de su navegador en este momento, es probable que encuentre algunos cientos de megabytes de archivos en su interior. La mayoría de los navegadores modernos le permiten ver una descripción general de los archivos almacenados en caché si accede a la configuración de privacidad.

Lo que pasa con el almacenamiento en caché es que un navegador no puede decidir hacerlo por sí solo. Para aprovechar el almacenamiento en caché del navegador en WordPress, deberá configurar su sitio web o servidor para hacerlo. Esto significa que su sitio controla qué activos almacena en caché el navegador y durante cuánto tiempo.

¿Cuáles son los beneficios de almacenar en caché activos estáticos?

El beneficio principal del almacenamiento en caché del navegador es que puede ayudar a los visitantes a cargar las páginas más rápido al regresar a su sitio. Hablamos de "activos estáticos" porque no es posible almacenar en caché todos los elementos de un sitio web.

Los activos dinámicos son elementos que cambian cada vez que carga una página. Por ejemplo, si inicia sesión en una aplicación que le muestra un feed de publicaciones en tiempo real, como Twitter o Instagram, esos activos son dinámicos.

Dado que los activos dinámicos pueden cambiar con frecuencia, es posible que almacenarlos en caché no tenga ningún propósito. Después de todo, la próxima vez que inicie sesión en Twitter o Instagram, verá publicaciones completamente nuevas.

El almacenamiento en caché proporciona los mejores resultados posibles cuando se limita a activos estáticos. Aprender a servir activos estáticos con una política de caché eficiente en WordPress puede tener varios beneficios:

• Reducir el uso de ancho de banda. Dado que los activos almacenados en caché se cargan desde el almacenamiento local, se transfieren menos datos entre el servidor y el dispositivo del visitante. Esto ayuda a los visitantes con planes de Internet limitados a ahorrar en el uso de datos.
• Disminución de la carga en su servidor. Cuando los navegadores usan activos almacenados en caché, el servidor recibe menos solicitudes de esos archivos. Esto reduce la carga de trabajo del servidor y puede ayudar a prevenir la sobrecarga del servidor durante períodos de mucho tráfico.
• Habilitación de la navegación sin conexión parcial. En algunos casos, el almacenamiento en caché de activos estáticos puede permitir que los visitantes accedan a ciertas partes de un sitio web incluso cuando no están conectados. Si el navegador ha almacenado previamente en caché los archivos necesarios, puede mostrar el contenido sin necesidad de una conexión a Internet activa.

El almacenamiento en caché de activos estáticos le permite hacer un mejor uso de los recursos del servidor y mejorar la experiencia de los visitantes. Todo esto funciona instruyendo a su servidor sobre qué activos debe indicar a los navegadores que almacenen en caché.

Cómo verificar si el almacenamiento en caché del navegador está habilitado en su sitio

La forma más fácil de verificar si un sitio web aprovecha el almacenamiento en caché es usar herramientas de desarrollador de navegador, como las que encuentra en Firefox y Google Chrome. Este enfoque requiere que mire algún código, pero no necesita ser un desarrollador para entenderlo.

Para hacer esto en Google Chrome, visite el sitio web que desea verificar, haga clic derecho en cualquier parte de la página y seleccione la opción Inspeccionar . Esto abrirá la pestaña de herramientas de desarrollador dentro del navegador, que debería verse así:

Haga clic en la pestaña Red . Si ve una lista vacía, deberá volver a cargar la página con la pestaña de herramientas para desarrolladores abierta. La pestaña Red mostrará todas las solicitudes y activos que carga el navegador al acceder a la página.

El elemento que nos interesa debe ser el primero de la lista. En nuestro caso, es Jetpack.com y contiene los encabezados de la página. Seleccione ese archivo y se abrirá una nueva pestaña a la derecha, saltando directamente a la sección Encabezados .

Algunos encabezados nos dirán si el sitio usa el almacenamiento en caché y cómo se implementa. Estos son:

• Control de caché. Este encabezado especifica directivas de almacenamiento en caché, como max-age (el tiempo máximo que un recurso se considera nuevo) o no-cache (obliga a los cachés a enviar la solicitud al servidor de origen para su validación antes de liberar una copia en caché).
• Caduca. Este encabezado proporciona una fecha y hora de vencimiento para el recurso. Después de esto, el recurso se considera obsoleto y el navegador lo revalidará.
• ETag. Este encabezado es un identificador para una versión específica de un recurso. Cuando el recurso cambia, la ETag también cambia, lo que permite a los navegadores determinar si un recurso almacenado en caché sigue siendo válido.
• Última modificación. Este encabezado indica la última fecha de modificación del recurso. Los navegadores pueden usar esta información para validar si su versión almacenada en caché aún está actualizada.

Si puede encontrar estos encabezados en el archivo, entonces el sitio web utiliza el almacenamiento en caché. Tenga en cuenta que las configuraciones de almacenamiento en caché específicas pueden variar de un sitio a otro. Algunos sitios pueden indicar a los navegadores que almacenen archivos estáticos durante un día, mientras que otros les indicarán que almacenen archivos durante meses o períodos más prolongados.

Cómo aprovechar el almacenamiento en caché del navegador con un complemento

La forma más fácil de aprovechar el almacenamiento en caché del navegador en un sitio de WordPress es mediante el uso de un complemento. Hay muchos complementos de almacenamiento en caché que puede usar. Una gran opción es WP Super Cache.

Una vez que haya instalado y activado WP Super Cache en su sitio, puede implementar el almacenamiento en caché utilizando varios enfoques. La forma más sencilla es ir a Configuración → WP Super Cache y seleccionar la opción Caching On junto a Caching .

La configuración predeterminada del complemento habilita el almacenamiento en caché para los visitantes que no han iniciado sesión y establece una vida útil de 30 minutos para los activos almacenados. Si desea cambiar esta configuración, deberá ir a la pestaña Avanzado .

Aquí, puede decidir para qué visitantes habilitar el almacenamiento en caché, si habilitar el almacenamiento en caché dinámico, si el complemento debe borrar el caché cuando actualice las páginas y más. El complemento lo ayuda recomendando las opciones más efectivas.

Si no tiene un conocimiento firme del almacenamiento en caché, es posible que desee seguir con la configuración predeterminada. Configurar los ajustes de almacenamiento en caché sin comprender completamente cómo funcionan puede generar problemas con su sitio web.

Cómo aprovechar el almacenamiento en caché del navegador sin un complemento

Si no desea utilizar un complemento, puede habilitar el almacenamiento en caché del navegador en su sitio web manualmente. Este proceso puede implicar el manejo del código en el servidor o en el nivel del sitio, según el método de implementación que elija.

1. Agregue los encabezados "Cache-Control" y "Expires" en NGINX

Para agregar los encabezados "Cache-Control" y "Expires" en NGINX, deberá modificar el archivo de configuración del servidor. Este archivo generalmente se llama nginx.conf y se encuentra en el directorio principal de nginx .

La forma más sencilla de conectarse al servidor de su sitio es utilizar un cliente de Protocolo de transferencia de archivos (FTP). Luego, deberá ubicar el archivo nginx.conf , que debe estar en

/etc/nginx/nginx.conf o /etc/nginx/sites-disponible/default .  

Abra el archivo con un editor de texto y busque el bloque de código del servidor dentro de nginx.conf . Aquí, vamos a agregar el siguiente bloque de código nuevo, que especifica qué archivos debe indicar el servidor a los navegadores que almacenen en caché y cuánto tiempo debe durar ese caché antes de que caduque:

 location ~* \.(jpg|jpeg|png|gif)$ {    expires 30d;    add_header Cache-Control "public, no-transform"; }

Este código incluye los encabezados "Cache-Control" y "Expires". Puede modificar tanto el rango de tiempo de caducidad como los tipos de archivo que los navegadores deben almacenar en caché.

Si no puede decidir qué tipos de archivos almacenar en caché, eche un vistazo a lo que hay en su carpeta de medios de WordPress. Todos los archivos estáticos a los que los visitantes acceden regularmente deben almacenarse en caché. En cuanto al encabezado de caducidad, 30 días suele ser un buen plazo para la mayoría de los sitios web.

Una vez que agregue el código, guarde los cambios en el archivo y salga del editor. Deberá reiniciar NGINX para aplicar los cambios.

2. Agregue los encabezados "Cache-Control" y "Expires" en Apache

El uso de los encabezados "Cache-Control" y "Expires" en Apache requiere que habilite sus módulos correspondientes. Puede habilitar estos módulos abriendo la terminal y ejecutando los siguientes comandos:

 sudo a2enmod expires sudo a2enmod headers sudo systemctl restart apache2

El comando final reiniciará Apache con ambos módulos activos. A continuación, deberá modificar el archivo de configuración de Apache, que generalmente se llama httpd.conf o apache2.conf .

Puede encontrar este archivo en /etc/httpd/conf/httpd.conf , /etc/apache2/apache2.conf , o

/etc/apache2/sites-available/000-default.conf , según la configuración del servidor.

Luego, busque el bloque <Directorio> dentro del archivo de configuración de Apache y agregue el siguiente código dentro:

 <IfModule mod_expires.c>    ExpiresActive On    ExpiresDefault "access plus 1 month"    ExpiresByType image/jpg "access plus 1 month"    ExpiresByType image/jpeg "access plus 1 month"    ExpiresByType image/gif "access plus 1 month"    ExpiresByType image/png "access plus 1 month" </IfModule> <IfModule mod_headers.c>    <FilesMatch "\.(jpg|jpeg|png|gif)$">        Header set Cache-Control "public, no-transform"    </FilesMatch> </IfModule>

La primera parte de ese código rige la configuración de caducidad de los archivos almacenados en caché. La segunda parte indica qué tipos de archivos deben almacenar en caché los navegadores. Al igual que con NGINX, puede modificar esta configuración según los archivos que desee que almacenen los navegadores.

Cuando haya terminado, guarde los cambios en el archivo de configuración de Apache y ciérrelo. Deberá reiniciar Apache para que los cambios surtan efecto.

3. Use una red de entrega de contenido (CDN)

Una red de entrega de contenido (CDN) es una red de servidores que puede usar para almacenar copias en caché de su sitio web en regiones clave. Los CDN tienden a ser servicios pagos y ayudan al servir copias en caché de su sitio desde el servidor que está geográficamente más cerca del visitante.

Este enfoque reduce la carga en sus propios servidores. Además, los CDN tienden a estar optimizados para un rendimiento de primera línea y, por lo general, se distribuyen en todo el mundo, por lo que pueden servir sitios web desde la mejor ubicación posible para cada visitante.

Jetpack CDN es una opción que se integra a la perfección con WordPress, es fácil de usar y muy eficaz.

Lo mejor de todo es que es un CDN gratuito que almacena imágenes y otros tipos de activos estáticos de su sitio web. Una vez que lo instale y active, puede habilitar el CDN yendo a Jetpack → Configuración en el panel de control de WordPress.

Luego, ubique la configuración de Rendimiento y velocidad y cambie la opción Habilitar acelerador de sitio .

4. Aloje scripts y activos de terceros localmente (siempre que sea posible)

Los scripts de terceros son elementos como código de sitios externos, píxeles de seguimiento, fuentes y otros activos que requieren carga para funcionar. Cuantos más scripts y activos cargue de fuentes de terceros, más tiempo llevará el proceso, lo que puede ralentizar su sitio.

Idealmente, debería intentar eliminar los scripts y recursos de terceros que no utiliza. Alternativamente, puede alojar código y activos en su servidor local para reducir los tiempos de carga.

Puede identificar secuencias de comandos de terceros, así como JavaScript no utilizado, utilizando PageSpeed ​​Insights. Esta herramienta destaca oportunidades para mejorar el rendimiento del sitio, incluidas listas de códigos no utilizados y scripts de terceros que se pueden eliminar de sus páginas.

Puede eliminar de forma segura cualquier secuencia de comandos de terceros no utilizada en su sitio web. Para los scripts importantes, es posible que desee considerar la opción de alojarlos localmente.

Paso final: instale un complemento gratuito para mejorar Core Web Vitals

Aprender a aprovechar el almacenamiento en caché del navegador en WordPress es un paso clave para mejorar el rendimiento del sitio. Afortunadamente, no es lo único que puede hacer para mejorar la experiencia del usuario.

Google mide la calidad de la experiencia del usuario de un sitio con un conjunto de métricas llamadas Core Web Vitals. Las métricas clave de rendimiento incluyen:

• Pintura con contenido más grande (LCP). Esta métrica mide cuánto tiempo lleva cargar el activo más grande en una página. Por lo general, es un buen indicador del tiempo de carga general de una página.
• Retardo de primera entrada (FID). Hay un retraso entre la carga de una página y que se vuelva interactiva. Puede pensar que una página ya no se carga, pero si no le permite interactuar con elementos como formularios o enlaces, es posible que tenga un FID alto.
• Cambio de diseño acumulativo (CLS) . Mientras se carga una página, su diseño puede cambiar, moviendo elementos en el navegador. Cuantos más elementos se muevan, mayor será la puntuación CLS. Idealmente, esto debería ser cero.

Hay muchas formas de mejorar Core Web Vitals en WordPress. El enfoque más fácil es usar un complemento que optimice todas las variables detrás de estas métricas.

Jetpack Boost puede ayudarlo a implementar varias estrategias para mejorar Core Web Vitals. Puede optimizar la entrega de CSS, diferir JavaScript no esencial y habilitar la carga diferida.

Por lo general, necesitará usar varios complementos para implementar estas configuraciones o hacerlo manualmente. Después de instalar y activar Jetpack Boost, simplemente puede habilitar cada configuración navegando a Jetpack → Boost y alternando las opciones correspondientes.

Preguntas frecuentes sobre el almacenamiento en caché del navegador de WordPress

Si bien hemos cubierto los aspectos esenciales del almacenamiento en caché del navegador en WordPress, es posible que aún tenga algunas preguntas sobre el proceso. Veamos algunos de los más comunes.

¿Es seguro el almacenamiento en caché del navegador?

El almacenamiento en caché del navegador es muy seguro. La mayoría de los sitios web que visita probablemente utilicen algún tipo de política de almacenamiento en caché para mejorar el rendimiento de los visitantes. Como visitante, ni siquiera lo notará a menos que busque en los encabezados del sitio web o necesite borrar el caché.

La única forma en que el almacenamiento en caché del navegador podría no ser seguro es a través de una mala implementación. Si no está configurado correctamente, los navegadores no podrán almacenar activos de la manera correcta, o es posible que una página no se cargue (aunque esto es muy raro).

Almacenamiento en caché del navegador frente al almacenamiento en caché del servidor: ¿en qué se diferencian?

El almacenamiento en caché del navegador y del servidor funciona de manera muy similar. La única diferencia es que un método almacena archivos localmente, mientras que el otro lo hace del lado del servidor.

El mejor ejemplo de almacenamiento en caché del servidor en acción es un CDN. Con las CDN, puede almacenar copias en caché de su sitio en un servidor de terceros (o en un grupo de ellos). Cuando los visitantes intentan acceder al sitio web, la CDN intercepta esa conexión y sirve la copia almacenada del sitio.

En ese escenario, los visitantes aún pueden almacenar en caché el contenido estático a través de sus navegadores. La experiencia de los usuarios finales no debería cambiar de ningún modo, salvo que las CDN suelen ofrecer tiempos de carga mucho mejores que los servidores tradicionales.

¿Qué más puedo hacer para mejorar el rendimiento de mi sitio?

Hay muchas cosas que puede hacer para mejorar el rendimiento de su sitio (más allá de aprovechar el almacenamiento en caché del navegador). Algunos otros cambios que puede realizar incluyen la eliminación de los recursos que bloquean el procesamiento, la minimización de CSS, el uso de un CDN, la realización de menos solicitudes HTTP y la reducción de los tiempos de respuesta del servidor y TTFB.

Cuando se trata del rendimiento del sitio, algunos cambios son más efectivos que otros. Las mejoras en los tiempos de carga pueden tener un impacto significativo en la experiencia del usuario, lo que puede generar una tasa de conversión más alta para su negocio.

Comience a servir activos estáticos en su sitio de WordPress

Aprovechar el almacenamiento en caché del navegador en WordPress es una de las formas más efectivas de mejorar los tiempos de carga. Una estrategia eficiente se centrará en los archivos estáticos y los configurará para que se recarguen periódicamente. De esta manera, los visitantes no se quedan atrapados con elementos obsoletos.

La forma más fácil de implementar el almacenamiento en caché del navegador en WordPress es mediante el uso de un complemento como WP Super Cache. Este complemento le permite aprovechar el almacenamiento en caché del navegador utilizando un conjunto de configuraciones predeterminadas o controlar cada configuración manualmente. Además, es de uso gratuito.

Además, cuando instala Jetpack Boost, puede mejorar aún más el rendimiento de su sitio. ¡Mira el complemento para obtener más información!