Jak przeglądarka tworzy stronę internetową?

Jako techniczny SEO, ważne jest, aby zrozumieć, w jaki sposób przeglądarka tworzy stronę internetową. Może to później pomóc między innymi w zrozumieniu różnicy między interpretacją strony przez człowieka i robota wyszukiwarki lub zdiagnozowaniu problemów z szybkością strony. Przyjrzę się temu z myślą o poprawie szybkości strony.

To pierwszy z tej serii 4 artykułów o fazach tworzenia strony w przeglądarkach i ich refleksji na temat Pagespeed.

Aby wyświetlić zawartość, każda przeglądarka musi wykonać procesy DOM i CSSOM przed utworzeniem drzewa renderowania w celu utworzenia strony internetowej.

DOM lub Document Object Model jest zbudowany ze znaczników HTML. DOM to reprezentacja danych elementów składających się na strukturę i zawartość strony internetowej. Ta reprezentacja jest używana przez różne programy, takie jak skrypty JavaScript, które mogą modyfikować strukturę, zawartość lub jedno i drugie.

CSSOM jest tworzony przez CSS MarkUp, taki jak animacja, klatka kluczowa, zapytania o media wraz z selektorami, właściwościami i wartościami semantycznie równoległymi do DOM.

To jest zrzut ekranu z pierwszej przeglądarki internetowej w historii. Nie może renderować JavaScript i nie ma wielu właściwości CSS. Nie może również używać nowoczesnych reguł HTML. Doświadczenie tego rodzaju prymitywnych przeglądarek internetowych (takich jak Lynx) może pomóc w zrozumieniu silników przeglądarek i ich natury pod względem wydajności sieci. Możesz odwiedzić tę stronę!

Jak DOM jest tworzony przez przeglądarkę?

Żadna przeglądarka nie widzi treści ani kodu źródłowego na stronie tak jak ludzie. Przede wszystkim zobaczy wszystko na preDOM w bajtach. Następnie przekonwertuje bajty na określone znaki i rozwiąże ich znaczenie, tworząc strukturę strony jako hierarchię.

Uwaga: preDOM to wersja DOM, która pojawia się w kodzie źródłowym i nie została jeszcze odczytana i przetworzona przez przeglądarkę. PreDOM jest następnie odczytywany i interpretowany przez przeglądarkę:

1. Używając kodu „charset” z twojego pliku, przeglądarka przekonwertuje bajty na znaki.
2. Proces „tokenizacji” jest inicjowany w celu stworzenia znaczących poleceń dla sąsiednich znaków.
3. Wygenerowane tokeny są konwertowane na obiekty i otrzymują reguły i właściwości zgodnie ze standardami HTML5. (Innymi słowy, konwertuje je na węzły).
4. Rozpoczyna się budowa DOM. Każdy znacznik HTML jest umieszczony jeden w drugim, tworząc hierarchię i tworząc strukturę strony internetowej.

Poprawa wydajności DOM: dlaczego to takie ważne?

Zanim dam ci kilka wskazówek, musisz zrozumieć typy zdarzeń obciążenia DOM i ich znaczenie.

Oto niektóre typy zdarzeń DOM podczas tworzenia stron internetowych

• domLoading : Punkt początkowy procesu DOM.
• domInteractive : Koniec procesu DOM.
• domContentLoaded : Koniec procesów DOM i CSSOM. W tym momencie przeglądarka jest gotowa do utworzenia drzewa renderowania. Również wykonanie JavaScript powinno zwykle rozpocząć się w tym momencie.
• domComplete : pobieranie wszystkich zasobów strony zostało zakończone.
• loadEvent : Po zakończeniu pobierania zasobów i utworzeniu struktury strony wywoływane są wszelkie istniejące zdarzenia JS „onload”.

Jeśli chcesz obliczyć tylko czas procesu DOM, skoncentruj się na zdarzeniu domInteractive. Jednak to zdarzenie nie jest pokazywane w devTools Chrome. Możesz użyć lub skonsultować się ze swoim zespołem IT, aby uzyskać interfejs API PerformanceNavigationTiming, który może obliczyć wszystkie te zdarzenia, a także dodatkowe zdarzenia podrzędne, takie jak domContentLoadedEventStart.

Możesz również sprawdzić preferencje domInteractive w Google Analytics > Zachowanie > Szybkość witryny > Czas strony > DOM. Jednak informacje tutaj nie są szczególnie stabilne i wiarygodne. Mimo to może dać ci punkt wyjścia.

