Como Melhorar a Velocidade do Site Aproveitando o Cache do Navegador

Os projetos de páginas da Web estão ficando cada vez mais ricos ao longo do tempo, o que significa mais scripts, folhas de estilo e imagens na página.

Por isso, o uso de um ou vários mecanismos de cache para o seu site pode melhorar e muito a velocidade de carregamento das suas páginas da web.

O desempenho da Web está recebendo cada vez mais atenção dos desenvolvedores web, é um dos tópicos mais interessantes no desenvolvimento web.

E a velocidade é um fator que contribui para o rankeamento do seu site no Google.

Um site mais rápido significa mais receita e mais tráfego.

Aproveitar o Cache do Navegador ou Leverage Bowser Caching consiste em aproveitar o armazenamento em cache do navegador web.

Um mecanismo de cache que funciona no computador do visitante.

Para os sites, essa é a maneira mais eficaz de armazenar em cache.

Vamos abordar nesse artigo um pouco mais sobre como Aproveitar o Cache do Navegador e algumas outras formas de aproveitar o cache para acelerar seu site ainda mais.

O que é o cache do navegador?

Toda vez que um navegador carrega uma página da Web, ele precisa baixar todos os arquivos da Web para exibir corretamente a página.

Isso inclui todos os HTML, CSS, Javascript e imagens.

Algumas páginas podem conter apenas alguns arquivos e ser de tamanho pequeno, talvez alguns poucos kilobytes.

Outras, no entanto, podem ter muitos arquivos e estes podem ter vários megabytes.

O Twitter.com, por exemplo, tem mais de 3MB.

Esses arquivos grandes levam mais tempo para carregar e podem ser especialmente dolorosos se você estiver com uma conexão de internet lenta (ou um dispositivo móvel).

Cada arquivo faz uma solicitação separada para o servidor.

Quanto mais pedidos seu servidor recebe simultaneamente, mais trabalho ele precisa fazer, reduzindo ainda mais a velocidade da sua página.

O cache do navegador pode ajudar no armazenando de alguns desses arquivos localmente no navegador do usuário.

Sua primeira visita ao seu site levará o mesmo tempo para carregar, no entanto, quando esse usuário voltar em seu site, atualizar a página ou mesmo navegar para uma página diferente do seu site, eles já vão possuir alguns dos arquivos que eles precisam localmente.

Isso significa que a quantidade de dados que o navegador do usuário precisa baixar é menor, e é necessário fazer menos solicitações no seu servidor.

O resultado?

Diminuição dos tempos de carregamento da página.

Aproveitando o Cache do Navegador

Como funciona?

O cache do navegador funciona marcando certas páginas, ou partes de páginas, como sendo necessárias para serem atualizadas em diferentes intervalos.

Seu logotipo em seu site, por exemplo, é improvável que mude de um dia para o outro.

Ao armazenar em cache esta imagem de logotipo, podemos dizer ao navegador do usuário que apenas baixe essa imagem uma vez por semana.

Toda visita que o usuário faz dentro de uma semana não exigirá outro download da imagem do logotipo.

Editando seus cabeçalhos HTTP informando o navegador para armazenar esses arquivos e não baixá-los quando você retornar, você economiza o tempo de seus usuários e a largura de banda do seu servidor web.

Aproveitando Cache do Navegador para Apache através do arquivo .htaccess

Você pode aproveitar o cache do navegador para servidores Apache, adicionando um pequeno trecho ao arquivo .htaccess.

Abaixo estão as duas maneiras recomendadas de fazer isso:

Expire Headers – mod_expires

Adicione o seguinte código ao arquivo .htaccess e edite o tempo de acesso e os tipos de arquivo ao seu gosto:

# Expire headers
<IfModule mod_expires.c>
    ExpiresActive On
    AddType application/vnd.ms-fontobject .eot 
    AddType application/x-font-ttf .ttf
    AddType application/x-font-opentype .otf
    AddType application/x-font-woff .woff
    AddType image/svg+xml .svg
    AddType image/x-icon .ico
    ExpiresByType application/vnd.ms-fontobject "access 1 year"
    ExpiresByType application/x-font-ttf "access 1 year"
    ExpiresByType application/x-font-opentype "access 1 year"
    ExpiresByType application/x-font-woff "access 1 year"
    ExpiresByType application/javascript "access 1 year"  
    ExpiresByType application/x-javascript "access 1 month"
    ExpiresByType application/xhtml+xml "access 1 week"
    ExpiresByType application/pdf "access 1 month"
    ExpiresByType application/x-shockwave-flash "access 1 month"
    ExpiresByType application/json "access 1 year"
    ExpiresByType application/rss+xml "access 1 week"
    ExpiresByType text/html "access 1 month"
    ExpiresByType text/css "access 1 year"
    ExpiresByType text/javascript "access 1 year"
    ExpiresByType text/x-javascript "access 1 year"
    ExpiresByType text/xml "access 1 week"
    ExpiresByType text/x-component "access 1 month"
    ExpiresByType image/svg+xml "access 1 year"
    ExpiresByType image/gif "access 1 year"
    ExpiresByType image/png "access 1 year"
    ExpiresByType image/jpg "access 1 year"
    ExpiresByType image/jpeg "access 1 year"
    ExpiresByType image/vnd.microsoft.icon "access 1 week"
    ExpiresByType image/x-icon "access 1 year"
    ExpiresByType image/ico "access 1 year"
    ExpiresByType image/icon "access 1 year"
    ExpiresByType video/ogg "access 1 week"
    ExpiresByType audio/ogg "access 1 week"
    ExpiresByType video/mp4 "access 1 week"
    ExpiresByType video/webm "access 1 week"
    ExpiresByType font/truetype "access 1 year"
    ExpiresDefault "access 1 year"
