Cómo añadir cabeceras Expires a WordPress: Manual + Plugin Métodos

¿Se ha encontrado alguna vez con una recomendación que le pide que añadir cabeceras expiradas?

Si es así, no está solo. Es una de las recomendaciones más comunes relacionadas con el rendimiento del sitio web que recibirá cuando empiece a optimizarlo.

En este artículo, vamos a ir a través de un tutorial detallado sobre cómo agregar expira encabezados a su sitio web WordPress.

Así que, empecemos.

¿Qué son las cabeceras expiradas?

Las cabeceras Expires indican a los navegadores qué recursos pueden almacenarse y obtenerse de la caché del navegador o de la propia fuente.

Para que funcione, el propietario del sitio web debe configurar las cabeceras de caducidad. De este modo, el navegador almacena los recursos localmente durante un periodo de tiempo determinado establecido mediante las cabeceras expires.

Por ejemplo, si establece cabeceras de caducidad en los archivos JPEG, el navegador almacenará todos los archivos JPEG en su caché. Esto significa que un visitante puede cargar el sitio más rápido, ya que el navegador ha almacenado en caché algunos recursos relacionados con el sitio.

Al utilizar cabeceras que caducan, podrá mejore la velocidad de su sitio web reduciendo las peticiones HTTP (el método utilizado para comunicarse entre el navegador y un servidor) entre su ordenador y el servidor.

Información sobre el caché del navegador

Caché del navegador permite al navegador almacenar localmente en caché los recursos para mejorar la velocidad del sitio.

¿Cómo funciona?

El navegador envía una petición a un servidor cuando se carga un sitio web. El servidor, a su vez, envía los recursos necesarios.

En su afán por cargar los sitios más rápidamente, los navegadores pueden utilizar cabeceras de caducidad para identificar qué recursos pueden cargarse localmente desde el caché del navegador.

¿No está seguro de lo que queremos decir? Veamos browser-caching en acción.

GTMetrix es un sitio de optimización de la velocidad y el rendimiento de los sitios web. Te muestra un informe detallado de cómo se carga tu sitio.

Como puede ver, el sitio principal de WPAstra utiliza la caché del navegador. Todo esto es posible gracias a las cabeceras expires.

La caché de navegación con la ayuda de cabeceras de caducidad puede reducir el tiempo de carga de los sitios web al reducir las peticiones HTTP entre su ordenador y el servidor.

Cómo funcionan las cabeceras de caducidad con el caché del navegador

La caché del navegador almacena recursos basándose en las reglas de las cabeceras de caducidad (otro nombre para las cabeceras de expiración). Estas reglas determinan cómo se utilizan los recursos cuando un navegador carga un sitio.

Así que, básicamente, si la antigüedad de un recurso no ha caducado, se carga desde la caché del navegador. Si no, el ordenador vuelve a solicitarlo al servidor.

Pero, ¿qué ocurre cuando un ordenador solicita un sitio por primera vez?

En ese caso, todos los recursos del sitio se descargan directamente del servidor.

A partir de la segunda vez, el navegador comprobará su caché en busca de recursos no caducados y los utilizará para ahorrar ancho de banda y tiempo.

Si desea obtener más información técnica al respecto, a continuación se la ofrecemos. Sin embargo, si no te interesa, puedes pasar a la siguiente sección.

Como puede ver en la imagen, el navegador comprueba primero con la caché de recursos (caché del navegador).

La información se envía del servidor al navegador a través de las cabeceras HTTP. Todo lo que necesita saber sobre las cabeceras HTTP es que se utilizan para enviar información adicional entre su ordenador y el servidor.

Otro concepto importante que hace que todo esto suceda es: Cache-Control.

Con Cache-Control, puede definir políticas de almacenamiento en caché del navegador que funcionen tanto del lado del servidor como del lado del cliente.

Si comprueba las imágenes anteriores, verá que el tiempo de caducidad establecido en la cabecera HTTP se realiza mediante Cache-Control.

En resumen, Cache-Control ofrece una forma mejor de implementar la caché del navegador, ya que supera la caché basada en el navegador.

Por ejemplo, se ocupa de lo siguiente.

