Bardzo prostą metodą na istotne polepszenie ładowania strony jest preloadowanie i pushowanie danych w trakcie jej pobierania. Celowo wymieniam preload i push osobno, gdyż często uznawane, za tożsame, a jednak są między nimi różnice.
HTTP/2 Push przede wszystkim możesz wysłać jeszcze przed „nadaniem” response do przeglądarki, użytkownik otrzyma je więc bardzo szybko, zanim jeszcze dotrze do niego dokument HTML ze stroną. To różnica względem HTML Preload, który jest przesyłany wraz z Response, a więc w praktyce nieco później.
Tu poznasz szczegóły jak wysłać:
Co w praktyce daje preloadowanie/pushowanie danych?
Dostarczenie danych poprzez push spowoduje, że przeglądarka będzie miała do nich dostęp dużo szybciej. W ten sposób:
- ograniczasz zjawisko render-blocking w niektórych JavaScript jak i CSS
- minimalizujesz łańcuch krytycznych zapytań
- przyspieszasz First Paint
Czy powinieneś więc pushować wszystkie zasoby dostępne na stronie?
Nie.
Ogranicz się do arkuszy z krytycznym CSS, obrazów pojawiających się above-the-fold i przede wszystkim fontów (pamiętaj o użyciu font-display: swap). Pozostałe zasoby ładuj tradycyjnymi metodami.
Inaczej możesz uzyskać efekt odwrotny od oczekiwanego.