Data publikacji: 31 marca 2014 r.
Aby przyspieszyć pierwsze renderowanie, musimy zminimalizować 3 zmienne:
- Liczba krytycznych zasobów.
- 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 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.
Ogólna kolejność czynności potrzebnych do optymalizacji krytycznej ścieżki renderowania to:
- 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 kluczowe jak najwcześniej, aby skrócić długość ścieżki krytycznej.