Informacje o problemach z wydajnością renderowania znajdziesz na karcie Renderowanie, która zawiera opcje związane z wydajnością.
Wyróżnij ponownie wymalowane obszary z migoczącymi farbami
Gdy ta opcja jest włączona, przy każdym ponownym malowaniu Chrome miga na zielono.
Aby wyświetlić obszary, które są ponownie malowane:
- Otwórz kartę Renderowanie w tej prezentacji i zaznacz Paint miga.
- Zwróć uwagę na podświetlenie na zielono.
Jeśli na innej stronie widzisz miganie całego ekranu na zielono lub obszary ekranu, które nie powinny być pomalowane, rozważ dokładniejsze zbadanie sprawy.
Podświetlanie regionów przesunięcia układu
Przesunięcia układu powodują nieoczekiwane ponowne renderowanie i mogą być nie tylko uciążliwe, ale i szkodliwe.
Aby wyświetlić lokalizację i czas zmiany układu na stronie:
Otwórz kartę Renderowanie i sprawdź Regiony przesunięcia układu.
Odśwież stronę. Obszary przesunięcia układu są krótko wyróżnione na fioletowo.
Wyświetlanie warstw i płytek z obwódkami
Użyj opcji Obramowanie warstw, aby wyświetlić nakładkę z obramowaniem warstw i kafelkami u góry strony.
Aby włączyć obramowania warstw:
- Otwórz kartę Rendering (Renderowanie) i zaznacz Layer Borders (Obramowanie warstwy).
- Zauważ, że obramowania warstw są pomarańczowe i oliwkowe, a kafelki – cyjanowe.
Wyjaśnienie oznaczenia kolorami znajdziesz w komentarzach na stronie debug_colors.cc.
Wyświetlanie liczby klatek na sekundę w czasie rzeczywistym za pomocą statystyk renderowania klatek
Statystyki renderowania klatek to nakładka widoczna w prawym górnym rogu widocznego obszaru.
Aby otworzyć Statystyki renderowania klatek:
- Otwórz kartę Renderowanie i zaznacz pole wyboru Statystyki renderowania klatek.
- Obserwuj statystyki w prawym górnym rogu strony.
Nakładka Statystyki renderowania klatek zawiera:
- Szacunkowa liczba klatek na sekundę w czasie działania strony.
- Oś czasu jako wykres z 3 typami klatek:
- Zarenderowane klatki (niebieskie linie)
- Częściowo wyświetlane klatki (żółte linie)
- Pominięte klatki (czerwone linie).
- Stan rastrowania GPU: włączony lub wyłączony. Więcej informacji znajdziesz w artykule Jak uzyskać rasteryzację GPU.
- Wykorzystanie pamięci GPU: liczba wykorzystanych i maksymalnych MB pamięci.
Rozwiązywanie problemów z wydajnością przewijania
Zapoznaj się z sekcją Problemy z wydajnością przewijania, aby wykrywać elementy strony z detektorami zdarzeń powiązanymi z przewijaniem, które mogą negatywnie wpływać na wydajność strony.
Aby wyświetlić elementy, które mogą stanowić problem:
- Otwórz kartę Renderowanie i sprawdź Problemy z wydajnością przewijania.
- Zwróć uwagę na podświetlone potencjalnie problematyczne elementy.
Wyświetl podstawowe wskaźniki internetowe
Wskaźniki internetowe to inicjatywa Google zapewniająca ujednolicone wskazówki dotyczące sygnałów związanych z jakością, które są niezbędne do zapewnienia doskonałych wrażeń użytkownika w internecie.
Podstawowe wskaźniki internetowe to podzbiór wskaźników internetowych, które mają zastosowanie do wszystkich stron internetowych. Każdy z podstawowych wskaźników internetowych reprezentuje osobny aspekt wrażeń użytkownika, można go zmierzyć w terenie i odzwierciedlić rzeczywiste wrażenia związane z kluczowym wynikiem skupienia się na użytkowniku. Podstawowe wskaźniki internetowe to:
- Największe wyrenderowanie treści (LCP): mierzy wydajność wczytywania. Aby zapewnić użytkownikom wygodę, LCP powinno się pojawić w ciągu 2,5 sekundy od wczytania strony.
- Interakcja z następnym wyrenderowaniem (INP): mierzy interaktywność. Aby zapewnić użytkownikom dobre wrażenia, strony powinny mieć INP 200 milisekund lub mniej.
- Skumulowane przesunięcie układu (CLS): mierzy stabilność wizualna. Aby zapewnić użytkownikom odpowiedni komfort, strony powinny mieć wskaźnik CLS 0,1 lub mniejszy.
Aby wyświetlić wartości podstawowych wskaźników internetowych, skorzystaj z rozszerzenia Web Vitals do Chrome.