Dicas

Como atingir 100/100 com a ferramenta de teste de velocidade da página do Google

A velocidade de carregamento do site é uma prioridade para a experiência geral do usuário e também é um dos centenas de fatores de classificação de SEO . A verdade é que hoje em dia as pessoas não têm paciência para esperar mais de cinco segundos para carregar uma página. Se o seu site não estiver carregando rápido o suficiente, você perderá clientes em potencial.

Com mais de 50% do tráfego on-line proveniente de dispositivos móveis, todos esperam que um site seja carregado quase instantaneamente. Com isso em mente, neste artigo, mostrarei como conseguimos pontuar 100/100 com a Ferramenta Google PageSpeed ​​Insights para backlinks de monitor para computadores e dispositivos móveis.

A motivação

Nosso site já estava carregando muito rápido, mas sabíamos que sempre havia uma maneira de torná-lo ainda melhor.

Um dia, enquanto brincava com a PageSpeed ​​Tool, notei que o site do Google tinha uma pontuação terrível para dispositivos móveis, 59/100. A versão para desktop estava melhor com 95/100.

LLlzIRg.png

Talvez eles devam usar sua ferramenta para melhorar seu site, certo?

Foi isso que nos levou a acelerar o carregamento do site e a provar que você pode obter 100/100. Não é uma obsessão; tem como objetivo ser perfeito.

Começamos em 87/100.

Aqui está o resultado obtido após a implementação de algumas das técnicas que estou prestes a compartilhar com você.

WWAYM7w.png

Como acelerar o carregamento das páginas

Antes de começar a mostrar as etapas exatas que seguimos, deixe-me dizer que a ferramenta PageSpeed ​​é apenas uma orientação para as melhores práticas de desempenho na Web. Ele fornece recomendações para otimizar seu site quanto à velocidade de carregamento da página, e alcançar resultados favoráveis ​​depende de como o ambiente do servidor está configurado.

Enquanto algumas dessas etapas exigem conhecimento técnico, outras não. Observe que eles podem ser seguidos usando quase qualquer sistema de gerenciamento de conteúdo (CMS).

Etapa 1: otimizar imagens

SA9EugY.png

A ferramenta PageSpeed ​​Insights sugeriu que otimizássemos nossas imagens para carregar mais rapidamente, reduzindo o tamanho do arquivo. Para resolver esse problema, fizemos duas coisas importantes:

  • Compactou todas as imagens usando ferramentas como Compressor.io e TinyPNG . Essas ferramentas são gratuitas e podem reduzir o tamanho do arquivo de imagem em mais de 80% em alguns casos, sem diminuir a qualidade da imagem.
  • Reduzido o tamanho das imagens para dimensões mínimas sem diminuir a qualidade da imagem. Por exemplo, se quiséssemos ter uma imagem de 150x150px em nosso site, esse é exatamente o tamanho que a imagem deveria ter em nosso servidor. Você nunca deve ter imagens maiores do que aquilo em que deseja que elas sejam renderizadas, nem reduza seu tamanho usando tags CSS ou HTML.

Baixamos cada uma de nossas imagens, depois as compactamos e redimensionamos manualmente. Após otimizar essas imagens, é melhor otimizar todas as novas imagens que você envia para o servidor. Cada nova imagem deve ser compactada e redimensionada.


O Google também oferece a opção de baixar suas imagens já otimizadas, e você pode simplesmente enviá-las para o seu servidor. Você pode fazer o mesmo com JavaScript e CSS.

rPecTD4.png

Etapa 2: Minimizar CSS e JavaScript

zEeAoMe.png

O Google agora estava nos dizendo que precisávamos reduzir nossos arquivos JavaScript e CSS.

O processo de redução reduz o tamanho dos arquivos, eliminando espaços em branco, caracteres e comentários desnecessários dos arquivos CSS e JavaScript. Os programadores geralmente deixam muitos espaços e comentários durante a codificação. Eles podem até dobrar o tamanho dos seus arquivos CSS e JavaScript.

HME9biO.png

Para corrigir esse problema, instalamos o Gulpjs em nosso servidor. A ferramenta cria automaticamente um novo arquivo CSS e remove todos os espaços. Ele também cria um novo arquivo CSS automaticamente para todas as novas alterações que você está fazendo. No nosso caso, isso nos ajudou a diminuir o tamanho do nosso arquivo CSS principal de aproximadamente 300kb para 150kb. A diferença estava em caracteres desnecessários. Para mais instruções sobre como remover espaços em branco, consulte o guia do Google .

Se você estiver usando o WordPress, recomendo que você instale o plugin Otimização automática .

Você também pode baixar os arquivos otimizados da ferramenta Velocidade de página. Aqui está um exemplo:

Abaixo está o resultado obtido após a minificação de CSS e JavaScript.

V6BCd5T.png

Etapa 3: aproveitar o cache do navegador

ZWX6fOV.png

Para muitos operadores de sites, aproveitar o cache do navegador é a parte mais desafiadora.

Para corrigir esse problema, movemos todos os arquivos estáticos do nosso site para uma CDN (rede de entrega de conteúdo).

