Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

monitering_web_vitals_nextjs

Sponsored · SiteGround - Reliable hosting with speed, security, and support you can count on. →
Avatar for kuma / NOEL kuma / NOEL
January 07, 2023
Programming
250
1

 monitering_web_vitals_nextjs

Avatar for kuma / NOEL

kuma / NOEL

January 07, 2023

Other Decks in Programming

See All in Programming
[GoCon2026] When Goroutines Are Not Enough: Runtime Locality in High-Throughput Go
Avatar for Takeru Hayasaka takehaya
6
2.4k
モジュールの視点からSwiftを読み解く #iosdc
Avatar for Shigure Shimotori s_shimotori
0
190
そのリトライ、死んだコネクションを使い回していませんか ── GoのHTTPクライアントとHTTP/2を実プロダクト障害から学び直す
Avatar for Yusa Matsuda myus4a
0
220
標準パッケージに uuid が追加された 背景から見る Go らしい意思決定 / go_127_uuid_decision
Avatar for convto convto
5
8.2k
UnityでSystem.Net.WebSocketsなWebSocketサーバが動かないのでUnity Monoのコードを覗いてみた / about implementing websocket server with unity mono
Avatar for にー兄さん drumath2237
1
320
『寄り添うラジオ』をAIで作る 体験価値から逆算した、会話しないUXと品質設計
Avatar for テオリア・テクノロジーズ theoriatec2024
3
180
App Intentsのビルドプロセスを支える技術
Avatar for kntk kntkymt
0
420
XP祭りでしか伝わらないフリップネタ #xpjug
Avatar for bayashi murabayashi
0
150
ハーネス設計入門 〜 基礎知識の整理から実務へのステップアップ 〜
Avatar for kinopee kinopeee
16
13k
SONY CISC-NEWS NWS-1750 + NWB-225 フレームバッファの NetBSD/news68k ドライバ実装 / OSC2026Hiroshima
Avatar for Izumi Tsutsui tsutsui
0
140
WebRTC映像をAirPlayに対応させる挑戦.pdf
Avatar for monolithic-adam monolithic_adam
0
300
すこし踏み込む CancellationToken
Avatar for tkym htkym
2
880

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
How to Build an AI Search Optimization Roadmap - Criteria and Steps to Take #SEOIRL
Avatar for Aleyda Solis aleyda
1
2.2k
Future Trends and Review - Lecture 12 - Web Technologies (1019888BNR)
Avatar for Beat Signer signer
PRO
0
3.8k
Ecommerce SEO: The Keys for Success Now & Beyond - #SERPConf2024
Avatar for Aleyda Solis aleyda
1
2.2k
Typedesign – Prime Four
Avatar for Hannes Fritz hannesfritz
42
3.2k
Large-scale JavaScript Application Architecture
Avatar for Addy Osmani addyosmani
515
110k
Building an army of robots
Avatar for Kyle Neath kneath
307
46k
Neural Spatial Audio Processing for Sound Field Analysis and Control
Avatar for NII S. Koyama's Lab skoyamalab
0
520
KATA
Avatar for Megan Lloyd mclloyd
PRO
35
15k
New Earth Scene 8
Avatar for Sydney Stone popppiees
4
2.6k
Git: the NoSQL Database
Avatar for Brandon Keepers bkeepers
PRO
432
67k
Performance Is Good for Brains [We Love Speed 2024]
Avatar for Tammy Everts tammyeverts
12
1.8k

Transcript

  1. Monitoring Web Vitals in our Next.js App 2023.01.07 Noël

  2. 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

  3. https://frame-illust.com/?p=15705 2

  4. 3 What’s Web Vitals?

  5. 4 delivering a great UX on the web Core Web

    Vitals metrics Google suggests unified guidance for quality singnals

  6. 5 Let’s diagnose!

  7. 6 Diagnose performance issues

  8. 01 ISR 02 SSR 03 SSG 04 CSR 7 Four

    types of rendering methods

  9. 8 https://dev.to/pahanperera/visual-explanation-and-comparison-of-csr-ssr-ssg-and-isr-34ea Strength and Weakness

  10. Stale-While-Revalidate https://aviaryan.com/blog/react-stale-while-revalidate 9

  11. 10 Discover what your real users are experiencing

  12. 11 Take a look at metrics in detail

  13. 12 Red triangle symbols

  14. 13 Ensure text remains visible during webfont load

  15. _document.tsx Where is webfont supposed to be loaded? 14

  16. 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

  17. https://www.stuffwetalkabout.com/post/a-journey-of-a-thousand-miles-begins-with-a-single-step Thank you for your attention!!