Como otimizar seu site com lighthouse e core web vitals

He4rtConf 2021

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!