</IfModule>

Não está funcionando?
Certifique-se de que o módulo mod_expires esteja ativado em seu servidor executando o seguinte comando por meio do acesso SSH (ou pergunte ao seu servidor de hospedagem sobre isso):

sudo a2enmod expires

Cache-Control Headers – mod_headers

Adicione o seguinte código ao arquivo .htaccess:

# Cache-Control Headers
<ifModule mod_headers.c>
    Header set Connection keep-alive
    <filesmatch "\.(ico|flv|gif|swf|eot|woff|otf|ttf|svg)$">
        Header set Cache-Control "max-age=2592000, public"
    </filesmatch>
    <filesmatch "\.(jpg|jpeg|png)$">
        Header set Cache-Control "max-age=1209600, public"
    </filesmatch>
    # css and js should use private for proxy caching https://developers.google.com/speed/docs/best-practices/caching#LeverageProxyCaching
    <filesmatch "\.(css)$">
        Header set Cache-Control "max-age=31536000, private"
    </filesmatch>
    <filesmatch "\.(js)$">
        Header set Cache-Control "max-age=1209600, private"
    </filesmatch>
    <filesMatch "\.(x?html?|php)$">
        Header set Cache-Control "max-age=600, private, must-revalidate"
    </filesMatch>
    Header append Vary User-Agent env=!dont-vary
    # Disable caching for scripts and other dynamic files
    <FilesMatch "\.(pl|php|cgi|spl|scgi|fcgi)$">
        Header unset Cache-Control
    </FilesMatch>
</ifModule>

Nota 1: Não há necessidade de definir a diretiva max-age com o Cache-Control Headers, uma vez que já está configurado pelo módulo mod_expires.

Nota 2: must-revalidate significa que uma vez que uma resposta fica obsoleta deve ser revalidada; Isso não significa que ele tenha que ser verificado sempre.

Não está funcionando? 
Certifique-se de que o módulo mod_headers esteja ativado em seu servidor executando o seguinte comando via acesso SSH (ou pergunte ao seu host sobre isso):

sudo a2enmod headers

Aproveitando Cache do Navegador para servidores Windows

Você pode aproveitar o cache do navegador para servidores Microsoft (Windows / ASP.NET), configurando-o no Gerenciador do IIS ou adicionando um pequeno código ao arquivo web.config.

Adicionando código ao arquivo web.config

Adicione o snippet abaixo ao arquivo web.config.

O arquivo web.config deve ser colocado na raiz do documento do seu site.

<system.webServer>
  <staticContent>
    <clientCache cacheControlMode="UseMaxAge" cacheControlMaxAge="30.00:00:00" />
  </staticContent>
</system.webServer>

O snippet acima armazenará todos os recursos estáticos que suas páginas web carregam.

Você pode controlar o período do cache por meio da configuração cacheControlMaxAge .

Agora o cache está configurado para 30 dias.

Configurando pelo Gerenciador do IIS

Siga as etapas abaixo:

  1. Navegue para o menu Iniciar >> Ferramentas administrativas >> Gerenciador de Serviços de Informações da Internet (IIS).
  2. Encontre seu aplicativo na lista do lado esquerdo.
  3. Clique com o botão direito do mouse no aplicativo e selecione Cache de saída no menu.
  4. Clique agora em Adicionar. Agora você pode adicionar regras de cache para qualquer tipo de arquivo da Web que desejar.

Acelere seu site ainda mais

Mesmo que o cache do navegador seja a forma mais poderosa de armazenamento em cache quando se trata da velocidade da página, existem algumas outras formas de cache que poderiam acelerar seu site ainda mais.

Você encontrará algumas das melhores abaixo.

Desativar o Header HTTP ETag

De forma sucinta, ETag é um mecanismo do HTTP para validação condicional de cache.

A ideia é servir conteúdo a ser cacheado com um identificador (geralmente um hash ou número de versão).

O cliente então passa a usar esse identificador para perguntar ao servidor se o conteúdo mudou.

Por exemplo: O usuário recebe uma imagem com o Header ETag e então cacheia essa imagem.

Quando o usuário requisitar a imagem novamente o cliente pode usar o identificador para “perguntar” ao servidor se a versão em cache ainda é válida.

Se a versão ainda for válida o servidor volta uma resposta com código 304, indicando que é seguro para o cliente usar a versão em cache.

No caso da imagem ter mudado o servidor responde com código 200, a nova versão da imagem e uma nova ETag.

