Aproveche el almacenamiento en caché del navegador

Aproveche el almacenamiento en caché del navegador.Visión general
Los tiempos de carga de la página se pueden mejorar significativamente pidiéndoles a los visitantes que guarden y reutilicen los archivos incluidos en su sitio web.

Reduce los tiempos de carga de la página para los visitantes que repiten
Particularmente efectivo en sitios web donde los usuarios visitan regularmente las mismas áreas del sitio web
Relación beneficio-costo: alta
Acceso necesario
Pautas generales para el establecimiento de vencimientos:
Contenido verdaderamente estático (estilos CSS globales, logotipos, etc.) – acceso más 1 año
Todo lo demás – acceso más 1 semana

¿Qué es el caché del navegador?

Cada vez que un navegador carga una página web, tiene que descargar todos los archivos web para mostrar la página correctamente. Esto incluye todo el HTML, CSS, JavaScript e imágenes.

Algunas páginas pueden contener solo unos pocos archivos y ser de un tamaño pequeño, tal vez un par de kilobytes. Para otros, sin embargo, puede haber una gran cantidad de archivos, y estos pueden llegar a ser de varios megabytes. Twitter.com por ejemplo es de 3 MB +.

El tema es doble

Estos archivos grandes tardan más en cargarse y pueden ser especialmente dolorosos si tiene una conexión a Internet lenta (o un dispositivo móvil).
Cada archivo hace una solicitud separada al servidor. Cuantas más solicitudes reciba simultáneamente su servidor, más trabajo deberá hacer, solo reduciendo aún más la velocidad de su página.
El almacenamiento en caché del navegador puede ayudar almacenando algunos de estos archivos localmente en el navegador del usuario. Su primera visita a su sitio tomará el mismo tiempo para cargarse, sin embargo, cuando ese usuario vuelve a visitar su sitio web, actualiza la página o incluso se mueve a una página diferente de su sitio, ya tiene algunos de los archivos que necesita localmente.

Esto significa que la cantidad de datos que el navegador del usuario tiene que descargar es menor, y se deben hacer menos solicitudes a su servidor. ¿El resultado? Disminución de los tiempos de carga de la página.

¿Como funciona?

El almacenamiento en caché del navegador funciona marcando ciertas páginas, o partes de las páginas, como necesarias para ser actualizadas en diferentes intervalos. Su logotipo en su sitio web, por ejemplo, es poco probable que cambie de un día para otro. Al almacenar en caché esta imagen de logotipo, podemos indicar al navegador del usuario que solo descargue esta imagen una vez a la semana. Cada visita que el usuario realice dentro de una semana no requerirá otra descarga de la imagen del logotipo.

El servidor web le indica al navegador que almacene estos archivos y que no los descargue cuando regrese ahorra tiempo a los usuarios y al ancho de banda de su servidor web.

¿Por qué es importante?

La razón principal por la que el almacenamiento en caché del navegador es importante es porque reduce la carga en su servidor web, lo que en última instancia reduce el tiempo de carga para sus usuarios.

Cómo aprovechar el almacenamiento en caché del navegador

Para habilitar el almacenamiento en caché del navegador, debe editar sus encabezados HTTP para establecer los tiempos de caducidad de ciertos tipos de archivos.

Configurando Apache para servir los encabezados apropiados

Encuentra tu archivo .htaccess en la raíz de tu dominio. Este archivo es un archivo oculto, pero debería aparecer en clientes FTP como FileZilla o CORE. Puede editar el archivo .htaccess con el bloc de notas o cualquier forma de editor de texto básico.

En este archivo, estableceremos nuestros parámetros de almacenamiento en caché para indicar al navegador qué tipos de archivos almacenar en caché.

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

Dependiendo de los archivos de su sitio web puede establecer diferentes tiempos de caducidad. Si ciertos tipos de archivos se actualizan con más frecuencia, debe establecer un tiempo de caducidad anterior en ellos (es decir, archivos css)

Cuando haya terminado, guarde el archivo tal como está y no como un archivo .txt.

Si está utilizando cualquier forma de CMS, las extensiones de caché o los complementos podrían estar disponibles.

Recomendaciones

  • Sea agresivo con su almacenamiento en caché para todos los recursos estáticos
  • Caducidad a un mínimo de un mes (recomendado: acceso más 1 año)
  • ¡No configure su caché con más de un año de anticipación!

Tener cuidado

Debe tener cuidado al habilitar el almacenamiento en caché del navegador, ya que si configura los parámetros durante demasiado tiempo en ciertos archivos, es posible que los usuarios no obtengan la versión nueva de su sitio web después de las actualizaciones.

Esto es particularmente importante si está trabajando con un diseñador para realizar cambios en su sitio web; es posible que hayan hecho los cambios pero aún no puede verlos porque los elementos que se han cambiado se almacenan en caché en su navegador.

Leer también: Borra el caché, las cookies y el historial del navegador web ; ¿Que es almacenamiento en caché y cómo funciona? Ventajas y desventajas ; Encabezados de caché HTTP

This post is also available in: Español