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ć 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. Pobieranie niektórych zasobów może rozpocząć się dopiero po przetworzeniu poprzedniego zasobu, a im większy zasób, tym większa liczba cykli wymiany danych, aby go pobrać.
Wreszcie im mniej bajtów krytycznych musi pobrać przeglądarka, tym szybciej będzie przetwarzać treść i renderować ją 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.
Ogólna kolejność czynności potrzebnych do optymalizacji krytycznej ścieżki renderowania to:
- Analiza i charakterystyka ścieżki krytycznej: liczby zasobów, rozmiaru w bajtach, długości ścieżki.
- Minimalizuj liczbę zasobów krytycznych: eliminuj je, opóźniaj pobieranie, oznacz je 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: pobierz wszystkie zasoby krytyczne jak najszybciej, aby skrócić ścieżkę krytyczną.