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
開発生産性を組織全体の「生産性」へ! 部門間連携の壁を越える実践的ステップ
sudo5in5k
0
240
使いたいMCPサーバーはWeb APIをラップして自分で作る #QiitaBash
bengo4com
0
1k
Node-RED × MCP 勉強会 vol.1
1ftseabass
PRO
0
170
製造業からパッケージ製品まで、あらゆる領域をカバー!生成AIを利用したテストシナリオ生成 / 20250627 Suguru Ishii
shift_evolve
PRO
1
160
Should Our Project Join the CNCF? (Japanese Recap)
whywaita
PRO
0
280
SpringBoot x TestContainerで実現するポータブル自動結合テスト
demaecan
0
110
生成AI時代 文字コードを学ぶ意義を見出せるか?
hrsued
1
680
LangChain Interrupt & LangChain Ambassadors meetingレポート
os1ma
2
200
Snowflake Summit 2025全体振り返り / Snowflake Summit 2025 Overall Review
mtpooh
2
440
本が全く読めなかった過去の自分へ
genshun9
0
660
強化されたAmazon Location Serviceによる新機能と開発者体験
dayjournal
3
230
AI導入の理想と現実~コストと浸透〜
oprstchn
0
140
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
RailsConf 2023
tenderlove
30
1.1k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
940
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
34
3.1k
4 Signs Your Business is Dying
shpigford
184
22k
GraphQLの誤解/rethinking-graphql
sonatard
71
11k
Docker and Python
trallard
44
3.5k
Statistics for Hackers
jakevdp
799
220k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
107
19k
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!