Mudanças no Pagespeed: entenda algumas solicitações do Lighthouse

Recentemente o Google uniu o relatório do Lighthouse para o calculo do Pagespeed, e com isso houve uma mudança drástica na pontuação de velocidade de carregamento especialmente em dispositivos móveis.

Como muitos desconfiavam, a usabilidade se tornou um tema extramente relevante para a otimização de sites para a busca orgânica, e conseguimos ver isso exatamente com os dados apresentados no Lighthouse.

Unimos nossos analistas de SEO e a equipe de programação, para listar os ajustes solicitados que são mais “fáceis” de se aplicar dentro de um site,Então.

Confira o que separamos do relatório do Lighthouse e do Pagespeed para você aplicar em seu site:

1- Adiar Imagens fora da tela

Aplicar o Lazy-load, é uma funcionalidade carrega apenas o necessário da página, e adia os outros conteúdos que não são necessários no momento.

O que seria Lazy-Load?

Um site normalmente é carregado todo de uma vez, o lazy-load carrega apenas a parte visível ao usuário, diminuindo assim o tempo de carregamento.

Página de orientação: https://developers.google.com/web/tools/lighthouse/audits/offscreen-images

2-Disponibilize imagens em formatos de ultima geração

Salvar as imagens em formato JPEG 2000 (JP2) , JPEG XR e WebP.

O que seria imagens de ultima geração?

É um formato de imagem que diminui o tamanho dos arquivos e garante a transferência mais rápida de dados, facilitando o carregamento em uma internet mais lenta.

Existem diversas ferramentas no mercado que possuem a opção de salvar as imagens nas opções mencionadas acima, aqui na agência por exemplo, utilizamos o Photoshop.

Página de orientação: https://developers.google.com/web/tools/lighthouse/audits/webp

Quer ficar atento as principais novidades sobre Otimização de Sites, SEO e Links Patrocinados? Então leia mais artigos da DGAZ Marketing em nosso blog!

3- Pré-carregue as principais solicitações

Declare os links de pré-carregamento em seu HTML para instruir o navegador a fazer o download dos principais recursos o quanto antes.

<head>

…

…

</head>

O que seria a tag preload?

Está tag fornece ao navegador uma sugestão sobre o que deve ser carregado primeiro para melhorar a experiência do usuário. aplicando a técnica correta, podemos fazer com que a página carregue mais rápido com as funções iniciais necessárias.

Página de orientação: https://developers.google.com/web/tools/lighthouse/audits/preload

4- Alteração do carregamento da fonte

Garanta que o texto continue visível durante o carregamento da webfont, incluir as fontes padrões antes do carregamento da webfont.

Como aplicar a alteração do carregamento da webfont?

É preciso aplicar uma regra de CSS chamada @font-face. Nesta regra você fala para o navegador carregar uma fonte padrão, enquanto não carrega a webfonte.

@font-face {
  font-family: 'Arvo';
  font-display: auto;
  src: local('Arvo'), url(https://fonts.gstatic.com/s/arvo/v9/rC7kKhY-eUDY-ucISTIf5PesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
}

Página de orientação: https://developers.google.com/web/updates/2016/02/font-display

Quer saber mais sobre como otimizar seus sites para melhorar o posicionamento nos mecanismo de busca ou melhorar a taxa de conversão do Google ads?

Então entre em contato com a DGAZ Marketing e fale com nossos especialistas no pagespeed!

Daniel GAZ

Sócio-Diretor da DGAZ Marketing, agência focada em SEO, Mídia Paga e Criação de Sites desde 2002. Especialista em SEO, foi Coordenador do Comitê de SEO da Abradi e atua como palestrante e professor na área. Formado em Administração pela PUC, com especialização em Marketing Estratégico pela FGV.