Uma CDN é uma rede de servidores localizados em vários sites ao redor do mundo. Eles são capazes de armazenar em cache a versão estática dos sites, como imagens, CSS e arquivos JavaScript. A CDN armazena cópias do conteúdo do seu site em seus servidores e, quando alguém acessa o site, o conteúdo estático é carregado no servidor mais próximo.

Por exemplo, se o servidor principal do seu site for do Texas, sem uma CDN, um visitante de Amsterdã terá que esperar o servidor carregar o site dos EUA. Com uma CDN, o site é carregado de um local mais próximo para o usuário. Neste caso, este é um lugar mais próximo de Amsterdã. Portanto, o site será carregado mais rapidamente.

Aqui está uma representação visual do GTmetrix de como uma CDN funciona.

M7cMb05.png

Movemos todas as imagens, JavaScript e arquivos CSS para a CDN e mantemos apenas o arquivo HTML em nosso servidor principal. Hospedar suas imagens em uma CDN fará uma grande diferença na velocidade de carregamento de suas páginas para os visitantes do site.

Depois disso, a ferramenta PageSpeed ​​ainda sugeria irritantemente que aproveitássemos o cache do navegador para alguns recursos de terceiros. Aqui está uma captura de tela:

xpt5dQ1.png

Corrigimos o problema dos scripts de mídia social substituindo os contadores fornecidos por algumas imagens estáticas hospedadas na CDN. Em vez de ter scripts de terceiros que tentavam acessar dados do Twitter, Facebook ou Google Plus para obter a contagem de seguidores, nós os hospedamos e resolvemos o problema.

Ainda mais frustrante do que o problema dos scripts de mídia social foi que o código do Google Analytics estava desacelerando nosso site.

i7MXiu9.png

Para resolver o problema de script do Google Analytics, fizemos algo bastante difícil. Como não queríamos remover o Google Analytics do nosso site, tivemos que encontrar uma solução diferente.

O código do Google Analytics raramente é modificado pelo Google mais de uma ou duas vezes por ano. Portanto, o Razvan criou um script que é executado a cada oito horas para verificar quando o código do Analytics foi modificado pela última vez. O script baixa o código do Analytics novamente apenas se novas alterações forem encontradas. Dessa forma, podemos hospedar o código JavaScript do Analytics em nosso servidor sem precisar carregá-lo dos servidores do Google a cada visita.

Se nenhuma alteração ocorreu, o código do Analytics será carregado da versão em cache em nossa CDN.

Quando o Google modifica seu código JavaScript novamente, nosso servidor baixa automaticamente a nova versão e a carrega na CDN. Usamos esse script para todos os scripts externos de terceiros.

Aqui está uma captura de tela do Pingdom Tools mostrando como tudo é carregado na CDN, incluindo o código do Analytics. O único arquivo carregado no nosso servidor é o arquivo da página inicial, com apenas 15,5 KB. A eliminação de todos os scripts de terceiros melhorou bastante a velocidade geral de carregamento.

h9JmXjG.png

Etapa 4: eliminar os recursos de bloqueio de renderização acima da dobra

FMIAxXZ.png

Eliminar o bloqueio de renderização é uma das partes mais complicadas de melhorar a velocidade de carregamento da página, pois requer mais conhecimento técnico. O principal problema com o qual lidamos foi mover todo o código JavaScript do cabeçalho e do corpo para o rodapé na parte inferior das páginas do site.

Se você estiver usando o WordPress, o plugin Autopmize que sugeri acima deve ajudá-lo nesta tarefa. Verifique as configurações e desmarque “Forçar JavaScript em <head> e marque” Inline all CSS “.

Etapa 5: ativar a compactação

zycbOoO.png

A implementação da sugestão de compactação de ativação pode ser feita simplesmente nas configurações do seu servidor. Se você não é muito técnico, pode pedir à sua equipe de suporte técnico para ativar a compactação GZIP para o seu servidor.

Etapa 6: otimizar a experiência móvel

A experiência móvel tem como objetivo mostrar uma versão móvel responsiva para todos os diferentes tipos de resoluções, usar fontes corretas e ter um bom sistema de navegação.

RREZqKy.png

Você pode testar a aparência do seu site em diferentes versões para celular usando o Google Chrome. Clique no menu hambúrguer no lado superior direito e, em seguida, em “Mais ferramentas – Ferramentas para desenvolvedores”. No lado esquerdo, você pode selecionar para ver a aparência do seu site em diferentes resoluções para dispositivos móveis.

bR5sqwO.png

No nosso caso, não houve muitas alterações a serem feitas.

Conclusão

Essas são as etapas mais importantes que seguimos para fazer com que o Monitor Backlinks alcance 100/100 com a Speed ​​Tool do Google . Não otimizamos apenas a página inicial. Também otimizamos uma página interna, o verificador gratuito de backlinks .

ny2zaoB.png

As três ações mais importantes que você pode executar para melhorar seu site são:

  1. Use uma CDN (rede de entrega de conteúdo).
  2. Corrija os problemas de bloqueio de renderização. (Evite ter JavaScript no corpo da codificação. Seu código JavaScript deve ser colocado na parte inferior dos arquivos.)
  3. Otimize o tamanho das imagens e as comprima.

Sua equipe realizou um projeto desse tipo para o seu site? Em caso afirmativo, quais foram seus resultados?

Tags

Sobre o Autor

flipit

Comentar

Clique para comentar