Wydajny frontend 2023

1. Wydajny Frontend 2023 Nowinki, ciekawostki, przykłady

2. Wydajny Frontend 2023 ✓ Współtworzę agencję Studio Sidekicks / Bigger Picture Bartek Miś ✓ Pomagam mojemu zespołowi dowozić projekty ✓ Optymalizuję wydajność stron WWW i aplikacji ✓ Uczę developerów i ekspertów SEO, jak tworzyć wydajne projekty lub audytować/optymalizować istniejące

3. Dwie części Podsumowanie 2022 Rekomendacje na 2023 Co przyniósł zeszły rok; co mnie zaskoczyło Nowości, narzędzia, techniki Plan prezentacji Prezentacja będzie dostępna po webinarze

4. Wydajny Frontend 2023 ✓ Zwiększyła się świadomość odnośnie optymalizacji wydajności Moje obserwacje rynku Źródło: https://almanac.httparchive.org/en/2022/performance

5. Wydajny Frontend 2023 Moje obserwacje rynku ✓ Problemy techniczne z wdrażaniem rekomendacji (np. Wordpress, React, Next.js) ✓ Brakuje większej ilości własnych statystyk (najczęściej bazuje się tylko na CrUX) ✓ „Śrubowanie” wyników Lighthouse przestało być głównym tematem ✓ Klienci są skorzy do implementacji optymalizacji ✓ Jest sporo pracy w zakresie nauki biznesu i zespołów developerskich

6. Wydajny Frontend 2023 Co mnie irytuje Kontekst! Liczy się kontekst, a nie sterta złotych rad.

7. Podsumowanie 2022

8. 1. Brak rozumienia Preload Scanner

9. Wydajny Frontend 2023 https://web.dev/preload-scanner/

10. Wydajny Frontend 2023 1. Preload Scanner ✓ Drugi, dodatkowy parser w przeglądarce, odpowiedzialny za pobieranie zasobów na stronie asynchronicznie, niezależnie od HTML’owego parsera (nawet gdy ten jest potencjalnie zablokowany) ✓ Zasoby znalezione w dokumencie HTML, do których przeglądarka może się odnieść, są pobierane dzięki atrybutom src, href (np. obrazki, style CSS, skrypty itd.) ✓ Dlatego też sporo synchronicznie ładowanych zasobów (np. skrypty) w rzeczywistości są ładowane w nieblokujący sposób dla innych (przez Preload Scanner)

11. Wydajny Frontend 2023 1. Preload Scanner ✓ Obrazki umieszczone przez CSS - nie są znajdywane przez Preload Scanner - uwaga np. na obrazek jako w tło (LCP) ✓ Inline’owo wstrzykiwane skrypty asynchroniczne ✓ Obrazki ładowane leniwie poprzez JS bibliotekę

12. Wydajny Frontend 2023 1. Preload Scanner ✓ Skrypty JS uruchamiane przez document.write są ukryte dla Preload Scanner Polecany artykuł: https://csswizardry.com/2023/01/why-not-document-write/

13. 2. Brak rozumienia parsowania HTML, konstrukcji DOM, renderowania

14. Wydajny Frontend 2023 2. Parsowanie / renderowanie ✓ Pobieranie HTML —> konstruowanie DOM —> konstruowanie CSSOM —> renderowanie (CSS / JS) ✓ Synchroniczny <script> może (ale nie musi) blokować konstruowania DOM, a tym samym ładowania innych zasobów ✓ Synchroniczny <script> zawsze blokuje konstruowanie DOM, kiedy się wykonuje (execution) ✓ Należy zrozumieć, kiedy coś się pobiera, kiedy coś blokuje konstruowanie DOM, a kiedy coś się renderuje

15. Wydajny Frontend 2023

18. 3. Lazy loading obrazków LCP

19. Wydajny Frontend 2023 3. Lazy loading obrazków LCP ✓ <img loading=lazy src=…>, gdy obrazek jest LCP, jest antywzorcem! Źródło: https://almanac.httparchive.org/en/2022/performance#lcp-lazy-loading

20. 4. Fonty a CDN (np. Google Fonts)

21. Wydajny Frontend 2023 4. Fonty a CDN

22. Wydajny Frontend 2023 4. Fonty a CDN https://www.instagram.com/webdevinsider/

23. 5. Różnice między wynikami Lab a RUM

