Optymalizacja wydajności witryny i krytyczna ścieżka renderowania

Czy wydajność renderowania Twojej strony internetowej spełnia dzisiejsze standardy? Renderowanie to proces tłumaczenia odpowiedzi serwera na obraz, który „maluje” przeglądarka, gdy użytkownik odwiedza witrynę. Zła wydajność renderowania może przełożyć się na stosunkowo wysoki współczynnik odrzuceń.

Istnieją różne odpowiedzi serwera, które określają, czy strona jest renderowana. W tym artykule skupimy się na początkowym renderowaniu strony internetowej, które rozpoczyna się od parsowania HTML (pod warunkiem, że przeglądarka pomyślnie odebrała HTML jako odpowiedź serwera). Zbadamy rzeczy, które mogą prowadzić do długich czasów renderowania i jak je naprawić.

Krytyczna ścieżka renderowania

Krytyczna ścieżka renderowania (CRP) to proces, przez który przechodzi przeglądarka, aby przekonwertować kod na piksele, które można wyświetlić na ekranie. Ma kilka etapów, z których niektóre mogą być wykonywane równolegle, aby zaoszczędzić czas, ale niektóre części muszą być wykonane w konsekwencji. Tutaj jest wizualizowany:

Po pierwsze, gdy przeglądarka otrzyma odpowiedź, zaczyna ją analizować. Gdy napotka zależność, próbuje ją pobrać.

Jeśli jest to plik arkusza stylów, przeglądarka będzie musiała go całkowicie przeanalizować przed wyrenderowaniem strony i dlatego mówi się, że CSS blokuje renderowanie .

Jeśli jest to skrypt, przeglądarka musi: zatrzymać parsowanie, pobrać skrypt i uruchomić go. Dopiero potem może kontynuować parsowanie, ponieważ programy JavaScript mogą zmieniać zawartość strony internetowej (w szczególności HTML). I dlatego JS nazywa się blokowaniem parsera .

Po zakończeniu parsowania przeglądarka ma zbudowany model obiektów dokumentu (DOM) i model obiektów kaskadowych arkuszy stylów (CSSOM). Połączenie ich razem daje drzewo renderowania. Niewyświetlane części strony nie trafiają do drzewa renderowania, ponieważ zawiera tylko dane niezbędne do narysowania strony.

Przedostatnim krokiem jest przetłumaczenie drzewa renderowania na układ. Ten etap jest również nazywany Reflow. W tym miejscu obliczana jest każda pozycja każdego węzła drzewa renderowania, a także jego rozmiar.

Ostatnim krokiem jest malowanie. Polega na dosłownym kolorowaniu pikseli zgodnie z danymi, które przeglądarka obliczyła na poprzednich etapach.

Wnioski dotyczące optymalizacji

Jak można się domyślić, proces optymalizacji wydajności serwisu polega na zmianach w serwisie, które ograniczają:

• Ilość danych do przesłania
• Liczba zasobów, które przeglądarka musi pobrać (zwłaszcza te blokujące)
• Długość CRP

Następnie zagłębimy się w szczegóły, jak to się robi, ale najpierw należy przestrzegać ważnej zasady.

Jak mierzyć wydajność

Ważna zasada optymalizacji to: Najpierw mierz, optymalizuj w razie potrzeby . Większość narzędzi programistycznych przeglądarek ma kartę o nazwie Wydajność , na której odbywają się pomiary. Podczas optymalizacji pod kątem najszybszego początkowego (pierwszego) renderowania, najważniejszą rzeczą, na którą należy zwrócić uwagę, jest czas następujących zdarzeń:

• Pierwsza farba
• Pierwsza pełna treści farba
• Pierwsza znacząca farba

Tutaj „Paint” oznacza pomyślne renderowanie strony, ostatni etap krytycznej ścieżki renderowania. Kilka renderów może wystąpić jeden po drugim, ponieważ przeglądarki próbują wyświetlić coś JAK NAJSZYBCIEJ i zaktualizować później.

