Krytyczna ścieżka renderowania: co to jest i jak ją zoptymalizować

Kiedy mówimy o zapewnieniu użytkownikom ultraszybkiego korzystania z Internetu, często skupiamy się wyłącznie na tym, co jako właściciele witryn i twórcy stron internetowych powinniśmy zrobić.

Ale prawda jest taka:

Zapewnienie szybkiego korzystania z sieci wymaga również dużo pracy ze strony przeglądarki.

Otrzymuje nasze pliki HTML, CSS i JavaScript i podejmuje określone kroki, aby przekonwertować je na piksele na ekranie.

Sekret przyspieszenia wydajności polega na zrozumieniu, co dzieje się między otrzymaniem zasobów a ich przetwarzaniem w celu przekształcenia ich w wyrenderowane piksele.

Ten proces jest również znany jako krytyczna ścieżka renderowania (CRP) .

W tym artykule dowiesz się wszystkiego, co musisz wiedzieć o CRP oraz o tym, jak go zoptymalizować w celu szybszego renderowania.

• Co to jest krytyczna ścieżka renderowania?
• Wyjaśnienie sekwencji krytycznej ścieżki renderowania
• Jak zoptymalizować krytyczną ścieżkę renderowania witryny
• 3 wtyczki WordPress do optymalizacji CRP
• Lista kontrolna optymalizacji CRP

Zaczynajmy!

Co to jest krytyczna ścieżka renderowania?

Krytyczna ścieżka renderowania odnosi się do sekwencji kroków, które wykonuje przeglądarka internetowa, aby przekonwertować kod HTML, CSS i JavaScript na wizualną reprezentację na ekranie użytkownika.

Obejmuje szereg procesów, takich jak konstruowanie obiektowego modelu dokumentu (DOM), generowanie modelu obiektowego CSS (CSSOM) i łączenie obu w celu utworzenia drzewa renderowania. Drzewo renderowania jest następnie używane do obliczania układu i malowania pikseli na ekranie użytkownika.

Z drugiej strony optymalizacja Critical Rendering Path odnosi się do skrócenia czasu spędzanego przez przeglądarkę internetową na wykonaniu każdego kroku sekwencji przy jednoczesnym nadaniu priorytetu treści istotnej dla bieżącego działania użytkownika.

Aby mieć pewność, że optymalizacja trafi w sedno, musisz dogłębnie zrozumieć każdy krok sekwencji. Dlatego kilka następnych akapitów jest niezbędnych i zdecydowanie zalecamy ich przeczytanie przed podjęciem działań.

Wyjaśnienie krytycznej sekwencji ścieżki renderowania

Oto krótki przegląd czynności wykonywanych przez przeglądarkę podczas renderowania strony:

1. Przeglądarka pobiera i analizuje znaczniki HTML oraz tworzy model DOM.
2. Następnie pobiera i przetwarza znaczniki CSS oraz konstruuje obiektowy model CSS (CSSOM).
3. Następnie łączy niezbędne węzły z DOM i CSSOM, aby utworzyć Render Tree, strukturę drzewiastą wszystkich widocznych węzłów wymaganych do renderowania strony.
4. Oblicza wymiary i położenie każdego elementu na stronie poprzez proces układu.
5. Na koniec przeglądarka maluje piksele na ekranie.

Teraz skupmy się na każdym kroku.

DOM

Document Object Model (DOM) to wewnętrzna reprezentacja dokumentu HTML w przeglądarce.

Po załadowaniu strony internetowej przeglądarka analizuje kod HTML i tworzy drzewiastą strukturę węzłów reprezentujących elementy dokumentu. Każdy węzeł odpowiada elementowi HTML i ma właściwości opisujące jego atrybuty, zawartość i pozycję w drzewie.

Ważne: Przeglądarka buduje DOM stopniowo, co pozwala nam optymalizować renderowanie strony poprzez konstruowanie wydajnej struktury i unikanie nadmiernych rozmiarów DOM.

CSSOM

Podczas gdy DOM zawiera całą zawartość strony, CSSOM zawiera wszystkie informacje dotyczące stylu DOM.

Kolejną różnicą między DOM a CSSOM jest to, że:

Konstrukcja DOM jest stopniowa, podczas gdy CSSOM nie.

