Eine Einführung in die Webleistung und den kritischen Rendering-Pfad

Die meisten von uns arbeiten jeden Tag mit dem Internet. Es ist für uns normal geworden, dass wir alle benötigten Informationen fast sofort erhalten. Aber wie diese Webseite tatsächlich zusammengestellt und an uns geliefert wird, ist ein Rätsel.

Manchmal sind Webseiten erstaunlich schnell, und manchmal müssen wir lange warten, um den Inhalt zu sehen - was oft dazu führt, dass wir ziemlich frustriert sind und die Seite verlassen. Im folgenden Artikel werde ich versuchen, die Dinge ein wenig aufzuklären.

Haftungsausschluss : Alle Informationen , ich bin in diesem Beitrag teilen ist das, was ich durch die kostenlose Kurse an der Unterseite erwähnt gelernt haben und zusammengefasst hier für alle Interessierten.

Der kritische Renderpfad

Zunächst wäre es hilfreich zu verstehen, welche Schritte der Browser tatsächlich durchläuft. Es beginnt mit einfachen HTML-, CSS- und JavaScript-Dateien, die das Rendern und Malen einer Seite durchlaufen und am Ende zu dem werden, was der Benutzer sieht.

Diese Schritte von Ihren verschiedenen HTML-, CSS- und JS-Dateien zu einer gemalten Seite werden im Allgemeinen als Critical Rendering Path (kurz CRP) bezeichnet.

Der Critical Rendering Path besteht aus fünf verschiedenen Schritten, die am besten in einer Grafik erklärt werden.

Aufbau des DOM und des CSSOM

Die meisten Webseiten bestehen aus HTML, CSS und JavaScript, die alle einen wichtigen Bestandteil des CRP bilden. Um Ihren HTML-Code zu lesen und zu verarbeiten, erstellt der Browser das Document Object Model (DOM). Der Browser betrachtet die HTML-Tags (

,

,

und

etc) in Ihrem Markup und konvertiert sie in Token, die wiederum parallel zu Knoten erstellt werden. Indem der Browser diese StartTag-Token und EndTag-Token der Reihe nach verarbeitet und feststellt, welche zuerst kommen, kann er ihre Hierarchie festlegen und Eltern und Kinder festlegen.

Lassen Sie sich von dieser Terminologie jedoch nicht erschrecken. Stellen Sie sich das DOM als einen großen Baum mit Zweigen vor, die übergeordnete Knoten darstellen und die wiederum Blätter enthalten, die untergeordneten Knoten. Dieser Baum stellt die Abhängigkeiten von Knoten in unserem HTML dar und sieht ungefähr so ​​aus:

Im obigen Bild sehen wir das Stammelement, das alle seine Kinder umfasst, die wiederum Eltern sind, die auch Kinder enthalten. Stellen Sie das auf den Kopf und es wird fast wie ein Baum aussehen!

Das DOM repräsentiert somit unser komplettes HTML-Markup. Wie Sie gesehen haben, wird es schrittweise aufgebaut, indem die Token verarbeitet und in Knoten konvertiert werden. Tatsächlich können wir dies zu unserem Vorteil nutzen, indem wir teilweise HTML zurückgeben und unserem Benutzer den Hinweis geben, dass etwas passiert, und auf der Seite rendern.

Nach dem Erstellen des DOM verarbeitet Ihr Browser das CSS und erstellt das CSS-Objektmodell (CSSOM). Dieser Prozess ist dem Erstellen des DOM sehr ähnlich. In diesem Prozess erben die untergeordneten Knoten im Gegensatz zu zuvor die Stilregeln ihrer übergeordneten Knoten - daher der Name Cascading Style Sheets (CSS).

Leider können wir partielles CSS nicht schrittweise verarbeiten, wie wir es mit dem DOM tun könnten, da dies leicht dazu führen kann, dass die falschen Stile angewendet werden, wenn später im Prozess ein überschreibender Stil auftritt. Dies ist der Grund, warum CSS das Rendern blockiert, da der Browser das Rendern beenden muss, bis er das gesamte CSS empfängt und verarbeitet.

Unser DOM-Baum und CSSOM-Baum enthalten alle Knoten und Abhängigkeiten, die wir auf unserer Seite haben.

Sortieren aller sichtbaren Inhalte - Der Renderbaum

Der Browser muss wissen, welche Knoten tatsächlich visuell auf der Seite dargestellt werden sollen. Der Renderbaum erreicht genau das und ist eine Darstellung des sichtbaren Inhalts von DOM und CSSOM.

