Solución: Leverage Browser Caching

Leverage Browser Caching

Seguramente acabás de hacer un Audit con Google Chrome o alguna otra herramienta de tu web y tenés un punto rojo en este ítem.

Explicación

Esto ítem dice, en pocas palabras, que tu web no le esta diciendo al navegador que cachee los recursos de la web. El navegador, al no recibir esta información, tampoco la presupone por lo que cada vez que un usuario consulta tu web, los recursos serán descargados nuevamente.

Solución

La solución pasa por agregar estas directivas al fichero .htaccess que yace en la carpeta root desde donde es servida tu web.

    <IfModule mod_headers.c>
        # YEAR
        <FilesMatch "\.(jpg|jpeg|png|gif)$">
            Header set Cache-Control "max-age=31536000, public"
        </FilesMatch>

        # YEAR
        <FilesMatch "\.(js|css)$">
            Header set Cache-Control "max-age=31536000"
        </FilesMatch>
    </IfModule>

Esta directiva agrega cabeceras (headers) a la respuesta, que le dicen al navegador qué y cómo cachear los recursos.

El código tiene 2 secciones. La primera sección especifica el tiempo de cacheo de los recursos de imagen, y la segunda sección de los scripts y estilos.

La forma mas fácil de personalizar este código es cambiando el parámetro max-age por otro número. Este número representa la cantidad de segundos que el navegador va a cachear los recursos.

Si tenés alguna preferencia de cacheo mas específica, siempre podés multiplicar las secciones agregando tus propias directivas.

Espero que te haya sido de ayuda…