W filmie Search Central Lightning Talks inżynier Google ds. relacji z programistami Martin Splitt wyjaśnia, w jaki sposób źródłowy kod HTML może różnić się od renderowanego kodu HTML i jak może to wpłynąć na Twoje SEO.
Na początku filmu pyta: Czy kiedykolwiek sprawdziłeś źródło strony internetowej i zastanawiałeś się, dlaczego wygląda inaczej niż to, co widzisz w przeglądarce, gdy otwierasz tę samą witrynę?
A może słyszałeś o renderowanym HTML lub DOM i nie wiesz, czym różnią się one od tego, co widzisz na przykład w źródle widoku, to ten film jest dla Ciebie.
Gorąco polecamy wysłuchanie tego podcastu, jeśli w ogóle zależy Ci na tym, jak bardzo źródłowy kod HTML i wyrenderowany kod HTML mogą wpłynąć na Twoje wysiłki SEO.
Marcina 0:00
Czy kiedykolwiek sprawdzałeś źródło strony internetowej i zastanawiałeś się, dlaczego wygląda ono inaczej niż to, co widzisz w przeglądarce, gdy otwierasz tę samą witrynę? A może słyszałeś o renderowanym HTML lub DOM i nie wiesz, czym różnią się one od tego, co widzisz na przykład w źródle widoku, to ten film jest dla Ciebie. W tym filmie chciałbym zabrać Cię w podróż za kulisy Twojej przeglądarki. Więc wskoczmy.
Marcina 00:26
Aby zrozumieć, co dzieje się pomiędzy serwerem wysyłającym kod HTML do Twojej przeglądarki, a przeglądarką wyświetlającą Ci witrynę w całej okazałości, musimy zacząć od momentu, w którym naciśniesz klawisz Return w pasku adresu i poprosić serwer gdzieś w Internecie o dać ci stronę internetową. Pierwszym krokiem, aby wyświetlić witrynę w przeglądarce, jest wysłanie żądania HTTP do serwera hostującego witrynę.
Gdy serwer otrzyma żądanie, wybiera sposób, w jaki na nie odpowie. Może to oznaczać uruchomienie programu takiego jak skrypt PHP, program Java lub cokolwiek innego, lub po prostu odesłanie zawartości pliku. W tym filmie pominiemy, co dokładnie robi serwer i skupimy się na fakcie, że serwer zwykle zaczyna wysyłać pakiet HTML z powrotem do przeglądarki. Wiele osób uważa, że kod HTML wysłany z serwera jest taki sam jak witryna internetowa, którą zobaczysz w przeglądarce. Ale to nie jest do końca dokładne.
Zamiast tego możemy powiedzieć, że to, co widzisz w przeglądarce, to danie, a przesłany kod HTML to przepis. Przeglądarka musi przygotować lub ugotować potrawę w oparciu o przepis otrzymany z serwera. Zamienia kod HTML w szereg elementów wizualnych, a czasem interaktywnych, które następnie pojawiają się na ekranie. Interesującą częścią jest to, co dzieje się pomiędzy kodem HTML a tym, co widzisz w przeglądarce. Nazywa się to renderowaniem. Przyjrzyjmy się bliżej renderowaniu, aby zobaczyć, co dzieje się pomiędzy początkiem, kodem HTML pochodzącym z serwera, a końcem, czyli interaktywną witryną internetową, z którą, cóż, wchodzisz w interakcję.
Aby zrozumieć różnicę pomiędzy kodem HTML otrzymanym z serwera, tzw. kodem źródłowym, renderowanym kodem HTML i modelem DOM, musimy przyjrzeć się bliżej procesowi renderowania. Proces renderowania to seria kroków rozpoczynających się od źródłowego kodu HTML. Jeśli w CSS zostaną zawarte informacje o stylu, przeglądarka zacznie od przeanalizowania źródłowego kodu HTML i, jeśli to możliwe, dowolnego CSS znalezionego w środku, co spowoduje utworzenie dwóch drzewiastych struktur zwanych Document Object Model, w skrócie DOM, i obiektowym modelem CSS, W skrócie CSSOM.
Dla nas DOM jest ważniejszy z tych dwóch modeli, więc od teraz skupimy się na nim. Na przykład dla naszej witryny przeglądarka utworzy następujące drzewo DOM. Przeglądarka potrzebuje tego drzewa do identyfikacji poszczególnych elementów serwisu i ich powiązań z innymi elementami. Jak na przykład, który tekst należy do nagłówka, a który do akapitu lub jaki plik jest źródłem tego obrazu. Następnie przeglądarka pobiera DOM i CSSOM i zastanawia się, jak zmieścić to wszystko w oknie przeglądarki. Nazywa się to układem i tworzy drzewo renderowania. Drzewo renderowania zasadniczo zawiera rozmiary i położenie na ekranie każdego elementu DOM. Przeglądarka używa tego drzewa do malowania rzeczywistych pikseli składających się na to, co widzimy w oknie przeglądarki. Ważne jest, aby zrozumieć, że gdy przeglądarka wyświetli nam witrynę, może użyć JavaScript, aby umożliwić nam interakcję z witryną.
JavaScript może następnie zmienić DOM, dodając, zmieniając lub usuwając elementy w drzewie. Na przykład, kiedy kliknę ten przycisk, dodaje obraz do DOM, a tym samym do strony internetowej na ekranie. Tutaj możemy zobaczyć to w akcji. Po lewej stronie widzisz interaktywną stronę internetową. Po prawej stronie widać reprezentację modelu DOM używanego przez przeglądarkę w przypadku tej witryny. Po każdym kliknięciu przycisku JavaScript dodaje nowy obraz do drzewa DOM, a przeglądarka go renderuje. W poprzednim przykładzie drzewo DOM może w każdej chwili wyglądać inaczej, w zależności od tego, co wydarzyło się wcześniej.
Sam DOM żyje tylko w pamięci przeglądarki i nie jest sam w sobie widoczny, ale możemy go przedstawić w różnych formach. Jedną z takich form jest interaktywny widok drzewa, który widzieliśmy w narzędziach programistycznych przeglądarki po prawej stronie poprzedniego filmu. Alternatywnie możemy zamienić drzewo DOM z powrotem w HTML. Nazywamy to renderowanym kodem HTML.
Kiedy ponownie zamienimy drzewo DOM na wyrenderowany kod HTML, możemy uzyskać różne wyniki w zależności od tego, co wcześniej stało się z drzewem DOM. Na przykład wyrenderowany kod HTML poprzedniej przykładowej witryny jest dokładnie taki sam, jak źródłowy kod HTML, o ile przycisk nie został kliknięty.
Po kliknięciu przycisku zostanie uruchomiony JavaScript, który zmieni DOM, a co za tym idzie, wyrenderowany kod HTML. Być może już się zastanawiasz, co widzę, gdy klikam opcję Wyświetl źródło w mojej przeglądarce? Cóż, jest to źródłowy kod HTML, czy wyrenderowany kod HTML? Istnieją trzy sposoby sprawdzenia źródłowego kodu HTML pochodzącego z serwera. Pierwszym i prawdopodobnie najbardziej znanym jest kliknięcie strony internetowej prawym przyciskiem myszy i wybranie opcji Wyświetl źródło lub wpisanie dwukropka źródła widoku przed adresem URL. To pokazuje źródłowy kod HTML. Alternatywnie możesz także przejść do narzędzi programistycznych w przeglądarce, wybrać kartę Źródła i zobaczyć tam źródłowy kod HTML.
Tutaj widać, że po prawej stronie widoczny jest oryginalny kod HTML bez obrazów aktualnie widocznych na stronie. Trzeci sposób polega na użyciu zakładki Sieć w narzędziach programistycznych przeglądarki, gdzie można również zobaczyć kod HTML odesłany z serwera. Ale jakie mam opcje, jeśli chcemy zobaczyć, co jest w DOM?
Cóż, znowu narzędzia programistyczne przeglądarki nas okryły. Narzędzia deweloperskie zawierają drzewiastą reprezentację DOM, którą możemy eksplorować i z którą możemy wchodzić w interakcje. Znajdziemy to na karcie Elementy w przeglądarce Chrome. Możesz zauważyć, że w przeciwieństwie do innych paneli Narzędzi deweloperskich i źródła widoku, pokazuje nam bieżącą zawartość DOM, w tym obrazy dodane przez JavaScript. Jeśli chcemy, możemy zamienić DOM z powrotem w HTML.
Może to być dość skomplikowane dzięki takim elementom jak Shadow DOM lub ramki iframe pochodzące z różnych źródeł. Jednak w przypadku prostszych witryn internetowych możesz uzyskać wyrenderowany kod HTML, przechodząc do konsoli narzędzi deweloperskich i uruchamiając ten fragment kodu JavaScript. Ponownie pamiętaj, że nie zawsze to działa, szczególnie w przypadku bardziej złożonych witryn internetowych. Do debugowania zalecam użycie narzędzia do sprawdzania adresów URL w Search Console, aby uzyskać wyrenderowany kod HTML używany przez wyszukiwarkę Google do indeksowania strony.
W porządku, więc to była niezła przejażdżka. Podsumujmy, czego się dzisiaj nauczyliśmy.
Zaczęliśmy od źródłowego kodu HTML, czyli kodu HTML, który serwer wysyła do naszej przeglądarki, gdy otwieramy stronę internetową. Następnie dowiedzieliśmy się, że przeglądarka zamienia ten kod HTML w DOM. Jest to interaktywna reprezentacja strony internetowej element po elemencie zbudowana ze źródłowego kodu HTML. DOM może się zmieniać, ponieważ JavaScript może go modyfikować podczas ładowania strony, interakcji użytkownika lub innych zdarzeń, gdy jest otwarty w przeglądarce.
I wreszcie, co nie mniej ważne, zidentyfikowaliśmy renderowany HTML jako migawkę tego modelu DOM przekształconego z powrotem w HTML. Wyrenderowany kod HTML odzwierciedla zawartość DOM na stronie w momencie wykonania migawki. Aby zobaczyć wyrenderowany kod HTML, możesz użyć narzędzia do sprawdzania adresów URL w Google Search Console. Teraz sprawdziliśmy, czym jest źródłowy kod HTML, wyrenderowany kod HTML i model DOM oraz sprawdziliśmy, jakich narzędzi można użyć do debugowania problemów w witrynach internetowych. Jakich narzędzi używasz do debugowania problemów w swoich witrynach?
Daj nam znać w komentarzach poniżej. Dziękuję również bardzo za obejrzenie. Polub i zasubskrybuj, aby być na bieżąco z najnowszymi i najlepszymi treściami związanymi z wyszukiwarką Google. Wielkie dzięki. I do widzenia. Chcesz więcej technicznych wybryków SEO? Złap mnie na podcaście Search Off the Record, gdzie rozmawiamy o wszystkich rzeczach związanych z wyszukiwarką Google, zaglądamy za kulisy i kto wie, może omawiamy moją miłość do JavaScript.
Tak! Dołącz do mnie, Martina i działu relacji z wyszukiwarką Google i sprawdzaj nas, gdziekolwiek pobierasz podcasty.
