Idealne ustawienia panelu Network w Chrome do optymalizacji Core Web Vitals

Idealne ustawienia panelu Network w Chrome do optymalizacji Core Web Vitals

Panel Network w Chrome DevTools to niezbędne narzędzie dla programistów stron internetowych, którzy chcą optymalizować Core Web Vitals. Niestety domyślne ustawienia nie są najlepsze do optymalizacji szybkości. Konfigurując odpowiednie ustawienia, możesz dokładnie symulować warunki rzeczywiste 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 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 docelowej. 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łączenie pamięci podręcznej

Aby upewnić się, że testujesz swoją stronę tak, jak doświadczyłby jej nowy odwiedzający: Zaznacz pole "Disable cache" w panelu Network.

Włączenie dużych wierszy żądań

Duże wiersze żądań zapewniają bardziej kompleksowy widok każdego żądania. Najważniejsze nowe informacje, które uzyskasz, to:

• Kolumna size będzie teraz wyświetlać rozmiar nieskompresowany i skompresowany żądania.
• Kolumna name dostarczy informacji o ścieżce.
• Kolumna priority pokaże początkowy i końcowy priorytet pobierania.

Włączenie zrzutów ekranu

Po włączeniu zrzutów ekranu 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.

Przeglą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 wskazane żółtą pionową linią na wykresie Overview.
• Kliknij miniaturę zrzutu ekranu, aby odfiltrować żądania, które nastąpiły po wykonaniu tego zrzutu.
• Kliknij dwukrotnie miniaturę, aby ją powiększyć i zobaczyć zrzut ekranu w większym szczególe.

Włączenie najlepszych kolumn sieciowych

Do znajdowania problemów z Core Web Vitals poniższe kolumny 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:

Włącz następujące niestandardowe nagłówki odpowiedzi:

Włącz następujące niestandardowe nagłówki odpowiedzi:

Efekt końcowy:

Teraz czas przeładować stronę i zobaczyć nową, ulepszoną odpowiedź sieciową w zakładce Network w Chrome. Będzie wyglądać mniej więcej tak i pokaże wszystkie informacje potrzebne do rozpoczęcia debugowania Core Web Vitals!