O que é a cache do navegador de alavancagem e como posso activá-la no meu sítio Web?

Introdução

Para compreender como Aproveitar o cache do navegador precisa de saber como funcionam o servidor Web e o browser. Vamos passar brevemente por este processo.

Para aceder a um sítio Web, é necessário um navegador Web, como o Google Chrome ou o Mozilla Firefox. Um sítio Web está normalmente alojado num servidor Web que envia o conteúdo para o navegador do utilizador sempre que este visita o sítio Web. Um sítio Web é criado com diferentes tipos de ficheiros, quer dinâmicos, como os ficheiros PHP, quer estáticos, como HTML, JS, CSS e imagens. Se as páginas de um sítio Web forem pequenas (alguns KB), carregam mais rapidamente porque o servidor Web só envia uma pequena parte do conteúdo para o browser. No entanto, se a página for maior (3-4 MB ou mais) e contiver muitos recursos estáticos, demorará mais tempo a carregar.

Aproveitar o cache do navegador

Para reduzir o tempo de carregamento de páginas extensas, o Aproveitar o cache do navegador que permite aos navegadores descarregar localmente alguns recursos estáticos dos sítios Web visitados. Este processo tem como objetivo reduzir o número de pedidos ao servidor Web quando se visita um sítio Web, o que, por sua vez, reduz a quantidade de dados que o seu navegador tem de descarregar. Qual é o resultado? O sítio Web é carregado mais rapidamente.

O próprio servidor Web - neste caso, o Apache e o seu mod_expires - permite a utilização do caching do navegador de alavancagem. Para ativar esta funcionalidade, é necessário alterar os cabeçalhos HTTP e definir tempos de expiração para os tipos de ficheiros que pretende utilizar. Isto é feito através da adição de regras ao seu ficheiro .htaccess.

Crie este ficheiro no diretório raiz do domínio para o qual pretende utilizar o Leverage Browser Cache ou abra-o para edição, caso já exista. Copie as seguintes linhas e cole-as no ficheiro .htaccess:

# ativado Expires Headers

ExpiresActive on

# Definir Expires por defeito
ExpiresDefault "acesso mais 1 ano"

# Definir cabeçalho Expires para a cache.
ExpiresByType text/cache-manifest "acesso mais 0 segundos"

# O seu documento html
ExpiresByType text/html "acesso mais 0 segundos"

# Dados
ExpiresByType text/xml "acesso mais 0 segundos"
ExpiresByType application/xml "acesso mais 0 segundos"
ExpiresByType application/json "acesso mais 0 segundos"

# RSS Feed
ExpiresByType application/rss+xml "acesso mais 1 hora"
ExpiresByType application/atom+xml "acesso mais 1 hora"

# Favicon
ExpiresByType image/x-icon "acesso mais 1 semana"

# Ficheiros multimédia - imagens, áudio, vídeo
ExpiresByType image/gif "acesso mais 1 ano"
ExpiresByType image/png "acesso mais 1 ano"
ExpiresByType image/jpeg "acesso mais 1 ano"
ExpiresByType video/ogg "acesso mais 1 ano"
ExpiresByType audio/ogg "acesso mais 1 ano"
ExpiresByType audio/mp3 "acesso mais 1 ano"
ExpiresByType video/mp4 "acesso mais 1 ano"
ExpiresByType video/webm "acesso mais 1 ano"

# Ficheiros HTC
ExpiresByType text/x-component "acesso mais 1 ano"

# Vários tipos de letra da Web
ExpiresByType application/x-font-ttf "acesso mais 1 mês"
ExpiresByType font/opentype "acesso mais 1 mês"
ExpiresByType application/x-font-woff "acesso mais 1 mês"
ExpiresByType application/x-font-woff2 "acesso mais 1 mês"
ExpiresByType image/svg+xml "acesso mais 1 mês"
ExpiresByType application/vnd.ms-fontobject "acesso mais 1 mês"

# CSS e JavaScript
ExpiresByType text/css "acesso mais 1 ano"
ExpiresByType application/javascript "acesso mais 1 ano"

Guarde o ficheiro e voilá! Já implementou o Leverage Browser Caching no seu sítio Web.