Introdução ao cache HTTP
Tenho certeza que você notou que, quando você abre um site pela primeira vez, leva algum tempo para carregar. No entanto, quando você o abre novamente após algum tempo, o site fica muito mais rápido. Imagine se um site levasse o mesmo tempo para carregar todas as vezes, como seria a navegação lenta. Bem, isso tudo é graças a uma idéia bacana chamada HTTP Caching. Vamos dar uma olhada no que é, como funciona e como é usado para tornar a Navegação na Internet uma experiência mais rápida.
O que é cache em HTTP?
O cache em HTTP é a idéia de armazenar alguns dados usados com frequência ou com frequência em um local de acesso rápido. Com isso, há uma chance muito boa de que os dados mais necessários possam ser acessados muito mais rapidamente, porque o computador não precisa ir muito longe para obtê-los.
No caso da Navegação na Web, o armazenamento em cache é considerado quando o seu navegador, como o Chrome, armazena uma cópia de um site ou aplicativo da Web no armazenamento local. Depois que um site é armazenado em cache, um navegador da web não precisa baixar novamente todos os dados do servidor, o que tornará a navegação muito mais rápida.
Por exemplo, depois que um arquivo CSS de um site é baixado, um navegador não precisa fazer o download para todas as páginas da sessão. O mesmo pode ser dito para muitos arquivos JavaScript, imagens (como o logotipo do site e ícones de mídia social) e até mesmo algum conteúdo dinâmico. O armazenamento em cache é ativado usando cabeçalhos de cache.
Cabeçalhos de cache em HTTP
O cache de HTTP possui dois principais cabeçalhos de cache, o primeiro é chamado de "Controle de cache" e o segundo é chamado de "Expirar". Vamos dar uma olhada em ambos:
Controle de cache
Você pode considerar o Controle de cache como um comutador para ativar o cache no navegador do usuário. Depois que esse cabeçalho é adicionado, ele permite o armazenamento em cache para todos os navegadores da web suportados. Se esse cabeçalho não estiver presente, nenhum navegador manterá um cache do conteúdo da página da web, mesmo que ele suporte o cache.
O controle de cache tem dois tipos de configurações de privacidade, o primeiro é público e o segundo é privado.
No caso de Public, os recursos podem ser armazenados em cache por qualquer proxy intermediário, como o Content Delivery Networks (CDN).
Um cabeçalho de Controle de Cache com resposta Privada informará ao navegador que o cache será feito apenas para um único usuário e não para qualquer proxy intermediário.
O valor "max-age" no cabeçalho Cache-Control define o tempo durante o qual o conteúdo será armazenado em cache. Este tempo é em segundos.
Cache-Control:public, max-age=31536000
Expira
O cabeçalho Expira é usado quando o Controle de cache está presente no código. Este é um cabeçalho de cache HTTP simples que define uma data a partir da qual qualquer recurso de cache é considerado inválido. Depois que o cache expirar e o usuário carregar o site, um navegador simplesmente solicitará todo o conteúdo da página novamente.
Solicitações Condicionais
Os cabeçalhos discutidos acima simplesmente informam ao navegador quando recuperar os dados do servidor da web. Solicitações condicionais, por outro lado, informam ao navegador como recuperá-lo. Solicitações condicionais informam ao navegador como ele pode perguntar ao servidor se a cópia dos dados no cache está desatualizada.
Nesse processo, o navegador envia alguns dados sobre os recursos armazenados em cache na memória e, após a leitura desses dados, o servidor decide se os dados estão desatualizados ou não.
Solicitações com base no tempo
Em solicitações baseadas em tempo, é verificado se o recurso solicitado foi alterado no servidor ou não. Se a cópia em cache no navegador for a mais recente, o servidor retornará o código 304.
Para definir a solicitação condicional com base no tempo, você pode usar "Última modificação" no cabeçalho da resposta.
Cache-Control:public, max-age=25998579
Last-Modified: Fri, 08 Jul 2018 15:25:00 GMT
Baseado em conteúdo
Nas solicitações baseadas em conteúdo, o MD5 Hash (ou qualquer outra opção viável) é verificado tanto na cópia do servidor quanto na cópia do cache. Isso informa se os dados são iguais ou não, caso os dados sejam diferentes, a soma de verificação MD5 não corresponderá e o servidor enviará uma nova cópia dos recursos.
Isso é feito via "ETag" no cabeçalho. O valor disso é o resumo de recursos.
Cache-Control:public, max-age=25998579
ETag: "496d7131f15f0fff99ed5aae”
Visibilidade
Quase todos os navegadores modernos incluem algumas ferramentas relacionadas ao desenvolvimento que permitem verificar recursos, código fonte e outros aspectos de uma página da web. Entre eles, você pode encontrar uma ferramenta para ver os cabeçalhos retornados por qualquer aplicativo.
No Google Chrome, para visualizar esses cabeçalhos, você pode clicar com o botão direito do mouse em qualquer área vazia de uma página da web e clicar em “Inspecionar” ou pressionar CTRL + SHIFT + I para abrir o DevTools. Nesta ferramenta, clique na guia Rede e pressione CRTL + R para recarregar e ver todos os cabeçalhos da página.
Casos de uso no cache HTTP
Abaixo estão alguns casos de uso do cache em HTTP, que são os seguintes:
Para ativos estáticos
Para ativos estáticos de uma página como imagens, arquivos JS e quaisquer arquivos CSS, você pode optar por armazenar em cache agressivamente o conteúdo. Não precisar carregar esses arquivos resultará em uma impressionante melhoria de desempenho. Nesse caso de uso, vá para o Cabeçalho de controle de cache com o valor máximo de idade de mais de um mês ou até um ano.
Cache-Control:public; max-age=31536000
Para conteúdos dinâmicos
No caso do conteúdo dinâmico de uma página, você precisará pensar em quais arquivos o navegador deve armazenar em cache e por quanto tempo. Caso o conteúdo seja alterado com freqüência, você precisará garantir que o tempo escolhido para o cache não resulte em nenhum problema para o usuário.
Armazenamento em cache de conteúdo privado
Como discutimos na seção Controle de cache, caso o conteúdo da página seja de natureza privada, você pode impedir que ela seja armazenada em cache por proxies intermediários, como CDNs, adicionando “Cache-Control: private” no cabeçalho.
Outra abordagem mais segura é não armazenar em cache nenhum conteúdo privado.
Implementando o Cache HTTP
Agora que você sabe o que é cache de HTTP e como ele funciona, vamos ver como você pode implementá-lo em seu site. A implementação do cache em HTTP é um pouco diferente para diferentes tipos de servidores. No nosso caso, vamos dar uma olhada na implementação do cache por meio do arquivo .htaccess.
Para habilitar o cache no site, você pode adicionar os cabeçalhos no arquivo .htaccess no seu servidor, por exemplo:
FilesMatch "\.(ico|pdf|flv|jpg.webp|jpeg.webp|png|gif|js|css|swf)$"
Header set Cache-Control "max-age=31536000, public"
/FilesMatch
O acima armazenará em cache todos os formatos, pdf, flv, jpg.webp e outros formatos mencionados mencionados na "Correspondência de arquivos" por um ano.
Conclusão
O cache em HTTP é um dos truques mais importantes que tornam a navegação em seu site uma experiência mais rápida para seus visitantes e, agora que você pode ver como ele funciona, pode implementá-lo em seus sites e aplicativos da web para torná-los mais rápidos para seus usuários e para economizar a largura de banda do servidor.
Artigos recomendados
Este foi um guia para o cache de HTTP. Aqui discutimos a implementação, solicitações condicionais, cabeçalho de cache e casos de uso de HTTP. Você também pode consultar nossos outros artigos sugeridos para saber mais -
- Aprenda o que é HTML
- Como instalar o Github?
- O que é o MapReduce no Hadoop?
- Guia para iniciantes de comandos do nó
- Cookies HTTP | Segurança