Optymalizacja frontendu w 2022

SPOSOBY, KTÓRYCH NIE ZNASZ, A POWINIENEŚ
WYDAJNOŚĆ
FRONTENDUW2022

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

LIVE: Wydajność frontendu w 2022

NIEDASIĘ…

„NIEDASIĘ”,BONIEROZUMIESZPRZEGLĄDARKI
✓ TCP Slow Start, zasada „14kb”
✓ HTML, CSS
✓ DOM, CSSOM
✓ Javascript
✓ Drzewo renderowania
✓ Główny wątek przeglądarki
✓ Ładowanie i renderowanie

NACZYMSIĘSKUPIĆ
Źródło obrazka: https://livebook.manning.com/
Abovethefold
Belowthefold
Background

POMÓŻ
PRZEGLĄDARCE

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
✓ Przeglądarka sama stara się najlepiej zadecydować kiedy i co
załadować

ABOVETHEFOLD:<HEAD>

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)

ABOVETHEFOLD:<HEAD>
https://csswizardry.com/ct/

ABOVETHEFOLD:<HEAD>
✓ Jeśli macie SPA lub prosty Landing Page:
wstrzykujcie cały CSS do <head> poprzez <style>!

ABOVETHEFOLD:LCP
✓ Obrazek umieszczany przez CSS background-style: image()
jest zawsze wolniejszy niż umieszczony poprzez <img>

ABOVETHEFOLD:LCP
✓ Stosuj <link> preload, ale…

ABOVETHEFOLD:LCP
✓ Priority Hints:
zwiększ priorytet tego, co ważne lub zmniejsz tego, co mniej ważne

ABOVETHEFOLD:LCP

ABOVETHEFOLD:LCP
https://web.dev/priority-hints/

ABOVETHEFOLD
✓ Przeglądarki ładują tekst i obrazki w tym samym czasie - synchronicznie

POPRAWAKOLEJNOŚCIŁADOWANYCHZASOBÓW
MOŻEWPŁYNĄĆPOZYTYWNIE
NA„TRUDNEELEMENTY”NASTRONIE,
KTÓRYCH„NIEDASIĘ”ZOPTYMALIZOWAĆ.

BACKGROUND:3RDPARTIES
✓ Skrypty trackujące (np. Google Analytics)
✓ Obciążenie głównego wątku
(3rd parties + cała reszta strony —> wysokie TTI + TBT )
✓ Czat
✓ Reklamy (np. Google Adsense)
✓ Tag Managery

https://github.com/BuilderIO/partytown

https://github.com/biggerpicturestudio/delaying-3rd-parties

https://www.instawierszyki.pl/

BELOWTHEFOLD
✓ Lazy loading obrazków, iframe’ów…
✓ Lazy rendering

BELOWTHEFOLD:LAZYRENDERING

✓ Pobieramy mniej HTML
✓ 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
✓ Mniej pominiętych klatek w procesie renderowania (dropped frames)

ZRÓBTOSAM!

FETCH+JSEXECUTION

DEMO

PRZED
PO

KROKDALEJ…
✓ Network Information API

KROKDALEJ…

CONNECTION-AWARE
✓ 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

BACKEND

✓ Przykład zastosowania: sekcje below the fold
(uwaga na nagłówki i Accessibility!); footer

PREFETCHONHOVER
✓ Szybsza nawigacja między podstronami
✓ Turbolinks, Barba.js

PODSUMOWANIE
✓ Pomóż przeglądarce
✓ 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.

WEBDEVINSIDER.PL/4DEVELOPERS-2022
LIVE: Optymalizacja frontendu

Optymalizacja frontendu w 2022

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

Similaire à Optymalizacja frontendu w 2022

Similaire à Optymalizacja frontendu w 2022 (20)

Optymalizacja frontendu w 2022