Como aumentar velocidade de seu site? Veja como chegar na nota 100/100 PageSpeed

27 Comentários

Page Speed 100/100 MobilePasso-a-passo para aumentar a performance de seu site e sua nota no PageSpeed

Velocidade e tempo de carregamento de um site atualmente é primordial, além de ser um fator de classificação de SEO para aparecer bem posicionado, e entre as primeiras posições da busca orgânica. Os usuários não tem mais paciência de esperar nem 3 segundos para uma página ser carregada, ainda mais quando o visitante está visualizando seu site através de um dispositivo móvel.

Hoje em dia mais de 50% do tráfego on-line são provenientes de Smartphones e esperam que o site seja carregado instantaneamente. E para verificar essa velocidade existem ferramentas para testes de velocidade como o Google PageSpeed Insights, WebPagetest, GTMetrix e o KeyCDN que lhe dão uma visão sobre a forma como o site carrega e fornece recomendações práticas sobre como otimizá-lo tanto para desktop e mobile.

 

Aumentar Velocidade do Site em WordPress

Para quem utiliza a plataforma WordPress facilita e muito o processo de otimização de velocidade para acelerar seu WordPress, pois existem plugins de performance que basta instalar e configurar que deixa seu site mais rápido. No arquivo .htaccess basta copiar e colar alguns códigos para aproveitar cache, otimização e compressão de imagens ou então compactar JavaScript e CSS automaticamente.

Como fazer com que as páginas carreguem mais rápido?

Primeiramente, vamos analisar o site na ferramenta de teste de velocidade PageSpeed Insights para verificar o desempenho atual de seu site. O PageSpeed Insights irá analisar o conteúdo de uma página Web, em seguida, gerar sugestões para torná-la mais rápida.

 
Uma das primeiras opções é na própria ferramenta do PageSpeed, na parte inferior da análise temos a opção de fazer o download dos recursos de image, JavaScript e CSS já otimizados.
 
Basta clicar no link em destaque para baixar os arquivos, e em seguida fazer o upload (via FTP ou Gerenciador de Arquivos) na mesma pasta ou caminho que a ferramenta mostrar na análise.
 
Otimizando PageSpeed
 
Por exemplo: Baixamos os arquivos, e já obtivemos a imagem “plugins.png” otimizada, agora iremos fazer o upload dessa imagem na pasta /screenshots/3.8/ e substituí-la.
 
Otimizar Imagens PageSpeed

O mesmo deverá ser feito tanto para JavaScript e CSS, porém sempre faça um backup dos arquivos que irá modificar, caso mostre algum erro no site futuramente.

 1. Otimizando Imagens automaticamente

 

A ferramenta PageSpeed Insights sugere que otimizemos nossas imagens para carregar mais rápido, reduzindo o tamanho do arquivo. Formatar e compactar corretamente as imagens pode economizar muitos bytes de dados.
 

Veja a solução para otimizar as imagens no WordPress:

 
O plugin EWWW Image Optimizer reduz o tamanho da imagens automaticamente. Ele otimiza as imagens que você já enviou, além de converter para o formato de arquivo que irá produzir o menor tamanho de imagem, e aplicará a compressão para conseguir poupar o tamanho das imagens, sem perda de qualidade.
 

Veja a solução para otimizar as imagens manualmente:

 
  • Você poderá comprimir todas as imagens usando ferramentas como o Compressor.io e TinyPNG. São ferramentas gratuitas e podem reduzir as imagens por mais de 80%, sem diminuir a qualidade.
  • Reduzir o tamanho das imagens para as dimensões mínimas sem diminuir a qualidade. Você nunca deve ter uma imagem com largura e altura mais do que a imagem irá aparecer no site. Por exemplo: Se sua imagem no site é 150x150px, esse deverá ser exatamente o tamanho da imagem, sem redução no CSS ou HTML através de tags.

 

2. Compactação de Arquivos JavaScript e CSS

 

A compactação do código JavaScript e CSS pode economizar muitos bytes de dados e acelerar os tempos de download, de análise e de execução
 

Veja a solução para compactar arquivos JavaScript e CSS no WordPress:

 
O plugin Autoptimize acelera seu site e ajuda a economizar largura de banda através da agregação e minimizar JS, CSS e HTML. Ele concatena todos os scripts e estilos,minifica e comprime, além de acrescentar expiração nos cabeçalhos, armazena-os e move para o rodapé. Também otimiza o código HTML para tornar sua página realmente mais leve.
 
 

