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/
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/
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
<link rel=preload>
Declare os links de pré-carregamento em seu HTML para instruir o navegador a fazer o download dos principais recursos o quanto antes.
<head>
…
<link rel=”preload” href=”styles.css” as=”style”>
<link rel=”preload” href=”ui.js” as=”script”>
…
</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/
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!