Proces renderowania w przeglądarce zamienia Twój kod w stronę internetową, z której użytkownicy mogą wchodzić w interakcje. Domyślnie główny wątek procesu renderowania zwykle obsługuje większość kodu: analizuje kod HTML i tworzy DOM, analizuje kod CSS i stosuje określone style, a także analizuje, ocenia i wykonywał kod JavaScript.
Wątek główny również przetwarza zdarzenia użytkownika. Jeśli więc wątek główny jest zajęty czymś innym, Twoja strona internetowa może nie reagować na interakcje użytkowników, co negatywnie wpływa na jej wygodę.
Co się dzieje, gdy kontrola działania wątku głównego Lighthouse kończy się niepowodzeniem
Lighthouse oznacza strony, w których wątek główny jest zajęty dłużej niż 4 sekundy podczas wczytywania:
Aby ułatwić identyfikację źródeł obciążenia wątku głównego, narzędzie Lighthouse pokazuje czas spędzony przez procesor w czasie, gdy przeglądarka wczytuje Twoją stronę.
Jak zminimalizować pracę z wątkiem głównym
Sekcje poniżej są uporządkowane na podstawie kategorii raportowanych przez Lighthouse. W artykule Anatomia ramki znajdziesz informacje o tym, jak Chromium renderuje strony internetowe.
Z artykułu Mniej pracy z wątkami głównymi dowiesz się, jak używać Narzędzi deweloperskich w Chrome do sprawdzania, co dokładnie robi wątek główny podczas wczytywania strony.
Ocena skryptu
- Optymalizacja JavaScriptu innej firmy
- Wyłączanie modułów obsługi danych wejściowych
- Korzystanie z instancji internetowych
Styl i układ
- Zmniejsz zakres i złożoność obliczeń dotyczących stylu
- Unikaj dużych i złożonych układów oraz rzucania nieuzasadnionym układem treści
renderowanie,
- Zachowaj tylko właściwości kompozytora i zarządzaj liczbą warstw
- Uproszczenie złożoności malowania i zmniejszanie liczby malowanych obszarów