Oprócz czasu renderowania należy wziąć pod uwagę inne rzeczy — najważniejsze, ile zasobów blokujących jest używanych i ile czasu zajmuje ich pobranie. Informacje te znajdują się w zakładce Wydajność po wykonaniu pomiarów.

Strategie optymalizacji wydajności

Biorąc pod uwagę to, czego nauczyliśmy się powyżej, istnieją trzy główne strategie optymalizacji wydajności witryny:

1. Minimalizacja ilości danych przesyłanych drogą kablową,
2. Zmniejszenie całkowitej liczby zasobów, które mają być przesyłane przez sieć, oraz
3. Skrócenie krytycznej ścieżki renderowania

1. Zminimalizuj ilość danych do przesłania

Przede wszystkim usuń wszystkie nieużywane części, takie jak niedostępne funkcje w JavaScript, style z selektorami, które nigdy nie pasują do żadnego elementu oraz tagi HTML, które są na zawsze ukryte za pomocą CSS. Po drugie usuń wszystkie duplikaty.

Następnie zalecam wprowadzenie automatycznego procesu minifikacji. Na przykład powinien usunąć wszystkie komentarze z tego, co obsługuje twój backend (ale nie z kodu źródłowego) i każdy znak, który nie zawiera dodatkowych informacji (takich jak znaki odstępu w JS).

Po wykonaniu tej czynności pozostaje nam tekst. Oznacza to, że możemy bezpiecznie zastosować algorytm kompresji, taki jak GZIP (który rozumie większość przeglądarek).

Wreszcie jest buforowanie. Nie pomoże to przy pierwszym wyrenderowaniu strony przez przeglądarkę, ale zaoszczędzi dużo przy kolejnych wizytach. Należy jednak pamiętać o dwóch rzeczach:

• Jeśli korzystasz z CDN, upewnij się, że buforowanie jest obsługiwane i odpowiednio tam ustawione.
• Zamiast czekać, aż nadejdzie data wygaśnięcia zasobów, możesz chcieć mieć możliwość wcześniejszej aktualizacji ze swojej strony. Osadź „odciski palców” plików w ich adresach URL, aby móc unieważnić lokalną pamięć podręczną.

Oczywiście zasady buforowania powinny być zdefiniowane dla zasobu. Niektóre mogą się zmieniać rzadko lub wcale. Inni zmieniają się szybciej. Niektóre zawierają poufne informacje, inne można uznać za publiczne. Użyj dyrektywy „private”, aby uniemożliwić CDN buforowanie prywatnych danych.

Można również zoptymalizować obrazy internetowe, chociaż żądania obrazów nie blokują ani analizowania, ani renderowania.

2. Zmniejsz całkowitą liczbę zasobów krytycznych

„Krytyczny” odnosi się tylko do zasobów potrzebnych do prawidłowego renderowania strony internetowej. Dlatego możemy pominąć wszystkie style, które nie są bezpośrednio zaangażowane w proces. I wszystkie skrypty też.

Arkusze stylów

Aby poinformować przeglądarkę, że określone pliki CSS nie są wymagane, powinniśmy ustawić atrybuty media dla wszystkich linków odwołujących się do arkuszy stylów. Dzięki takiemu podejściu przeglądarka będzie traktować tylko zasoby, które pasują do bieżącego media (typ urządzenia, rozmiar ekranu) w razie potrzeby, jednocześnie obniżając priorytet wszystkich innych arkuszy stylów (zostaną one i tak przetworzone, ale nie w ramach renderowania krytycznego ścieżka). Na przykład, jeśli dodasz atrybut media="print" do tagu style , który odwołuje się do stylów drukowania strony, style te nie będą kolidować z krytyczną ścieżką renderowania, gdy media nie są print (tj. podczas wyświetlania strony w przeglądarce).

Aby jeszcze bardziej usprawnić ten proces, możesz również dodać niektóre style do linii. Oszczędza nam to co najmniej jednej podróży w obie strony do serwera, która w innym przypadku byłaby wymagana do uzyskania arkusza stylów.

Skrypty