Możesz również obliczyć DOM Interactive Timing za pomocą DevTools, ale tylko za pomocą kodów konsoli. Jest to trochę powolna metoda, ale możesz wypróbować bibliotekę kodu „performance.timing”. Powyżej zobaczysz po lewej stronie performance.timing, który pokazuje większość wskaźników wydajności. Tylko ostatnie trzy lub cztery cyfry są tutaj ważne. Jeśli chcesz zobaczyć niestandardowe metryki, na przykład DOMInteractive, możesz napisać performance.timing.domInteractive – performance.timing.responseStart. Po prawej stronie podane są odpowiednio DOMInteractive, DOMComplete, Total Page Load Time.
Przykład pochodzi z tej samej witryny z wiadomościami.

W tym artykule do naszych celów wystarczą zdarzenie domContentLoaded i DevTools.

Zwróć uwagę, że gdy zasoby są prawidłowo zorganizowane i załadowane, czasy domInteractive i domContentLoaded nie różnią się tak bardzo od siebie. Ponieważ prawdziwym wyzwaniem jest oddzielenie od siebie plików JS i CSS bez przerywania parsowania HTML lub tworzenia wąskiego gardła w głównym wątku. Jeśli możesz to zrobić pomyślnie, prawdopodobnie zarówno DOM, jak i CSSOM (zdarzenie domContentLoaded) są uruchamiane w najszybszy sposób.

Przykład DOM z dokumentu HTML

Optymalizacja procesu DOM i wskazówki

Gdybyśmy byli w 2019 roku i wcześniej, mógłbym powiedzieć, że jako ekspert ds. SEO nie musisz umieć kodować.

Ale w 2020 roku i później będziesz musiał znać kodowanie na poziomie początkującym. Aby zrozumieć, jak zoptymalizować obiektowy model dokumentu lub strukturę węzła HTML, należy je zbadać z wystarczającym doświadczeniem, aby utworzyć nową strukturę kodu.

Oto kilka wskazówek dotyczących optymalizacji rozmiaru DOM:

1. Sprawdź istniejące drzewo węzłów DOM i spróbuj znaleźć niepotrzebne węzły HTML . Na przykład, jeśli widzisz którykolwiek lub z klasą „display: none”, powinieneś je usunąć.
2. Możesz doradzić swojemu zespołowi IT, aby używał więcej pseudoelementów ::before i ::after zamiast tworzyć nowe węzły HTML.
3. Spróbuj skupić się na dużych nadrzędnych elementach HTML z dużą ilością elementów podrzędnych. Kontroluj swoje klasy CSS i ich efekty, aby tworzyć krótsze węzły HTML podczas pracy nad ujednoliceniem elementów HTML.
4. Jeśli nazywasz strukturę węzłów HTML za pomocą JavaScript, możesz również użyć lub doradzić swojemu zespołowi IT użycie punktów przerwania zmiany DOM poddrzewa w celu określenia, które węzły zmieniają który inicjator.
5. Jeśli nie możesz zmniejszyć rozmiaru węzła HTML, możesz pomyśleć o użyciu Shadow DOM lub, zgodnie z twoją biblioteką JS i technologiami renderowania, możesz być zainteresowany wirtualnym DOM.
6. Powinieneś także rozważyć technologie kompresji gzip, brotli lub deflate po stronie serwera.
7. Możesz skompresować swoją dokumentację HTML, usuwając spacje, aby zapewnić lepszą i szybszą obsługę szybkości przeglądarki.

Korzystanie z wirtualnego DOM

Możesz użyć różnych typów DOM, aby uzyskać lepszą szybkość strony, UX i budżet indeksowania. Jednym z przykładów jest wirtualny DOM.

Wirtualny DOM ładuje tylko te części DOM, które zmieniają się po otwarciu nowej strony, zamiast przeładowywać wszystkie elementy DOM. Stwarza to szybszą i lżejszą prezentację strony dla użytkownika lub bota wyszukiwarki.

Wirtualny DOM dobrze współpracuje z bibliotekami JavaScript Vue lub React.

Dlaczego wydajność DOM jest ważna dla technicznego SEO?

Rozmiar DOM jest bezpośrednio związany z szybkością strony i początkowym kontaktem z użytkownikiem.

Jeśli masz duży rozmiar DOM i nie używasz Shadow DOM lub podobnych metod zapobiegawczych, aby uniknąć ładowania i stylizowania wszystkich węzłów HTML, które nie są widoczne podczas początkowego ładowania strony, prawdopodobnie opóźnisz indeks prędkości i początkową prędkość kontaktu dla użytkownik.