Dessa forma, consideramos ETag um mecanismo de validação de cache baseado em conteúdo, em oposição ao par de Headers Last-Modified e If-Modified-Since que configuram um mecanismo de validação baseado em tempo.

Ambos os mecanismos de validação são complementares aos Cache-Control Headers e Expires vistos acima que basicamente dizem para o cliente se ele deve ou não cachear um recurso e até quando.

No Apache, isso é feito simplesmente adicionando a diretiva FileETag ao seu arquivo de configuração:

# BEGIN Turn ETags Off
FileETag None
# END Turn ETags Off

Cache para sites do WordPress

Você pode fazer o WordPress muito mais rápido quando você usa o armazenamento em cache para o banco de dados do WordPress.

Ao usar o armazenamento em cache, o WordPress não precisa acessar o banco de dados sempre que um visitante solicita determinados dados porque esses dados serão armazenados em cache.

A maneira mais fácil de implementar o cache para um site do WordPress é usando um plugin de cache.

Recomendo usar o WP Super Cache, o W3 Total Cache ou o WP Rocket, pois, ao meu ver, são os melhores plugins de cache disponíveis no mercado.

Armazenamento em cache do Joomla

O Joomla (segundo CMS mais usado) possui um sistema de cache interno.

Veja aqui mais informações sobre como usá-lo.

Cache Drupal

O Drupal (o terceiro CMS mais popular) também possui uma opção de cache embutida que você pode controlar no painel de controle.

Leia isso para aproveitar ao máximo o cache para o Drupal.

Cache para Script PHP

Você pode armazenar em cache a saída de scripts PHP para acelerar a entrega aos visitantes e diminuir a carga do servidor.

Entre os melhores cachers do PHP está o Zend OPcache, que é instalado automaticamente com o PHP 5.5.0 e posterior.

Veja aqui mais informações sobre como usá-lo e fazê-lo funcionar.

Se você não tem acesso a um servidor, você pode perguntar ao seu servidor de hospedagem se eles podem instalá-lo (o que geralmente já existe).

O APC também é um popular acelerador PHP que você poderia usar também (mas não é atualizado há algum tempo).

Use o armazenamento em cache para seus aplicativos Java

Você pode usar o Java Caching System para acelerar, através de cache dinâmico, quando você executa um aplicativo Java.

Ajuste o desempenho do cache do MySQL

O MySQL possui um sistema de armazenamento em cache interno que quase sempre exige que você edite as configurações do arquivo de configuração do MySQL para usá-lo melhor.

Quando você tem acesso SSH ao seu sistema, você pode usar o script MYSQLTuner.pl para ver o quão bem o seu cache do MySQL é e qual das configurações do MySQL você precisa mudar para um melhorar o desempenho.

Depois de saber quais configurações serão alteradas, edite essas configurações no arquivo de configuração do MySQL.

Use um aplicativo de cache do servidor

Se você tem acesso SSH a um servidor, você pode instalar um aplicativo de cache que armazena em cache arquivos e conteúdo acessados ​​com frequência.

Um dos melhores é o cache de verniz, que é uma aplicação gratuita que é compatível com todos os principais sistemas operacionais e pode ser instalada a partir da linha de comando. Confira como usá-lo.

O verniz pode ser usado com múltiplos sistemas (como Apache e outros).

Outra excelente aplicação usada por muitos é Squid.

Ferramentas de desempenho da Web

Verifique sempre as suas alterações.

Utilize plugins de navegador YSlow ou Google Page Speed.

Eles são super fáceis de usar e as melhores ferramentas atualmente disponíveis para o trabalho.

Conclusão

A velocidade de carregamento das páginas do seu site é mais do que um recurso, a velocidade é a característica mais importante.

Se o seu site for lento, as pessoas não irão navegar por ele e não retornarão mais a acessá-lo.

Aproveitar o Cache do Navegador, que é o mecanismo de cache mais importante para a velocidade de uma página, é muito útil para que os visitantes do seu site tenham uma experiência ligeiramente melhor e mais rápida ao navegar no seu site, além de melhorar o fator velocidade de carregamento dentre os vários fatores de rankeamento do Google.

E em seu site, você se utiliza do cache para suas páginas carregarem com mais velocidade?

Não se esqueça, se esse artigo do blog foi útil pra você compartilhe com outras pessoas e após fazer seus testes e botar em prática o que aprendeu, comente aqui seus resultados.

Sua opinião e experiências podem ser muito úteis para os outros leitores.

Referências: www.GiftOfSpeed.com e GTmetrix.com.

Você também vai gostar:

O que você achou deste conteúdo? Têm alguma dúvida ou sugestão? Comenta aí!

Nenhum Comentário, até o momento.

    Deixe um comentário

    Você quer ser VIP?

    VOCÊ QUER SER VIP?!

    Obtenha acesso instantâneo à minha Biblioteca de Recursos GRÁTIS. Receba as Últimas Notícias, Ofertas, DescontosBônus e Conteúdos Exclusivos que não são compartilhados em nenhum outro lugar.

    Digite seu nome e endereço de e-mail AGORA e seja VIP ⤵︎