Core Web Vitals - Técnicas de Performance Web para Javascript

Core Web Vitals Técnicas de Performance Web para Javascript

““ Métricas de performance focadas no usuário (Da Google)

Principais métricas Carregamento , interatividade e estabilidade visual

O que importa pro usuário, imediatamente disponível de forma estável

-Estabilidade -Disponibilidade -Robustez -Usabilidade -Acessibilidade Quando pensamos em performance, pensamos
também em

Acessibilidade?

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

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

<!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

<!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

<!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

FOUC (Flash of Unstyled Content)

Os recursos dentro das marcações injetadas pelo javascript são invisíveis
pro preload scanner

Como saber se meu Javascript está sendo um problema? <script>
</script>

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

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

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

Estratégias de otimização <script> </script>

Resource priority

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 />

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

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

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

FetchPriority <script src=“script.js” fetchpriority=“high" />

Loading <img src=“./gretchen.gif” loading=“lazy”/> É recomendado se usar com imagens
que não estão imediatamente visíveis Esse atributo sinaliza pro browser  que a imagem ou iframe devem  ser carregados à partir do momento  que entram na área de visualização

Axiomas <script> </script>

Menos Javascript Remova dependências desnecessárias Viabilize tree shaking nos seus
imports Compressão, uglify Avalie com dados a necessidade de poly fi lls As vezes as APIs do HTML e do CSS já são su fi cientes

Priorize o essencial Código necessário roda primeiro Limpe a main
thread transferindo carga pra workers Quebre long tasks com timeouts e/ou async Lazy loading em funções / componentes que só rodam em determinadas condições Inlining de código que será imediatamente executado Priorize gerar chunks menores de código

Se tudo é necessário, nada é importante.

Como metrificar? <script> </script>

Lab Data Field Data - Devtools (Performance) - Lighthouse -
CrUX (Chrome UX Report) - PageSpeed Insights - CloudWatch RUM Experiências reais Ambiente controlado

Como medir? DevTools - DOMContentLoaded e Load - Bundle Size
e Time - Priority - Waterfall Network

Evento disparado quando o DOM é totalmente criado onload É
disparado quando toda página e seus assets são carregados domContentLoaded

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

Como medir? - Simular mobile e com throttling - Pra
Javascript, TBT e FCP - Render Snapshot - Sessão de oportunidades Lighthouse DevTools

Como medir? - TFB, FCP e TBT - Visualizar Snapshots
- Inspecionar waterfall - Ler os Performance Insights WebPageTest

Como medir? - Dados categorizados por localidade, jornada, dispositivo e
mais. - Índice próprio de performance (Apdex) - Sucesso de jornadas - Segmentação do monitoramento - Tracing Cloudwatch RUM

Obrigado! Perguntas? <script> </script>

Core Web Vitals - Técnicas de Performance Web ...

Core Web Vitals - Técnicas de Performance Web para Javascript

More Decks by Camilo Micheletto

Other Decks in Technology

Featured

Transcript