Jak wspomniano powyżej, skrypty blokują parser, ponieważ mogą zmieniać DOM i CSSOM. Dlatego skrypty, które ich nie zmieniają, nie powinny blokować parsowania, oszczędzając w ten sposób czas.

Aby to zaimplementować, wszystkie tagi skryptu muszą być oznaczone atrybutami — albo async , albo defer .

Skrypty oznaczone jako async nie blokują konstrukcji DOM ani CSSOM, ponieważ mogą zostać wykonane przed zbudowaniem CSSOM. Pamiętaj jednak, że skrypty wbudowane i tak zablokują CSSOM, chyba że umieścisz je nad CSS.

Natomiast skrypty oznaczone jako defer będą oceniane pod koniec ładowania strony. Dlatego nie powinny wpływać na dokument (w przeciwnym razie wywołają ponowne renderowanie).

Innymi słowy, w przypadku defer skrypt nie jest wykonywany, dopóki nie zostanie wyzwolone zdarzenie ładowania strony, podczas gdy async umożliwia działanie skryptu w tle podczas analizowania dokumentu.

3. Skróć długość krytycznej ścieżki renderowania

Wreszcie długość CRP powinna zostać skrócona do możliwego minimum. Po części opisane powyżej podejścia to zrobią.

Zapytania o media jako atrybuty tagów stylu zmniejszą łączną liczbę zasobów, które trzeba pobrać. Atrybuty tagu skryptu defer i async zapobiegną blokowaniu analizowania przez odpowiednie skrypty.

Minimalizacja, kompresja i archiwizacja zasobów za pomocą GZIP zmniejszy rozmiar przesyłanych danych (tym samym skróci czas przesyłania danych).

Wstawianie niektórych stylów i skryptów może zmniejszyć liczbę połączeń między przeglądarką a serwerem.

To, czego jeszcze nie omawialiśmy, to możliwość zmiany kolejności kodu między plikami. Zgodnie z najnowszym pomysłem na najlepszą wydajność, pierwszą rzeczą, którą strona internetowa powinna robić najszybciej, jest wyświetlanie treści ATF. ATF oznacza nad fałdą. Jest to obszar widoczny od razu, bez przewijania. Dlatego najlepiej jest zmienić kolejność wszystkiego związanego z renderowaniem w taki sposób, aby wymagane style i skrypty były ładowane jako pierwsze, a wszystko inne zatrzymało się - ani parsowanie, ani renderowanie. I zawsze pamiętaj o mierzeniu przed i po dokonaniu zmiany.

Wniosek: optymalizacja obejmuje cały Twój stos

Podsumowując, optymalizacja wydajności witryny obejmuje wszystkie aspekty odpowiedzi witryny, takie jak buforowanie, konfiguracja CDN, refaktoryzacja, optymalizacja zasobów i inne, jednak wszystko to można zrobić stopniowo. Jako programista internetowy powinieneś używać tego artykułu jako odniesienia i zawsze pamiętaj, aby mierzyć wydajność przed eksperymentami i po nich.

Twórcy przeglądarek dokładają wszelkich starań, aby zoptymalizować wydajność witryny dla każdej odwiedzanej strony, dlatego przeglądarki zwykle implementują tak zwany „pre-loader”. Ta część programów skanuje przed zasobem, którego zażądałeś w HTML, aby jednocześnie wykonać wiele żądań i uruchomić je równolegle. Dlatego lepiej jest trzymać tagi stylów blisko siebie w HTML (line-wise), a także tagi skryptów.

Co więcej, spróbuj zbiorczo zaktualizować HTML, aby uniknąć wielu zdarzeń układu, które są wyzwalane nie tylko przez zmianę DOM lub CSSOM, ale także przez zmianę orientacji urządzenia i zmianę rozmiaru okna.

Przydatne zasoby i dalsza lektura:

• Statystyki PageSpeed
• Lista kontrolna buforowania
• Sposób na sprawdzenie, czy GZIP jest włączony w Twojej witrynie
• Wydajna sieć przeglądarek: książka Ilyi Grigorik