Po załadowaniu strony internetowej przeglądarka musi przetworzyć kod CSS, aby zastosować style. W przeciwieństwie do HTML, który można przetwarzać bit po bicie, CSS musi być przetwarzany od razu. Wynika to z faktu, że niektóre style mogą zostać później nadpisane przez inne w pliku CSS, więc przeglądarka musi poczekać, aż odczyta cały plik CSS, zanim zdecyduje, które style zastosować.

Ma to na celu uniknięcie wyświetlania stylów, które zostaną później nadpisane i marnowania zasobów.

Po prostu:

Przeglądarka blokuje proces renderowania, dopóki nie otrzyma i nie przeanalizuje całego CSS.

Dlatego CSS jest uważany za zasób blokujący renderowanie.

Drzewo renderowania

Render Tree to połączenie DOM i CSSOM, którego przeglądarka używa do tworzenia wizualnej reprezentacji strony internetowej.

Przeglądarka używa drzewa renderowania do obliczania wymiarów i położenia węzłów jako danych wejściowych dla procesu malowania.

Ważne: w drzewie renderowania przechwytywana jest tylko widoczna zawartość. Zazwyczaj sekcja nagłówka nie zawiera żadnych widocznych informacji i dlatego jest wykluczona. Ponadto, jeśli element ma właściwość display: none , ani element, ani jego elementy podrzędne nie są uwzględniane w drzewie renderowania.

Układ

Po zbudowaniu drzewa renderowania następnym krokiem jest układ. Układ określa położenie i orientację każdego elementu na stronie poprzez zdefiniowanie jego wymiarów, pozycji i wzajemnych relacji.

Ale o to chodzi:

Na wydajność układu ma wpływ model DOM.

Innymi słowy:

Im większa liczba węzłów DOM, tym dłuższy jest proces tworzenia układu.

Farba

Ostatnim etapem jest malowanie pikseli na ekranie, po którym następuje utworzenie drzewa renderowania i układu.

Początkowo cały ekran jest malowany podczas procesu ładowania. Następnie odmalowywane są tylko dotknięte nimi części ekranu, ponieważ przeglądarki są zaprojektowane tak, aby odmalowywać tylko niezbędny obszar.

Należy pamiętać, że czas trwania etapu malowania zależy od charakteru aktualizacji wdrażanych w drzewie renderowania.

Zobaczmy teraz, jakie optymalizacje możesz zastosować, aby pomóc przeglądarce i przyspieszyć niektóre procesy.

Jak zoptymalizować krytyczną ścieżkę renderowania witryny

Czas wymagany do przeprowadzenia przez przeglądarkę całego procesu może być różny. Istnieje wiele ruchomych części, które mają wpływ na długość ścieżki krytycznej:

• Rozmiar dokumentu
• Liczba żądań
• Urządzenie użytkownika
• Zastosowane style

Niemniej jednak istnieją trzy techniki, które są uważane za podstawowe opcje, jeśli chodzi o optymalizację CRP:

1. Zminimalizuj liczbę zasobów krytycznych, odkładając zasoby niekrytyczne lub całkowicie je eliminując
2. Zoptymalizuj liczbę wymaganych żądań wraz z rozmiarem pliku każdego żądania
3. Nadaj priorytet pobieraniu krytycznych zasobów, skracając w ten sposób długość ścieżki krytycznej

Przyjrzyjmy się bliżej, jak wdrożyć każdą z zalecanych strategii optymalizacji:

Zoptymalizuj zasoby CSS i JS blokujące renderowanie

Wiesz już, że gdy przeglądarka natrafi na blokujące renderowanie zasoby CSS i JS, musi je pobrać, przeanalizować i wykonać, zanim zrobi cokolwiek innego, w tym renderowanie.

Jeśli chodzi o optymalizację CSS, możesz zastosować następujące techniki:

• Krytyczny CSS. Identyfikuje minimalny zestaw reguł CSS potrzebnych do renderowania widocznej części strony internetowej i dostarcza je do przeglądarki jako wbudowany CSS zamiast ładowania pełnego arkusza stylów. Wczytując tylko niezbędny kod CSS dla zawartości strony widocznej na ekranie, przeglądarka może szybciej renderować stronę i poprawić wygodę użytkownika . Dzieje się tak, ponieważ przeglądarka nie musi czekać na załadowanie całego arkusza stylów przed wyrenderowaniem strony.
  