Wir beginnen mit der Erstellung des Renderbaums, indem wir den Stammknoten identifizieren und dann alle sichtbaren Informationen aus dem DOM und CSSOM kopieren. Dazu überprüfen wir auch, ob wir nach Tags suchen, die denselben Selektor haben. Metadaten, Links usw. werden nicht in den Renderbaum kopiert. Gleiches gilt für CSS, das "display: none;" enthält. da es auch ein nicht sichtbarer Gegenstand ist.

Sobald wir diesen Vorgang abgeschlossen haben, erhalten wir etwas Ähnliches wie das Folgende (beachten Sie, dass die 'Webleistung' nicht kopiert wird).

Der Renderbaum ist eine ziemlich genaue Beschreibung dessen, was Ihnen tatsächlich auf dem Bildschirm angezeigt wird, und erfasst sowohl den Inhalt als auch die zugehörigen Stile. Natürlich würde dies in Beispielen aus dem wirklichen Leben viel komplexer aussehen.

Richtig passen - Layout

Während wir jetzt wissen wasWir müssen die Seite anzeigen und rendern. Es ist wichtig zu wissen, wie sie gerendert wird. Damit das Layout korrekt aussieht, müssen wir die Größe des Browsers kennen. Unser Layout hängt davon ab, um die richtigen Positionen und Abmessungen für alle unsere Elemente auf der Seite zu berechnen.

All dies geschieht während des Layout-Schritts. Die Berücksichtigung des Layout-Schritts ist besonders wichtig für Mobilgeräte, bei denen sich unser Blickwinkel ändern kann, wenn wir beim Drehen unserer Telefone zwischen Quer- und Hochformat wechseln. Dies bedeutet, dass der Browser den Layoutschritt jedes Mal neu ausführen muss, wenn wir unser Telefon drehen, was einen erheblichen Leistungsengpass darstellen kann.

Malen Sie die Pixel

In diesem Schritt werden die Pixel tatsächlich auf den Bildschirm gezeichnet, angegeben durch was (Renderbaum) und wie (Layout). Der Malschritt umfasst das eigentliche Malen von Pixeln (z. B. beim Ändern der Bildgröße), anstatt es nur zu positionieren. Es ist das, was Sie später auf Ihrem Bildschirm sehen.

Fassen wir zusammen

Lassen Sie uns nun alle diese Informationen noch einmal zusammenfassen, damit wir sehen können, dass wir alle Schritte erfasst haben, die wir im Critical Rendering Path (CRP) ausführen müssen.

  1. Der Browser erstellt zunächst das DOM, indem er den gesamten relevanten HTML-Code analysiert.
  2. Anschließend werden die CSS- und JavaScript-Ressourcen untersucht und angefordert. Dies geschieht normalerweise in dem Kopf, in dem wir normalerweise unsere externen Links platzieren.
  3. Der Browser analysiert dann das CSS und erstellt das CSSOM, gefolgt von der Ausführung des JavaScript.
  4. Anschließend werden DOM und CSSOM im Renderbaum zusammengeführt.
  5. Anschließend führen wir den Schritt Layout und Malen aus, um die Seite dem Benutzer zu präsentieren.

Okay, das ist gut zu wissen - aber warum ist das wichtig?

Nun ist das alles gut zu wissen, und wir haben ein besseres Verständnis dafür gewonnen, was der Browser tatsächlich im Hintergrund tut. Aber warum ist das genau wichtig? Müssen wir alle wissen, was unter der Haube passiert?

Ja, machen wir!

Wenn wir die Größe unserer Dateien weiter erhöhen und nicht darauf achten, was der Browser zum Rendern und Malen der Seite benötigt, benötigt der Browser länger, um alle Ressourcen zu verarbeiten. Dies führt normalerweise zu einer langsameren und weniger angenehmen Benutzererfahrung, was bedeutet, dass Seiten nicht verwendet und korrekt wiedergegeben werden können, was zu Frustration auf der Benutzerseite führt.

Dies gilt insbesondere dann, wenn Sie eine Seite aus einem ländlichen Gebiet anfordern, in dem schnelles Breitband nicht unbedingt das beste ist.

Aber zum Glück gibt es ein paar Möglichkeiten, dies zu umgehen, und wir können unsere Seiten schneller machen!

Leistung optimieren

Es gibt eine Reihe von Strategien, mit denen wir unsere Seiten schneller und besser für unsere Benutzer verwenden können. Dies ist besonders wichtig für Benutzer, die sich möglicherweise an entlegeneren Orten befinden, an denen ein schnelleres Internet nicht die Norm ist oder auf die häufig über das mobile Internet auf Seiten zugegriffen wird.

Wenn wir von Optimierungsstrategien sprechen, stehen uns ungefähr drei Techniken zur Verfügung.