Krótkie porównanie przeglądarek do procesów reflow.

Jeśli twój DOM ma duży rozmiar, prawdopodobnie będziesz cierpieć z powodu ponownego przepływu przeglądarki.

Reflow odnosi się do zmiany rozmiaru, stylizacji lub malowania i pozycjonowania elementu HTML w procesie ponownego renderowania. Zmiana elementu nadrzędnego HTML wpływa również na elementy podrzędne. Długość i liczba tego rodzaju łańcuchów elementów HTML może zaszkodzić szybkości Twojej strony.

Pętle Reflow mogą zaszkodzić budżetowi indeksowania, zwiększyć obciążenie serwera i sieci. Może w konsekwencji wpłynąć na współczynnik konwersji, a nawet rankingi.

Google faktycznie opublikował ładne i krótkie wideo prezentacyjne na ten temat:

Jak przeglądarka tworzy drzewo CSSOM i renderowanie?

Przeglądarki zwykle rozpoczynają proces CSSOM po zakończeniu procesu DOM.

Ponieważ nowoczesne przeglądarki są świadome, że DOM nie będzie miał żadnego sensu, dopóki CSSOM nie zostanie ukończony, niektóre elementy HTML nie są wyświetlane przez przeglądarkę, dopóki nie odczyta ona kodów stylów. Dobrym przykładem może być obraz tła CSS.

Powyżej znajduje się przykład fragmentu kodu CSS, który wymaga refaktoryzacji. Właściwość „Zoom” jest używana ponad 19 razy dla różnych selektorów. Mogą być zunifikowane.

W jaki sposób proces CSSOM rozpoczyna się i kończy w nowoczesnych przeglądarkach?

1. Przeglądarka podąża za bajtami, znakami, tokenami i pętlą standardowych reguł (węzłów), która jest generowana podczas tworzenia DOM.
2. Przeglądarka dopasowuje każdy element DOM do elementu CSS, który ma na niego wpływ. Ten proces nazywa się „Stylem”.
3. Po zmapowaniu przeglądarka określa wymiary każdego elementu DOM zgodnie z regułami CSS w strukturze hierarchicznej. Ponieważ rozmiar elementu nadrzędnego wpływa również na elementy podrzędne, hierarchicznie zakodowane pliki CSS są przydatne dla szybkości strony. Ten proces nazywa się „Układem”.
4. Rozpoczyna się proces Visual DOM. Wszystkie obrazy, obramowania i kolory są malowane zgodnie z regułami CSS. Ten proces odbywa się w różnych warstwach.
5. Composite to ostatni etap CSSOM. Przeglądarka łączy wszystkie operacje malowania na różnych warstwach.

Możesz sprawdzić właściwości CSS i ich koszty dla silnika przeglądarki za pomocą wyzwalaczy CSS w zakresie różnych silników przeglądarki.

Jak zoptymalizować proces CSSOM

1. Jako techniczny SEO powinieneś najpierw skupić się na złożonych selektorach CSS i wzajemnych właściwościach. Innymi słowy, jeśli selektor CSS ma więcej niż 3 elementy podrzędne, powinieneś spróbować go skrócić lub zgłosić to zespołowi IT w celu refaktoryzacji CSS. Wzajemne właściwości oznaczają, że Twój zespół IT może używać tych samych właściwości CSS w różnych klasach i identyfikatorach. Powinieneś spróbować je zunifikować, aby uzyskać mniejszy rozmiar pliku CSS.
2. Dowiedz się, czy Twój zespół IT kompresuje pliki CSS, czy nie.
3. Dla każdej kategorii i sekcji witryny spróbuj znaleźć często używany kod CSS i często nieużywany kod CSS . Doradź swojemu zespołowi IT, aby podzielił pliki CSS w celu uzyskania lepszej wydajności zasobów.
4. Szukaj ważnych kodów w plikach CSS. Prawdopodobnie sprawiają, że kolejny kod staje się niepotrzebny.
5. Spróbuj określić, czy Twoje pliki CSS mają równoległą strukturę hierarchiczną w odniesieniu do węzłów HTML. Jeśli są one równoległe, twoje drzewo renderowania będzie łatwiejsze dla przeglądarek.
6. Spróbuj zmniejszyć liczbę elementów HTML, które wymagają zmiany stylu lub rozmiaru . Obrazy są tego dobrym przykładem.
7. Możesz doradzić swojemu zespołowi IT korzystanie z funkcji i właściwości „Zawiera”, „Zmieni”, „Zakres CSS” w celu uzyskania lepszej wydajności przeglądarki.
   Właściwość 'Contain' określa zakres elementu HTML oraz efekty CSS, które otrzyma. W ten sposób nie wpłynie to na resztę DOM. Właściwość „Will-change” informuje przeglądarkę, które elementy się zmieniają iw jaki sposób, dzięki czemu przeglądarka może dokonywać optymalizacji jeszcze przed rozpoczęciem procesu.