• Połącz pliki CSS. Konkatenacja CSS to proces łączenia wielu plików CSS w jeden plik. Ta technika poprawia wydajność, zmniejszając liczbę żądań HTTP wymaganych do załadowania strony internetowej , ponieważ przeglądarka musi pobrać i przeanalizować tylko jeden plik CSS zamiast wielu.

Jeśli chodzi o pliki JavaScript, oto co możesz zrobić:

• Opóźnij ładowanie JS. Odrocz ładowanie JS to technika, która przyspieszy Twoją witrynę, opóźniając ładowanie plików JavaScript do momentu załadowania i przeanalizowania dokumentu HTML . Możesz użyć atrybutu odroczenia w tagu skryptu , który odwołuje się do pliku JS. Należy zauważyć, że atrybutu defer należy używać tylko w przypadku plików JS, które nie muszą być uruchamiane natychmiast po załadowaniu (np. pliki używane tylko na określonych stronach), ponieważ kolejność wykonywania może być nieprzewidywalna, jeśli wiele odroczonych skryptów są używane.
  
• Załaduj JS asynchronicznie. Niektóre pliki JS mogą wymagać użycia atrybutu async, który umożliwia ładowanie i wykonywanie pliku asynchronicznie z parsowaniem dokumentu HTML.

Istnieje kilka optymalizacji, które można zastosować zarówno do CSS, jak i JavaScript:

• Minifikacja. Minifikacja polega na usuwaniu z plików CSS i JavaScript zbędnych znaków, takich jak odstępy, komentarze i podziały wierszy. Ten proces może znacznie zmniejszyć rozmiar plików bez wpływu na ich funkcjonalność lub wygląd .
  
• Usuń nieużywane CSS i JS. Nieużywane CSS i JS odnoszą się do określonych reguł, które nie są używane na określonej stronie, ale są nadal ładowane. Usunięcie tych części plików wpłynie bezpośrednio na to, jak szybko przeglądarka zbuduje drzewo renderowania .

Zoptymalizuj zasoby blokujące renderowanie na autopilocie. Zainstaluj NitroPack →

Zmniejsz rozmiar swoich plików

Aby zmniejszyć ilość danych, które przeglądarka musi pobrać, możemy zastosować takie techniki, jak minifikacja, kompresja i buforowanie zasobów HTML, CSS i JavaScript.

Wiesz już, co oznacza minifikacja, więc skupmy się na dwóch pozostałych:

• Kompresja. Kompresja to technika polegająca na zastosowaniu algorytmów do przepisania kodu binarnego plików przy użyciu mniejszej liczby bitów niż w oryginale. W rezultacie Twoje pliki mają znacznie mniejszy rozmiar, co skraca czas ładowania strony i zmniejsza wykorzystanie przepustowości.
  
• Buforowanie. Buforowanie wykorzystuje pamięć podręczną HTTP zaimplementowaną w każdej przeglądarce. Aby zapewnić skuteczne buforowanie, musimy upewnić się, że każda odpowiedź serwera zawiera prawidłowe nagłówki HTTP, instruujące przeglądarkę, kiedy i jak długo ma buforować żądane zasoby.

Polegaj na najbardziej zaawansowanym mechanizmie buforowania. Pobierz NitroPack już dziś →

Nadaj priorytet pobieraniu krytycznych zasobów

Ogólnie rzecz biorąc, przeglądarki są całkiem dobre w ustalaniu priorytetów najważniejszych zasobów i pobieraniu ich w pierwszej kolejności. Jednak w niektórych przypadkach możesz pomóc im jeszcze szybciej załadować Twoją witrynę, ręcznie ustalając priorytety dla najważniejszych zasobów.

Możesz użyć wskazówek dotyczących zasobów , aby powiedzieć przeglądarce, jak ma postępować z określonymi zasobami lub stronami internetowymi.

Oto trzy główne:

• Link rel=prefetch. Pobieranie z wyprzedzeniem to wskazówka dotycząca zasobów o niskim priorytecie, która umożliwia przeglądarce pobieranie zasobów, które mogą być potrzebne później, i przechowywanie ich w pamięci podręcznej przeglądarki.

