Rua Alfredo Vaz Medeiros 3, Vila Gomes Cardim, CEP 03335-005, SP, Brasil
+34 698 34 62 29 - Espanha
suporte@seodeverdade.pro

# 7.19. Diretrizes para otimização de velocidade de carga baseado no Google Page Speed Insights

O que ninguém te ensina!

diretrizes para otimização de velocidade de carga baseado no Google

Fala verdadeiro Tico aqui, espero que esteja bem e bem-vindo a mais uma aula do curso seo de verdade de zero a 100 e nessa aula vamos ver algumas otimizações de velocidade de carga que podemos fazer para que nosso site abra mais rápido principalmente em dispositivos móveis.

Sabemos que o uso de dispositivos móveis aumenta a cada dia, então é muito importante que nossa página carregue rápido para que o usuário não saia, porque dependendo da conexão onde o usuário estiver utilizando o celular e a página demora muito para abrir ele pode ir para trás e buscar outro resultado o que vai fazer com que o Google entenda que a nossa página não abre rápido e que não merece estar em cima.

Então um dos fatores mais importantes de otimização OnPage é a velocidade de carga.

Otimização de velocidade de carga baseado no Google Page Speed

page speed insights dados de velocidade de carga

Se pegarmos link de churras.top e jogar no page speed insight do google nós podemos medir a velocidade de carga dessa página, e ela está com pontuação 25 para mobile.

A média varia de 0 a 49 vermelho quer dizer que está lenta, de 50 a 89 está aceitável e a partir de 90 a 100 já é verdinho e é totalmente otimizado.

Agora vou mostrar para vocês como nós podemos melhorar isso consideravelmente sem se matar com códigos de maneira que abra rápido e que o google goste.

Como otimizar a velocidade de carga do site?

A primeira coisa para otimizar a velocidade de carga de um site é adicionar e configurar alguns plugins, o primeiro é autoptimize. Esse plugin vai ajudar a resolver bastante problemas de JavaScript, CSS e HTML.

Instalando o plugin autoptimize

Uma vez que temos o plugin instalado e ativado, clicamos em configurações e a primeira opção pede para habilitar a opção de otimizar o código JavaScript, mas muita atenção aqui, dependendo do tema que você estiver utilizando, pode ser que você habilite a opção de JavaScript e alguma coisa deixe de funcionar, alguma coisa que depende do código completo da maneira que está. 

opções de javascript no plugin autoptimize

Então existem 3 principais opções deste plugin, otimizar JavaScrip, HTML e CSS pode ser que funcione melhor se você deixar habilitado ou desabilitado uma dessas funcionalidades, o mais bom é ir testando cada vez que habitamos umas dessas configurações para ver se o site está tudo bem, se todas imagens estão aparecendo, se não mudou a estrutura do layout, faz o teste também no celular, essas mudanças são feitas depois que nós habilitamos ou deixamos de habilitar uma dessas opções nesse plugin.

✔️ Na opção de JavaScript nós habitamos: Otimizar código JavaScript, agregar arquivos JS, e excluímos script de autoptimize.

✔️ Na opção CSS nós habilitamos: otimizar código CSS, agregar arquivos CSS, também agregar o CSS em linha e excluímos css de autoptimize.

✔️ Na opção HTML nós habitamos: Otimizar código HTML.

Depois de fazer essas alterações salvamos as mudanças e esvaziar cache. Agora vamos voltar ao google speed test insight para fazer o teste novamente, lembra que estávamos com 25 pontos? 

page speed insights

Como pode ver com apenas essas configurações no plugin autoptimize já deu um pulo de 25 que estava ruim para 85 que é bem razoável.

Então, agora abre o site no celular e computador veja se está tudo bem, se não tem nenhum erro, se estiver tudo OK, então vamos continuar.

Agora vamos instalar outro plugin que se chama W3 Total Cache, então vai em adicionar plugin e pesquise por w3 total cache, instale e ative ele. Remendo que sempre que criar um projeto, instalar esses plugins para melhorar a velocidade de carregamento de página.

instalando e configurando w3 total cache

Quando nós temos o plugin w3 total cache instalado e configurado e acessamos um site ele guarda informações sobre esse site. Para quando nós voltarmos a acessar esse site certos recursos não vão ser carregados novamente, ele vai abrir muito mais rápido porque o navegador já arquivou os dados guardados a respeito dessa web e ele vai fazer com todas as webs que tiverem a memória cache configurada. E isso melhora a experiência do usuário.

Acesse a instalação de plugin, vai w3 total cache e clica em settings.

configuração de w3 total cache

No plugin w3 total cache você deve habilitar as seguintes opções: Page cache, Cache de Objeto e Experiência do usuário (Lazy Load).

Na parte superior do nosso blog ao lado de Autoptimize temos nova opção, performance, passa o mouse nele e clique na opção Purge All Cache. Depois de fazer o purge vamos voltar ao google speed test para ver o resultado depois de configurarmos o plugin de cache, lembra que estamos com 85 pontos. 

speed test insights

E booomm, já estamos com 94 pontos, ou seja, saímos de 85 para 94 só com a configuração do plugin w3 total cache.

Agora vamos instalar um plugin para comprimir as nossas imagens no site e aumentar ainda mais a velocidade de carga. O plugin chama-se Smushit. Basta acessar a área de adição de plugins e buscar por smushit instalar e ativar ele. 

instalando o plugin smushit

Depois de instalar e ativar aí mesmo na área de plugins instalados procure por smushit e clique em configurações. Assim que abrir, vai aparecer um popup, clique em pular e irei configurar depois, aí o plugin vai fazer a verificação das imagens, depois basta clicar no botão azul, compactar em massa agora. Ele começa a fazer todo o processo de compactação de imagens.

Depois disso vamos voltar ao nosso google speed test insight para ver como estamos depois dessa compactação de imagens, lembrando que antes estávamos em 94 pontos. 

google speed test insight

Conforme você pode ver na imagem, saiu de 94 pontos para 96 pontos que já está de um bom tamanho.Se quiser saber mais a fundo a respeito disso daqui tem na VIP, pessoal espero que vocês tenham entendido que tenham gostado se tiverem alguma dúvida por favor me pergunte entre em contato no inbox ou publique no grupo do Facebook.

Deixe uma resposta

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