Core Web Vitals: Struktura DOM i aktywność głównego wątku

Narzędzie PSI podpowiada często o zminimalizowaniu aktywności głównego wątku:

Jednak mało kto podchodzi do tego zagadnienia, gdyż na pierwszy rzut oka może się to kojarzyć z programowaniem i zmianą silnika strony.

Główny wątek jest odpowiedzialny za każdy z etapów renderowania strony, takie jak analiza HTML, budowa drzewa DOM, CSSOM, wykonanie JS itd.

PageSpeed Insight pomaga i pokazuje konkretny czas potrzebny na wykonywanie każdego z etapów:

Dzięki temu możesz już na tym etapie analizy skupić się na wybranych jej częściach.

• Script Evaluation
  Powinieneś sprawdzić, czy jakieś skrypty nie trwają zbyt długo — zwłaszcza te zewnętrzne. Jeśli tak, zredukuj je lub zminimalizuj koszty ich wykonania np. poprzez zastosowanie ładowania asynchronicznego.
• Style & Layout
  Tutaj zdecydowanie w grę wchodzi minifikacja kodu i jego uproszczenie. Usunięcie zbyt wielu zagłębień w strukturze HTML, które znacząco mogą opóźniać generowanie się drzewa renderowania. Warto też używać tzw. sources hints do priorytetyzowania zasobów, które mogą wymagać więcej czas na załadowanie się lub powinny być wykonane szybciej.
• Rendering
  Proces renderowania wymaga wykonania po sobie danych sekwencji. Wykorzystując np. Chrome DevTools, możesz w szybki sposób zdiagnozować, który moment renderowania może być tym wąskim gardłem. Wiele elementów HTML może być zarządzana przez skrypty JS, które zmieniają strukturę DOM i wydłużają proces renderowania.
• Parse HTML & CSS
  Punkt dotyczy zmian wymienionych już wcześniej, mianowicie priorytetyzacji krytycznych plików z CSS, minifikacji i zmniejszenia CSS, odłożenia niekrytycznego kodu na później.
• Script Parsing & Compilation
  Często na stronach internetowych zdecydowana większość kodu JS jest ładowana na początku w sekcji HEAD, pomimo iż większość tego kodu nie jest używana do wyrenderowania obszaru ATF. Warto zatem podzielić kod JS i na samej górze zostawić tylko ten krytyczny, który wymagany jest do obsługi elementów na starcie strony. Cała reszta kodu powinna być odroczona np. poprzez przeniesienie go na sam dół sekcji BODY. Podobnie w drugą stronę: jeżeli dany skrypt powinien być wykonany szybciej, możesz użyć atrybutu rel=”preload”, aby go wcześniej załadować.
  Gdy wykonasz test w narzędziu DevTools, w zakładce Performance możesz w prosty sposób zdiagnozować dla każdego z etapu, które zasoby powodują największą aktywność głównego wątku i skupić się tylko na nich.