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.

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

3. Na czym
będziemy
pracować?

4. Od czego
zaczynaliśmy?

5. Co udało się
osiągnąć?

6. 6
#52: Opowieści z frontu
Uszanowanko Programowanko
Zaczynajmy!

7. Core Web Vitals

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

22. Bundles
Bundle-wizard

23. Bundles
Rozbijanie chunków

24. Bundles
Bundle-wizard

25. Bundles
Lodash
72kb -> 18kb

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/

51. Arkusz z wynikami
https://1drv.ms/x/s!Al1weAR_KBdlgTy3KLT
mePXWAtnL?e=hM7gjR
lub
https://bit.ly/3wT7ASg

52. Dziękuję za uwagę!
Czas na Q&A
Marcin Kurka
#52: Opowieści z frontu
Uszanowanko Programowanko