Hospedagem de sites

Melhorando o desempenho do site – Aproveitando o cache do navegador

Ao abrir uma página web, em primeiro lugar o navegador deve baixar todo o conteúdo (HTML, CSS, Javascript, imagens). Carregando um site grande pode ser uma experiência não muito legal se você estiver em uma conexão lenta à Internet (ou usando um telefone celular). Cada arquivo faz uma solicitação separada para o servidor e quanto mais solicitações o servidor recebe ao mesmo tempo, mais trabalho precisa fazer, o que pode resultar em uma velocidade de página lenta.

O cache do navegador pode ajudar armazenando arquivos localmente no navegador do usuário. Ao visitar o site pela primeira vez, será necessário o mesmo tempo que o habitual para carregar, no entanto, quando esse mesmo usuário revisitar o site, atualizar ou até mesmo ir para uma página diferente do seu site, eles já terão alguns dos Arquivos armazenados localmente. Isso significa que o navegador do usuário tem de baixar menos dados e fazer menos solicitações ao servidor, resultando em tempos de carregamento de página menor.

O que você precisa?

Antes de começar este guia, você precisará do seguinte:

  • Acesso ao arquivo .htaccess

Etapa 1 – Edição do arquivo .htaccess

O processo é muito simples, o código a seguir precisa ser adicionado ao seu arquivo .htaccess (um guia sobre como localizar seu arquivo .htaccess pode ser encontrado aqui):

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 7 days"
</IfModule>
## EXPIRES CACHING ##

Depois que as alterações forem salvas, o cache do navegador será ativado para seu site.

Etapa 2 – Testando o cache do navegador

O cache do navegador pode ser testado com várias ferramentas, como WebPageTest ou GTMetrix

Aqui estão os resultados ANTES de adicionar o cache do navegador:

test cache 1

Para comparação, aqui estão os resultados depois de adicionar o cache do navegador:

test cache 2

Conclusão

Neste guia breve, aprendemos como aumentar o desempenho do seu site, ativando o cache do navegador. Para ficar por dentro das nossas newsletter e saber dos nossos conteúdos e eventos em primeira mão, cadastre seu e-mail!Assinar Newsletter Hostinger

Guias relacionados:

Melhorando o desempenho do site: compressão gzip

Melhorando o desempenho do site: exibindo imagens em escala

Melhorando o desempenho do site: minificando CSS, HTML e JavaScript

Rafael H.

Jornalista e estudante de economia, Rafael H faz parte da equipe de marketing da Hostinger desde 2017. Atualmente trabalha com crescimento e aquisição da empresa focado na aquisição de novos afiliados. Se apaixonou pelo mundo da tecnologia e hospedagem de sites, tendo experiência com WordPress, marketing digital e ferramentas de automação de marketing. Também já trabalhou como analista de conteúdo, redator, assessor de imprensa e analista de comunicação.

6 Comentários

Deixe seu comentário!

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Todos estes artigos merecem nosso respeito, como você que é um profissional digno da mais profunda admiração pela forma incansável com a qual se dedica ao seu objetivo e profissão com determinação.meus parabens pelos seus artigos.

  • Bom dia

    ExpiresByType text/x-javascript “access plus 1 month”

    aqui eu defino que os arquivos javascript devem ser mantidos em cache por 1 mês, mas caso haja alguma alteração em algum arquivo javascript, como reiniciar o cache?

    • Oi, Ronaldo.

      Você pode adicionar o seguinte depois da linha “ExpiresDefault…”:

      Header append Cache-Control must-revalidate

      Isso vai fazer com que durante o acesso, o servidor refaça a validação do cache, atualizando os arquivos que tiverem sido alterados. Esta linha deve ser mantida enquanto estiver fazendo alterações. Porque ela faz o servidor verificar novamente o cache, o que de certa forma não deixa o cache ser eficiente como deveria, já que ele serve justamente para não perguntar nada pro servidor.

      Espero que dê certo! 😉

Comece a Economizar Agora!

Hospedagem com tudo incluso e nome de domínio
R$2
29
/mês*

Cadastre-se

Receba nossos conteúdos e novidades direto no seu e-mail!

 

Estamos cadastrando...

Pronto! Obrigado por se inscrever!