Veja a solução para compactar arquivos JavaScript e CSS manualmente:

 
O processo minifying reduz os tamanhos de seus arquivos, eliminando espaços desnecessários, brancos e comentários em seus arquivos JavaScript, CSS e HTML.
 
Para corrigir esse problema, você pode instalar no seu servidor o Gulpjs. A ferramenta cria automaticamente um novo arquivo CSS e remove todos os espaços.
 
Porém, a forma mais fácil é baixar os arquivos da ferramenta PageSpeed como descrito no início da postagem.

 

3. Aproveitando o cache do navegador

 

A definição de uma data de validade ou de uma idade máxima nos cabeçalhos de HTTP para recursos estáticos instrui o navegador a carregar os recursos transferidos anteriormente a partir do disco local e não por meio da rede.
 

Veja a solução para aproveitar cache do navegador no WordPress:

 

O plugin W3 Total Cache melhora a experiência do usuário do seu site, aumentando o desempenho do servidor, reduzindo os tempos de download e proporcionar a integração transparente rede de distribuição de conteúdo (CDN).

Você também pode aproveitar o cache do navegador, adicionando Expiração nos Cabeçalhos. Iremos dizer ao navegador se eles devem solicitar um arquivo específico do servidor ou se deve solicitar através do cache do navegador. O que irá reduzir a quantidade de pedidos HTTP que são necessários.

Adicione o código abaixo em seu arquivo .htaccess, se seu servidor é Apache.

#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>

Veja a solução para aproveitar cache do navegador manualmente:

Você deverá utilizar uma CDN, que são redes de servidores localizados em vários locais do mundo. São capazes de armazenar em cache a versão estática de sites, como imagens, CSS e aquivos JavaScripts. Os CDN armazena cópias de conteúdo do seu site em seus servidores, e quando o usuário acessa seu site, o conteúdo estático é carregado a partir do servidor mais próximo a eles.
 
Por exemplo, se o servidor principal de seu site é de São Paulo, um visitante do Amazonas teria que esperar para o servidor carregar todo o caminho, sendo que com o CDN o site seria carregador a partir de um local mais perto do Amazonas, que iria carregar seu site mais rápido.
 

A melhor descrição para CDN seria: Um servidor perto de você

 
Um dos mais conhecidos é o Cloudflare que opera a partir de 79 servidores de dados ao redor do mundo.
 
Porém, mesmo utilizando toda essa tecnologia, ainda podem aparecer esses tipos de problemas como mostramos na imagem abaixo, de Compactação de JavaScript do PageSpeed com recursos de terceiros:
 
 
Aproveita cache compactar PageSpeed
 

Aproveitar cache Scripts Twitter, Facebook e Google Plus

Para corrigir esse problema de scripts de mídia social, deverá substituir os contadores fornecidos por eles com algumas imagens estáticas hospedadas no CDN. Ao invés, de ter os scripts de terceiros que estavam tentando acessar os dados do Twitter, Facebook e Google Plus para obter o número de seguidores, e hospedá-los em seu servidor.

Aproveitar cache código Google Analytics

Mas ainda resta o Script do Google Analytics, que será mais difícil. Isso ocorre por que o roteiro tem uma duração de cache de apenas 2 horas. Como o código do Analytics é raramente modificado, você deverá criar um script que será executado em algum período, por exemplo de 6 em 6 horas, para verificar a última modificação se houver. Então, o script fará o download do código do Analytics se houver alterações. Desta forma, podemos sediar o código do Google Analytics sem ter que carregá-los nos servidores do Google em cada visita.

Caso, haja modificação no código, o servidor irá automaticamente baixar a nova versão e enviá-lo para o CDN. Isso poderá ser feito para todos os scripts de terceiros externos.

Aproveitar cache código Google Analytics no WordPress

Porém para quem utiliza o CMS WordPress, existe o plugin Analytics.js host que insere o código de monitoramento no cabeçalho, salva o arquivo localmente no analytics.js e o mantém atualizado usando wp_cron (). Basta instalar o plugin, digitar seu ID de rastreamento e adicionar o código de acompanhamento em seu tema.

Aproveitar cache código Google Analytics manualmente

