Mejora el tiempo de carga de tu web

Aunque hay muchos buenos metodos para disminuir el tiempo de carga de una web, se suele desaprovechar una gran herramienta de cacheo como es el navegador web de los usuarios que visitan nuestra página. Cuando abrimos una URL, nuestro navegador guarda parte del contenido para que la próxima vez la página cargue más rápido, y lo podemos aprovechar.

Desde el .htaccess podemos indicarle al navegador cuanto tiempo queremos que cachee ciertos tipos de archivos. Como normalmente los que más tiempo permanecen inalterables son los JS, las imágenes, los iconos y los éstilos, añadiremos las siguientes líneas al .htaccess para cachearlos durante un año. (3600seg x 24h x 365dias = 31536000seg)

# == CACHEO EN NAVEGADOR ==
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType image/gif A31536000
ExpiresByType image/png A31536000
ExpiresByType image/jpeg A31536000
ExpiresByType image/jpg A31536000
</IfModule>

Ésto le ahorrará al usuario que repite en tu web unos segundos de espera porque habrá bastantes archivos que su navegador guardará durante más tiempo. Pero ahora tenemos un problema si queremos cambiar alguna cosa, porque para verlo debemos borrar la caché del navegador. Por eso eso cuando llamemos a un CSS (es aplicable al resto de tipos de archivo) es mejor hacerlo de la siguiente manera: http://tudominio.com/styles/style.css?v1. Cómo el navegador cachea por URLs, añadiendo la versión como variable al final (?v1) hacemos que no cachee el archivo style.css sino el style.css?v1. Cuando lo modifiquemos bastará con cambiar la ruta a style.css?v2 y el navegador no usará la caché porque para él es un archivo nuevo.

Si además estamos programando, conviene meter en el archivo de configuración una variable con la versión y usarla a la hora de llamar a estos archivos, para que al hacer el cambio de versión lo tengamos que indicar en un solo sitio.