Como implementar o cache do navegador para otimizar o seu site.


Recursos estáticos como textos, imagens, vídeos, configurações CSS e fontes podem ser armazenados no navegador do próprio cliente (visitante do seu site) de modo que as próximas visitas ofereçam a ele uma experiência mais agradável de performance.

No entanto, o navegador deve ser informado que deverá guardar estas informações. Esta informação é definida nos cabeçalhos HTTP do seu site. Em servidores Linux, quem é o responsável por montar os cabeçalhos HTTP é o Apache, portanto, para trabalhar com o Apache devemos utilizar um arquivo .htaccess para fazermos esta configuração.

Otimizar Site usando Cache do Navegador

Editando o arquivo .htaccess para aproveitar o cache do navegador.

  1. Dentro da pasta public_html, verifique se existe um arquivo .htaccess, caso não tenha, basta criá-lo.
  2. Edite o arquivo acrescentando o seguinte código.
#Força a utilizar Cache-Control e Expires header
<IfModule mod_headers.c>
 Header unset ETag
</IfModule>
FileETag None
<IfModule mod_expires.c>
 ExpiresActive on
 ExpiresDefault "access plus 1 month"
 ExpiresByType text/cache-manifest "access plus 0 seconds"
 # Html
 ExpiresByType text/html "access plus 0 seconds"
 # Data
 ExpiresByType text/xml "access plus 0 seconds"
 ExpiresByType application/xml "access plus 0 seconds"
 ExpiresByType application/json "access plus 0 seconds"
 # Feed
 ExpiresByType application/rss+xml "access plus 1 hour"
 ExpiresByType application/atom+xml "access plus 1 hour"
 # Favicon
 ExpiresByType image/x-icon "access plus 1 week"
 # Media: images, video, audio
 ExpiresByType image/gif "access plus 1 month"
 ExpiresByType image/png "access plus 1 month"
 ExpiresByType image/jpg "access plus 1 month"
 ExpiresByType image/jpeg "access plus 1 month"
 ExpiresByType video/ogg "access plus 1 month"
 ExpiresByType audio/ogg "access plus 1 month"
 ExpiresByType video/mp4 "access plus 1 month"
 ExpiresByType video/webm "access plus 1 month"
 # HTC files
 ExpiresByType text/x-component "access plus 1 month"
 # Webfonts
 ExpiresByType application/x-font-ttf "access plus 1 month"
 ExpiresByType font/opentype "access plus 1 month"
 ExpiresByType application/x-font-woff "access plus 1 month"
 ExpiresByType image/svg+xml "access plus 1 month"
 ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
 # CSS / JS
 ExpiresByType text/css "access plus 1 year"
 ExpiresByType application/javascript "access plus 1 year"
 ExpiresByType application/x-javascript "access plus 1 year"
</IfModule>
#Força o IE a sempre carregar utilizando a última versão disponível
<IfModule mod_headers.c>
 Header set X-UA-Compatible "IE=Edge,chrome=1"
 <FilesMatch "\.(js|css|gif|png|jpeg|pdf|xml|oga|ogg|m4a|ogv|mp4|m4v|webm|svg|svgz|eot|ttf|otf|woff|ico|webp|appcache|manifest|htc|crx|oex|xpi|safariextz|vcf)$" >
 Header unset X-UA-Compatible
 </FilesMatch>
</IfModule>

Salve o arquivo e teste o acesso ao seu site. Caso retorne erro interno 500, entre em contato com o suporte da inVettor para lhe auxiliar na edição do arquivo.

 

Compacte o conteúdo do seu site com GZip.

Agora, o toque refinado disso tudo é compactar o conteúdo do seu site usando a compactação GZIP disponível nos servidores da inVettor.

Em seu CPanel basta procurar pelo item Otimizar site.

otimizar-site-gzip

Se você é um revendedor, pode definir este recurso sempre que adicionar um novo cliente na sua revenda. Apenas dê atenção aos sites WordPress que utilizam plugins de controle de cache, estes plugins em sua maioria já implementam o GZip e podem haver conflitos entre as compactações e neste caso, será necessário desativar o GZip do CPanel.

Reduza suas imagens, reduza o tamanho dos seus arquivos CSS e JS com minify

Leia nosso artigo de Como deixar seu site mais rápido, você encontrará dicas valiosas neste artigo. Considere também o uso do serviço da nuvem pública do Cloudflare para otimizar também o tempo de resposta do servidor.

Deixe seu comentário