monitering_web_vitals_nextjs

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!!