Data publikacji: 31 marca 2014 r.
Optymalizacja ścieżki renderowania krytycznego polega na nadawaniu priorytetów wyświetlaniu treści powiązanych z obecnym działaniem użytkownika.
Zapewnianie szybkiego przeglądania wymaga od przeglądarki dużego nakładu pracy. Większość ale przed nami, jako programista stron internetowych, ta praca jest dla nas ukryta: piszemy znaczniki na ekranie zostaje wyświetlona odpowiednia strona. Jak dokładnie przeglądarka przechodzi od przetwarzania kodu HTML, CSS i JavaScriptu do wyrenderowania pikseli na ekranie?
Optymalizacja pod kątem wydajności polega na zrozumieniu tego, co dzieje się na pośrednich etapach między otrzymaniem bajtów HTML, CSS i JavaScriptu a wymaganym przetworzeniem ich na renderowane piksele. Jest to krytyczna ścieżka renderowania.
Dzięki optymalizacji ścieżki krytycznej możemy znacznie skrócić czas pierwszego renderowania stron. Poznanie kluczowej ścieżki renderowania stanowi też podstawę do tworzenia wydajnych aplikacji interaktywnych. Proces interaktywnej aktualizacji wygląda tak samo, tylko w ciągłej pętli, najlepiej z szybkością 60 klatek na sekundę. Najpierw jednak omówimy, jak przeglądarka wyświetla prostą stronę.
Dodatkowe materiały
- Tworzenie modelu obiektu
- Konstruowanie drzewa renderowania, układ i malowanie
- CSS blokujący renderowanie
- Dodawanie interakcji za pomocą kodu JavaScript
- Mierzenie ścieżki krytycznej renderowania
- Analiza wydajności ścieżki renderowania
- Optymalizacja krytycznej ścieżki renderowania
- Reguły i zalecenia PageSpeed