• Recursos que deben almacenarse en caché
• Dónde almacenar la caché
• Edad máxima a partir de la cual caduca la caché

Veamos cache-control en acción en wpastra.com.

Si quiere saber más, le recomendamos que consulte la página Cache-Control - HTTP en Mozilla MDN o lea Guía de Google en él.

Si también desea obtener más información sobre el almacenamiento en caché y cómo se relaciona con WordPress, eche un vistazo a nuestro Guía definitiva para el almacenamiento en caché de WordPress.

Por qué son importantes las cabeceras de caducidad

Las cabeceras de caducidad son importantes por las siguientes razones

• Ayuda a que su sitio se cargue más rápido (después de la primera petición inicial)
• Ayuda a su servidor a gestionar más peticiones en un momento dado.

¿Qué recursos debe almacenar en caché utilizando cabeceras Expires?

Las cabeceras de caducidad son útiles si sabes qué recursos necesitas almacenar en caché. Para cualquier sitio de blogs en general, implementar cabeceras expires es fácil, ya que las reglas se pueden aplicar a una amplia gama de recursos, incluyendo imágenes, vídeos, etc.

Pero, el reto viene cuando se necesita implementar un sitio complejo como eCommerce.

En ambos casos, el objetivo es reducir las peticiones HTTP y no aumentarlas.

¿Qué recursos necesita almacenar en caché? Veamos un par de escenarios para entenderlo mejor.

Situación 1: Edad de caducidad de los recursos demasiado larga

Si estableces la edad de expiración del recurso para un tiempo largo, entonces el recurso se servirá al usuario sin ningún cambio durante ese tiempo determinado.

En este caso, si decide realizar cambios en el sitio dentro de ese periodo determinado, el usuario seguirá viendo versiones anteriores del sitio hasta que expire el recurso.

Esto puede resolverse definiendo el tiempo de expiración en función del tipo de recurso. En general, intente evitar añadir un periodo de tiempo predeterminado a todos los recursos.

Por ejemplo, no debe almacenar en caché una sección entera de scripts, HTML, imágenes u otras formas de los recursos.

Incluso si decide hacerlo, debe asegurarse de conocer el impacto de los cambios en su sitio web.

Hacerse preguntas como: "¿Funcionarán correctamente todas las páginas de mi sitio si almaceno en caché X o Y recurso?", puede ayudarle a implementar correctamente las cabeceras de caducidad.

En general, es una buena idea añadir cabeceras de caducidad a los recursos estáticos, ya que son los que menos se modifican.

Situación 2: Gestión de un sitio funcionalmente complejo, como un sitio de comercio electrónico

Si tiene un sitio de comercio electrónico, debe tener cuidado con los problemas que plantean las cabeceras con fecha de caducidad.

Veamos un ejemplo a continuación.

Un usuario visita su sitio de comercio electrónico y añade nuevos artículos a la cesta de la compra. Sin embargo, si los recursos de su sitio se almacenan en caché de forma incorrecta, los productos añadidos previamente por el usuario (de una sesión anterior) aparecerán en el carrito de la compra en lugar de los productos recién añadidos.

El comprador puede resolver el problema pulsando CTRL + F5 (fuerza una actualización de la caché), pero eso sería pedir demasiado al comprador. Además, crea una mala experiencia de usuario y seguramente afectará a la retención de usuarios y a las cifras de ventas.

Entonces, ¿dónde nos deja esto? Como propietario de un comercio electrónico, puede decidir añadir cabeceras de caducidad a los recursos en función de su impacto en la experiencia del usuario. Tu objetivo es proporcionar una experiencia de usuario fluida sin romper el sitio.

Si todo esto te parece un poco complicado y abrumador, no te preocupes, todo lo que necesitas saber es que las cabeceras expires le dicen a tu navegador qué obtener de la caché y qué no.

Tu trabajo es decidir qué poner y qué no. Y en eso te tenemos cubierto, sigue leyendo.

¿Los encabezados Expires solucionan la carga lenta de sitios web?

No todos los sitios son iguales y eso cambia el funcionamiento de las cabeceras de caducidad.

