Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (19)
Similaire à Core Web Vitals - Técnicas de Performance Web pra Javascript
Similaire à Core Web Vitals - Técnicas de Performance Web pra Javascript (20)
Core Web Vitals - Técnicas de Performance Web pra Javascript
- 1. Core Web Vitals Técnicas de Performance Web para Javascript
- 4. -Estabilidade -Disponibilidade -Robustez -Usabilidade Quando pensamos em performance, pensamos também em
- 5. Principais métricas Carregamento , interatividade e estabilidade visual
- 7. Imagem extraída do texto Analysing CRP Performance do Ilya Grigorik no web.dev https://web.dev/critical-rendering-path-analyzing-crp/ Critical Rendering Path
- 8. Read bytes Form chars Make tokens Form nodes Append to Dom <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="index.css"> <title>Sample</title> O parsing
- 9. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="index.css"> <title>Sample</title> Opa
- 10. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <link rel="stylesheet" href="index.css"> <title>Sample</title> <script src=“index.js”></script> Scripts síncronos podem modi fi car O DOM enquanto o parser funciona
- 11. <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width,initial-scale=1" /> <link href="style.css" rel="stylesheet"/> </head> <body> <p>Hello <span>web performance</span> students!</p> <div><img src="awesome-photo.jpg" /></div> <script src="app.js"></script> </body> </html> Preload Scanner
- 12. FOUC (Flash of Unstyled Content)
- 13. Os recursos dentro das marcações injetadas pelo javascript são invisíveis pro preload scanner
- 14. Como saber se meu Javascript está sendo um problema? <script> </script>
- 15. FID 29 First Input Delay INP Interaction to Next Paint 15 TBT 79 Total Blocking Time Observar as métricas relacionadas à interatividade e recursos que bloqueiam a main thread
- 16. Mede o tempo que a thread principal fi cou bloqueada. Começa a contar à partir do primeiro conteúdo renderizado e acaba quando não há nenhuma task < 50ms FID 29 First Input Delay INP Interaction to Next Paint 15 TBT 79 Total Blocking Time Tempo de não-interatividade Observa a velocidade de resposta de todas as interações que geram respostas como eventos de clique, toque e teclado. Velocidade de resposta de interação Observa a velocidade da primeira interação Em Depreciação
- 17. <script> </script> Se o problema é o carregamento, vou colocar meu JS inline Vish
- 18. Recursos inline não geram um request a mais a ser aguardado, mas aumentam o tempo que o preload scanner leva pra encontrar novos recursos
- 21. Carregamento Padrão HTML Parsing do HTML pausado Download do script Execução do script Async e Defer <script src=“script.js” async /> <script src=“script.js” defer />
- 22. <link rel=“preload” href=“script.js” /> script.js High script.js Low <script src=“script.js” async></script> …ele é carregado com prioridade High, fazendo o navegador dedicar mais banda pra ele do que necessário O preload ajuda o script ser carregado com antecedência, mas ao invés dele ser carregado com prioridade low como no async… Preload
- 23. Preconnect conexão download conexão download conexão download conexão download <link rel=“preconnect” href=“script.js” /> - Páginas - Assets estáticos (imagens, fontes, etc.) - Módulos de javascript - Arquivos prioritários de fontes externas Alternativamente podemos usar o rel="dns-prefetch" que apenas adianta a resolução do nome de domínio para o IP, sem modi fi car a prioridade de fetch
- 24. Prefetch <link rel=“prefetch” href=“script.js” /> index.html about.html about.css logo.png Com rel=“prefetch" podemos pré carregar assets e páginas pra usá-las depois
- 26. Falando em Time to Interactive Tempo entre o primeiro conteúdo renderizado e a execução da ultima Long Task de javascript (> 50ms) FCP Quiet TTI - Mini fi car Javascript - Preconnect e Preload - Reduzir código de terceiros - Reduzir tempo de execução de JS - Limpar a main thread - Menos requests de bundles menores
- 29. Como medir? DevTools - DOMContentLoaded e Load - Bundle Size e Time - Priority - Waterfall Network
- 30. Evento disparado quando o DOM é totalmente criado onload É disparado quando toda página e seus assets são carregados domContentLoaded
- 31. Como medir? - Simular mobile e com throttling - Pra Javascript, TBT e FCP - Render Snapshot - Sessão de oportunidades Lighthouse DevTools
- 32. Como medir? - Simular com throttling - Conferir snapshots - Inspecionar network - Veri fi car FP, DCL e L em Timings - Ler os logs no Summery e Na Call Tree quando necessário Performance tab DevTools
- 33. Como medir? - TFB, FCP e TBT - Visualizar Snapshots - Inspecionar waterfall - Ler os Performance Insights WebPageTest