24. Wydajny Frontend 2023 5. Różnice między wynikami Lab a RUM ✓ Czy na stronie zmienia się coś, gdy użytkownik dokona jakiejś decyzji (cookie popup, jakaś notyfikacja) i zapisze wybór (cookie) ✓ cache ✓ Lokalizacja wykonywania testów syntetycznych vs realni użytkownicy i lokalizacje odwiedzin

27. Test (LAB) strony, bez cookie popup

28. Wydajny Frontend 2023 5. Różnice między wynikami Lab a RUM ✓ Uruchom test/eksperyment (np. przez WPT —> Inject Script)

29. Wydajny Frontend 2023 5. Różnice między wynikami Lab a RUM ✓ Uruchom test/eksperyment (np. przez WPT —> Inject Script) ✓ Pierwsza wizyta na stronie jest bardzo istotna!

30. 6. CLS

31. Wydajny Frontend 2023 6. CLS ✓ Wciąż istnieje sporo stron, gdzie obrazki nie mają nadanych wymiarów width/height Źródło: https://almanac.httparchive.org/en/2022/performance#cumulative-layout-shift-cls

32. Wydajny Frontend 2023 6. CLS ✓ Animacje CSS powodują CLS - korzystaj z transform ✓ Fonty —> font-display: swap|optional (FOUT) ✓ bfcache (Back/Forward cache) ✓ Reklamy —> min-height jest lepszym rozwiązaniem niż brak jakiejkolwiek wysokości

33. 7. Wydajność strony na desktopie a Google

36. Co nowego w 2023 + rekomendacje

37. Wydajny Frontend 2023 Skrót najważniejszych porad ✓ Zasób LCP (np. obrazek) powinien być znajdywany z poziomu kodu HTML (preload scanner) ✓ LCP: <link rel=preload>, + fetchpriority=high, bez loading=lazy na <img> ✓ Używaj CDN ✓ CLS: Dodawaj rozmiar width/height (lub przynajmniej min-height) na obrazkach, iframe, kontenerach np. na reklamy ✓ CLS: unikaj animacji/tranzycji, które powodują fazę Layout ✓ FID/INP: dziel długie zadania na mniejsze; używaj setTimeout(), isInputPending

38. Wydajny Frontend 2023 Bądź detektywem & eksperymentuj ✓ Nie ma ogólnych zasad optymalizacji, które sprawdzą się zawsze i wszędzie ✓ Optymalizacja wydajności zaczyna się od celów, pytań, obserwacji, analizy, a następnego szukania rozwiązań, zwłaszcza podczas eksperymentowania ✓ Eksperyment bez wdrażania zmian na stronie (na serwerze)

39. Wydajny Frontend 2023 ✓ WebPageTest Opportunities & Experiments

40. Wydajny Frontend 2023 ✓ WebPageTest - własne eksperymenty

43. Wydajny Frontend 2023 ✓ DevTools Overrides

44. Wydajny Frontend 2023 ✓ DevTools Overrides

46. Wydajny Frontend 2023 ✓ DevTools Performance Insights

47. Wydajny Frontend 2023 ✓ DevTools Performance Insights

48. Wydajny Frontend 2023 User Flows ✓ Mierz wydajność strony nie tylko pod kątem jej ładowania, ale również podczas korzystania z niej, podczas interakcji ✓ Dodawanie produktu do koszyka, proces rejestracji, logowania itp. ✓ DevTools Recorder; WebPageTest

49. Wydajny Frontend 2023 User Flows

50. Mierzmy i usprawniajmy to, co dzieje się podczas całej „podróży” użytkownika na naszej stronie

51. Wydajny Frontend 2023 FID a INP ✓ INP: metryka, która wskazuje na całościowy poziom interaktywności na stronie podczas wizyty na stronie (czyli od momentu, gdy wchodzimy na daną stronę, aż przez cały cykl obcowania z nią, a nie tylko po załadowaniu strony albo tylko w trakcie pierwszej interakcji). ✓ FID: czas, w jakim przeglądarka jest w stanie odpowiedzieć na pierwszą interakcję użytkownika na stronie

