Data publikacji: 31 marca 2014 r.
Aby skrócić czas pierwszego renderowania, musimy zminimalizować 3 zmienną:
- Liczba zasobów krytycznych.
- Długość ścieżki krytycznej.
- Liczba krytycznych bajtów.
Zasób krytyczny to taki, który może zablokować początkowe renderowanie strony. Im mniej jest tych zasobów, tym mniej pracy dla przeglądarki, procesora i innych zasobów.
Podobnie długość ścieżki krytycznej jest funkcją grafu zależności między zasobami krytycznymi a ich rozmiarem w bajtach: niektóre pobierania zasobów mogą być inicjowane dopiero po przetworzeniu poprzedniego zasobu, a im większy jest zasób, tym więcej razy trzeba je pobrać.
Im mniej ważnych bajtów musi pobrać przeglądarka, tym szybciej może przetworzyć treści i wyświetlić je na ekranie. Aby zmniejszyć liczbę bajtów, możemy zmniejszyć liczbę zasobów (wyeliminować je lub oznaczyć je jako niekrytyczne) i zminimalizować rozmiar transferu przez skompresowanie i optymalizację każdego zasobu.
Oto ogólna kolejność kroków optymalizacji ścieżki renderowania:
- Analiza i charakterystyka ścieżki krytycznej: liczby zasobów, rozmiaru w bajtach, długości ścieżki.
- Zmniejsz liczbę krytycznych zasobów: wyeliminuj je, opóźnij ich pobieranie, oznacz je jako asynchroniczne i zastanów się nad innymi ważnymi kwestiami.
- Zoptymalizuj liczbę bajtów krytycznych, aby skrócić czas pobierania (liczbę cykli wymiany danych).
- Zoptymalizuj kolejność wczytywania pozostałych zasobów krytycznych: pobierz wszystkie zasoby kluczowe jak najwcześniej, aby skrócić długość ścieżki krytycznej.