Por ejemplo, si almacena incorrectamente en caché un sitio de comercio electrónico, es probable que se produzcan errores que afecten directamente a la funcionalidad del sitio. También ralentizará el sitio.

Para otros sitios genéricos, las cabeceras que caducan mejorarán el tiempo de carga del sitio web al reducir las peticiones HTTP.

En algunos casos, las cabeceras que caducan pueden ralentizar el sitio si no se implementan correctamente.

Cómo añadir cabeceras Expires a su sitio web WordPress

Excelente, si has llegado hasta aquí, ¡te mereces una galleta!

WordPress es un sistema de gestión de contenidos versátil. Esto significa que es flexible y ofrece múltiples maneras de hacer frente a un problema.

Por eso, en esta sección, vamos a mostrarte cómo añadir manualmente cabeceras expires a servidores como Apache Server, Nginx y CDN Systems.

También le mostraremos cómo añadir cabeceras caducas utilizando plugins. (Sí, lo sabemos, esto es principalmente lo que has venido a leer).

Añadir cabeceras Expires manualmente

Servidor Apache

Una de las formas más sencillas de añadir cabeceras de caducidad a un sitio WordPress que se ejecuta en un servidor Apache es hacerlo a través del archivo .htaccess.

Puede acceder a él a través de dos métodos.

• cPanel
• Cliente FTP como FileZilla

Para simplificar, vamos a utilizar el primer método. El método se aplica a los clientes FTP si sabes cómo conectarte a tu servidor web utilizándolo.

En primer lugar, debe Acceda a su cPanel. Si utiliza una plataforma de alojamiento popular como Bluehost o Alojamiento In Motiondebería tener una opción como la que se muestra a continuación.

Haga clic en él, y usted debería ser capaz de acceder al cPanel.

Allí encontrará la opción Administrador de archivos.

Desde allí, haga clic en el Administrador de archivos y, a continuación, proceda a hacer clic en el botón "public_html" carpeta.

Una vez dentro de la carpeta, tienes que buscar .htaccess. Si no eres capaz de encontrarlo, asegúrate de que los archivos ocultos están configurados como "mostrar".

Ahora, abre el archivo haciendo clic con el botón derecho y "editar".

Ahora, tienes que añadir el siguiente código al archivo y guardarlo.

<IfModule mod_expires.c>
  ExpiresActive On
  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"
  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"
  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

Como puede ver, hemos añadido cabeceras de caducidad para distintos tipos de recursos, como imágenes, vídeo, CSS, JavaSCript y otros.

¿El código parece complejo? No se preocupe, todo lo que tiene que hacer es copiar y pegar el código en el archivo .htaccess.

Pero si tienes confianza y sabes lo que hace el código, puedes modificarlo según tus necesidades.

Para un sitio de comercio electrónico, simplemente no puede poner todos los archivos estáticos en una sola carpeta y luego aplicar las mismas reglas de expiración de encabezados.

Lo mejor es crear varias carpetas y utilizar archivos .htaccess en cada una de ellas para tener un control más preciso.

Otra forma de mejorar el almacenamiento en caché del navegador es añadir Cache-Control.

Para añadir Cache-Control, necesita añadir el siguiente código en el archivo .htaccess.

# BEGIN Cache-Control Headers
<IfModule mod_expires.c>
  <IfModule mod_headers.c>
    <filesMatch "\.(ico|jpe?g|png|gif|swf)$">
      Header append Cache-Control "public"  
    </filesMatch>
    <filesMatch "\.(css)$">
      Header append Cache-Control "public"
    </filesMatch>
    <filesMatch "\.(js)$">
      Header append Cache-Control "private"
  </filesMatch>
    <filesMatch "\.(x?html?|php)$">
      Header append Cache-Control "private, must-revalidate"
    </filesMatch>
  </IfModule>
</IfModule>

NGINX

NGINX funciona de forma diferente al servidor Apache. Por eso no podrá encontrar el archivo .htaccess.

La razón se debe a la filosofía central de NGINX para el rendimiento. Al eliminar la necesidad del archivo .htaccess, el servidor puede acceder a la información más rápidamente.

Si quiere saber más, consulte este artículo: Como Apache: .htaccess.

