Idealne ustawienia panelu Network w Chrome do optymalizacji Core Web Vitals
Skonfiguruj panel Network w Chrome DevTools, aby osiągnąć maksymalną wydajność
Idealne ustawienia panelu Network w Chrome do optymalizacji Core Web Vitals
Panel Network w Chrome DevTools to niezbędne narzędzie dla web developerów dążących do optymalizacji Core Web Vitals. Niestety domyślne ustawienia nie są najlepsze do optymalizacji szybkości. Konfigurując odpowiednie ustawienia, możesz dokładnie symulować rzeczywiste warunki i uzyskać lepszy wgląd w wydajność swojej strony. Ten przewodnik przeprowadzi Cię przez idealne ustawienia panelu Network w Chrome DevTools do analizy i poprawy wyników Core Web Vitals.
Konfiguracja panelu Network
Aby uzyskać dostęp do panelu Network, otwórz Chrome DevTools (F12 lub Ctrl+Shift+I) i kliknij zakładkę "Network".
Throttling
Jednym z najważniejszych ustawień do optymalizacji Core Web Vitals jest throttling sieci. Pozwala to symulować różne warunki sieciowe, które mogą napotkać Twoi użytkownicy.
Kliknij na rozwijane menu "No throttling" w panelu Network. Wybierz "Fast 4g", "Slow 4g" lub "3G", aby symulować warunki sieci mobilnej. Najlepsza opcja zależy od Twojej grupy odbiorców. Jeśli Twoi odbiorcy zazwyczaj korzystają z wysokiej klasy urządzeń mobilnych w szybkich warunkach sieciowych, włącz "Fast 4G". Jeśli typowe warunki sieciowe są nieco gorsze, wybierz "Slow 4G" a w przeciwnym razie wybierz bezpieczną opcję "3G"
Wyłącz Cache
Aby upewnić się, że testujesz swoją stronę tak, jak doświadczyłby jej nowy odwiedzający: Zaznacz pole "Disable cache" w panelu Network.
Włącz Big request Rows
Big request rows zapewnia bardziej kompleksowy widok każdego żądania. Najważniejsze nowe informacje, które uzyskasz, to:
- Kolumna size będzie teraz pokazywać nieskompresowany i skompresowany rozmiar żądania.
- Kolumna name będzie zawierać informacje o ścieżce.
- Kolumna priority pokaże początkowy i końcowy priorytet pobierania.
Włącz Screenshots
Po włączeniu Screenshots, Chrome będzie przechwytywać zrzuty ekranu podczas ładowania strony. Każdy zrzut ekranu reprezentuje zmianę wizualną na stronie i może być użyty do zrozumienia różnych etapów ładowania strony oraz identyfikacji Cumulative Layout Shift.
- Mając aktywną zakładkę Network, naciśnij Ctrl+F5 (Cmd+R na Mac), aby odświeżyć stronę.
- Chrome przechwyci zrzuty ekranu podczas procesu ładowania strony.
- Miniatury tych zrzutów ekranu pojawią się poniżej wiersza pól wyboru w panelu Network.
Podgląd zrzutów ekranu ma kilka przydatnych funkcji, o których możesz jeszcze nie wiedzieć:
- Najedź kursorem na zrzut ekranu, aby zobaczyć, kiedy został przechwycony. Będzie to oznaczone żółtą pionową linią na wykresie przeglądu.
- Kliknij miniaturę zrzutu ekranu, aby odfiltrować żądania, które wystąpiły po przechwyceniu tego zrzutu.
- Kliknij dwukrotnie miniaturę, aby powiększyć i wyświetlić zrzut ekranu bardziej szczegółowo.
Włącz najlepsze kolumny sieciowe
Do znajdowania problemów z Core Web Vitals następujące panele dostarczą Ci przydatnych informacji. Po prostu kliknij prawym przyciskiem myszy na dowolną nazwę kolumny i wybierz preferowane kolumny
Następnie włącz poniższe kolumny, które mają znaczenie dla Core Web Vitals:
| Nazwa kolumny | Opis | Znaczenie dla Core Web Vitals |
|---|---|---|
| Name | Nazwa żądania | Identyfikacja zasobów |
| Status | Kody statusu HTTP | Monitorowanie kodów innych niż 200 (301 i 302 do znajdowania przekierowań oraz 404 / 410 dla zasobów, które nie istnieją) |
| Protocol | Używany protokół sieciowy | Priorytetyzuj HTTP/3 dla wydajności |
| Domain | Domena zasobu | Identyfikacja zasobów zewnętrznych |
| Type | Typ zasobu | Kategoryzacja żądań |
| Initiator | Wyzwalacz żądania | Zrozumienie pochodzenia żądań |
| Size | Rozmiar transferu i rzeczywisty | Identyfikacja dużych żądań |
| Priority | Priorytet ładowania zasobu | Zapewnienie prawidłowej priorytetyzacji |
| Waterfall | Wizualna oś czasu żądań | Analiza sekwencji ładowania |
Włącz te niestandardowe nagłówki odpowiedzi:
Włącz te niestandardowe nagłówki odpowiedzi:
| Nazwa kolumny | Opis | Znaczenie dla Core Web Vitals |
|---|---|---|
| Cache-Control | Zachowanie buforowania zasobów | Identyfikacja zasobów |
| Link | Nagłówek odpowiedzi Link | Sprawdzanie nagłówków preloading lub prefetch |
| Content-Encoding | Użyte kodowanie | Weryfikacja kompresji zasobów |
Efekt końcowy:
Teraz nadszedł czas, aby przeładować stronę i zobaczyć nową, ulepszoną odpowiedź sieciową w zakładce Network w Chrome. Będzie to wyglądać mniej więcej tak i pokazuje wszystkie informacje potrzebne do rozpoczęcia debugowania Core Web Vitals!
Compare your segments.
Is iOS slower than Android? Is the checkout route failing INP? Filter by device, route, and connection type.
- Device filtering
- Route Analysis
- Connection Types
