Back to top

MORÄ Estudio Creativo

  /  Desarrollo Web   /  Solucionar el problema “Especificar Cache del Navegador” en PageSpeed

Solucionar el problema “Especificar Cache del Navegador” en PageSpeed

De todos es sabido que aumentar la velocidad de nuestra web mejorará el SEO de la misma, ya que Google y sus bots no son muy de meterse en webs lentas y navegar por sus links internos para indexarla, además de que una web rápida mejorará la experiencia de usuario de sus visitantes, cosa que a Google le pone bastante. Para medir la velocidad de nuestra web tenemos varias herramientas, hoy tocaremos la más famosa, ya que es propiedad de San Google, PageSpeed Insights.

En la lucha con tener una buena puntuación en PageSpeed Insights nos encontraremos con un problema que tiene parcialmente solucion “Especificar Cache del Navegador“, PageSpeed nos dice que lo solucionemos así: Establecer una fecha de caducidad o una edad máxima en las cabeceras HTTP de los recursos estáticos indica al navegador que cargue los recursos descargados previamente del disco local en lugar de hacerlo a través de la red, a lo que nosotros responderemos WTF, respiramos hondo…1,2,3 y al lío por que en esta ocasión sabemos como arreglar la cosa, a no ser que utilicemos recursos externos como las API recatcha o MAPS que como pertenecen a otro servidor ajeno a nosotros no podemos hacer nada, nos iremos con el rabo entre las piernas y con un coraje “que pa qué” aunque hay excepciones, podemos crear un script en nuestra web que haga que cuando nos evalúe PageSpeed, ésta no detecte que estamos utilizando el script que nos da problemas, para ello utilizaremos una característica del protocolo HTTP, el “user agent”, pero como está solución es personalizada mejor siguiendo este hilo investigad por ahí . Seguimos con nuestra faena.

Google nos aconseja que el tiempo de cache del navegador sea, como poco de una semana para recursos dinámicos y de un año para recursos estáticos, que no suelen cambiar con el tiempo. ¿Y esto como lo configuramos nosotros?, pues tenemos que acceder a nuestro archivo .htaccess que está en el directorio raiz /html de nuestro servidor. Si no lo vemos es por que suele estar oculto, en nuestra herramienta html buscaremos como hacer para mostrar archivos ocultos, en Filezilla por ejemplo nos vamos a Servidor –> Forzar archivos ocultos. Descargamos el archivo y lo editamos, por ejemplo con NotePad++ o con cualquier editor de texto plano.

ENTRAMOS EN TERRENO PELIGROSO, no es que vayamos a desencadenar la tercera guerra mundial pero si podemos tirar nuestra web por borrar un triste punto y coma, solo tenemos que copiar y pegar este código al final de nuestro .htaccess y todo irá bien, antes de ello hacemos una copia de seguridad del mismo. Bueno seleccionamos todo el código, ¿esta todo seleccionado? Ctrl+C y ponemos el cursor debajo de la ultima linea de texto de nuestro .htaccess, ¿no estamos pisando nada?¿Estamos en la ultima linea en blanco? Ctrl+V.

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 image/x-icon "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresDefault "access plus 1 week"

RESPIRA, TOMATE UN CAFÉ TE LO HAS MERECIDO. Te explico a groso modo en que consiste este código, hemos establecido una caducidad de 1 año para recursos de imágenes, de un mes para JS y CSS y de una semana para todos los demás.

También podemos utilizar las cabeceras Expires de HTTP, con esto conseguiremos que a los usuarios que vuelvan a visitar nuestra web les cargue más rápido, es decir podemos forzar el cacheo de nuestra web con una simple regla (si nuestra web está en WP y tenemos un plugin de cache, nos saltamos este paso para que no haya conflictos por redundancia) donde fijaremos la cantidad de segundos según nuestro interés.

 

FileETag MTime Size
ExpiresActive on
ExpiresDefault "access plus 86400 seconds"

Leave a comment:

logo-mora-estudio-creativo-web
Siguenos