Poznaj problemy z wydajnością renderowania związane z opcjami związanymi z wydajnością na karcie Renderowanie.
Wyróżnij ponownie namalowane obszary migoczącymi farbami
Gdy ta opcja jest włączona, Chrome miga na zielono przy każdym odtwarzaniu.
Aby wyświetlić malowane obszary:
- Otwórz kartę Renderowanie w tej demonstracji i zaznacz Miwanie farby.
- Obserwuj obraz zaznaczony na zielono.
Jeśli na innej stronie cały ekran miga na zielono lub zauważysz obszary, które według Ciebie nie powinny być malowane, przyjrzyj się dokładniej.
Podświetl regiony przesunięcia układu
Przesunięcia układu powodują nieoczekiwane ponowne wyrenderowania i mogą być nie tylko irytujące, ale też szkodliwe.
Aby wyświetlić lokalizację i czas przesunięcia układu na stronie:
Otwórz kartę Renderowanie i zaznacz Regiony przesunięcia układu.
Odśwież stronę. Obszary przesunięcia układu są przez chwilę wyróżnione na fioletowo.
Wyświetlaj warstwy i kafelki z obramowaniem warstw
Użyj opcji Obramowania warstw, aby wyświetlić nakładkę z obramowaniami warstw i kafelkami u góry strony.
Aby włączyć obramowanie warstwy:
- Otwórz kartę Renderowanie i zaznacz Obramowania warstw.
- Obserwuj obramowanie warstw w kolorze pomarańczowym i oliwkowym oraz kafelki w kolorze błękitnym.
Wyjaśnienie dotyczące oznaczania kolorami znajdziesz w komentarzach: debug_colors.cc.
Sprawdzaj w czasie rzeczywistym liczbę klatek na sekundę dzięki statystykom renderowania klatek
Statystyki renderowania klatki 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 klatki zawiera te informacje:
- Szacunkowa liczba klatek na sekundę w czasie rzeczywistym podczas uruchamiania strony.
- Utwórz oś czasu jako wykres z 3 typami klatek:
- Klatki zostały wyrenderowane (niebieskie linie)
- Częściowo wyświetlane ramki (żółte linie)
- Usuniętych ramek (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 używanych i maksymalnych MB pamięci.
Wykrywaj problemy z wydajnością przewijania
Użyj narzędzia Problemy z wydajnością przewijania, aby zidentyfikować elementy strony, które zawierają detektory zdarzeń związane z przewijaniem i mogą mieć wpływ na działanie strony.
Aby wyświetlić elementy, które mogą być problematyczne:
- Otwórz kartę Renderowanie i sprawdź Problemy z wydajnością przewijania.
- Zwróć uwagę na wyróżnione elementy, które mogą powodować problemy.
Wyświetl podstawowe wskaźniki internetowe
Wskaźniki internetowe to inicjatywa Google mająca na celu dostarczanie ujednoliconych wskazówek dotyczących sygnałów dotyczących jakości, które są niezbędne do zapewnienia użytkownikom pozytywnych wrażeń podczas korzystania z internetu.
Podstawowe wskaźniki internetowe to podzbiór wskaźników internetowych, który dotyczy wszystkich stron internetowych. Każdy z podstawowych wskaźników internetowych reprezentuje inny aspekt wrażeń użytkownika, jest mierzony w terenie i odzwierciedla rzeczywiste doświadczenia związane z kluczowym, ukierunkowanym na użytkownika wynikiem. Podstawowe wskaźniki internetowe to:
- Największe wyrenderowanie treści (LCP): mierzy wydajność wczytywania. Dla wygody użytkowników LCP powinien wystąpić w ciągu 2, 5 sekundy od rozpoczęcia ładowania strony.
- Interakcja z następnym wyrenderowaniem (INP): mierzy interaktywność. Ze względu na wygodę użytkowników wartość INP stron powinna wynosić maksymalnie 200 milisekund.
- Skumulowane przesunięcie układu (CLS): mierzy stabilność wizualną. Aby zadbać o wygodę użytkowników, strony powinny mieć CLS na poziomie 0,1. lub krótszym.
Aby wyświetlić wartości podstawowych wskaźników internetowych na swojej stronie, użyj rozszerzenia do Chrome Web Vitals.