52. Wydajny Frontend 2023 INP: jak testować ✓ Biblioteka web-vitals.js (https://github.com/GoogleChrome/web-vitals)

53. Wydajny Frontend 2023 INP: jak testować

54. Wydajny Frontend 2023 INP: jak testować

55. Wydajny Frontend 2023 INP: jak testować https://github.com/GoogleChrome/web-vitals

56. Wydajny Frontend 2023 Obrazki ✓ Natywny lazy loading

57. Wydajny Frontend 2023 Obrazki ✓ AVIF (Safari już wspiera; uwaga na Edge)

59. Wydajny Frontend 2023 Obrazki ✓ Obrazki serwowane leniwie - dodawaj atrybut decoding=async

60. Wydajny Frontend 2023 Obrazki ✓ fetchpriority=high dla LCP, fetchpriority=low dla obrazków, które nie są priorytetowe ✓ <link rel=preload fetchpriority=high>

61. Wydajny Frontend 2023 Dynamiczny priorytet LCP https://philipwalton.com/articles/dynamic-lcp-priority/

62. Wydajny Frontend 2023 Dynamiczny priorytet LCP https://philipwalton.com/articles/dynamic-lcp-priority/

63. Wydajny Frontend 2023 CDN

64. Wydajny Frontend 2023 CDN ✓ Całościowy: Cloudflare, Cloudfront ✓ Statyczne zasoby: obrazki „contentowe” (wraz z możliwością manipulacji formatu, rozmiaru), filmiki

65. Wydajny Frontend 2023 CDN

66. Wydajny Frontend 2023 Cloudflare APO (Automatic Platform Optimisation)

67. Wydajny Frontend 2023 CDN ✓ 103 Early Hints (np. do styli CSS albo fontów)

68. Wydajny Frontend 2023 CDN ✓ 103 Early Hints

69. Wydajny Frontend 2023 Cloudflare ✓ HTTP/3 ✓ Kompresja Brotli ✓ Ochrona przed DDoS, WAF

70. Wydajny Frontend 2023 EV certificate ✓ Typ certyfikatu, gdzie w przeglądarce zachodzi walidacja, czy organizacja posiada domenę, z rygorystycznym procesem sprawdzania ✓ Kiedyś przy adresie URL w przeglądarce widniała nazwa organizacji ✓ Certyfikat EV jest wolny: brak obsługi OSCP po stronie serwera; kontrola rewalidacyjna certyfikatu odbywa się po stronie klienta (przeglądarki) —> dłuższy czas TTFB

71. Wydajny Frontend 2023 EV certificate ✓ Przeglądarka Chrome od wersji 106 przestała wykonywać żądania OSCP, w rezultacie strony, które korzystają z EV certyfikatów odczuły poprawę wydajności https://blog.webpagetest.org/posts/elimi nating-ev-certificate-performance- overhead/

72. Wydajny Frontend 2023 EV certificate https://www.ssl.com/blogs/how-do-browsers-handle-revoked-ssl-tls-certificates/#variation

73. Wydajny Frontend 2023 HTTP/3 ✓ Protokół HTTP/3 został ustandaryzowany od czerwca 2022 ✓ HTTP/3 stawia na szybkość (streaming contentu) ✓ Połączenie HTTP/3 nie blokuje się, jest szybciej nawiązywane, bezpieczne i elastyczne (QUIC)

74. Wydajny Frontend 2023 HTTP/3 https://devenv.pl/http2-http3/

75. Wydajny Frontend 2023 HTTP/3 ✓ Rekomenduje się wdrożenie protokołu HTTP/3 ze względu na wydajność stron ✓ Cloudflare

76. Wydajny Frontend 2023 bfcache (Back/Forward) ✓ Nic nowego, ale przez wprowadzenie obsługi w przeglądarce Chrome zaczęto o tym mówić głośniej ✓ Według badań, blisko 20% wszystkich nawigacji w przeglądarce Chrome (mobile) pochodzi z nawigowania do poprzedniej strony przez przycisk back w przeglądarce

77. Wydajny Frontend 2023 bfcache: demo

78. Wydajny Frontend 2023 Bez bfcache: demo

79. Wydajny Frontend 2023 bfcache (Back/Forward) ✓ Jak to włączyć, co zrobić, by to działało? Prawdopodobnie nic.

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

81. Wydajny Frontend 2023 bfcache - dlaczego nie działa

82. Wydajny Frontend 2023 ✓ Zapamiętywanie pełnego stanu całej strony z poprzedniej wizyty (łącznie z JS heap’em) ✓ Usprawnienie metryki CLS https://www.debugbear.com/blog/2022-in-web-performance bfcache (Back/Forward)

83. Wydajny Frontend 2023 Uwaga na bfcache i analitykę ✓ Detekcja odwiedzin stron z bfcache

84. Wydajny Frontend 2023 CSS a JS ✓ Inline’nowy JS a CSS: wolny arkusz CSS zablokuje wykonywanie kodu JS <script> znajdującego się po nim ✓ Dobrą techniką jest umieszczenie tego inline’owego <script> przed arkuszem styli CSS, idealnie na samej górze <head> po <title>

85. Wydajny Frontend 2023 CSS a JS ✓ Alternatywa: <script type=module async> ✓ Dzięki temu, taki <script> można umieścić nawet i po CSS, w dalszej części dokumentu HTML, nie martwiąc się o jego zablokowane wykonanie https://calendar.perfplanet.com/2022/using-inline-javascript-modules-to-prevent-css-blockage/

86. Wydajny Frontend 2023 Wydajność CSS ✓ Zasadniczo może stwierdzić: to, jak piszemy CSS (selektory) nie ma aż tak dużego znaczenia pod kątem wydajności

87. Wydajny Frontend 2023 Wydajność CSS ✓ Rekalkulacja styli, inwalidacja layout ✓ Testuj przez zakładkę Performance w DevTools https://twitter.com/csswizardry/status/1616906377829433351

88. Wydajny Frontend 2023 Asynchroniczny CSS ✓ Dwa arkusze: style odpowiedzialne za elementy widoczne od razu (wysoki priorytet) oraz style związane z elementami widocznymi dopiero po jakiejś interakcji (np. rozwijane menu, lightbox, wysuwany sidebar) (niski priorytet) ✓ Arkusz ze stylami niskopriorytetowymi: ładowanie asynchroniczne

89. Wydajny Frontend 2023 Asynchroniczny CSS ✓ Zadanie domowe: spróbuj przenieść te style pod koniec </body>

90. Krytyczny CSS…

91. Wydajny Frontend 2023 CSS Containment ✓ Opóźnianie renderowania elementów, które nie są widoczne od razu ✓ Sprawdza się zwłaszcza na stronach obfitych w content, długich https://www.terluinwebdesign.nl/en/css/calculating-contain-intrinsic-size-for-content-visibility/

92. Wydajny Frontend 2023 Tranzycje między podstronami ✓ InstantPage: https://instant.page (just-in-time preloading)

93. Wydajny Frontend 2023 Tranzycje między podstronami ✓ Prerender https://developer.chrome.com/blog/prerender-pages/

94. Wydajny Frontend 2023 Tranzycje między podstronami ✓ Speculation Rules API

95. Wydajny Frontend 2023 Tranzycje między podstronami ✓ View Transitions API

96. Wydajny Frontend 2023 Tranzycje między podstronami ✓ View Transitions API https://developer.chrome.com/docs/web-platform/view-transitions/

97. Wydajny Frontend 2023 O czym pamiętać w 2023 ✓ Kontekst, cele i realistyczne optymalizacje ✓ Sporo optymalizacji po stronie przeglądarki (bfcache, Speculation Rules, natywne wsparcie nowoczesnych obrazków i ich ładowania, priorytetyzacja, lazy rendering) —> postaraj się z nich korzystać ✓ Wydajność korzystania ze strony podczas całej wizyty ✓ Analiza waterfall ✓ Wiedza na temat zależności między CSS a JS a DOM ✓ Ładowanie tylko tyle, ile potrzeba; w mniejszych częściach; renderowanie tylko tyle, ile potrzeba na dany moment

99. Problem z wdrożeniem optymalizacji w projektach?

100. Kurs Zoptymalizowany Frontend 2023 ✓ Nabór 20-23. lutego 2023; 1549 PLN + VAT Nowy kurs 2023 (?) ✓ Przykłady technicznego wdrażania poprawek wydajnościowych zorientowanych na dany CMS/framework Audyty wydajności ✓ kontakt@webdevinsider.pl

101. QA

Wydajny frontend 2023

Estás leyendo una previsualización.

Eche un vistazo a continuación

Wydajny frontend 2023

Más Contenido Relacionado

Similares a Wydajny frontend 2023 (20)

Más reciente (20)