18 Jun Pagespeed Insights
Pagespeed Insights
Déjame adivinar: estás aquí porque la herramienta Pagespeed Insights de Google te recomienda publicar recursos estáticos con una política de caché eficaz para que tu sitio web cargue más rápido.
En este post, te explicaré cómo hacerlo de la manera más sencilla, sin necesidad de instalar ningún plugin de cacheado.
¿Qué es la caché y qué tipos de caché hay?
El cacheado es un método por el que un ordenador o servidor web guarda contenidos en una especie de memoria temporal, de forma que puede acceder a esos contenidos más rápido que al resto de información que tiene en su interior.
En el ámbito web, el cacheado se usa para reducir el número de peticiones que se hacen a los servidores o el tiempo de respuesta para cada petición, aligerando el tráfico entre servidor y usuarios, y permitiendo que en la práctica los usuarios naveguen más rápido.
Tipos de caché
Según donde se produzca el cacheado, tenemos dos tipos de caché:
-
- la caché de servidor, que tiene lugar en el servidor donde está alojada la web, o en un proxy server
-
- la caché de navegador, que se lleva a cabo en el navegador de cada usuario.
Para complicar un poco más las cosas, según el tipo de contenido que estemos cacheando, la caché puede ser estática (para contenidos estáticos, como imágenes o archivos CSS y javascript) o dinámica (para páginas creadas por un CMS como WordPress o Prestashop).
Pero por ahora vamos a centrarnos en cómo aprovechar el almacenamiento en caché de navegador para contenidos estáticos, que es lo que Pagespeed Insights te está recomendado activar en tu sitio.
La caché de navegador se encarga de guardar en el navegador de cada uno de tus usuarios partes del contenido de tu web que no es probable que cambien en el futuro inmediato, como por ejemplo tu logo, las imágenes de tus posts o los archivos CSS que dictan el estilo de tus páginas.
De esta manera, el navegador sólo tendrá que cargar esos elementos la primera vez que visita una página del sitio. Al abrir más páginas, o si vuelve a visitar el mismo sitio unos días después, el navegador de ese usuario ya no necesitará cargar de nuevo el logo o las imágenes ya visitadas.
El tiempo por el cual se van a guardar estos contenidos en el navegador de tus usuarios se puede especificar a tu gusto. Por ejemplo, es habitual cachear las imágenes durante 30 días, aunque tú puedes preferir otra duración por la razón que sea.
Activar la caché de navegador supone una gran ventaja (casi una necesidad) para cualquier sitio con un mínimo de tráfico. Por tanto, Google no te está recomendando que lo hagas por mero capricho.
Si tu sitio no tiene activo este tipo de caché, estás obligando a tus usuarios a cargar desde sus navegadores todos los recursos de tu web, cada vez que cargan una página, aunque ya la hayan visitado antes.
Si, como el 60% de los webmasters del mundo, usas WordPress, una de las soluciones habituales suele ser instalar un plugin para que se encargue del cacheado.
Aunque habitual, esta solución no es del todo efectiva, por las siguientes razones:
-
- Estás instalando un plugin pesado para llevar a cabo una acción que se puede hacer perfectamente sin instalar plugins. Los plugins siempre requieren mantenimiento (hay que actualizarlos cada cierto tiempo, igual que debes actualizar tu versión de WordPress) y además, paradójicamente, pueden ralentizar tu web al estar mal configurados, o al consumir demasiados recursos dentro de tu servidor (un clásico de estos plugins).
-
- La mayoría de los plugins de cacheado, especialmente los gratuitos, son complejos de configurar, con lo que, si no sabes lo que estás haciendo, necesitas empollarte un montón de documentación y aun y así es posible que hagas algo mal, con lo que no habrás arreglado del todo el problema que tenías, y te habrás creado otro.
¿Cuál es la alternativa más sencilla a instalar un plugin? Hacerlo directamente, a través del archivo htaccess de tu servidor.
Por lo normal, la gran mayoría de sitios que funcionan con WordPress están alojados en un servidor Apache. El archivo htaccess está presente en todos los servidores Apache y sirve para configurar el uso del servidor.
Con este archivo puedes darle a tu servidor instrucciones, como por ejemplo hacer una redirección, o definir una caché de navegador.
Esto es bastante sencillo y antes de darte las líneas de código exactas que necesitas para crearlas, vamos a ver qué necesitas para definir una caché de navegador en el htaccess.
Por cierto, esto no sirve únicamente para WordPress, sino para cualquier otra web alojada en un servidor Apache, sea cual sea su CMS. Por tanto, también en un Prestashop, o si has hecho a mano tu web en php, puedes especificar la caché de navegador por este método.
Añadiendo instrucciones a tu htaccess
Importantísimo: antes de hacer ningún cambio en tu archivo htaccess, haz una copia de seguridad y guárdala en tu ordenador. Así, si te confundes en algo, aunque sea una coma, y algo empieza a funcionar mal en tu web, sólo debes restaurar la copia de seguridad y todo volverá a funcionar como antes.
Primero, necesitas definir qué tipos de contenido vas a cachear. Digamos que quieres cachear las imágenes en el navegador de tus usuarios. Entonces, incluirías en tu instrucción todas las extensiones de archivo que se pueden usar para cargar imágenes en una web: jpg, png, gif, ico, etc.
Lo normal es incluir en el cacheado de navegador todos los recursos estáticos: imágenes, archivos CSS y Javascript, PDFs, archivos de audio…
Luego, necesitas definir cuánto va a durar el cacheado en el navegador de tus usuarios. A esto se le llama cache-control y se define en segundos. Imagina que quieres cachear las imágenes durante un mes. Entonces, definirías un cache-control de 2592000 segundos.
Esto no es todo. Ya que estamos tocando el htaccess, vamos a aprovechar para arreglar dos cuestiones comunes: vamos a desactivar el uso de Etag, que es una tecnología algo obsoleta que hace que el cacheado de navegador funcione en algunos casos más lento de lo que debería.
Y por último, vamos a aprovechar para incluir la compresión GZIP, que es otra cosa que nos va a exigir Pagespeed Insights, y que se puede hacer perfectamente a través de htacess y sin necesidad de instalar otro plugin. Si al analizar la herramienta con Pagespeed Insights, te aparece el mensaje “Habilitar compresión”, incluye también en tu htaccess el bloque de código que he puesto bajo el encabezado #Compresión GZIP.
Ahora que ya sabes qué debes incluir y por qué, vamos a ver el código. Recuerda, debes copiarlo y pegarlo en tu archivo htaccess, que se encuentra en el directorio raíz de tu alojamiento. Más abajo te explico cómo crear o modificar este archivo.
Una vez más, no modifiques nada en tu htaccess sin haber hecho antes copia de seguridad.
El código que yo uso y te recomiendo es este (copia TODO el código que está dentro de la ventanita):
# Disable ETags
<IfModule mod_headers.c>
Header unset ETag
Header set Connection keep-alive
</IfModule>
FileETag None
############## CACHING-GZIP ############
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault A2592000
<FilesMatch «\.(txt|xml|js)$»>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch «\.(css)$»>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch «\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$»>
ExpiresDefault A2592000
</FilesMatch>
<FilesMatch «\.(jpg|jpeg|png|gif|swf|webp)$»>
ExpiresDefault A2592000
</FilesMatch>
</IfModule>
<IfModule mod_headers.c>
<FilesMatch «\.(txt|xml|js)$»>
Header set Cache-Control «max-age=2592000»
</FilesMatch>
<FilesMatch «\.(css)$»>
Header set Cache-Control «max-age=2592000»
</FilesMatch>
<FilesMatch «\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav|mp4|m4v|ogg|webm|aac)$»>
Header set Cache-Control «max-age=2592000»
</FilesMatch>
<FilesMatch «\.(jpg|jpeg|png|gif|swf|webp)$»>
Header set Cache-Control «max-age=2592000»
</FilesMatch>
</IfModule>
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding «gzip,deflate» env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
<IfModule mod_filter.c>
AddOutputFilterByType DEFLATE «application/atom+xml» \
«application/javascript» \
«application/json» \
«application/ld+json» \
«application/manifest+json» \
«application/rdf+xml» \
«application/rss+xml» \
«application/schema+json» \
«application/vnd.geo+json» \
«application/vnd.ms-fontobject» \
«application/x-font-ttf» \
«application/x-javascript» \
«application/x-web-app-manifest+json» \
«application/xhtml+xml» \
«application/xml» \
«font/eot» \
«font/opentype» \
«image/bmp» \
«image/svg+xml» \
«image/vnd.microsoft.icon» \
«image/x-icon» \
«text/cache-manifest» \
«text/css» \
«text/html» \
«text/javascript» \
«text/plain» \
«text/vcard» \
«text/vnd.rim.location.xloc» \
«text/vtt» \
«text/x-component» \
«text/x-cross-domain-policy» \
«text/xml»
</IfModule>
<IfModule mod_mime.c>
AddEncoding gzip svgz
</IfModule>
</IfModule>
Y ya está. Ahora, cuando vuelvas a pasar tu web por Pagespeed Insights, verás que el mensaje “Aprovechar almacenamiento en caché del navegador” ha desaparecido (y el de “Activar compresión”, si es que también te salía).
Aclaración importante: es imposible especificar la caché de navegador para recursos externos a tu web, como por ejemplo Google Analytics, Adsense o un script de Twitter.
Si tienes el código de Analytics en tu web, te seguirá apareciendo este mensaje, pero lo puedes ignorar con toda tranquilidad, porque no se va a ir nunca. Google pone el caché-control que le da la gana para su script, y tú no puedes cambiarlo. Toda una paradoja que Google recomiende por medio de Pagespeed un tiempo mínimo de duración de la caché que ellos mismos no cumplen con Analytics, pero son Google y pueden hacer lo que quieran.
Nosotros, con especificar la caché de navegador para nuestros recursos estáticos, ya hemos cumplido.
Cómo modificar el archivo htaccess
Tienes 3 formas de hacerlo, a través de FTP, a través del cPanel de tu hosting o, si tienes WordPress y el plugin Yoast para SEO, puedes hacerlo directamente desde allí.
Vamos a ver rápidamente los 3 métodos:
A través de FTP
-
- Conéctate vía FTP a tu sitio tal y como haces habitualmente
-
- Ubícate en el directorio raíz donde esté instalado tu WordPress o sitio web
-
- Localiza el archivo htaccess – si no lo ves, deberás marcar en tu cliente FTP la opción “Mostrar archivos ocultos”
-
- Descarga el archivo htaccess en tu ordenador, haz un backup, modifica añadiendo las líneas de código que te he dado y vuelve a subirlo a la misma ubicación, sobreescribiendo el anterior
-
- Ya está, pasa tu web por Pagespeed Insights y verás que ahora todos tus recursos estáticos internos cumplen con la regla de especificar caché de navegador
A través de cPanel
-
- Inicia sesión en cPanel
-
- En la sección Archivos, haz clic en el ícono del Administrador de archivos.
-
- Marca la casilla para raíz de documento y selecciona el nombre de dominio al que deseas acceder desde el menú desplegable.
-
- Asegúrate de que Mostrar los archivos ocultos” esté marcado.
-
- Haga clic en Ir. El Administrador de archivos se abrirá en una nueva pestaña o ventana.
-
- Localiza el archivo .htaccess
-
- Descarga el archivo htaccess en tu ordenador, haz un backup, modifica añadiendo las líneas de código que te he dado y vuelve a subirlo a la misma ubicación, sobreescribiendo el anterior
Mediante plugin Yoast (sólo WordPress)
-
- Desde tu dashboard o panel de control, ve al menú principal izquierdo y haz clic en ‘SEO’.
-
- Te saldrán una serie de opciones adicionales. Si no ves la opción de “Herramientas” en tu menú “SEO”, primero habilita la configuración avanzada.
-
- Haz clic en ‘Herramientas’.
-
- Haz clic en ‘Editor de archivos’.
(Este menú no aparecerá si tu instalación de WordPress ha desactivado la edición de archivos. Habilita la edición de archivos, o tendrás que hacerlo por FTP o cPanel.
- Haz clic en ‘Editor de archivos’.
-
- Añade mis líneas de código al archivo .htaccess.
-
- Guarda tus cambios.
Si todo esto de andar tocando el archivo htaccess no te convence (o no te vale, porque no tienes acceso FTP o al cPanel de tu hosting) puedes optar por la solución de instalar un plugin, que para mí es menos ventajosa, pero hace exactamente lo mismo.
De hecho, si una vez activado tu plugin de cacheado le echas un vistazo a tu archivo htaccess, verás que lo que ha hecho el plugin ha sido escribir en el archivo más o menos el mismo código.
Puede variar el orden, la duración del caché-control para cada grupo de archivos y llevará otros comentarios, pero el código es esencialmente el mismo. ¿Ves por qué digo que para eso no hace falta un plugin?
El valor añadido de los plugins está en que ofrecen más cosas, principalmente el minificado de CSS y Javascript, que no se puede hacer a través de htaccess. Pero muchas de estas otras opciones que te ofrecen son complejas de configurar y su funcionamiento óptimo dependerá mucho del servidor en el que esté alojado tu sitio.
Como decía al principio del post, la mayoría son ventajas que no vas a poder usar, o peor, que te pueden montar algún lío en tu sitio, como no tengas cuidado.
Esto es especialmente cierto del W3 Total Cacher, plugin pesado y difícil de configurar donde los haya, y también, aunque algo menos, de la otra opción más popular dentro del repositorio de plugins gratuitos de WordPress, WP Super Cache.
Si estás empeñado en instalar un plugin y quieres que te aporte algo extra, yo optaría por un plugin de pago: WP-Rocket, que además de ser más flexible y fácil de configurar tiene la gran ventaja de que te ayudará a recortar el tiempo de respuesta de tu servidor (otra bestia negra de Pagespeed Insights), tal y como conté en detalle en mi último post.
Para mí la elección de plugin está clara, pero si no quieres gastar los 30 euros al año que vale WP-Rocket o te lo quieres pensar mejor, puedes echarle un vistazo a esta mega-comparativa de todos los plugins de caché para WordPress, en el que el ganador final es, sorpresa sorpresa… WP-Rocket. 😉
Autor: https://useo.es/especificar-cache-de-navegador/
