Jak korzystać z Chrome DevTools w kontekście SEO?

Google Chrome DevTools to zestaw bezpłatnych narzędzi przeglądarki Google Chrome. Oprócz wbudowanych w przeglądarkę funkcji dostępne są również dodatkowe moduły (dostępne do zainstalowania pod adresem https://chrome.google.com/webstore). Narzędzia te służą do testowania, analizowania i debugowania kodu stron internetowych oraz aplikacji internetowych. Chrome DevTools to jedno z niezbędnych narzędzi dla programistów, specjalistów SEO i analityków internetowych.

W tym artykule opisujemy funkcje Chrome DevTools, które są szczególnie przydatne dla specjalisty SEO.

Jak otworzyć Chrome DevTools?

Użytkownicy oczekują szybkiego dostępu do różnych części interfejsu DevTools. Istnieje wiele sposobów na otwarcie go w przeglądarce.Pierwszym i najbardziej podstawowym sposobem jest kliknięcie prawym przyciskiem myszy na analizowanym elemencie strony, aby rozwinąć menu kontekstowe i wybrać opcję „Zbadaj”  (Inspect). Spowoduje to otwarcie zakładki „Elementy” (Elements) w DevTools, gdzie można analizować elementy w drzewie DOM.

Innym sposobem na otwarcie narzędzi programistycznych Chrome jest wybranie opcji z menu kontekstowego przeglądarki. W tym celu:

• naciśnij przycisk z symbolem trzech pionowo ułożonych kropek w prawym górnym rogu przeglądarki.
• znajdź opcję „Więcej narzędzi” w menu kontekstowym, które się otworzy,
• po najechaniu na nią wybierz „Narzędzia programistyczne” z podmenu.

Spowoduje to otwarcie narzędzia i aktywację tego samego panelu, który użytkownik wyświetlał przed ostatnim zamknięciem DevTools.

Skróty klawiszowe do otwierania Chrome DevTools

Windows, Linux, ChromeOS

• Panel „Elementy” – CTRL + SHIFT + C
• Panel „Konsola” – CTRL + SHIFT + J
• Ostatnio zamknięty panel – F12 / CTRL + SHIFT + I

MacOS

• Panel „Elementy” – CMD + OPTION + C
• Panel „Konsola” – CMD + OPTION + J
• Ostatnio zamknięty panel – F12 / CMD + OPTION + I

Tryb inspekcji

Tryb inspekcji to funkcja w Chrome DevTools, która pozwala szybko wyświetlić podstawowe informacje o elemencie, nad którym aktualnie znajduje się kursor myszy.

Narzędzie jednocześnie lokalizuje element w kodzie HTML i podświetla jego fragment, umożliwiając użytkownikowi szybki podgląd. Narzędzie działa również w drugą stronę – najechanie kursorem na fragment kodu w oknie DevTools powoduje podświetlenie elementu na stronie, do którego odnosi się ten fragment.

Gdy tryb inspekcji jest włączony (ikona trybu inspekcji jest podświetlona), kliknięcie lewym przyciskiem myszy na sprawdzanym elemencie spowoduje wyświetlenie informacji o stylach CSS tego elementu w narzędziach programistycznych Chrome. Dane te są wyświetlane poniżej okna podglądu kodu strony w zakładce „Style”.

Funkcja trybu inspekcji w Chrome DevTools jest narzędziem przydatnym przede wszystkim do lokalizowania ukrytych elementów na stronie (np. przy użyciu kodu CSS). Stanowi ona również doskonałą pomoc w weryfikacji, czy różne elementy witryny zostały poprawnie zaimplementowane.

Tryb urządzenia

Tryb urządzenia pozwala symulować działanie strony internetowej w różnych rozdzielczościach i na różnych urządzeniach.

Narzędzie to umożliwia sprawdzenie układu strony przy dowolnej wysokości i szerokości ekranu. Oprócz tej podstawowej funkcji zapewnia również automatyczną symulację rozdzielczości ekranu najpopularniejszych modeli urządzeń mobilnych oraz konfigurację rozmiaru okna dla własnego urządzenia.

Pozwala też ograniczyć prędkość połączenia internetowego do zakresu odpowiedniego dla symulowanego urządzenia.

Główną zaletą tego narzędzia z punktu widzenia SEO jest możliwość sprawdzenia układu strony dla nieograniczonej liczby rozdzielczości ekranu. Pozwala to zweryfikować elementy, które powodują powszechny problem zgłaszany przez Google Search Console w raporcie użyteczności mobilnej – elementy klikalne zbyt blisko siebie.

Elementy

Elementy – to zakładka w narzędziach programistycznych Google Chrome, która umożliwia przeglądanie kodu HTML strony w drzewie DOM. Dzięki temu narzędziu użytkownik może sprawdzić, w jaki sposób poszczególne elementy są zagnieżdżone, a także wyszukiwać konkretne fragmenty kodu.

Ta ostatnia opcja jest szczególnie przydatna dla specjalistów SEO. Pomaga ona szybko zweryfikować obecność w kodzie elementów takich jak dane strukturalne Schema.org, a także elementów tak podstawowych jak tag <title></title> czy <meta name=”robots” content=”noindex”>.

Aby przeprowadzić wyszukiwanie w zakładce „Elementy”, użyj skrótu klawiszowego CTRL + F. Następnie możesz przeszukiwać kod HTML w oknie wyszukiwania, które otworzy się po użyciu skrótu.

Konsola

Konsola pozwala na uruchamianie kodu JavaScript, gdy strona internetowa jest już w pełni załadowana. Jest to szczególnie przydatne do testowania kodu JS przed wdrożeniem go bezpośrednio na stronie.

Kolejną bardzo ważną funkcją tej zakładki jest możliwość wyświetlania logów i komunikatów dotyczących działania kodu JavaScript, co pozwala użytkownikowi zweryfikować, czy kod JS osadzony na stronie działa poprawnie. W przypadku błędów JavaScript zakładka Konsola wyświetla szczegółowe informacje o fragmencie kodu, który wygenerował błąd, a także o przyczynie błędu.

Jest to przydatne narzędzie w pracy każdego specjalisty SEO do weryfikacji błędów w działaniu witryny. Przekłada się to bezpośrednio na możliwość przedstawienia szczegółowych zaleceń dotyczących wdrożenia.

Sieć

Sieć to zakładka w DevTools służąca do analizy zasobów strony pobranych przez przeglądarkę. Przede wszystkim narzędzie to umożliwia:

• sprawdzenie statusu żądanych zasobów,
• analizę zawartości nagłówków HTTP (zarówno żądania, jak i odpowiedzi),
• przeprowadzenie analizy kaskadowej pobranych zasobów,
• symulację ładowania strony bez żądania określonych zasobów,
• symulację ładowania strony przy ograniczonej przepustowości Internetu,
• symulację ładowania strony bez pamięci podręcznej.

Zakładka „Sieć” w Chrome DevTools to usprawnia pracę specjalisty SEO na poziomie weryfikacji prawidłowego funkcjonowania konkretnych stron witryny.

Weryfikacja statusu żądanych zasobów

Logi w zakładce „Sieć” przedstawiają tabelę pokazującą status żądanych zasobów. Zawiera ona następujące elementy:

• Name (nazwa zasobu) – nazwa żądanego zasobu,
• Status (kod odpowiedzi serwera) – kod odpowiedzi serwera dla żądanego zasobu (np. 200, 404, 403),
• Type (typ zasobu) – typ żądanego zasobu (np. document, script, png),
• Initiator (źródło żądania) – wskazuje, co spowodowało załadowanie zasobu,
• Time (czas trwania) – czas, jaki zajęło wykonanie żądania,
• Priority (priorytet pobierania) – priorytet pobierania zasobu (np. Highest, High, Low),
• Waterfall (kolejność ładowania) – pokazuje kolejność oraz sposób ładowania poszczególnych zasobów.

Analiza zawartości nagłówków HTTP

Klikając lewym przyciskiem myszy na nazwę żądanego zasobu w kolumnie „Nazwa” w logach zakładki „Sieć”, użytkownik może uzyskać dostęp do danych dotyczących nagłówków żądania i odpowiedzi HTTP.

Analiza kaskadowa pobranych zasobów

Ostatnia kolumna w logach zakładki „Sieć” zawiera szczegółowe informacje na temat pobierania i ładowania konkretnego zasobu. Po najechaniu kursorem myszy na wiersz zawierający wykres kaskadowy można wyświetlić szczegółowe informacje dotyczące czasu wysłania żądania, czasu odpowiedzi serwera itp.

Symulacja ładowania strony bez żądania określonych zasobów

Symulacja ładowania strony bez konkretnego zasobu to sposób na sprawdzenie, czy zablokowanie lub opóźnienie ładowania konkretnego zasobu strony wpłynie na ogólną funkcjonalność strony i doświadczenie użytkownika.

Aby zablokować żądanie przeglądarki dotyczące konkretnego zasobu, znajdź ten zasób w kolumnie „Name” tabeli wodospadowej i kliknij prawym przyciskiem myszy nazwę tego zasobu. Z menu kontekstowego, które się otworzy, wybierz opcję „Zablokuj adres URL żądania”.

Za każdym razem, gdy strona zostanie ponownie załadowana, zasób nie będzie żądany przez przeglądarkę, dopóki nie zostanie odznaczony w zakładce „Blokowanie żądań sieciowych” poniżej tabeli wodospadowej lub dopóki bieżąca sesja przeglądarki nie zostanie zamknięta.

Możliwe jest również zablokowanie żądań dla wszystkich adresów URL danej domeny. Aby to zrobić, znajdź jeden z zasobów należących do domeny, którą chcesz zablokować, w kolumnie „Nazwa” tabeli Waterfall. Następnie po prostu kliknij prawym przyciskiem myszy nazwę tego zasobu i wybierz opcję „Zablokuj domenę żądania” z menu kontekstowego.

W ten sposób wszystkie zasoby należące do danej domeny zostaną zablokowane przed wysyłaniem żądań przez przeglądarkę.

Symulacja ładowania strony przy ograniczonej przepustowości łącza internetowego

Symulacja ograniczonej przepustowości łącza internetowego to przydatna funkcja zakładki „Sieć”, która pozwala ocenić szybkość ładowania strony internetowej na urządzeniach o niskiej prędkości połączenia internetowego (np. smartfonach).

Aby nałożyć ograniczenia przepustowości na przeglądarkę, znajdź przycisk menu (trzy pionowo ułożone kropki) w prawym górnym rogu okna DevTools w zakładce Chrome DevTools. Wybierz „Więcej narzędzi”, a następnie „Warunki sieciowe” z menu kontekstowego.

Funkcja Network throttling (symulacja warunków sieciowych) oferuje predefiniowane profile:

• No throttling – brak ograniczeń
• Fast 3G – opóźnienie na poziomie 560 ms oraz przepustowość ograniczona do 1,44 Mb/s
• Slow 3G – opóźnienie żądania na poziomie 2 s oraz przepustowość ograniczona do 400 Kb/s
• Offline – brak połączenia z siecią

Dodatkowo użytkownicy mogą definiować własne ustawienia ograniczania przepustowości.

Symulacja ładowania strony bez pamięci podręcznej (cache)

Aby wyłączyć pamięć podręczną w przeglądarce, zaznacz opcję „Wyłącz pamięć podręczną” w zakładce „Warunki sieci” i odśwież analizowaną stronę.

„Zakładka Sieć” stanowi potężne źródło wiedzy o witrynie dla programistów, specjalistów SEO i analityków internetowych. Pozwala nie tylko zidentyfikować zasoby, które stanowią problem podczas ładowania strony, lub zasymulować brak niektórych zasobów, ale także zlokalizować problemy na stronie, które generują błędy w Google Analytics (np. nieprawidłowe przypisanie źródła do sesji).

Performance

Performance – umożliwia dokładne prześledzenie, jak ładuje się strona internetowa w określonych warunkach, np. przy ograniczonej przepustowości łącza lub wydajności CPU.

Ponadto za pomocą tego narzędzia można określić, które elementy strony mają bezpośredni wpływ na wskaźniki Core Web Vitals (First Contentful Paint, Largest Contentful Paint, Cumulative Layout Shift).

Narzędzie Performance wizualizuje również ładowanie strony internetowej klatka po klatce, umożliwiając użytkownikowi podgląd każdej z nich.

Funkcje ukryte w zakładce „Performance” to przydatne narzędzia, które mogą być wykorzystywane przez specjalistę SEO do lokalizowania elementów wpływających na wskaźniki Core Web Vitals, a także do weryfikacji prawidłowego wdrożenia zaleceń mających na celu poprawę tych wskaźników.

Podsumowanie

Elementy omówione w tym artykule to jedynie część możliwości, jakie oferuje Chrome DevTools, co dobrze pokazuje, jak rozbudowane i wszechstronne jest to narzędzie. Umiejętność korzystania z dostępnych funkcji oraz wykorzystywania ich w codziennej pracy to realna wartość dla programistów, specjalistów SEO i analityków internetowych.