Minimieren, Komprimieren und Zwischenspeichern

Diese Techniken können alle auf HTML, CSS und JS angewendet werden. Durch ihre geringere Größe reduzieren sie dann die Datenmenge, die wir zwischen dem Client und dem Server hin und her senden. Je weniger Bytes gesendet werden müssen, desto schneller erhält der Browser die Daten und beginnt mit der Verarbeitung und dem Rendern der Seite.

Minimieren Sie den Einsatz von Render-Blocking-Ressourcen (CSS).

CSS selbst blockiert das Rendern, wie oben erläutert. Dies bedeutet, dass der Browser das Rendern der Seite beendet, bis das CSS vollständig geladen und verarbeitet wurde.

Wir können jedoch große CSS-Dateien reduzieren, indem wir das Rendering für bestimmte Stile und Ansichtsfenster entsperren. Wir verwenden dazu Druckregeln in unseren Medienabfragen, Analysen und Geräteorientierungen (wenn Sie wissen möchten, wie), empfehlen wir Ihnen, die folgenden Ressourcen zu lesen). Wir können außerdem die Anzahl der Ressourcen reduzieren, die geladen werden müssen, indem wir unter bestimmten Umständen einige unserer CSS einbinden.

Minimieren Sie die Verwendung von Ressourcen zum Blockieren von Parsern (JS-Dokumentparser).

Wir können auch die Ausführung unseres JavaScript verschieben und asynchrone Attribute in unserem Skript verwenden, um dies zu erreichen. Dies bedeutet, dass der Rest der Seite verarbeitet werden kann und der Benutzer in der Zwischenzeit einen Hinweis darauf sieht, dass auf der Seite etwas passiert. Dies bedeutet auch, dass wir nicht auf das Laden des JavaScript warten müssen.

Im Großen und Ganzen bleiben uns drei Optimierungsmuster:

  1. Minimieren Sie die Anzahl der gesendeten Bytes
  2. Reduzieren Sie die Anzahl der kritischen Ressourcen im kritischen Rendering-Pfad (Analytics müssen möglicherweise nicht gleich zu Beginn geladen werden, wenn die Seite erstellt wird).
  3. Verkürzen Sie die kritische Länge des Renderpfads (dh reduzieren Sie die Anzahl der Roundtrips zwischen Ihrem Browser und dem Server, die wir zum Rendern der Seite benötigen).

Versuch es selber

Wenn Sie dies ausprobieren und mit der Optimierung beginnen möchten, können Sie die Leistung Ihrer Website oder anderer Websites mit einer Reihe von Tools messen. Am einfachsten sind wahrscheinlich Google-Produkte wie PageSpeedInsights oder Google Lighthouse, eine praktische kleine Google Chrome-Erweiterung, die Sie einfach über den Chrome App Store installieren können.

Klicken Sie einfach auf die Erweiterung und generieren Sie einen Bericht. Sie erhalten einen Bericht, der Folgendes enthält:

Anschließend können Sie Ihre Leistung mit einer Reihe von Messwerten vergleichen, z. B. "Auf den Bildschirm gemaltes erstes Pixel", "Erstes interaktives", "Visuelle Vollständigkeit Ihrer Website" und viele andere.

Die Dev Tools Ihres Lieblingsbrowsers sind auch ein großartiger Ort, um Ladezeiten und Leistungsengpässe herauszufinden. Wenn Sie die Ladezeiten insgesamt niedrig halten, erhöht sich auf jeden Fall die Gesamtgeschwindigkeit, mit der Ihre Website Ihren Endbenutzern bereitgestellt wird.

Fazit

Hoffentlich hat dies etwas Licht in das Innenleben gebracht, wie Ihr Browser Ihnen eine Seite anzeigt, und in die schwere Arbeit, die er im Hintergrund ausführen muss, um sicherzustellen, dass HTML, CSS und JavaScript korrekt transformiert werden.

Wenn wir uns dieser Schritte bewusst sind, können wir vorhandene Seiten leistungsfähiger machen. Es ermöglicht uns aber auch, uns darüber im Klaren zu sein, wie wir Anwendungen und Websites entwickeln, und darüber nachzudenken, wie unsere Seiten in anderen Regionen der Welt nach Menschen aussehen.

Ressourcen

Das meiste meines Wissens, das ich hier geteilt habe, habe ich durch Folgendes erworben:

  1. Website-Leistungsoptimierung auf Udacity
  2. Warum Leistung bei Google-Entwicklern wichtig ist
  3. Hochleistungs- Browsernetzwerk von Ilya Grigorik (//hpbn.co/)
  4. Hochleistungswebsites: Grundlegendes Wissen für Front-End-Ingenieure von Steve Souders