Dicas simples e úteis que permitirão maximizar seu site sem ter que se aprofundar nas métricas do Google PageSpeed e Lighthouse.
Javascript- Em vez de JavaScript, tente usar as tags HTML5 com mais frequência: <tipo de entrada = data>, <tipo de entrada = hora>, Detalhes / Resumo etc.
Muitas vezes esquecemos ou nem sabemos sobre soluções prontas incorporadas em navegadores que funcionam melhor em dispositivos diferentes e que não exigem código JavaScript adicional. - Use minificação do código JavaScript.
- Tente colocar todo o seu código JavaScript em rodapé ou carregamento atrasado, e quanto menos JavaScript houver em <head>, melhor o desempenho no Google PageSpeed.
- <script src = "arquivo-caminho"> requer acesso adicional ao servidor, lembre-se disso.
Se, em vez de um arquivo JavaScript, insira o conteúdo do arquivo no rodapé:
<script> </script>
O primeiro download será mais rápido, mas não haverá armazenamento em cache do arquivo JavaScript.
Carregamento atrasado- Use carregamento lento (atrasado) para imagens, iframe, vídeo, áudio, javascript e outros objetos semelhantes. Ele deve ser incluído para elementos que estão em pop-ups ou na segunda e na próxima tela da página.
Para esses fins, existem muitas bibliotecas: lazyload, lazysizes, autoload, etc. - Você pode usar o carregamento lento nativo no Chrome.
- A VK oferece colocar a conexão de código JavaScript em <head> para que o widget de comentários funcione, mas isso reduz o Google PageSpeed e a velocidade de carregamento da página.
Em vez do código que o VK oferece:
<script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script> <script type="text/javascript"> VK.init({apiId: ID, onlyWidgets: true}); </script> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); </script>
Cole o código ligeiramente modificado no download atrasado:
<div id="vk_comments"></div> <script onload="showvk()" data-aload data-original="https://vk.com/js/api/openapi.js?162"></script> <script> function showvk() { VK.init({apiId: ID, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); } </script>
Como resultado, obtemos um código que será carregado apenas quando a tela rolar para o widget.
O código do mapa que o Google oferece para incorporar no site:
<iframe src="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Se o cartão estiver pop-up ou distante no rodapé, uma pessoa que visitar sua página começará imediatamente a carregar muitos extras a partir desse quadro e a velocidade de download dessa página será muito lenta, o Google PageSpeed fornecerá um sinal de menos e um valor maior!
Cole o código ligeiramente modificado no download atrasado:
<iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Tudo se resume a não fornecer o navegador src = "" imediatamente, mas apenas quando uma pessoa realmente precisa. E assim com todos os objetos!
Jquery- Se possível, não use o Jquery em seus projetos e isso aumentará significativamente a velocidade do seu site, mas se você já estiver usando, substitua-o gradualmente por JavaScript nativo puro.
- Se você conectar o Jquery ao <head>, isso bloqueará a exibição da página, uma vez que o navegador aguardará até que tudo o que está no <head> seja carregado e só exibirá a página. Mas como a própria biblioteca é pequena e a Internet é rápida para todos, isso tem pouco efeito na velocidade, o Google diminui a classificação, então é cerca de 0,5, embora antes de 10 ou 20 pontos tenha sido atingido por isso ...
- Todo o código jquery que você escreveu ou as bibliotecas jquery que você usa é melhor colocado no rodapé do site, devido ao bloqueio da exibição. Se não puder transferi-lo para o rodapé, talvez você deva usar uma execução atrasada do código, um artigo sobre este tópico: Usando com segurança .ready () antes de incluir o jQuery .
Fontes- Fontes do Google
- Se o Google estiver conectando a fonte há muito tempo, certifique-se de conectá-la novamente, pois a presença de & display = swap no URL é importante - esta é uma nova opção que afeta o Google PageSpeed e permite exibir texto na página antes de carregar a fonte ... nem sempre é bonita, mas aumenta velocidade de exibição do site ... e afeta o Google PageSpeed
- Se for possível substituir fontes do Google por suas próprias fontes, faça isso, é melhor que as fontes estejam no seu servidor, isso também melhora a velocidade.
- Ao escolher uma fonte no Google Fonts, tente escolher o mínimo de opções, escolha apenas o que você precisa e, se você não usar uma fonte inclinada ou com uma espessura de 200 no site, não selecione isso nas configurações, pois isso afetará a velocidade do download.
- Fontes personalizadas
- Verifique se há exibição de fonte no estilo css: swap; nas suas fontes, o Google PageSpeed presta atenção nisso e subestima se esse estilo não vale a pena:
@font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; }
- Se você conectar fontes por meio de uma folha de estilo separada, isso afeta o tempo da primeira renderização e reduz o desempenho do Google PageSpeed, é melhor não fazer isso:
<link href="/fonts.css" rel="stylesheet">
Se você inserir uma conexão de fonte em <head> por meio da tag <style>, e não por <link>, isso aumentará a velocidade e o desempenho do download do Google PageSpeed, pois o navegador não precisará acessar separadamente sua folha de estilo:
<head> <title>Demo</title> <style> @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } </style> </head>
- Se possível, remova todos os itens desnecessários que você não está usando dos arquivos de fonte para aumentar a velocidade do download.
- Você pode fazer o carregamento de fontes em duas etapas: Desenvolvendo uma estratégia robusta de carregamento de fontes para truques CSS
CSS- Tente se livrar do excesso de código CSS de navegadores antigos, incluindo os prefixos -moz- -o- -ms- -webkit-
- Tente não carregar estilos que não são usados nesta página, mas que são usados em outras páginas do site.
- Se possível, vale a pena carregar partes do código CSS e HTML através do carregamento atrasado.
- Carregar estilos com <link href = 'st.css' rel = 'stylesheet'> diminui o carregamento da primeira página e sua renderização, mas possibilita ao navegador armazenar em cache esse arquivo.
Se você possui estilos exclusivos para cada página ou mais importante para você, que o carregamento da primeira página é um pouco mais rápido, inserimos a tag style em vez do arquivo:
<style> </style>
- Use minificação CSS, como Cssresizer ou outras ferramentas semelhantes.
HTML- Quanto mais tags HTML na página, mais recursos o navegador precisa para renderizar a página, e isso afeta o desempenho do Google PageSpeed, mas apenas se sua página estiver sobrecarregada demais com tags.
- Evite o aninhamento excessivo de tags HTML; o Google PageSpeed também presta atenção a isso.
- Vale a pena limpar seu HTML do código para navegadores mais antigos, pois geralmente é esse código que cria um grande número de tags extra e aninhadas.
- O número de tags e aninhamento afeta especialmente o Google PageSpeed for mobile.
Imagens- Use a tag <picture> para usar formatos de imagem modernos (JPEG 2000, JPEG XR e WebP). O Google PageSpeed presta atenção nisso se você não tiver um carregamento lento de imagens.
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture>
Você também pode usar mídia e substituir imagens diferentes por diferentes resoluções e diferentes densidades de pixel.
<source media="(max-width: 640px)" srcset="image.png, image-retina.png 2x">
Isso é útil para fotos e vídeos.
Menos: você precisa de muito espaço, porque precisará armazenar diferentes formatos de imagem (vídeo) e com diferentes resoluções. - Use carregamento lento para todas as imagens que estão em pop-ups ou na segunda e na próxima tela da página.
- Use a compressão máxima de imagens, o Google PageSpeed também chama a atenção para isso. Existem muitas ferramentas de compressão, uma por exemplo: compressor.io
Configurações do servidor- Ative o cache de arquivos estáticos (fontes, scripts, imagens, css e outros), enquanto define o ano do cache, caso contrário, o Google jura.
- Ativar compactação gzip.
- Use os cabeçalhos HTTP da última modificação e se modificado desde que para armazenar em cache as páginas.
Comunicação- Os resultados são altamente dependentes de quão longe seu servidor está de você. Se você estiver no Havaí e o servidor estiver em Moscou, os resultados serão desastrosos.
- Os resultados dependem do servidor e do computador e, se durante os testes o servidor ou o computador estiver sobrecarregado, o resultado será ruim.
ConclusãoÉ impossível apertar o PageSpeed 108 ou mais pontos :)
Não faz sentido espremer até 100 pontos sob o celular. Devemos lutar por 100, e não cair na paranóia! Este é apenas um dos muitos indicadores importantes para o site.
Você pode ver
um exemplo de página em que os indicadores para celulares são 97-98 e 100 para um computador.
Nesta página, existem 2 vídeos do YouTube em pop-ups e o vídeo é ativado somente quando o pop-up está aberto.
Todas as imagens são colocadas em carregamento lento.
Todo o JavaScript é renderizado a partir de <head> no rodapé da página.
Mas, ao mesmo tempo, os seguintes itens estão conectados aos contadores <head>: Jquery, GoogleFonts e Yandex (Google).
Os estilos são inseridos na tag <style> dos códigos de estilo </style>.
<imagem> não é usada nesta página.
Há várias seções na página que estão presentes na página, mas são acessíveis apenas por um link direto para os clientes; elas precisarão ser carregadas conforme necessário, o que reduzirá o número de códigos html e css.
Obrigado pela atenção!