Como atingir nota máxima no Google Speed Test

Como atingir nota maxima no Google Speed Test

Um site ser devidamente desenvolvido com bom volume de conteúdo e boa confiabilidade são algumas das coisas mais importantes para um bom SEO.

Mas se a velocidade do seu site for baixa, principalmente se for notavelmente lenta, você está em apuros.

A verdade é que hoje em dia as pessoas não têm paciência para esperar mais de 5 segundos para que um site seja carregado. Principalmente com o aumento do tráfego mobile com os smartphones.

Um site lento pode incomodar as pessoas fazendo com que elas resolvam navegar em outra página, fazendo com que você acabe perdendo clientes em potencial.

Neste artigo, vou mostrar em um exemplo real como você pode, com alguns truques, acelerar o seu site WordPress e obter uma pontuação alta na ferramenta Google PageSpeed Insights.

Conseguindo a pontuação perfeita: os cem pontos (100/100)

Obviamente que o cenário perfeito para você seria que a velocidade do seu site e SEO conseguisse bater a pontuação mais alta do Google PageSpeed Insights, que é 100.

Embora isso possa ser alcançado, não é algo pelo qual você precisa se esforçar, pois atingir essa pontuação pode, às vezes, quebrar a funcionalidade do website, interface do usuário e experiência de usuário.

Conseguir a maior nota no mecanismo PageSpeed Insights não o ajudará significativamente se seu site for corrompido e seus clientes não puderem terminar o processo de check-out no seu website. Afinal, o Google também prefere que seu site tenha um conteúdo cativante, e não que somente seja fácil de seus bots vasculharem pelos códigos.

O Google desenvolveu a ferramenta, principalmente, como uma diretriz sobre as melhores práticas de desempenho de sites. Isso é, para que possamos obter dicas sobre qual parte das nossas páginas precisam ser melhoradas.

Otimizando o site

Imagens

Compactar Imagem

Se a velocidade é tão importante assim, a primeira coisa que você pode fazer é otimizar as suas imagens para que elas carreguem mais rapidamente. Pra isso, uma das coisas você precisaria fazer é diminuir o tamanho dos arquivos de imagem.

Comprimir imagens usando ferramentas para diminuir o tamanho delas e deixando-as em pequenas versões em formatos leves (.JPEG por exemplo) pode ser uma excelente saída. Procure diminuir a imagem sem prejudicar extremamente a qualidade das imagens.

O objetivo aqui é que elas não fiquem gigantescas, mas grandes o bastante para mostrar os detalhes que você quer apresentar.

Você jamais deveria ter imagens maiores do que aquelas que você pretende renderizar nem reduzir seu tamanho usando tags CSS ou HTML.

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.

Minimize o CSS e o JavaScript

CSS Java
Agora está na hora de diminuir nossos arquivos JavaScript e CSS.

O processo de redução vai diminuir os tamanhos de seus arquivos, dando fim a espaços em branco sem utilidade, caracteres e comentários de seus arquivos CSS e JavaScript.

Não é incomum que programadores acabem deixando muitos espaços e comentários durante a codificação. Estes podem até dobrar o tamanho dos seus arquivos CSS e JavaScript.

Existem ferramentas que você pode instalar em seu computador pessoal ou servidor que o ajudarão a lidar com tais situações.

Tais ferramentas especializadas, assim como o Gulpjs, podem criar automaticamente um arquivo CSS e removendo todos os espaços em branco.

Ele também cria um novo arquivo CSS automaticamente para todas as novas alterações que você está fazendo.

A diferença ao remover caracteres desnecessários pode ser gritante. Eu o encorajo a pesquisar no Google como fazer isso da forma mais eficiente possível, caso você precise, para que você consiga fazer esta etapa do processo de forma louvável.

Desta forma, você vai poder testemunhar uma efetividade ainda maior dessas dicas.

O cache do navegador

Para corrigir esse problema, uma solução é mover todos os arquivos estáticos do nosso site para um CDN (rede de entrega de conteúdo).

CDNs são uma redes de servidores localizados em vários sites em todo o mundo. Eles são capazes de guardar em cache versões estática de páginas na web, como imagens, CSS e arquivos de JavaScript.

A CDN armazena cópias do conteúdo do seu site nos seus próprios servidores e, uma vez que alguém acesse o seu site, o conteúdo estático vai ser carregado a partir do servidor mais próximo.

Um exemplo: digamos que o servidor principal do seu site é do Kansas, sem um CDN, um visitante da Inglaterra teria que esperar o servidor carregar o site por todo o caminho dos EUA até sua casa, aumentando a latência e diminuindo a sensação de velocidade no processo.

Já, com o uso de um CDN, o seu site é carregado de uma localização mais próximo para o usuário. Assim, sendo este lugar mais próximo do usuário, na Inglaterra, a página, obviamente, se mostrará mais rapidamente.

Eliminando recursos de bloqueio de renderização

A eliminação do bloqueio de renderização é uma das etapas mais difíceis na melhora de velocidade do carregamento de seu site.

Isso porque se demanda maior afinidade técnica. O principal problema com o qual é preciso dar conta é transferir o código JavaScript por inteiro do cabeçalho e do corpo para o rodapé na parte inferior das páginas do site.

No caso de você estar utilizando o WordPress, é provável que o plugin Autopmize ajude-o no processo.

Autoptimize

Otimizar a experiência móvel

A experiência móvel é algo à parte e deve ser pensada com cuidado. O Google já passou a utilizar o mobile como fator de rankeamento de SEO.

O sistema de navegação deve ser feito pensando no veículo e agindo com fontes harmoniosas e um sistema responsivo de fácil navegação.

Esta é uma dica valiosa se você não sabia: você pode testar a aparência do seu site em várias versões para dispositivos móveis usando o navegador Google Chrome.

Clique no botão de menu na parte superior da direita e ir para “Mais ferramentas – Ferramentas do desenvolvedor” (CRTL+SHIFT+I).Chrome Mobile

No lado esquerdo, você pode fazer a seleção de algumas opções diferentes para ver como seu site se pareceria em várias resoluções para dispositivos móveis(CTRL+SHIFT+M).

Chrome Mobile 2

Conclusão

Estas foram apenas algumas das coisas mais relevantes para que possamos levar a velocidade para a nota cem (100/100) desejada.

É possível que isso não seja o bastante, mas se tudo for feito, você pode se assegurar de que o desempenho da velocidade do seu site melhorou de forma notável.