Aby przyspieszyć pierwsze renderowanie, musimy zminimalizować 3 zmienne:
- Liczba zasobów krytycznych.
- Długość ścieżki krytycznej.
- Liczba bajtów krytycznych.
Zasób krytyczny to taki, który może zablokować pierwsze renderowanie strony. Im mniej jest tych zasobów, tym mniej pracy dla przeglądarki, procesora i innych zasobów.
Analogicznie długość ścieżki krytycznej jest funkcją wykresu zależności między zasobami krytycznymi a ich bajtami: pobieranie niektórych zasobów może być inicjowane dopiero po przetworzeniu poprzedniego, a im większy zasób, tym więcej cykli wymiany danych należy pobrać.
Wreszcie im mniej bajtów krytycznych musi pobrać przeglądarka, tym szybciej będzie przetwarzać zawartość i wyświetlać ją na ekranie. Aby zmniejszyć liczbę bajtów, możesz zmniejszyć liczbę zasobów (wyeliminować je lub oznaczyć je jako niekrytyczne) i zminimalizować rozmiar transferu przez skompresowanie i zoptymalizowanie każdego zasobu.
Ogólna kolejność czynności umożliwiających optymalizację krytycznej ścieżki renderowania to:
- Przeanalizuj i scharakteryzuj ścieżkę krytyczną: liczbę zasobów, liczbę bajtów i długość.
- Minimalizacja liczby zasobów krytycznych – ich eliminacja, odłożenie pobierania, oznaczenie jako asynchroniczne itp.
- Zoptymalizuj liczbę bajtów krytycznych, aby skrócić czas pobierania (liczbę cykli wymiany danych).
- Zoptymalizuj kolejność wczytywania pozostałych zasobów krytycznych: aby skrócić ścieżkę krytyczną, pobieraj wszystkie zasoby krytyczne jak najwcześniej.