NGINX – Politicas de Cache – CSS JS y Media Elements

¿ Como mejorar el posicionamiento web en Google mejorando la velocidad de carga a traves de las Politicas de Cache de NGINX segun las recomendaciones de Google PageSpeed Insights ?

Un sitio web ( blog, ecommerce o pagina institucional ) estan compuesto por un archivo HTML, varios archivos CSS, varios archivos JS y varios archivos multimedia como imagenes.

Una pagina web estandar puede tener 100 de estos archivos, y cada vez que es visitada deben descargarse estos 100 elementos. Sin embargo, hay elementos que rara vez cambian, como las imagenes, los archivos CSS y JS.

Para evitar descargar en cada visita todos los archivos que componen una pagina existen las politicas de Cache.

Una de las variables que considera google para establecer el ranking de las paginas web, es su velocidad de carga. Las politicas de Cache permiten mejorar esa velocidad de carga y por tanto mejorar el posicionamiento del sitio en google. Puedes evaluar la velocidad de carga de tu sitio web en Google PageSpeed Insights

Politicas de Cache

Las politicas de cache establecen que archivos se van a guardar en el navegador del cliente y durante cuanto tiempo. Asi pues, si vuelves a visitar la pagina esos archivos que se han guardado ya no se vuelven a descargar.

Esto agiliza la carga del sitio web y permite que el servidor atienda de forma mas rapida a otros usuarios.

Implementacion de Politicas de Cache en NGINX

NGINX es un servidor web, existen muchos otros, pero para efectos de este tutorial vamos a centrarnos en NGINX.

Cada sitio web en NGINX se configura como un server.

server {
  server_name www.midominio.com;
  root /var/www/html/midominio;

}

En el ejemplo, hemos definido un “server” para que atienda todas las peticiones a www.midominio.com y que se encuentra alojado en la carpeta /var/www/html/midominio

Ahora dentro de esa definicion basica de “server” vamos a añadir como deben tratar NGINX a los archivos de tipo CSS, por ejemplo.

location ~* \.(?:css)$ {
	  expires 1M;
	  add_header Cache-Control "public";
	}

En este ejemplo indicamos con una expresion regular que cualquier archivo cuyo nombre termine en “.css” se le aplicaran las reglas delimitadas por las { }.

La sentencia expires 1M, nos indica que el contenido de ese archivo se guardara en el navegador durante 1 mes.

La sentencia add_header, nos indica que el cache guardado es de acceso publico para cualquiera que acceda a la pagina desde ese navegador.

NGINX - Politicas de Cache - CSS JS y Media Elements - Mario Uriarte