Optymalizowanie krytycznej ścieżki renderowania dotyczy priorytetowego wyświetlania treści, które są związane z bieżącym działaniem użytkownika.
Zapewnienie szybkiej obsługi przeglądarki wymaga dużo pracy. Większość pracy programistów stron internetowych jest niewidoczna: piszemy znaczniki, a na ekranie pojawia się ładna strona. Ale jak przeglądarka przechodzi od przetwarzania kodów HTML, CSS i JavaScript w renderowane piksele na ekranie?
Optymalizacja wydajności wymaga zrozumienia, co dzieje się na tych etapach pośrednich między otrzymaniem bajtów HTML, CSS i JavaScript a przetwarzaniem, które zamienia je w wyrenderowane piksele – to właśnie jest krytyczna ścieżka renderowania.
Optymalizując krytyczną ścieżkę renderowania, możemy znacznie skrócić czas do pierwszego renderowania naszych stron. Co więcej, zrozumienie krytycznej ścieżki renderowania stanowi również podstawę tworzenia wydajnych aplikacji interaktywnych. Proces interaktywnej aktualizacji wygląda tak samo, zawsze odbywa się w pętli, najlepiej z prędkością 60 klatek na sekundę. Zacznijmy od omówienia sposobu wyświetlania prostej strony w przeglądarce.
Dodatkowe materiały
- Konstrukcja modelu obiektowego
- Konstrukcja, układ i malowanie drzewa renderowania
- CSS blokujące renderowanie
- Dodawanie elementów interaktywnych w języku JavaScript
- Pomiar krytycznej ścieżki renderowania
- Analizowanie wydajności krytycznej ścieżki renderowania
- Optymalizowanie krytycznej ścieżki renderowania
- Reguły i zalecenia PageSpeed