8. Spróbuj wstawić krytyczny kod CSS przed renderowaniem blokujących plików CSS.
9. Spróbuj doradzić zespołowi IT , aby nie używał kodów stylów w znacznikach HTML . Ma to wpływ zarówno na procesy DOM/CSSOM, jak i na budżet indeksowania.
10. Nie umieszczaj adresów źródłowych obrazów w plikach CSS . Jest to sprzeczne z wytycznymi Google dotyczącymi indeksowania (Chrome DevSummit 2019, How to Make Your Content Shine on Google Search, Martin Splitt).
11. Nie używaj funkcji @import w plikach CSS . Tworzy to zagnieżdżone drugie żądanie CSS.
12. Spróbuj użyć mniejszej liczby zewnętrznych plików CSS, aby skrócić CSSOM, lub spróbuj połączyć je, aby skrócić czas wyszukiwania DNS i połączenia zasobów.
13. Możesz także sprawdzić swoje długie selektory i ich specyfikę. Jeśli są zbyt długie, musisz zgłosić je swojemu zespołowi IT lub możesz spróbować poprawić je samodzielnie jako SEO techniczne. Długie selektory i powtarzające się niepotrzebne właściwości CSS z tymi samymi wartościami są dużym obciążeniem dla przeglądarek i procesorów telefonu.
    

Pamiętaj, że CSSOM ma drzewo hierarchiczne, podobnie jak DOM. Stosuje bieżące reguły najpierw do największego elementu, a elementy potomne pozostają pod wpływem, dopóki przeglądarka nie odczyta kodu napisanego specjalnie dla nich.

W CSSOM wszystkie elementy CSS ID, Class i Properties oraz Value są wymienione zgodnie ze strukturą semantyczną elementów HTML DOM. CSSOM pochodzi z tego samego dokumentu HTML, co DOM. Głównym powodem, dla którego nie wskazałem węzłów HTML w CSSOM, jest zwrócenie uwagi na hierarchiczną strukturę kodów CSS.

Jak przeglądarki renderują stronę?

Wykonywanie CSSOM to nie to samo, co renderowanie. Gdy DOM i CSSOM są odczytywane w tej samej hierarchii, renderowanie jest procesem łączenia tych dwóch drzew kodu od góry do dołu w oknie roboczym.

Podczas renderowania niektóre fragmenty kodu, które istnieją podczas przetwarzania DOM i CSSOM, mogą być wyłączone. Głównym tego powodem jest to, że nie są widoczne lub są wyłączone przez inny kod. Dlatego optymalizacja kodu, który nie jest uwzględniony w drzewie renderowania, ale pojawia się w DOM i CSSOM, jest przydatna dla szybkości strony.

Powyżej dane DOMContentLoaded w narzędziach Chrome DevTools pokazują czas potrzebny do załadowania i przeanalizowania dokumentów HTML i CSS.

Dlatego spójność między głównym wątkiem wydajności i sekcjami drzewa wywołań daje zbliżone wyniki. Wszystkie przykłady pochodzą z tej samej witryny.

Jeśli chcesz obliczyć tylko DOM, musisz sprawdzić czas domInteractive, który nie jest pokazywany przez DevTools, ale można go zmierzyć za pomocą Navigation Timing API.

Po zdarzeniu DomContentLoaded Twoja przeglądarka uruchomi drzewo renderowania i zobaczysz, że piksele ekranów są pokolorowane znaczącymi informacjami i wyglądem. W tym czasie do gry wejdzie również renderowanie JavaScript, które natychmiast podzieli, zmieni i odmaluje drzewo renderowania.

Co dalej?

Prawidłowo ustrukturyzowana kolejność zasobów, liczba żądań zasobów oraz relacja renderowania z drzewem i JavaScriptem zmniejszają koszt pod względem szybkości strony.

W następnym artykule z tej serii przyjrzymy się, w jaki sposób odnosi się to do zaawansowanych wskaźników szybkości strony i jak Google postrzega szybkość strony.