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
watsonx.ai Dojo #4 生成AIを使ったアプリ開発、応用編
oniak3ibm
PRO
1
110
[Do iOS '24] Ship your app on a Friday...and enjoy your weekend!
polpielladev
0
100
Why Jakarta EE Matters to Spring - and Vice Versa
ivargrimstad
0
1.1k
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
初めてDefinitelyTypedにPRを出した話
syumai
0
410
ふかぼれ!CSSセレクターモジュール / Fukabore! CSS Selectors Module
petamoriken
0
150
macOS でできる リアルタイム動画像処理
biacco42
9
2.4k
Click-free releases & the making of a CLI app
oheyadam
2
120
ヤプリ新卒SREの オンボーディング
masaki12
0
130
Contemporary Test Cases
maaretp
0
140
タクシーアプリ『GO』のリアルタイムデータ分析基盤における機械学習サービスの活用
mot_techtalk
4
1.4k
NSOutlineView何もわからん:( 前編 / I Don't Understand About NSOutlineView :( Pt. 1
usagimaru
0
330
Featured
See All Featured
What's in a price? How to price your products and services
michaelherold
243
12k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Testing 201, or: Great Expectations
jmmastey
38
7.1k
Optimizing for Happiness
mojombo
376
70k
Adopting Sorbet at Scale
ufuk
73
9.1k
How STYLIGHT went responsive
nonsquared
95
5.2k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
6
410
The Art of Programming - Codeland 2020
erikaheidi
52
13k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
356
29k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
6.8k
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!!