Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Como otimizar seu site com lighthouse e core we...
Search
Juliana Negreiros
October 02, 2021
Technology
0
430
Como otimizar seu site com lighthouse e core web vitals
He4rtConf 2021
Juliana Negreiros
October 02, 2021
Tweet
Share
More Decks by Juliana Negreiros
See All by Juliana Negreiros
Um guia para começar no mundo Front End
juunegreiros
0
340
Desmistificando a área de TI
juunegreiros
0
69
Introdução ao Git
juunegreiros
0
53
Webpacker e a Jornada do Heroi
juunegreiros
0
22
Como modularizar seu front-end sem depender de um framework
juunegreiros
0
87
Sopa de Letrinhas CSS | Alphabet soup CSS
juunegreiros
1
75
Pensando logicamente: introdução à lógica de programação | Thinking logically: introduction to programming logic
juunegreiros
0
60
Carreiras em TI
juunegreiros
0
53
Javascript, um menino serelepe | Javascript, a serelepe guy
juunegreiros
0
230
Other Decks in Technology
See All in Technology
AIとともに進化するエンジニアリング / Engineering-Evolving-with-AI_final.pdf
lycorptech_jp
PRO
0
140
「Chatwork」の認証基盤の移行とログ活用によるプロダクト改善
kubell_hr
1
240
登壇ネタの見つけ方 / How to find talk topics
pinkumohikan
6
600
Yamla: Rustでつくるリアルタイム性を追求した機械学習基盤 / Yamla: A Rust-Based Machine Learning Platform Pursuing Real-Time Capabilities
lycorptech_jp
PRO
4
180
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
120
Oracle Cloud Infrastructure:2025年6月度サービス・アップデート
oracle4engineer
PRO
2
310
20250625 Snowflake Summit 2025活用事例 レポート / Nowcast Snowflake Summit 2025 Case Study Report
kkuv
1
370
論文紹介:LLMDet (CVPR2025 Highlight)
tattaka
0
240
How Community Opened Global Doors
hiroramos4
PRO
1
130
OpenHands🤲にContributeしてみた
kotauchisunsun
1
500
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
0
1.3k
KubeCon + CloudNativeCon Japan 2025 Recap
ren510dev
1
300
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
36
2.8k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
48
5.4k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
20k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
The Language of Interfaces
destraynor
158
25k
Visualization
eitanlees
146
16k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
Designing for Performance
lara
609
69k
Git: the NoSQL Database
bkeepers
PRO
430
65k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Transcript
Como otimizar seu site com Lighthouse e core web vitals
@juunegreiros FE na Consumer Affairs Instrutora na Alura Rails Girls
Sorocaba e SorocabaJS 2
1. Propósito
2. Web vitals
Web Vitals ➜ Iniciativa do Google ➜ Propósito de simplificação
5
2. Core Web Vitals
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
Métricas - como medir? ➜ Laboratório ➜ Campo 8
Como medir? - laboratório ➜ Lighthouse ➜ WebPageTest 9
Como medir? - campo ➜ Page Speed Insights ➜ Relatório
de principais métricas ➜ Relatório de Experiência do Usuário 10
LCP Largest Contentful Paint 11 (Carregamento)
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
LCP - Elementos ➜ <img> ➜ <image> dentro de <svg>
➜ <video> ➜ Imagem de fundo carregada com url() ➜ Elemento de bloco 13
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
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
Tempo de resposta do servidor 17 ➜ Otimizar o seu
servidor ➜ Usar CDN ➜ Caches ➜ Antecipar a conexão de terceiros <link rel="preconnect" href="" />
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
20
21
22 Source > Coverage
23 Source > Coverage
FID First Input Delay 24 (Interatividade)
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
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
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
CLS Content Layout Shifting 28 (Estabilidade Visual)
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
CLS - o que considera? ➜ Apenas as inesperadas ➜
Não considera transform ➜ Fração de impacto * fração de distância 31
32 Fração de impacto 75% 0.75
33 Fração de distância 25% 0.25
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
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"/>
Fontes 36 ➜ FOIT X FOUT ➜ Reduzir tamanho do
web-font ➜ Verificar quando sua fonte foi carregada ➜ Font-display: optional
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
39
40 É isso, obrigada!