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
monitering_web_vitals_nextjs
Search
kuma / NOEL
January 07, 2023
Programming
1
220
monitering_web_vitals_nextjs
kuma / NOEL
January 07, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
420
シェーダーで魅せるMapLibreの動的ラスタータイル
satoshi7190
1
440
Amazon Qを使ってIaCを触ろう!
maruto
0
370
開発効率向上のためのリファクタリングの一歩目の選択肢 ~コード分割~ / JJUG CCC 2024 Fall
ryounasso
0
420
From Subtype Polymorphism To Typeclass-based Ad hoc Polymorphism- An Example
philipschwarz
PRO
0
190
광고 소재 심사 과정에 AI를 도입하여 광고 서비스 생산성 향상시키기
kakao
PRO
0
160
シールドクラスをはじめよう / Getting Started with Sealed Classes
mackey0225
3
430
「今のプロジェクトいろいろ大変なんですよ、app/services とかもあって……」/After Kaigi on Rails 2024 LT Night
junk0612
4
2k
Kaigi on Rails 2024 - Rails APIモードのためのシンプルで効果的なCSRF対策 / kaigionrails-2024-csrf
corocn
5
3.7k
讓數據說話:用 Python、Prometheus 和 Grafana 講故事
eddie
0
390
RailsのPull requestsのレビューの時に私が考えていること
yahonda
5
2.7k
デプロイを任されたので、教わった通りにデプロイしたら障害になった件 ~俺のやらかしを越えてゆけ~
techouse
53
34k
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
12k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Build The Right Thing And Hit Your Dates
maggiecrowley
33
2.4k
Optimizing for Happiness
mojombo
376
69k
Mobile First: as difficult as doing things right
swwweet
222
8.9k
Fontdeck: Realign not Redesign
paulrobertlloyd
82
5.2k
KATA
mclloyd
29
14k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
226
22k
Bash Introduction
62gerente
608
210k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
4
360
Large-scale JavaScript Application Architecture
addyosmani
510
110k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
390
Transcript
Monitoring Web Vitals in our Next.js App 2023.01.07 Noël
Noël ABOUT ME 1 @ingenieur_noel Stack Love Christmas & Verlan
(My handle is derived from these.) Like Anime, Karaoke & Cafe Other Pokémon Violet Introduce myself
https://frame-illust.com/?p=15705 2
3 What’s Web Vitals?
4 delivering a great UX on the web Core Web
Vitals metrics Google suggests unified guidance for quality singnals
5 Let’s diagnose!
6 Diagnose performance issues
01 ISR 02 SSR 03 SSG 04 CSR 7 Four
types of rendering methods
8 https://dev.to/pahanperera/visual-explanation-and-comparison-of-csr-ssr-ssg-and-isr-34ea Strength and Weakness
Stale-While-Revalidate https://aviaryan.com/blog/react-stale-while-revalidate 9
10 Discover what your real users are experiencing
11 Take a look at metrics in detail
12 Red triangle symbols
13 Ensure text remains visible during webfont load
_document.tsx Where is webfont supposed to be loaded? 14
https://t32k.me/mol/log/optimize-webfont-loading/ https://helpx.adobe.com/fonts/using/font-display-settings.html Learn how to use font-display settings to modify
web font performance 15
https://www.stuffwetalkabout.com/post/a-journey-of-a-thousand-miles-begins-with-a-single-step Thank you for your attention!!