Data publikacji: 31 marca 2014 r.
Aby skrócić czas pierwszego renderowania, musimy zminimalizować 3 zmienną:
- Liczba krytycznych zasobów.
- Długość ścieżki krytycznej.
- Liczba krytycznych bajtów.
Zasób krytyczny to zasób, który może blokować początkowe renderowanie strony. Im mniej takich 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 krytycznymi zasobami a ich rozmiarem w bajtach: niektóre pobierania zasobów mogą być inicjowane dopiero po przetworzeniu poprzedniego zasobu, a im większy jest rozmiar zasobu, tym więcej jest takich przejść.
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 (eliminując je lub czyniąc je nieistotnymi) i zadbać o to, aby zminimalizować rozmiar przesyłania, kompresując i optymalizując każdy zasób.
Oto ogólna kolejność kroków optymalizacji ścieżki renderowania:
- Przeanalizuj ścieżkę krytyczna i określ jej charakterystykę: liczbę zasobów, bajtów i długość.
- 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ę ważnych bajtów, aby skrócić czas pobierania (liczba przejazdów w obie strony).
- Zoptymalizuj kolejność wczytywania pozostałych zasobów krytycznych: pobierz wszystkie zasoby krytyczne jak najszybciej, aby skrócić długość ścieżki krytycznej.