¿Cómo se añaden cabeceras de caducidad a NGINX?

Para ello, debe editar el bloque principal del servidor. Una vez realizadas las modificaciones necesarias, deberá recargar NGINX para que surtan efecto.

Sólo tienes que copiar el código como se muestra a continuación y añadirlo al bloque del servidor. Esto establecerá las cabeceras expires en NGINX.

location ~* \.(jpg|jpeg|gif|png)$ {
   expires 365d;
}

location ~* \.(pdf|css|html|js|swf)$ {
   expires 2d;
}

También puede utilizar la cabecera Cache-Control. Para ello, añada la siguiente línea al bloque del servidor.

https://www.nginx.com/resources/wiki/start/topics/examples/likeapache-htaccess/

Reinicie el servidor para que la cabecera Cache-Control surta efecto.

Sistemas CDN

Si está utilizando CDN para la entrega de contenidos, entonces usted tiene que utilizar una fecha de caducidad diferente para sus recursos. Para evitar esto, puede desactivar las ETags de la directiva Servidor CDN. Todo lo que necesita hacer es añadir lo siguiente en el archivo .htaccess.

# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
</IfModule>
FileETag None

Añadir cabeceras Expires con un plugin

Añadir manualmente las cabeceras expires requiere cierta experiencia técnica. Sin embargo, si no dispones de los conocimientos tecnológicos necesarios o tienes prisa por habilitar la caché del navegador, puedes utilizar plugins.

En esta sección, vamos a mostrar los pasos sobre cómo agregar expira encabezados utilizando dos plugins populares, Hummingbird y WP Rocket.

1. Colibrí

Hummingbird es un plugin gratuito que te permite optimizar la velocidad de tu sitio. También viene con buenas opciones de almacenamiento en caché.

El primer paso es ir al panel de control de tu sitio WordPress. Desde allí, ve a "Plugins" >> "Añadir nuevo".

Desde allí, tienes que escribir "Hummingbird" en la opción de búsqueda en la parte superior derecha. Una vez hecho esto, encontrarás el plugin. Haga clic en "Instalar ahora" para instalarlo.

Tras activar el plugin, verás su lista en el menú del panel de control de WordPress. Haz clic en él y luego selecciona "Dashboard" y, por último, "Caching".

Una vez allí, verás 4 opciones. Haga clic en caché del navegador para continuar.

En la parte superior, te mostrará el estado.

Y, si se desplaza hacia abajo, verá la opción de configurar la caché del navegador mediante Hummingbird.

Aquí encontrarás múltiples opciones para configurar. Puede elegir el tipo de servidor, incluyendo Apache, NGINX, IIS y Cloudflare.

A continuación, puede establecer un tiempo de caducidad para todos los tipos de archivos y hacerlo en tipos individuales.

Por último, también puede añadir manualmente las cabeceras caducadas utilizando la opción manual. La opción manual genera el código en función de sus preferencias.

Si todo está configurado, puede hacer clic en "Activar" para habilitar el almacenamiento en caché del navegador mediante cabeceras expires.

2. Cohete WP

WP Rocket (Revisión de WP Rocket) también es una buena opción cuando se trata de añadir cabeceras caducadas a su sitio WordPress.

Todo lo que necesitas hacer es comprar el plugin e instalarlo. Al activar el plugin se modificará automáticamente el archivo .htaccess con las reglas necesarias.

Preguntas frecuentes sobre la adición de cabeceras Expires

Conclusión

Está claro que la caducidad de las cabeceras mejora la velocidad de carga de los sitios web. A pesar de que no va a hacer cambios considerables en la velocidad de su sitio - la técnica está destinada a mejorar la experiencia del usuario.

Dicho esto, es esencial saber cómo implementar correctamente las cabeceras de expiración. Si lo hace mal, ralentizará su sitio. Esto es especialmente cierto para los sitios más dinámicos y funcionales, como los sitios de comercio electrónico.

Además, la mayoría de los sitios funcionarán bien con el fragmento de código que compartimos en el artículo para las cabeceras que caducan.

Si aún no sabes qué hacer, te sugerimos que utilices la sección de comentarios y nos lo digas. Estamos aquí para ayudarle.