Outra solução é ga-lite script, um script do Google Analytics que utiliza a API do Google Analytics. Copie o seguinte código e cole no rodapé de seu site antes da tag </body>. Não esqueça de alterar com seu UA tracking ID:
<script src="https://cdn.jsdelivr.net/ga-lite/latest/ga-lite.min.js" async></script> <script> var galite = galite || {}; galite.UA = 'UA-XXXXXX'; // Insert your tracking code here </script>
 

4. Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda

 

Tente adiar ou carregar de maneira assíncrona os recursos de bloqueio, ou incorpore in-line as partes fundamentais desses recursos diretamente ao HTML.
 
Veja a solução para eliminar JavaScript e CSS de bloqueio de renderização no WordPress:
 
Nas configurações do Plugins que instalamos, o Autoptimize, devemos configurar da seguinte forma:
 
– Em opções de JavaScript desmarque a opção “Forçar JavaScript no <head>?”
– Em opções de CSS, marque “Colocar todo CSS inline?”

5. Habilitar Compressão ou Ativar Compactação

 

Esta regra é acionada quando o PageSpeed detecta que os recursos compactáveis na página não foram veiculados com a compactação HTTP. Isso pode reduzir a quantidade de tempo exigida para fazer o download dos recursos necessários para processar seu site.
 
Para Apache: use mod_deflate
Para Nginx user HttpGzipModule

Veja a solução para ativar a compactação e habilitar compressão no WordPress

Você pode ativar a compactação, adicionando o seguinte código em seu arquivo .htaccess:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>


Veja a solução para ativar compactação e habilitar compressão manualmente

A sugestão de compressão pode ser feito nas configurações do seu servidor. Se você não é muito técnico, você pode pedir a sua equipe de suporte para ativar a compactação GZIP em seu servidor.
 

6. Reduzir tempo de resposta do Servidor

 

Para reduzir o aviso de tempo de resposta do servidor, as melhores recomendações para isso é usar um serviço de hospedagem rápida e também implementar um CDN.
 

Conclusão

 

Estes são os passos mais importantes para aumentar a velocidade de seu site e chegar na nota 100/100 do PageSpeed Insights.
 
Qual a nota de seu site? Quer deixar seu site mais rápido, mas não sabe como? Entre em contato, que faremos um orçamento e deixarei seu site na velocidade possível, chegando na nota verde do PageSpeed Insights.

Charles David - Coordenador de SEO e Webmaster com experiência mais de 10 anos na área de SEO. Coordenação das Ações desde sua Criação até análise dos resultados e otimização constante. Planejamento e Gestão de: Web Site Optimization - Search Engine Optimization - SEO Otimização de Sites.

Deixe sua opinião sobre SEO

