Optymalizacja frontendu w 2022
•
0 likes•267 views
Dbałość o wydajność frontendu stała się koniecznością, ale często zatrzymujemy się na elementach, których nie da się zoptymalizować. Pozornie. Pokażę Ci 10 przykładów z realnych projektów, gdzie za pośrednictwem <fscript>, Qwik, Partytown oraz wiedzy o działaniu przeglądarki zoptymalizujemy skrypty zewnętrzne (będące powodem wysokiego TBT i TTI). Pokażę Ci zaawansowaną optymalizację ładowania assetów i renderowania strony (z podeściem connection-aware i użyciem Resource/Priority Hintów). Wszystko, co w 2022 ułatwia dostarczanie jak najlepszego UX na stronie i zapewnienie jak najlepszych not Web Vitals.
More Related Content
What's hot
What's hot (20)
Similar to Optymalizacja frontendu w 2022
Similar to Optymalizacja frontendu w 2022 (20)
Optymalizacja frontendu w 2022
- 1. SPOSOBY, KTÓRYCH NIE ZNASZ, A POWINIENEŚ WYDAJNOŚĆ FRONTENDUW2022
- 2. CZEŚĆ, JESTEMBARTEK ✓ Co-founder, CTO @ Studio Sidekicks (Bigger Picture) ✓ Full-stack developer, miłośnik frontendu ✓ Web Performance Expert (webdevinsider.pl | pagespeedinsider.com) ✓ Twórca szkolenia Zoptymalizowany Frontend www.studiosidekicks.com www.biggerpicture.agency
- 3. LIVE: Wydajność frontendu w 2022
- 4. NIEDASIĘ… LIVE: Wydajność frontendu w 2022
- 5. LIVE: Wydajność frontendu w 2022
- 6. LIVE: Wydajność frontendu w 2022
- 7. „NIEDASIĘ”,BONIEROZUMIESZPRZEGLĄDARKI ✓ TCP Slow Start, zasada „14kb” ✓ HTML, CSS ✓ DOM, CSSOM LIVE: Wydajność frontendu w 2022 ✓ Javascript ✓ Drzewo renderowania ✓ Główny wątek przeglądarki ✓ Ładowanie i renderowanie
- 8. NACZYMSIĘSKUPIĆ LIVE: Wydajność frontendu w 2022 Źródło obrazka: https://livebook.manning.com/ Abovethefold Belowthefold Background
- 10. ABOVETHEFOLD:<HEAD> ✓ <head> jest największym blokującym renderowanie elementem każdej strony (skrypty JS, style CSS i ich oddziaływanie) ✓ Kolejność ładowanych zasobów jest mega istotna LIVE: Wydajność frontendu w 2022 ✓ Przeglądarka sama stara się najlepiej zadecydować kiedy i co załadować
- 12. ABOVETHEFOLD:<HEAD> ✓ Kolejność zależy od typu zasobu [CSS, font, script, obrazek, 3rd party], miejsca lub kolejności umiejscowienia w dokumencie HTML, od <link> preload, async/ defer dla skryptów) LIVE: Wydajność frontendu w 2022
- 16. ABOVETHEFOLD:<HEAD> LIVE: Wydajność frontendu w 2022 https://csswizardry.com/ct/
- 17. ABOVETHEFOLD:<HEAD> LIVE: Wydajność frontendu w 2022 https://csswizardry.com/ct/
- 19. ABOVETHEFOLD:<HEAD> ✓ Jeśli macie SPA lub prosty Landing Page: wstrzykujcie cały CSS do <head> poprzez <style>! LIVE: Wydajność frontendu w 2022
- 20. ABOVETHEFOLD:LCP ✓ Obrazek umieszczany przez CSS background-style: image() jest zawsze wolniejszy niż umieszczony poprzez <img> LIVE: Wydajność frontendu w 2022
- 21. ABOVETHEFOLD:LCP ✓ Stosuj <link> preload, ale… LIVE: Wydajność frontendu w 2022
- 22. ABOVETHEFOLD:LCP LIVE: Wydajność frontendu w 2022 ✓ Priority Hints: zwiększ priorytet tego, co ważne lub zmniejsz tego, co mniej ważne
- 23. ABOVETHEFOLD:LCP LIVE: Wydajność frontendu w 2022
- 24. ABOVETHEFOLD:LCP LIVE: Wydajność frontendu w 2022
- 25. ABOVETHEFOLD:LCP LIVE: Wydajność frontendu w 2022 https://web.dev/priority-hints/
- 26. ABOVETHEFOLD LIVE: Wydajność frontendu w 2022 ✓ Przeglądarki ładują tekst i obrazki w tym samym czasie - synchronicznie
- 27. ABOVETHEFOLD LIVE: Wydajność frontendu w 2022 ✓ Przeglądarki ładują tekst i obrazki w tym samym czasie - synchronicznie
- 29. BACKGROUND:3RDPARTIES ✓ Skrypty trackujące (np. Google Analytics) LIVE: Wydajność frontendu w 2022 ✓ Obciążenie głównego wątku (3rd parties + cała reszta strony —> wysokie TTI + TBT ) ✓ Czat ✓ Reklamy (np. Google Adsense) ✓ Tag Managery
- 31. BACKGROUND:3RDPARTIES LIVE: Wydajność frontendu w 2022 https://github.com/BuilderIO/partytown
- 32. BACKGROUND:3RDPARTIES LIVE: Wydajność frontendu w 2022 https://github.com/BuilderIO/partytown
- 36. <FSCRIPT> LIVE: Wydajność frontendu w 2022
- 37. LIVE: Wydajność frontendu w 2022
- 38. LIVE: Wydajność frontendu w 2022 https://github.com/biggerpicturestudio/delaying-3rd-parties
- 39. LIVE: Wydajność frontendu w 2022 https://www.instawierszyki.pl/
- 40. BELOWTHEFOLD ✓ Lazy loading obrazków, iframe’ów… LIVE: Wydajność frontendu w 2022 ✓ Lazy rendering
- 43. ✓ Pobieramy mniej HTML LIVE: Wydajność frontendu w 2022 ✓ Skupiamy się na szybszym wyświetleniu przestrzeni Above The Fold ✓ Mniejszy HTML = szybsze tworzenie drzewa renderowania (DOM + CSSOM) ✓ Mniej uruchamianego Javascriptu na początku, mniej nasłuchiwania elementów DOM od samego początku ✓ Korzystne dla TTI i TBT ✓ Mniej obciążany główny wątek przeglądarki BELOWTHEFOLD:LAZYRENDERING ✓ Mniej pominiętych klatek w procesie renderowania (dropped frames)
- 47. ZRÓBTOSAM! LIVE: Wydajność frontendu w 2022
- 48. LIVE: Wydajność frontendu w 2022 FETCH+JSEXECUTION
- 49. LIVE: Wydajność frontendu w 2022
- 50. LIVE: Wydajność frontendu w 2022
- 51. LIVE: Wydajność frontendu w 2022
- 52. LIVE: Wydajność frontendu w 2022 DEMO
- 53. LIVE: Wydajność frontendu w 2022 FETCH+JSEXECUTION
- 55. PRZED LIVE: Wydajność frontendu w 2022 PO
- 56. PRZED LIVE: Wydajność frontendu w 2022 PO
- 57. LIVE: Wydajność frontendu w 2022 KROKDALEJ… ✓ Network Information API
- 58. LIVE: Wydajność frontendu w 2022 KROKDALEJ…
- 59. LIVE: Wydajność frontendu w 2022 KROKDALEJ…
- 60. CONNECTION-AWARE LIVE: Wydajność frontendu w 2022 ✓ Serwowanie contentu w zależności od jakości połączenia internetowego (np. obrazek zamiast video) ✓ Tryb oszczędnościowy smartfona —> np. bez serwowania animacji
- 61. LIVE: Wydajność frontendu w 2022 BACKEND
- 63. BELOWTHEFOLD:LAZYRENDERING LIVE: Wydajność frontendu w 2022 ✓ Przykład zastosowania: sekcje below the fold (uwaga na nagłówki i Accessibility!); footer
- 64. PREFETCHONHOVER LIVE: Wydajność frontendu w 2022 ✓ Szybsza nawigacja między podstronami ✓ Turbolinks, Barba.js
- 65. PODSUMOWANIE ✓ Pomóż przeglądarce LIVE: Wydajność frontendu w 2022 ✓ Kolejność ładowanych zasobów ma ogromne znaczenie (testuj, reorganizuj kolejność, priorytetyzuj to, co najważniejsze) ✓ Skup się na przestrzeni Above The Fold (mało zasobów, LCP) ✓ Ładuj leniwie zasoby Below The Fold ✓ Renderuj leniwie to, co Below The Fold ✓ Skrypty zewnętrzne —> opóźniaj lub przenieś do web workera (TTI, TBT) ✓ Testuj & kombinuj. Zawsze coś się da.