¿Qué es el almacenamiento en caché del navegador y cómo puedo activarlo para mi sitio web?

Introducción

Para comprender cómo Aprovechar el caché del navegador necesita saber cómo funcionan el servidor web y el navegador. Repasemos brevemente este proceso.

Para acceder a un sitio web se necesita un navegador web como Google Chrome o Mozilla Firefox. Un sitio web suele estar alojado en un servidor web que envía el contenido al navegador del usuario cada vez que visita el sitio web. Un sitio web se crea con diferentes tipos de archivos, ya sean dinámicos como archivos PHP o estáticos como HTML, JS, CSS e imágenes. Si las páginas de un sitio web son pequeñas (unos pocos KB), se cargan más rápido ya que el servidor web sólo envía una pequeña parte del contenido al navegador. Sin embargo, si la página es más grande (3-4 MB o más) y contiene muchos recursos estáticos, tardará más en cargarse.

Aprovechar el caché del navegador

Para acortar el tiempo de carga de las páginas extensas, el Aprovechar el caché del navegador que permite a los navegadores descargar localmente algunos recursos estáticos de los sitios web visitados. Este proceso pretende reducir el número de peticiones al servidor web cuando se visita un sitio web, lo que a su vez reduce la cantidad de datos que el navegador necesita descargar. ¿Cuál es el resultado? El sitio web se carga más rápido.

El propio servidor web - en este caso Apache y su mod_expires - permite el uso de la caché de navegador de apalancamiento. Para habilitar esta función, es necesario cambiar las cabeceras HTTP y establecer tiempos de caducidad para los tipos de archivo que desea utilizar. Esto se hace añadiendo reglas a su archivo .htaccess.

Cree este archivo en el directorio raíz del dominio para el que desea utilizar Leverage Browser Cache, o ábralo para editarlo si ya existe. Copie las siguientes líneas y péguelas en el archivo .htaccess:

# Activado Expira Cabeceras

CaducaActivo el

# Establecer caducidades por defecto
ExpiresDefault "acceso más 1 año"

# Establecer encabezado Expires para caché.
ExpiresByType text/cache-manifest "acceso más 0 segundos"

# Su documento html
ExpiresByType text/html "acceso más 0 segundos"

# Datos
ExpiresByType text/xml "acceso más 0 segundos"
ExpiresByType application/xml "acceso más 0 segundos"
ExpiresByType application/json "acceso más 0 segundos"

# Canal RSS
ExpiresByType application/rss+xml "acceso más 1 hora"
ExpiresByType application/atom+xml "acceso más 1 hora"

# Favicon
ExpiresByType image/x-icon "acceso más 1 semana"

# Archivos multimedia - imágenes, audio, vídeo
ExpiresByType image/gif "acceso más 1 año"
ExpiresByType image/png "acceso más 1 año"
ExpiresByType image/jpeg "acceso más 1 año"
ExpiresByType video/ogg "acceso más 1 año"
ExpiresByType audio/ogg "acceso más 1 año"
ExpiresByType audio/mp3 "acceso más 1 año"
ExpiresByType video/mp4 "acceso más 1 año"
ExpiresByType video/webm "acceso más 1 año"

Archivos HTC #
ExpiresByType text/x-component "acceso más 1 año"

# Fuentes web diversas
ExpiresByType application/x-font-ttf "acceso más 1 mes"
ExpiresByType font/opentype "acceso más 1 mes"
ExpiresByType application/x-font-woff "acceso más 1 mes"
ExpiresByType application/x-font-woff2 "acceso más 1 mes"
ExpiresByType image/svg+xml "acceso más 1 mes"
ExpiresByType application/vnd.ms-fontobject "acceso más 1 mes"

# CSS y JavaScript
ExpiresByType text/css "acceso más 1 año"
ExpiresByType application/javascript "acceso más 1 año"

Guarde el archivo y ¡voilá! Ahora ha implementado Leverage Browser Caching para su sitio web.