Comentários:

  1. Olá Charles, tudo bom?
    Eu estava pesquisando como arrumar um problema com velocidade do site que administro e encontrei este artigo. Eu sou leigo, comecei a trabalhar com WordPress a pouco tempo e criei o site e mantenho ele por amor mesmo, não tenho interesse nenhum comercial.
    Em minhas pesquisas encontrei vários tutoriais ensinando a como melhorar a velocidade de carregamento do site. Daí eu instalei e configurei alguns plugins conforme fui lendo os tutoriais. Eu instalei o W3 Total Cache, WP Performance Score Booster, Yoast SEO, Google Analytics by MonsterInsights, iThemes Security, Jetpack por WordPress.com (este eu instalei para substituir outros plugins que pioravam a performance do site)…

    E realmente o site deu uma melhora de velocidade de carregamento, mas um problema persiste. Ao verificar o site no Google Insights, aparece aquele erro “Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda”… caso queira ver meu resultado, é este: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fwww.raciociniocristao.com.br

    Eu li seu artigo mas como sou leigo, não entendi muito bem… Este plugin Autoptimize é para resolver isso? Se sim, por favor, me ajude! Como configurar corretamente ele?
    Uma dúvida, como tenho os plugins W3 Total Cache e o WP Performance Score Booster, eles teriam alguma incompatibilidade com o Autoptimize?

    Me ajuda nessa por favor, não tenho como contratar alguém pra resolver isso, estou desempregado e como eu disse, mantenho o site como voluntário sem nada em troca. Espero que possa me ajudar nessa.

    Grande abraço.

    • Bom dia Allison, tudo bem?

      Pode instalar o Autoptimize sem problemas que ele irá corrigir esses “erros” que apontam na ferramenta. Na solução 4 mostro como configurar:

      Veja a solução para eliminar JavaScript e CSS de bloqueio de renderização no WordPress:

      Nas configurações do Plugins que instalamos, o Autoptimize, devemos configurar da seguinte forma:

      – Em opções de JavaScript desmarque a opção “Forçar JavaScript no?”
      – Em opções de CSS, marque “Colocar todo CSS inline?”

      Caso não resolva, esse problema ocorre pois ele consta no topo da página (header), o que você pode testar e ver se funciona é verificar os arquivos que estão apontando na ferramenta e inserir no rodapé (footer).

      Mas sua nota já está muito boa…Parabéns

  2. Milian Eloi disse:

    Agradeço, me ajudou muito este conteúdo.

  3. Rafael disse:

    Muito bom o artigo. Lerei com mais calma !!

  4. Cara, que dureza consertar esses ‘Eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda’ e ‘Aproveitar cache do navegador’! E olha que eu fiz o que tá aqui, tentei outras alternativas e nada.

    Putz!

    não sei mais o que fazer. falta pouco pra atingir os 100/100. Dá uma olhada:

    https://developers.google.com/speed/pagespeed/insights/?hl=pt-BR&url=http%3A%2F%2Fwebsitesempire.com

  5. Fco Bisneto disse:

    Excelente conteúdo. Obrigado, pois me ajudou bastante na otimização do meu site. Estava deixando passar detalhes que realmente não encontramos em conteúdos na web.
    Parabéns e obrigado mais uma vez pelo excelente conteúdo!

    Abçs, Fco Bisneto

  6. Olá Charles, boa tarde! Parabéns pelo artigo!

    Não entendi muito bem a parte que fala Aproveitar cache Scripts Twitter, Facebook e Google Plus

    Poderia me dar um Help!?

    Muito obrigado

  7. Caio disse:

    Meu problema esta sendo no cache das redes sociais, como aproveito do cloudflare para me auxiliar nisso?

  8. Janser disse:

    Valeu pela dica, aumentei consideravelmente meu score após ter seguido alguns passos. Tive melhores resultados na edição de meu .htacess os demais nao alteraram muita coisa. acrescendo apenas 1 a 2 pontos ja na adição dos códigos subiu 12 pontos. Obrigado novamente.

  9. Rafael disse:

    Melhor artigo sobre otimização de imagens que já li até hoje, e olha que já trabalho com isso há anos. É incrível o quanto me ajudou!!!

  10. luiz disse:

    Ola Charles. utilizando um tutorial https://www.elegantthemes.com/blog/tips-tricks/how-to-improve-your-google-page-speed-score fiz o passo a passo e meu score foi subindo até chegar à 82/100. Ativei e desativei o w3 total cache e o wp super cache e outros plugins e tudo ia bem até chegar ao final: Imagens. Ativei o WP Smush e depois de mais de 2000 imagens ‘smushadas’, meu site parou de carregar. ficou em loping. Desativei, exclui, fiz o diabo e nada aconteceu. Tive q solicitar a restauracao do backup no host e comecar tudo de novo. Achei esse tutorial bem pareceido com aquele. Alguma sugestão para meu “reinício”?

  11. Emilio disse:

    Valeu pelas dicas! Consegui sair de 46 para 86 pontos com os procedimentos no .htacess do meu blog: https://www.clubedapipoca.com/blog/

  12. Luciano disse:

    Olá para chegar a 100/100 eu só preciso Priorizar o conteúdo visível sabe que o procedimento no wordprees para fazer isso?
    https://developers.google.com/speed/pagespeed/insights/?hl=pt-br&url=http%3A%2F%2Fvagassergipe.com.br&tab=desktop

  13. Aline disse:

    nossa me ajudou muito
    obrigado

  14. Marcos Martins disse:

    Legal, só faltou mais detalhes para: “Aproveitar cache Scripts Twitter, Facebook e Google Plus”, estou com problemas no meu que não acho a solução.

    https://static.doubleclick.net/instream/ad_status.js (15 minutos)
    https://connect.facebook.net/pt_BR/sdk.js (20 minutos)

  15. Eliezer Silva disse:

    Muito bom esse tuto, brother certamente você dispôs de tempo, energia, etc., para poder fazer um tuto tão bom!

    Parabéns pelo trabalho e dedicação.

  16. Leandro disse:

    Uns dos melhores conteudo da internet, simples é didatico…

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *