Como conseguir um Page Speed 100/100 e 100% no GT Metrix!

Um sonho, certo? Acredito que todo profissional de marketing e que se preocupa intensamente com seo tem o desejo de melhorar seu page speed e nota no GT Metrix.

E não é Vanity Metric não, tá! Um dos critérios que o google usa para rankear melhor ou pior sua página é justamente o tempo de carregamento, experiência do usuário entre outros. Então, além do seu conteúdo ter que ser otimizado para SEO e com uma qualidade incrível para o usuário, você também precisa se preocupar com outros aspectos técnicos caso queira que seu site ou blog alcance os primeiros lugares na busca orgânica.

Nesse post vou te mostrar como consegui que esse blog ficasse com o page speed 100/100. Vou te dar todos os plugins que usei, sites que consultei e mostrar o passo a passo para você conseguir o mesmo resultado!

Está pronto? Aconselho logar no seu wordpress e ir junto comigo otimizando em tempo real! Quero seu comentário no final do texto se as dicas foram úteis e se você também conseguiu um resultado expressivo.

analisando o seu page speed

O primeiro passo é você entender quais são os principais erros e otimizações que seu site hoje necessita. Para isso existem alguns sites na internet que fazem esse diagnóstico de maneira gratuita. Abaixo alguns deles:

Cada um dará uma visão um pouco diferente do que deve ser otimizado e fará você ter ciência dos problemas macros e micros.  Normalmente o que é mais usado no mercado é o Page Speed e o GT Metrix. E nesse post irei focar neles dois.

Antes de começarmos a colocar a mão na massa, abaixo as notas que o meu site tinha antes das otimizações.

Page Speed Mobile

Page Speed Mobile
Page Speed Desktop

Page Speed Desktop
GT Metrix


Pingdom


Monitis


Web Site Pulse


Esses eram os resultados do blog em todos os sites. A partir de agora vamos concentrar as otimizações apenas no Page Speed e GT Metrix!

1º Passo para otimizar seu Page Speed

Quero ressaltar que cada site terá um relatório e diagnóstico diferente, logo os erros que foram apontados no diagnóstico do meu blog podem ser completamente diferente do seu. E, claro, as soluções que vou mostrar aqui funcionam na grande média dos sites, mas não quer dizer que irá se aplicar 100% ao seu.

Portanto, é importante demais antes de começar qualquer otimização você fazer um back up da sua versão atual do wordpress. Assim você vai garantir que se algo der errado nas otimizações você poderá recuperar e deixar tudo como era antes.

Instalando o plugin dabatase back up

Logando no seu WordPress basta seguir o passo a passo da foto acima. Clique em plugin, adicionar novo e digite wp database backup.

Clique em instalar agora. Depois de instalado o plugin vai ficar disponível na aba de ferramentas – WP – DP – Backup.

Acessando basta clicar no botão create new database e seu back-up será automaticamente gerado.

2º PASSO PARA OTIMIZAR SEU PAGE SPEED

Um dos principais problemas de todos os sites e blogs é cache. No diagnóstico inicial do blog também foram apontados vários problemas de cache e que esse era um ponto crítico para se resolver.

Para isso vamos instalar um plugin chamado W3 total cache. Além de ajudar na parte de cache ele também contribui para uma série de outras otimizações de HTML, Javascript, CSS etc.

Para instalar o plugin basta seguir o passo a passo da foto acima. Digitar wp total cache ou w3 total cache e instalar o plugin.

Ao instalar irá aparecer uma nova aba tanto na lateral quanto no topo do seu wordpress com o nome de performance.

Clicando em performance vá em General Settings e vamos começar a configurar seu plugin.

Na parte de Page Cache marque Enable.

Para Page Cache Metod escolha Enhanced (mais indicado caso seu site esteja em um servidor compartilhado). Caso você tenha um servidor próprio marcar a opção que mais se adequa a sua estrutura.

Lembra que falei que o W3 Total Cache também ajudava com CSS, HTML etc? Então, se isso também foi um dos problemas no diagnóstico do Page Speed e GT Metrix você pode tentar resolver habilitando o botão Minify.

Habilite e coloque a opção auto. Se isso não ajudar ou não mudar sua nota iremos configurar manualmente depois.

Outro local para deixar como enable é o de Object Cache. Depois disso pode clicar em salvar all settings.

Lembre que aqui você selecionou a opção de minificar seu site e isso pode desconfigurar seu CSS entre outras coisas. Então, depois de salvar é ideal você acessar seu site e ver se tudo ainda está carregando corretamente.

Em alguns casos depois de clicar em save all settings o Word Press irá informar que o minify automático não funcionou para seu site. Nesse caso você clique no botão manual e aperte novamente save all settings.

Depois disso vá na aba de performance e clique em Minify.

Acessando a área de Minify basta selecionar as opções de acordo com o que está acima e então clicar em save settings & Purge Caches. Assim ele irá atualizar todas as mudanças que acabamos de fazer e limpar seu cache para podermos fazer um teste no Page Speed e GT Metrix e ver se as alterações surtiram efeito.

Quando você clica em Help e depois seleciona todos os boxes para aparecerem você terá acesso a vários componentes e urls. Muitas vezes essas mesmas urls estão dentro do diagnóstico do Page Speed ou GT Metrix como pontos de melhora e você pode verificar a url ou mesmo deletar ela para corrigir o problema (dependendo de qual problema seja).

Lembre de também olhar seu site e analisar se tudo permanece intacto e se tudo está carregando normalmente como deveria, pois o minify pode atrapalhar alguns códigos JavaScript. Então confira se cada script como widgets, analytics, captura de leads, adwords etc estão funcionando normalmente.

page speed mobile depois total cache e minify

Lembrem que o primeiro resultado mobile do site tinha dado 47. Então, com todas as otimizações iniciais tivemos um salto para 61. Uma excelente melhora, mas ainda bem longe dos 100/100. E veja que alguns problemas de JavaScript e CSS ainda existem. Isso significa que o minify não foi 100% efetivo. A boa notícia é que você não precisa se preocupar ainda, pois ao longo do texto vou dar alternativas para resolver isso.

PAGE SPEED desktop DEPOIS TOTAL CACHE E MINIFY

Em relação ao desktop nossa nota inicial era de 61 e tivemos um salto para 71. Aqui ainda aponta problemas de JavaScript também e CSS. Além disso alguns outros problemas de imagens etc. Iremos tratar disso ao longo do texto também.

gt metrix DEPOIS TOTAL CACHE E MINIFY

Nossa nota inicial era de 82% para Page Speed e de 67% para YSlow. Também tivemos um bom salto, mas também longe dos 100%.

Aqui ele ainda aponta alguns erros de caching e que iremos resolver passo a passo.

Continue comigo que a jornada vai ser incrível! 😉

3º PASSO PARA OTIMIZAR SEU PAGE SPEED

Um dos pontos que também pode ajudar você a melhorar seu score no Page Speed e GT Metrix é ter uma CDN bem configurada. E um dos melhores plugins para isso é o Cloud Flare. Ele ajuda a melhorar e velocidade e segurança do seu site. Veja aqui as principais vantagens de usar.

Acesse www.cloudflare.com/ e crie uma conta clicando em sign up no canto direito superior da tela. Depois de logado você verá a tela acima e poderá adicionar o seu site.

Coloque seu domínio no local indicado da foto e clique em Begin Scan.

Ele irá apresentar tudo que você poderá passar pelo Cloud Flare. Clique em continuar.

Depois ele vai te apresentar os planos. Pode escolher o gratuito mesmo por enquanto.

No final ele vai mostrar todos os seus domínios atuais e como eles ficarão no Cloud Flare. Demorará umas 12h para atualizar tudo, mas você já terá acesso. Clique em continue.

Agora vamos configurar o Cloud Flare dentro do WordPress.

Vá na página de plugins faça como está na foto acima.

Depois de instalado, o plugin irá solicitar uma API. Para isso você deverá ir novamente no site do Cloud Flare. No canto direito superior da tela (se você estiver logado) irá aparecer o seu e-mail. Clique nele e depois aperte em settings.

Ele irá abrir uma página. Desça ela inteira e terá um botão azul View API Key e ao lado o texto Global API Key. Aperte nesse botão azul e ele lhe dará a API. Depois é só colocar esse dado no seu WordPress.

Depois você pode clicar em apply default settings e depois em purge cache.

Por você ter instalado o Cloud Flare e colocado as configurações originais pode gerar uma incompatibilidade em alguns casos com as otimizações que acabamos de fazer acima. Para isso, basta você fazer um novo teste e ver como ficou seu score.

PAGE SPEED MOBILE DEPOIS cloud flare

No Mobile estávamos com 61 e caímos para 60. E alguns dos principais erros continuaram a existir.

PAGE SPEED desktop DEPOIS CLOUD FLARE

Já no desktop tivemos um pequeno avanço de 71 para 73 e os mesmos problemas da avaliação anterior.

GT METRIX DEPOIS cloud flare

Já no GT Metrix tivemos uma queda de 89% para 85% e de 74% para 71%. Sendo as principais causas cache no browse e otimização de JavaScript e CSS.

4º PASSO PARA OTIMIZAR SEU PAGE SPEED

Depois de instalado o cloudflare no Page Speed ele deu algumas sugestões de melhorias para eliminar JavaScript e CSS de bloqueio de renderização no conteúdo acima da borda e Compactar CSS. E de novo cache do navegador.

Para otimizar todos esses parâmetros vamos tentar algo novo.

Vá na aba lateral do WordPress – Performance – Browse Cache.

Selecione as opções:

Set Last-Modified header
Set expires header
Set cache control header
Set entity tag (ETag)
Set W3 Total Cache header
Don’t set cookies for static files

Se o Enable HTTP (gzip) compression estiver marcado de forma automática pode desmarcar ele, pois já estamos otimizando com os outros padrões acima.

Depois disso clique em Save Settings and Purge Caches.

Agora vá em Performance – Page Cache

Selecione a opção Cache feeds: site, categories, tags, comments.

Depois disso clique em Save Settings and Purge Caches.

Agora vá em Performance – Minify

Selecione na parte de JS as opções:

Preserved comment removal (not applied when combine only is active)
Line break removal (not safe, not applied when combine only is active)
Depois vá em CSS, clique em enable e selecione
Preserved comment removal (not applied when combine only is active)
Line break removal (not applied when combine only is active)
Eliminate render-blocking CSS by moving it to HTML body (Available after upgrade)

E depois clique em save all settings

Deve aparecer essa mensagem para você: Minify via disk is currently enabled.

Depois clique na parte superior da tela em empty minify cache e empty de page cache.

Caso o CSS do seu site quebrar por conta dessas configurações você pode voltar e na parte de css desmarcar as duas opções que você marcou e deixar apenas marcada a parte de enable.

E na parte de html selecionar a opção Line break removal.

Se ainda assim não funcionar, volte lá e na parte de css clique em “combine only”.

Se mesmo assim não atualizar o css você terá que desabilitar a opção de css na parte de minify.

Se o seu site perdeu o visual e “quebrou” com essas configurações, não se preocupe. Vamos em frente tentar outras alternativas para você! Afinal, ainda não chegamos no 100/100! 😉

Nessa parte não tenho o relatório do Page Speed, pois essas configurações do Minify acabaram afetando o site e tive que tirar todas. Se isso ocorreu com você também o 5º passo vai te ajudar a reverter a situação.

5º PASSO PARA OTIMIZAR SEU PAGE SPEED

Já que as configurações acima não deram tanto certo e o efeito foi pequeno, continuamos com os mesmos problemas de antes. Para isso vamos testar outro plugin. O Speed Booster.

Depois de instalado vá em configurações da sua aba do WordPress e clique em Speed Booster Pack.

Como o Page Speed também deu que poderíamos otimizar imagens você pode aproveitar e usar essa opção do Page Speed para diminuir o nível de compressão.

Lembre que várias das opções acima de CSS, HMTL e JavaScript estavam marcadas no Minify. Como lá não deu o efeito para algumas delas você pode fazer uma mescla dos dois. Deixando otimizações de Minify para Java Script por exemplo e no Speed Booster para outros parâmetros. Vale ir testando qual combinação irá funcionar melhor no seu site ou blog.

Lembre que você só deve habilitar essas opções se estiver dentro das sugestões de melhoria do PageSpeed e também do GTMetrix, ok?

Vamos ver se o resultado foi positivo?

PAGE SPEED MOBILE DEPOIS Speed Booster

O último resultado que tínhamos tido era de 60. Então, com essas otimizações tivemos uma pequena queda e ainda temos problemas com JS e CSS. Aqui você pode mesclar como falei acima e selecionar outras opções do Speed Booster para ajudar nisso. De toda maneira, vamos ver ainda outros plugins para solucionar isso e depois a combinação ideal de todos.

PAGE SPEED Desktop DEPOIS SPEED BOOSTER

Já para desktop era 73 e continuou. Tendo como principal ponto de problema a otimização de imagens, o que será nosso foco em breve.

GT METRIX DEPOIS do speed booster

Já no GT Metrix as modificações surtiram efeito. Saímos de 85% para 89% e de 71% para 74%. Lembre sempre de manter equilíbrio entre os dois e que algumas otimizações podem ser benéficas para um e não para o outro. Por isso estamos buscando todas as combinações possíveis.

6º PASSO PARA OTIMIZAR SEU PAGE SPEED

O último relatório deu como importante otimizações de CSS, tempo de resposta, HTML, imagens etc. Para isso existem outros dois plugins que podem ajudar nessa questão. O Autoptimize e Above the Fold Optimization.

Vá em configurações e clique em Autoptimize.

Clique em opções avançadas no topo superior direito e selecione as opções:

Otimizar código HTML?
Habilite isto se você deseja que comentários HTML permaneçam na página.
Otimizar código CSS?
Marque esta opção para que o Autoptimize também agregue o CSS no HTML.

Depois disso salve e limpe o cache.

Se para você aparecer algum problema no Page Speed de fontes que o Google não carrega etc você pode resolver isso com o Above The Fold.

Antes você precisa ir novamente no Minify. Clique em Enable CSS, mas não salve. É só para você ver os links das fontes que irão aparecer. Algo como na foto abaixo.

Depois de pegar o link da fonte basta digitar ele no google que irá aparecer a fonte da mesma forma abaixo.

Você pode selecionar tudo e depois ir em Performance – Above The Fold.

Selecione a opção Critical CSS e cole a fonte que você pegou no google no espaço em branco.

Depois vá na aba de CSS do Above the Fold e habilite as opções:

Optimize CSS Delivery
Enhanced load CSS

Coloque a opção position como header ao invés de footer.

Depois disso tudo você pode salvar e limpar os caches.

Como você colocou a fonte do google de maneira manual você deve voltar ao plugin do Autoptimize e marcar a opção Remover Fontes do Google.

Lembre que esse passo inteiro é somente se você tiver algum problema com fontes.

7º PASSO PARA OTIMIZAR SEU PAGE SPEED

Não coloquei o Page Speed e GT Metrix dos passos acima, pois todas as otimizações foram feitas juntas. Tanto para melhorar a velocidade quanto as imagens que eram um problema crítico, lembra?

Por isso tenho mais dois plugins essenciais para você: WP Optimize e Smush.

O WP optimize você tem que usar com cuidado, pois ele limpa seus textos em rascunhos, spam, comentários no lixo etc. Então, é super importante que isso realmente seja retirado, pois atrapalha na velocidade do seu site, mas também é essencial que você tenha certeza que esses arquivos realmente devem ser deletados.

Ao acessar o WP Optimize selecione os 4 itens:

Clean all post revisions
Remove spam and trashed comments
Clean all auto-drafts and trashed posts
Remove unapproved comments

Depois salve e processe para que ele delete tudo. Depois disso você pode desabilitar o plugin, pois ele não terá mais utilidade em um curto prazo.

Agora vamos para a otimização das imagens!

Vá no plugin do Smush e aperte Smush Now. Na versão gratuita ele só otimiza 50 imagens por vez. Dependendo de quantas imagens você tenha isso pode demorar algum tempo.

Outra alternativa para o Smush é o Tiny PNG, ele otimiza até 500 imagens gratuitamente.

PAGE SPEED MOBILE DEPOIS todas as otimizações

PAGE SPEED desktop DEPOIS TODAS AS OTIMIZAÇÕES

GT METRIX DEPOIS De todas as otimizações

Depois de todas as mudanças que foram feitas ainda existiram alguns ajustes entre os plugins para achar a combinação ideal entre Page Speed e GT Metrix e também entre todos os plugins referente a otimizações de CSS, JavaScript, HTML etc. Abaixo vou mostrar como ficaram todas as configurações finais, ok?

Lembrando que não tenho um background técnico e que achei essas soluções através de leituras, cursos, vídeos e batendo muita cabeça na tentativa e erro. 

Logo, se algo do que foi mostrado puder ser evitado ou feito de uma melhor maneira, fique a vontade para comentar e me ajudar e outras pessoas também. 

Ressalto, também, que esse post não é uma fórmula mágica e que se você fizer exatamente isso vai obter os 100/100. Poderá te dar um bom caminho e depois você vai testando baseado nos seus problemas. E lembre que isso não vale só para a página inicial do seu blog. Vale para seu site, para uma landing page, para uma página de conteúdo etc. 

Para finalizar é importante ressaltar também que nem sempre conseguir 100% no GT Metrix e 100/100 no Page Speed serão a solução de todos os seus problemas. Você poderá ter que abdicar de algumas coisas para ter essa nota e muitas vezes não compensa. Além disso, você nunca pode esquecer de ter um conteúdo de qualidade, focar na experiência do usuário etc etc etc. 

Um agradecimento especial ao pessoal da Hot Labs pela ajuda na construção desse texto!

configurações finais de todos os plugins

Clique nos links para baixar as imagens finais (ficariam pequenas demais aqui no post).

w3 total cache – general settings

w3 total cache – page cache

w3 total cache – object cache

w3 total cache – browser cache

speed booster pack

above the fold optimization – critical CSS

above the fold optimization – CSS

above the fold optimization – javascript

autoptimize

Bônus: se você seguiu todos esses passos e nada funcionou ou simplesmente se você não tem o tempo necessário para realizar toda a otimização e testes você pode tentar usar um único plugin que é o WP Rocket. Ele custa apenas 39 dólares e irá fazer sozinho o papel de todos os plugins acima.

Ele funciona muito bem para os parâmetros do GT Metrix, mas deixa a desejar em alguns do Page Speed (e não tem como otimizar usando os outros plugins acima). Vale o teste também!

Sobre o Autor

pedrorenan

Amante de Inbound Marketing e Marketing de conteúdo. CMO da We do Logos. Além de apaixonado por café, futebol, cerveja e Clube da Luta.

Ver todos os posts

Deixe uma resposta