Praktyczne przykłady optymalizacji frontendu, które warto znać w 2023 roku. Od wydajności JS, metryki INP, rekalkulację styli po frameworki przyjazne wydajności.

1. Bartek Miś, Studio Sidekicks (Bigger Picture) / Web Dev Insider
Frontendowe optymalizacje
wydajności na 2023
Przykłady, nowości, rekomendacje

2. 2020

3. 2023
RUM, CrUX, Google Search Console

4. Realni użytkownicy,
a nie wyniki labowe

5. Realny użytkownik
= interakcje

6. Jestem Bartek Miś.
• CEO / CTO @ Studio Sidekicks (Bigger Picture)
• Full-stack developer ze szczególnym zamiłowaniem do frontendu
• Specjalizuję się w optymalizacji wydajności stron i aplikacji

7. Slajdy: webdevinsider.pl/4developers

8. Klikasz i…
• Nic się nie dzieje długi czas
• Czuć, że strona jest „zamrożona”, ma „laga”
• Irytacja, frustracja, negatywy odbiór strony/aplikacji

11. https://frontend-perf-tests.vercel.app/inp-tests/test-a.html

16. Interaction to Next Paint
(INP)

17. INP
• Mierzy czas wykonania interakcji, aż do wizualnej zmiany na stronie
(kliknięcia, „tap” na mobile, wpisywania tekstu w inputach)
• Cel: sprawna responsywność strony;
użytkownik coś robi na stronie i szybko otrzymuje to, czego oczekuje

18. Jak mierzyć INP
• DevTools -> Performance (nagrywanie interakcji)

19. Jak mierzyć INP
• Wstrzyknięcie kodu biblioteki web-vitals
(np. poprzez DevTools Overrides)

20. Jak mierzyć INP

21. Jak mierzyć INP

22. CrUX (treo.sh)

23. Jak optymalizować

24. Jak optymalizować

25. Jak optymalizować
https://frontend-perf-tests.vercel.app/inp-tests/test-b.html

26. Jak optymalizować

27. Jak optymalizować

28. Porównanie

29. Jak optymalizować
• Pokazuj wizualną zmianę użytkownikowi tak szybko, jak to możliwe
• Zasobożerne operacje pozwól przeglądarce zaplanować (setTimeout)
• Wskaż użytkownikowi, że coś się wykonuje; otwórz menu od razu, a
zmiany w DOM zrób później

30. Jak optymalizować
• Prześledź zdarzenia w głównym wątku w momencie interakcji

31. Jak optymalizować
• Trackowanie kliknięć

32. Jak optymalizować
• Trackowanie kliknięć

33. Jak optymalizować
• W momencie kliknięcia, rejestrujmy dane o kliknięciu
np. w LocalStorage
• Po załadowaniu docelowej strony, odczytujmy informacje z
LocalStorage i wysyłajmy eventy dopiero w tym momencie (idle)

34. INP a FID

35. Uważaj, jak piszesz CSS

36. Inwalidacja

37. Inwalidacja

38. DevTools - invalidation tracking

39. DevTools - invalidation tracking

40. DevTools - invalidation tracking

41. Przykład

42. Renderowanie w przeglądarce

43. Przykład

44. Liczba inwalidacji

45. Rekalkulacja styli - przykład
14992 elementów

46. https://twitter.com/iamakulov/status/1635277519627898887
Rekalkulacja styli - przykład

47. https://twitter.com/iamakulov/status/1635277519627898887
Rekalkulacja styli - przykład

48. Edge DevTools
https://css-tricks.com/the-truth-about-css-selector-performance/

49. Edge DevTools
https://css-tricks.com/the-truth-about-css-selector-performance/

50. Co wyzwala rekalkulację style/layout
• dodanie klasy CSS do elementu
• innerText
• o
ff
setWidth
• getBoundingClientRect

51. • Naprzemienne i częste operacje READ/WRITE na DOM
• Przykład: odczytywanie wartości poprzez getBoundingClientRect
i aktualizacja styli poprzez element.style.width
Layout Trashing

52. • unikaj sporej ilości node’ów DOM, zwłaszcza zagnieżdżonych
• unikaj inwalidacji globalnego CSS
CSSowe/DOMowe porady
• shadow DOM
• content-visibility (CSS containment)
• wymagające selektory (np. .className > a, [style*=])
• testuj interakcje

53. bfcache
(back/forward cache)

54. Przykład z bfcache

55. Przykład bez bfcache

56. • Jak to włączyć? Co zrobić, by działało? Prawdopodobnie nic.
bfcache

57. • Użycie eventu unload i beforeunload
bfcache - dlaczego nie działa?
• Użycie nagłówka Cache-Control: no-store, który blokuje użycie
jakiegokolwiek cache'a
• Pełna lista przyczyn:
https://docs.google.com/spreadsheets/d/
1li0po_ETJAIybpaSX5rW_lUN62upQhY0tH4pR5UPt60/edit?pli=1#gid=0

58. • Usprawnione ładowanie stron (UX)
bfcache
• Usprawnienie metryki CLS

59. Frameworki JS
a strony contentowe

60. Historia zatoczyła koło?
MPA —> SPA —> MPA

61. • Najpopularniejszy, community, React, zorientowany na wydajność
Next.js
• Problem hydracji, rozmiar JS, problemy TBT => interaktywność

62. Framework prawdziwie zorientowany
na wydajność w 2023:
Astro

64. • To nie jest nowy framework, którego musimy się uczyć, znać nowy syntax
Astro
• Optymalizacyjny fundament pod strony contentowe, nadal pisząc
komponenty w ulubionym frameworku (React, Vue, Svelte)
• Podejście HTML-
fi
rst, zero-JS

65. Astro: architektura wysp
https://docs.astro.build/en/concepts/islands/

66. https://docs.astro.build/en/concepts/islands/

67. Demo

68. Next.js

69. Astro

70. Demo
https://astro-dev-tests.vercel.app/
https://nextjs-dev-tests.vercel.app/

71. Waterfall Next.js vs. Astro
Next.js
Astro
Brak JS!

72. Interaktywny komponent <Tabs />
• Oparty o React (zarówno w projekcie Next.js jak i Astro)

73. Interaktywny komponent <Tabs />
• <Tabs client:visible /> w Astro

74. Interaktywny komponent <Tabs />

75. Waterfall Next.js vs. Astro #2
Next.js
Astro
client:load

76. Porównanie wydajności
Next.js
Astro
client:load

77. • Wydajność interakcji na stronie = super ważna rzecz (click, tap, bfcache)
Podsumowanie
• Wąskie gardło (najczęściej) = JS
• INP
• Usuwajmy JS, gdzie można (HTML-
fi
rst)
• Astro, React Server Components, Qwik
• Inwalidacje style/layout - zwracaj na nie uwagę
• Realni użytkownicy i UX

78. Dzięki za uwagę!
Oceń prezkę na Eventory.
www.webdevinsider.pl