Jak poprawić Core Web Vitals w aplikacji Next.js
•
0 j'aime•153 vues
Core Web Vitals to metryki przygotowane przez Google w celu pomiaru wydajności aplikacji oraz User Experience. Są one składowymi wyniku “Performance” obliczanego przez narzędzie Lighthouse. W swojej prezentacji Marcin przybliży temat poszczególnych metryk, a następnie na kilku przykładach postaram się zaprezentować problemy wpływające na niższy wynik oraz jak sobie z nimi poradzić. Całość prezentacji opierać się będzie na prostej aplikacji Next.js, której wynik będziemy starać się poprawić, korzystając z kilku ciekawych narzędzi.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Jak poprawić Core Web Vitals w aplikacji Next.js
Similaire à Jak poprawić Core Web Vitals w aplikacji Next.js (20)
Plus de The Software House
Plus de The Software House (20)
Jak poprawić Core Web Vitals w aplikacji Next.js
- 1. Core Web Vitals w aplikacji Next.JS Marcin Kurka #52: Opowieści z frontu Uszanowanko Programowanko
- 2. Marcin Kurka marcin.kurka@tsh.io Frontend developer @ TSH O mnie
- 6. 6 #52: Opowieści z frontu Uszanowanko Programowanko Zaczynajmy!
- 8. Core Web Vitals FCP (First Contentful Paint) 10% SI (Speed Index) 10% LCP (Largest Contentful Paint) 25% TTI (Time To Interactive) 10% TBT (Total Blocking Time) 30% CLS (Cumulative Layout Shift) 15%
- 9. Core Web Vitals FCP (First Contentful Paint) 10% SI (Speed Index) 10% LCP (Largest Contentful Paint) 25% TTI (Time To Interactive) 10% TBT (Total Blocking Time) 30% CLS (Cumulative Layout Shift) 15%
- 10. Core Web Vitals FCP (First Contentful Paint) 10% SI (Speed Index) 10% LCP (Largest Contentful Paint) 25% TTI (Time To Interactive) 10% TBT (Total Blocking Time) 30% CLS (Cumulative Layout Shift) 15%
- 11. Core Web Vitals FCP (First Contentful Paint) 10% SI (Speed Index) 10% LCP (Largest Contentful Paint) 25% TTI (Time To Interactive) 10% TBT (Total Blocking Time) 30% CLS (Cumulative Layout Shift) 15%
- 12. Core Web Vitals FCP (First Contentful Paint) 10% SI (Speed Index) 10% LCP (Largest Contentful Paint) 25% TTI (Time To Interactive) 10% TBT (Total Blocking Time) 30% CLS (Cumulative Layout Shift) 15%
- 13. Core Web Vitals FCP (First Contentful Paint) 10% SI (Speed Index) 10% LCP (Largest Contentful Paint) 25% TTI (Time To Interactive) 10% TBT (Total Blocking Time) 30% CLS (Cumulative Layout Shift) 15%
- 14. 14 Fonty #52: Opowieści z frontu Uszanowanko Programowanko
- 15. Fonty 600 300 250 180 0 100 200 300 400 500 600 700 TTF WOFF EOT WOFF2 Waga w kilobajtach Font
- 16. Fonty 600 300 250 180 150 70 65 40 0 100 200 300 400 500 600 700 TTF WOFF EOT WOFF2 Waga w kilobajtach Font Font subset
- 17. Fonty
- 18. Fonty
- 19. Fonty
- 20. Fonty 5400 2700 2250 1620 130 1350 630 585 360 0 1 000 2 000 3 000 4 000 5 000 6 000 TTF WOFF EOT WOFF2 Variable Font Waga w kilobajtach Font Font subset
- 21. 21 Bundles #52: Opowieści z frontu Uszanowanko Programowanko
- 27. 27 #52: Opowieści z frontu Uszanowanko Programowanko Zbiorowe przesunięcie treści - CLS
- 28. CLS
- 29. 29 Rozmiar DOM #52: Opowieści z frontu Uszanowanko Programowanko
- 30. Rozmiar DOM › Optymalizacja list › Code-splitting
- 31. 31 Obrazki #52: Opowieści z frontu Uszanowanko Programowanko
- 32. Obrazki Rozszerzenia nowej generacji WebP, JPEG 2000 1 Jak optymalizować obrazki?
- 33. Obrazki 1 Warianty rozmiarów obrazków Serwowanie mniejszych obrazków na niższych rozdzielczościach 2 Jak optymalizować obrazki? Rozszerzenia nowej generacji WebP, JPEG 2000
- 34. Obrazki 1 „Lazy loading” Doładowywanie obrazków poza viewportem 3 Warianty rozmiarów obrazków Serwowanie mniejszych obrazków na niższych rozdzielczościach 2 Jak optymalizować obrazki? Rozszerzenia nowej generacji WebP, JPEG 2000
- 35. Obrazki 1 „Lazy loading” Doładowywanie obrazków poza viewportem 3 Warianty rozmiarów obrazków Serwowanie mniejszych obrazków na niższych rozdzielczościach 2 4 Preload LCP Preload największego obrazka Jak optymalizować obrazki? Rozszerzenia nowej generacji WebP, JPEG 2000
- 36. 1500 25 2000 30 0 500 1000 1500 2000 2500 Oryginał Next/image Waga w kilobajtach Hero image Miniaturki Next/image Obrazki
- 37. 37 #52: Opowieści z frontu Uszanowanko Programowanko Przenoszenie złożoności na serwer
- 38. Przenoszenie złożoności na serwer API routes
- 39. Przenoszenie złożoności na serwer API routes
- 40. Przenoszenie złożoności na serwer API routes
- 41. Przenoszenie złożoności na serwer API routes
- 42. Przenoszenie złożoności na serwer API routes
- 43. 43 #52: Opowieści z frontu Uszanowanko Programowanko Podsumowanie wyników
- 44. 0,6 2,3 3,9 3,9 0,56 0,234 0,3 0,3 0,5 1,1 0,08 0 0 1 2 3 4 5 FCP SI LCP TTI TBT CLS Przed Po Podsumowanie wyników 2,9 9,5 19,2 18 1,28 0,464 0,9 0,9 2,5 6,8 0,65 0 0 5 10 15 20 25 FCP SI LCP TTI TBT CLS Przed Po Desktop Mobile
- 45. Następne kroki › Css-modules zamiast CSS-in-JS https://pustelto.com/blog/css-vs-css-in-js-perf/ › React server-side components https://vercel.com/blog/everything-about-react- server-components
- 46. Jak utrzymać Core Web Vitals na niskim poziomie? Bundle-wizard https://github.com/aholachek/ bundle-wizard
- 47. Jak utrzymać Core Web Vitals na niskim poziomie? Webpack performance hints https://webpack.js.org/ configuration/performance/
- 48. Jak utrzymać Core Web Vitals na niskim poziomie? WebPageTest https://webpagetest.org/
- 49. Jak utrzymać Core Web Vitals na niskim poziomie? Lighthouse-CI https://github.com/GoogleChrome/ lighthouse-ci
- 50. Jak utrzymać Core Web Vitals na niskim poziomie? Performance prawdziwych użytkowników https://docs.sentry.io/platforms/javas cript/guides/nextjs/performance/
- 52. Dziękuję za uwagę! Czas na Q&A Marcin Kurka #52: Opowieści z frontu Uszanowanko Programowanko