Este artigo será interessante para quem enfrentou todos os tipos de problemas após atualizar o Google PageSpeed e reclamações de clientes ou do chefe, por que a bola caiu ou houve tantos comentários. E também para quem faz otimização de sites.
Antes de tudo, vale ressaltar que
neste artigo , na minha opinião, tudo é pintado de maneira muito competente e acessível.
Eu próprio adicionarei conselhos mais
práticos , e também será interessante ouvir seu ponto de vista e ver suas melhores práticas.
Vou listar o que falarei neste artigo:
- CSS e JS
- conexão de arquivo
- carregando bibliotecas
- truques
- Fontes
- conexão de fonte
- exibir fontes durante o carregamento da página
- Imagens
- diferentes formatos (jpg, png, webp, base64)
- sprite
E se você ficou neste artigo até o momento, provavelmente está interessado (ou o botão "voltar" foi desativado para você) A seguir, há mais detalhes sobre cada item.
CSS e JS
Js- A propriedade assíncrona para scripts de plug-in (exceto jQuery) será necessária. Isso definitivamente o salvará do comentário do GPSpeed sobre o carregamento assíncrono de scripts.
- O conselho é comum, mas é muito sensato - tente usar bibliotecas complexas e massivas ao mínimo.
- É melhor fazer o upload das configurações da biblioteca js (slick, fancybox) ou pequenos pedaços de código que executam tarefas diferentes no servidor com um arquivo. No meu caso, tanto o script para envio de email quanto a máscara para entrada e animação e tudo estão no mesmo arquivo build.js (no qual também defino assíncrono .
- Este conselho é situacional, isto é, observe a situação. Se você tiver algum tipo de script em execução logo após abrir a página em sua primeira tela, será mais correto conectá-lo separadamente e não assiná- lo.
CSS- Aqui um pouco mais complicado. Você precisará adicionar essa propriedade à tag do link .
<link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css>
É dessa forma que seus arquivos css serão conectados somente após a árvore do DOM. Grosso modo, isso é o mesmo assíncrono apenas para .css - Conselho muito importante e eficaz! Ele soma de 5 a 10 pontos garantidos. Você precisa dividir seu main.css em dois arquivos . No primeiro, haverá apenas os estilos carregados para o conteúdo visível imediatamente após a abertura da página. Esta é a barra superior, o cabeçalho, a primeira imagem, a primeira forma etc. Em geral, o que você coloca na "face" do seu site. No segundo, tudo o resto já está.
Fontes
Descobri uma nova propriedade css para fontes
font-display
Especificamente, seu parâmetro de
troca , que, sem aguardar o carregamento de sua fonte bonita e pesada, exibe texto no navegador usando a fonte incorporada no mesmo navegador (por exemplo, sans-serif). Isso remove imediatamente um dos erros no GPSpeed.
Ficará assim
@font-face { font-family: 'FontName'; src: local('FontName'), url('FontName.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
Também existe um script (você precisa conectar o fontfaceobserver.js para sua operação):
<script> var html = document.documentElement; if (sessionStorage.fontsLoaded) { html.classList.add("fonts-loaded"); } else { var script = document.createElement("script"); script.src = "../js/fontfaceobserver.js"; script.async = true; script.onload = function() { var regular = new FontFaceObserver("FontName"); var bold = new FontFaceObserver("FontName", { weight: "bold" }); var light = new FontFaceObserver("FontName", { weight: "300" }); Promise.all([ regular.load(), bold.load(), light.load() ]).then(function() { html.classList.add("fonts-loaded"); sessionStorage.fontsLoaded = true; }); }; document.head.appendChild(script); } </script>
Pessoalmente, eu realmente não ajudei, mas você tenta, talvez possa controlar melhor. Afinal, eu o encontrei no vasto, e as pessoas disseram que isso realmente ajuda.
Conexão de fonte
- Basicamente, existem dois tipos de conexão - usando um link (por exemplo, para fontes do google ou localmente, no servidor. Portanto, no segundo método, ele também pode ser dividido em 2: um arquivo css separado (usando o link para conectar o fonts.css ) e diretamente através do código (através do seu style.css).
E como agora estamos falando sobre a otimização do site para o GPSpeed, certifiquei-me de que é melhor conectar fontes através do seu arquivo css principal. - E outra dica que ajuda é colocar os arquivos de fonte (woff, ttf etc.) ao lado do arquivo css que solicita. Eu costumava ter uma pasta separada no servidor para fontes, mas depois mudei a velocidade de download da fonte aumentada em 2 vezes. (de acordo com o GPSpeed, levei 180ms para conectar a fonte Muller antes, agora 70-90ms)
Imagens, imagens, etc.
Eu garanto pelas próximas 2 dicas, elas ajudaram não apenas a mim, mas a todo o escritório e até meus amigos trabalhando remotamente.
1. Baixe absolutamente todas as imagens
<img > usando o lazyloading. Ficará assim
<img class="yourClass lazy" data-src="../images/image.jpg" alt=""/>
E não se esqueça de conectar o
lazyload.min.js2. Se você possui muitos elementos
svg na página, é melhor adicioná-los
com código limpo , sem o uso desnecessário da tag img. Além disso, o svg precisa ser compactado, por exemplo, usando este site
jakearchibald.imtqy.com/svgomg (sem publicidade).
3. Banal, mas não se esqueça de apertar TODAS as fotos no site. Mesmo aqueles que pesam 5kb. Embora esses 3 kb que você ganhe não afetem a velocidade de download de nenhuma maneira, você se livrará do erro no GPSpeed e adicionará até 10 pontos.
! Agora, o ponto do problema são os formatos de imagem. Ou seja, estamos preocupados com
webp, JPEG 2000, JPEG XR . De fato, agora é uma das extensões recomendadas do GPSpeed. Como você sabe, eles ainda não são suportados por alguns navegadores, entre os quais o bastante popular Mozila Firefox. Embora eles tenham anunciado que
em março haverá suporte completo para esse formato, ainda temos que esperar mais um ano até que todos os usuários deste navegador sejam atualizados para a versão mais recente ... Vasculhei vários sites, vários scripts, mas não achei nada sensato. Agora é minha hora de fazer uma pergunta: você está usando o formato webp ou qualquer outro novo formato de imagem? E como você faz isso?