Aby wykryć problemy z wydajnością renderowania, zapoznaj się z informacjami o opcjach związanych z wydajnością na karcie Renderowanie.
Wyróżnianie obszarów, które zostały ponownie pomalowane, miganiem farby
Gdy ta opcja jest włączona, Chrome wyświetla na ekranie zielone światło, gdy następuje ponowne renderowanie.
Aby wyświetlić obszary, które są ponownie malowane:
- Otwórz kartę Renderowanie w tym demo i sprawdź opcję Błyskaniecie.
- Zwróć uwagę na ponowne malowanie wyróżnione na zielono.
Jeśli na innej stronie widzisz, że cały ekran lub jego fragmenty, które nie powinny być wypełnione kolorem, migają na zielono, 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 obciętymi krawędziami
Użyj opcji Granice warstwy, aby wyświetlić nakładkę granic warstwy i płytek u góry strony.
Aby włączyć obramowania warstw:
- Otwórz kartę Wyświetlanie i zaznacz pole Obrzeża warstwy.
- Zauważ, że obramowania warstwy są pomarańczowe i oliwkowe, a kafelki – cyjanowe.
Aby dowiedzieć się więcej o kolorach, zapoznaj się z komentarzami w debug_colors.cc.
Wyświetlanie liczby klatek na sekundę w czasie rzeczywistym za pomocą statystyk renderowania klatek
Statystyki renderowania klatek to nakładka wyświetlana w prawym górnym rogu widoku.
Aby otworzyć Statystyki renderowania klatek:
- Otwórz kartę Renderowanie i zaznacz pole wyboru Statystyki renderowania klatek.
- Sprawdź statystyki w prawym górnym rogu strony.
Nakładka Statystyki renderowania klatek zawiera:
- Szacunkowa liczba klatek na sekundę w czasie wczytywania strony.
- Ramy osi czasu jako wykres z 3 typami ramek:
- Zarenderowane klatki (niebieskie linie)
- Częściowo widoczne klatki (żółte linie)
- Pominięte klatki (czerwone linie).
- Stan rastrowania przez procesor graficzny: włączony lub wyłączony. Więcej informacji znajdziesz w artykule Jak włączyć rastrowanie przez procesor graficzny.
- Wykorzystanie pamięci GPU: liczba wykorzystanych i maksymalnych MB pamięci.
Identyfikowanie problemów z wydajnością podczas przewijania
Użyj problemów z wydajnością podczas przewijania, aby zidentyfikować elementy strony, które mają związane z przewijaniem odbiorniki zdarzeń, które mogą mieć negatywny wpływ 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 wyróżnione elementy, które mogą być problematyczne.
Wyświetlanie podstawowych wskaźników internetowych
Wskaźniki internetowe to inicjatywa Google zapewniająca ujednolicone wskazówki dotyczące sygnałów związanych z jakością, które gwarantują doskonałe wrażenia 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, jest możliwy do zmierzenia w warunkach rzeczywistych i odzwierciedla rzeczywiste wrażenia użytkownika dotyczące kluczowych wyników. Podstawowe wskaźniki internetowe to:
- Największe wyrenderowanie treści (LCP): mierzy wydajność wczytywania. Aby wygodnie korzystać z witryny, LCP powinno pojawiać się w ciągu 2,5 sekundy od wczytania strony.
- Interakcja do kolejnego wyrenderowania (INP): mierzy interaktywność. Aby zapewnić użytkownikom dobre wrażenia, strony powinny mieć INP wynoszący 200 milisekund lub mniej.
- Skumulowane przesunięcie układu (CLS): mierzy stabilność wizualna. Aby zapewnić użytkownikom wygodę, strony powinny mieć wskaźnik CLS wynoszący 0,1 lub mniej.
Aby wyświetlić wartości podstawowych wskaźników internetowych, skorzystaj z rozszerzenia Web Vitals do Chrome.