• Link rel=preconnect. Dyrektywa preconnect pomaga przeglądarce nawiązać wczesne połączenie przed wysłaniem wstępnego żądania do serwera.

• Link rel=wstępne ładowanie. Wstępne ładowanie służy do zmuszenia przeglądarki do pobrania zasobu wcześniej, niż przeglądarka go wykryje, ponieważ jest to kluczowe dla strony.

Ważne: Pobieranie z wyprzedzeniem i wstępne łączenie to wskazówki dotyczące zasobów, które są wykonywane zgodnie z potrzebami przeglądarki. Dyrektywa wstępnego ładowania to polecenie, które jest obowiązkowe dla przeglądarek. Dowiedz się więcej o wdrażaniu wskazówek dotyczących zasobów.

Teraz, gdy wiesz, jak poradzić sobie z optymalizacją Critical Rendering Path, spójrzmy na niektóre wtyczki WordPress, które mogą zautomatyzować ten proces.

3 wtyczki WordPress do optymalizacji krytycznej ścieżki renderowania

Wszystkie wyżej wymienione optymalizacje można wykonać ręcznie. Jednak niektóre z nich wymagają wiedzy technicznej, aby upewnić się, że nie uszkodzisz witryny podczas tego procesu.

Na szczęście dla wszystkich użytkowników WordPress istnieją wtyczki, które mogą pomóc w optymalizacji CRP. Sprawdźmy 3 najlepszych naszym zdaniem kandydatów:

NitroPack — kompleksowe rozwiązanie

NitroPack to wiodące, kompleksowe rozwiązanie do optymalizacji szybkości witryny, które łączy w sobie ponad 35 funkcji zwiększających wydajność sieci. Jeśli chodzi o optymalizację krytycznej ścieżki renderowania, NitroPack automatycznie obsłuży optymalizacje, takie jak:

• Krytyczny CSS
• Minifikacja CSS i JS
• CSS i kompresja JS
• Buforowanie
• Opóźnij ładowanie JS
• Usuń nieużywane CSS i JS

Ale funkcje optymalizacji nie kończą się tutaj. Otrzymasz również kompletny zestaw narzędzi do zwiększania wydajności:

• Wbudowany CDN
• Kompletny stos optymalizacji obrazu
• Optymalizacja czcionek
• Buforowanie koszyka e-commerce
• Wsparcie 24/7

Przyspiesz swoją witrynę automatycznie. Pobierz NitroPack już dziś →

WP Super Cache — wtyczka tylko do buforowania

WP Super Cache to wtyczka do buforowania, która przede wszystkim oferuje funkcje buforowania i kompresję HTTP, ale nie pozwala na minimalizację zasobów i optymalizację JavaScript za pomocą atrybutów async i defer.

Najbardziej godne uwagi funkcje obejmują:

• Włącz buforowanie dla wszystkich odwiedzających
• Wyłącz buforowanie dla zalogowanych gości
• Kompresuj strony, aby szybciej wyświetlać je odwiedzającym
• Odbudowa pamięci podręcznej

Szybka wydajność

Swift Performance to kolejna wtyczka, która może okazać się przydatna w dążeniu do zoptymalizowania CRP. Niektóre z jego funkcji obejmują:

• Minifikacja plików CSS i JavaScript
• Krytyczny CSS
• Buforowanie
• Optymalizacja obrazu

Optymalizacja krytycznej ścieżki renderowania [lista kontrolna]

W tym artykule omówiliśmy wiele kwestii, więc oto przydatna lista kontrolna wszystkich wspomnianych optymalizacji:

• Generuj krytyczny CSS
• Połącz pliki CSS
• Opóźnij ładowanie JavaScript
• Załaduj JavaScript asynchronicznie
• Zminimalizuj CSS i JavaScript
• Kompresuj CSS i JavaScript
• Usuń nieużywane CSS i JavaScript
• Zastosuj minifikację
• Zastosuj kompresję
• Użyj buforowania
• Link do implementacji rel=preload
• Zaimplementuj łącze rel=prefetch
• Zaimplementuj łącze rel=preconnect

Pobierz checklistę optymalizacji CRP →

I na koniec - nie zapomnij przetestować przed i po każdej optymalizacji!