Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Como otimizar seu site com lighthouse e core web vitals

Como otimizar seu site com lighthouse e core web vitals

He4rtConf 2021

3e4b321cfe49136ead7cbfcb5d45a8f0?s=128

Juliana Negreiros

October 02, 2021
Tweet

More Decks by Juliana Negreiros

Other Decks in Technology

Transcript

  1. Como otimizar seu site com Lighthouse e core web vitals

  2. @juunegreiros FE na Consumer Affairs Instrutora na Alura Rails Girls

    Sorocaba e SorocabaJS 2
  3. 1. Propósito

  4. 2. Web vitals

  5. Web Vitals ➜ Iniciativa do Google ➜ Propósito de simplificação

    5
  6. 2. Core Web Vitals

  7. Métricas - problemas ➜ Seja mais rápido pra um usuário

    do que pra outro ➜ Carregamento rápido, mas demore pra conseguir usar ➜ Rápido, mas as coisas mudam depois 7
  8. Métricas - como medir? ➜ Laboratório ➜ Campo 8

  9. Como medir? - laboratório ➜ Lighthouse ➜ WebPageTest 9

  10. Como medir? - campo ➜ Page Speed Insights ➜ Relatório

    de principais métricas ➜ Relatório de Experiência do Usuário 10
  11. LCP Largest Contentful Paint 11 (Carregamento)

  12. Em quanto tempo, após o início da página, o maior

    elemento da página é carregado? LCP 12 GOOD NEEDS IMPROVEMENT POOR 2.5 sec 4.0 sec
  13. LCP - Elementos ➜ <img> ➜ <image> dentro de <svg>

    ➜ <video> ➜ Imagem de fundo carregada com url() ➜ Elemento de bloco 13
  14. E como saber qual é o maior? 14 ➜ Não

    é o tamanho em bytes ➜ Ignora coisas que não estão sendo efetivamente mostradas e espaçamentos ➜ Se redimensionado, considera o menor valor ➜ Se um elemento maior carregar depois, troca o maior elemento ➜ Interação do usuário interrompe essa troca
  15. 15

  16. Causas mais comuns ➜ Tempo de resposta do servidor ➜

    JS e CSS que bloqueiam a renderização ➜ Tempos lentos de carregamentos de recurso ➜ Renderização do lado do cliente 16
  17. Tempo de resposta do servidor 17 ➜ Otimizar o seu

    servidor ➜ Usar CDN ➜ Caches ➜ Antecipar a conexão de terceiros <link rel="preconnect" href="" />
  18. CSS e JS 18 ➜ Minificar arquivo ➜ Embutir o

    que for crítico ➜ Adiar o que não for crítico - JS: async/defer - CSS: preload/onload ➜ Verifica se ta carregando na hora certa
  19. 19

  20. 20

  21. 21

  22. 22 Source > Coverage

  23. 23 Source > Coverage

  24. FID First Input Delay 24 (Interatividade)

  25. Depois que o usuário interagir pela primeira vez com algo,

    qual o tempo da reação do site? FID 25 GOOD NEEDS IMPROVEMENT POOR 100ms 300ms
  26. FID - o que considera? ➜ Tempo de atraso e

    não tempo de processamento ➜ Mesmo se não tiver listener do evento ➜ Só a primeira entrada ➜ Usuários tem pesos diferentes 26
  27. Dicas ➜ Reduzir código de terceiros ➜ Reduzir tempo de

    execução do JS ➜ Minimizar trabalho na thread principal ➜ Diminuir o tamanho de transferência ➜ Tudo que falei no anterior 27
  28. CLS Content Layout Shifting 28 (Estabilidade Visual)

  29. Qual a maior quantidade de cadeia de mudanças inesperadas de

    conteúdo que a página teve? CLS 29 GOOD NEEDS IMPROVEMENT POOR 0.1 0.25
  30. 30

  31. CLS - o que considera? ➜ Apenas as inesperadas ➜

    Não considera transform ➜ Fração de impacto * fração de distância 31
  32. 32 Fração de impacto 75% 0.75

  33. 33 Fração de distância 25% 0.25

  34. Causas mais comuns 34 ➜ Alguma coisa mudou de posição

    ➜ Alguma coisa mudou de tamanho ➜ Alguma coisa entrou no DOM depois ➜ Animações mudaram algum layout
  35. Imagens 35 ➜ Usar width/height ➜ Aspect-ratio ou content-fit ➜

    Elemento pai com aspect-ratio definido ➜ Srcset para imagens dinâmicas <img srcset="a-1000.jpg 1000w, a-2000.jpg 2000w, a-3000.jpg 3000w"/>
  36. Fontes 36 ➜ FOIT X FOUT ➜ Reduzir tamanho do

    web-font ➜ Verificar quando sua fonte foi carregada ➜ Font-display: optional
  37. Outras dicas 37 ➜ Não colocar conteúdo dinâmico acima de

    conteúdo que já existe ➜ Reservar o local do anúncio antes da lib ➜ Se possível, dê preferência pro transform
  38. 38

  39. 39

  40. 40 É isso, obrigada!