La velocidad de carga de página - el tiempo que le lleva al navegador de un usuario recibir la información de tu servidor y cargar una página - es tal vez una de las señales de posicionamiento más importantes en los resultados de búsqueda de Google. Dado que recuperar información en la web consume tiempo y recursos, reducir el número de recursos es una buena forma de reducir también el tiempo.
¿Cómo reduces el número de archivos que se precisa descargar sin reducir realmente el número de imágenes o scripts en una página?
Utilizando el almacenamiento en caché de navegador.
En nuestra guía veremos:
- Qué es el almacenamiento en caché en navegadores
- Cómo aprovechar el almacenamiento en caché en navegadores
- Cómo optimizar el caché de tu sitio
- Cómo habilitar el caché en tu sitio
- Cómo testear el caché de tu sitio
Qué es el almacenamiento en caché en navegadores
El almacenamiento en caché en navegadores es la habilidad de un navegador web para almacenar archivos en tu computadora y luego cargar esos archivos de ahí mismo la próxima vez que visitas esa página. Esto elimina la necesidad de descargar nuevamente esos recursos, lo cual significativamente reduce el tiempo de carga de la página.
Cuando un navegador muestra una página, tiene muchas cosas diferentes que cargar:
- Imágenes
- Archivos CSS
- Scripts
- Otros archivos varios
La próxima vez que visites una página, cárgala con el panel de red abierto. Esto mostrará los recursos cargados cuando se muestra la página, y cuánto demoró en cargar cada recurso.
Probablemente notes que el tiempo que demora en cargar algunos recursos baja cuando cargas la página una segunda vez. Esto es gracias al caché. Estos archivos se cargan directamente de tu computadora local, aumentando la eficiencia de la conexión de tu navegador al servidor de la página.
Cómo aprovechar el almacenamiento en caché en navegadores
Hay dos formas de aprovechar el almacenamiento en caché para mejorar la velocidad de carga de tu página:
- Encabezados Expires
- Encabezados de control de caché
Ambos métodos se habilitan al agregar código al archivo .htaccess de tu sitio.
El archivo .htaccess es muy importante para tu sitio, por lo cual si no estás familiarizado con él infórmate un poco antes de realizar cualquier cambio.
1. Encabezados "Expires"
Para usar encabezados Expires a tu archivo .htaccess agrega el siguiente código al principio:
## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>
## EXPIRES CACHING ##
Si lees línea por línea ese montón de código, y con un poco de conocimiento de inglés, te darás cuenta de que la idea detrás de los encabezados Expires no es tan complicada.
La línea ExpiresActive On habilita el módulo Expires. Cada línea después de eso marca la cantidad de tiempo que un navegador debe mantener ciertos tipos de archivos en su caché. Así que, en el ejemplo de arriba, los archivos JPEGs y GIFs - cualquier archivo que termine en .jpg, .jpeg o .gif - debería mantenerse en caché por un año, mientras que los CSS se deberían mantener por un mes.
Para cambiar estos tiempos, simplemente reemplaza "1 month" con el número de meses que quieras mantener la información. Reemplaza la palabra "month" por "weeks" si quieres establecer un valor en semanas, o "year" si quieres establecer un valor en años.
2. Encabezados de control de caché
El método Expires de almacenamiento en caché funciona para la mayoría de los servidores. Sin embargo, no todos los servidores funcionarán con Expires. Además, puede resultar tedioso tener una línea por cada uno de los tipos de archivo que tienes en tu sitio.
Una forma más simple, pero un poco más avanzada, de habilitar el almacenamiento en caché es usar lo que se llama Cache-Control.
Para usar Cache-Control, agrega el código siguiente a tu .htaccess:
# 1 mes para mayoría de recursos estáticos
<filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">
Header set Cache-Control "max-age=2592000, public"
</filesMatch>
La primera línea, la que tiene el numeral, es solamente una nota. Tu archivo ignorará esto, pero es útil dejarlo por si hay otras personas que trabajan en tu sitio, sobre todo cuando tus optimizaciones de caché se vuelvan más compleja.
La siguiente línea, <filesMatch ".(css|jpg|jpeg|png|gif|js|ico)$">, le dice que haga algo con los archivos que coincidan con aquellos de la lista. En este caso, CSS, JPG, PNG, GIF, JS e ICO. Si no quieres que alguno de esos tipos de archivos se almacene en caché la misma cantidad de tiempo que el resto de los archivos, solamente elimina esa línea.
La tercera línea, Header set Cache-Control "max-age=2592000, public", es donde el encabezado es insertado y donde se define el tiempo de almacenamiento
La parte Header set Cache-Control establece el encabezado, mientras que "max-age=2592000" le dice a los navegadores que deben almacenar los archivos por un mes (2592000 seconds). Los valores de tiempo siempre son en segundos.
La parte public dice que es algo público en tu servidor.
Finalmente, la línea </filesMatch>, cierra el bloque de código.
Cómo optimizar el caché de tu sitio
Te darás cuenta de que la mayoría de los archivos se almacenan en caché, ya sea por un mes o un año. Si lo piensas, la mayoría de los archivos en tu sitio web no cambian muy a menudo. Algunos, como tu logo, o un blog, CSS, o algunas imágenes, no van a cambiar durante años.
Es mejor configurar tu sitio para que estos archivos se almacenen por más tiempo (Google recomienda al menos una semana, pero un mes o un año probablemente sea mejor) para no desperdiciar recursos re-descargando archivos que no han cambiado.
Sin embargo, recuerda que estos archivos sí cambian durante la mitad del período definido por tu .htaccess. Esto puede causar que algunos usuarios vean recursos desactualizados al visitar tu página.
Huella digital de URL
Una forma de evitar esto es usar nombres de archivo únicos al actualizar algo como tu logo o archivo CSS. Si tu logo es actualmente logo.jpg, nombra el nuevo logo_1.jpg. Cuando un navegador vea un archivo que no coincide con aquél almacenado en caché, descargará el nuevo.
Este método se conoce como huella digital de URL y es útil para aquellos archivos que cambiarán de vez en cuando.
ETags
Otro método para gestionar el cambio de archivos es usar las etiquetas de entidad. Las ETags, como se las conoce comúnmente, son fichas de identificación únicas para los recursos de tu sitio. Cuando un navegador carga una página, se fija en las fichas para los recursos que se encuentran actualmente en la página y las compara con las ETags de los archivos almacenados localmente.
Luego descargará cualquier recurso que no coincida con las ETags almacenadas en el caché.
No existe una forma específica de generar ETags. Lo único que importa es que cambien cada vez para cargar una nueva versión de un archivo en tu sitio.
Cómo habilitar el almacenamiento en caché en tu sitio
El almacenamiento en caché en navegadores es algo que puedes configurar en tu archivo .htaccess. Si tienes un sitio WordPress, hay un montón de plugins que puedes usar para editar el archivo .htaccess de tu sitio. Si no estás usando WordPress, deberás hacer esto a través del gestor de archivos que subes para subir archivos a tu servidor.
Para habilitar el almacenamiento en caché, debes agregar algunas líneas de código a tu archivo .htaccess que definen cuánto tiempo el navegador de un usuario debe conservar una copia de los diferentes tipos de archivos. Puedes almacenar en caché cada tipo de archivo por un período de tiempo distinto si es lo que deseas.
Testear el almacenamiento en caché de tu sitio
Prueba cuánto tiempo se almacenan en caché los activos de tu sitio, o si has habilitado o no el almacenamiento en caché, verificando tu archivo .htaccess como mencionamos anteriormente. Si el archivo no incluye el código necesario para habilitar el almacenamiento en caché, agrégalo.
Incluso si tu sitio sí habilita el almacenamiento en caché, debes validar el código para asegurarte de que se está almacenando todo correctamente. Hay varias herramientas disponibles que verificarán el almacenamiento en caché en tu sitio:
- El informe de WooRank de tu sitio
- Las PageSpeed Insights de Google
- YSlow de Yahoo!
- Pingdom
- GTmetrix
