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
170
monitering_web_vitals_nextjs
kuma / NOEL
January 07, 2023
Tweet
Share
Other Decks in Programming
See All in Programming
スクラムガイドのスプリントレトロスペクティブを改めて読みかえしてみた / Re-reading the Sprint Retrospective Section in the Scrum Guide
mackey0225
3
430
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
dbtのドメイン分割による データ基盤の改善とDigdagとの連携
sakama
0
350
Zero Waste, Radical Magic, and Italian Graft – Quarkus Efficiency Secrets
hollycummins
0
230
Git Lint
bkuhlmann
4
750
大規模Reactアプリのリアーキテクチャ~8万行のTanStack Query移行の軌跡~
kj455
4
960
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
1
710
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
380
新宿ダンジョンを可視化してみた
satoshi7190
2
260
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
190
TCAとKMPを用いた新規動画配信アプリ 「ABEMA Live」の設計
tomu28
1
110
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
Featured
See All Featured
Happy Clients
brianwarren
92
6.4k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
40
4.4k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
352
28k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Producing Creativity
orderedlist
PRO
337
39k
GraphQLとの向き合い方2022年版
quramy
32
12k
Designing Experiences People Love
moore
136
23k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
eileencodes
125
32k
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
Optimising Largest Contentful Paint
csswizardry
8
2.4k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
116
18k
Into the Great Unknown - MozCon
thekraken
10
990
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!!