Rendering: Unterschied zwischen den Versionen

Aktuelle Version vom 23. Januar 2024, 16:48 Uhr

Was ist Rendering?

Rendering ist ein in der Webentwicklung verwendeter Prozess, der den Code einer Website in interaktive Seiten umwandelt, die Usern bei ihrem Besuch angezeigt werden. Der Begriff bezieht sich im Allgemeinen auf die Nutzung von HTML, CSS und JavaScript-Code. Der Prozess wird von einer Rendering-Engine – einer von Webbrowsern genutzten Software – durchgeführt. Da sie in engem Zusammenhang mit Webbrowsern stehen, werden Rendering-Engines oft als Browser-Engines bezeichnet.

Wie gehen Webbrowser beim Rendern vor?

Webbrowser rendern Webseiten im Netz in der folgenden Reihenfolge:

Erstellen von DOM und CSSOM aus Rohcode

• Beim Laden einer Seite sendet der Webserver einen Ordner mit Dateien, die HTML, CSS und JavaScript-Code enthalten, an den Webbrowser des Users.
• Die Browser-Engine wandelt diese Daten (Bytes) in Zeichen (HTML-Code) um.
• Sie gliedert die Zeichen in sogenannte Token^[1], die dann weiter in Nodes geparst werden^[2].
• Die Browser-Engine verbindet diese Knoten zu einer baumartigen Struktur, was als Document Object Model (DOM) bezeichnet wird. Das DOM ist die JavaScript-Darstellung des HTML-Codes.
• Gleichzeitig konvertiert der Browser den CSS-Code durch einen ähnlichen Prozess in ein CSS Object Model (CSSOM).

Beispiel für HTML-Rendering von developers.google.com

Nutzung des Render-Baums, um die Endnutzer-Seite zu erstellen

• Die Browser-Engine kombiniert DOM und CSSOM, um eine baumartige Struktur zu schaffen, die als Render-Baum bezeichnet wird. Dieser Render Tree enthält die Informationen über Stil und Content, den der Browser benötigt, um die Seite für den Besucher zu füllen, das Layout für alle sichtbaren Elemente der Seite zu berechnen und dem Endnutzer auf dem Bildschirm ein sichtbares Bild zu bieten.
• Der nächste Schritt besteht aus der Anordnung des Layouts. Mithilfe des Render-Baums berechnet die Browser-Engine die Position eines jeden sichtbaren Elements auf einer Seite.
• Schließlich fügt die Browser-Engine die Elemente auf dem Bildschirm für die Endnutzer-Ansicht hinzu oder erstellt ein Bild davon. Nun ist die Webseite gerendert.

Dynamisches Rendering

JavaScript ist eine beliebte Wahl zum Rendern von Webseiten, da hierdurch eine intuitive User Experience geschaffen wird. Allerdings haben viele Suchmaschinen-Crawler Probleme damit, JavaScript ordnungsgemäß zu verarbeiten^[3]. Somit gehen Websites, die den Großteil ihres Contents und ihrer Navigation über JavaScript darstellen, das Risiko ein, von Webcrawlern nicht gesehen zu werden. Dieses Problem wird durch dynamisches Rendern gelöst. Wie oben beschrieben wird eine Webseite dabei für menschliche Nutzer gerendert, während statischer HTML-Code für Suchmaschinen-Crawler und für die Indexierung gerendert werden.

Page Rendering Speed

Der Begriff Page Rendering Speed bezieht sich auf die Zeit, die zum Generieren einer Seite benötigt wird. Die Geschwindigkeit wird ab dem Zeitpunkt gemessen, an dem die Browseranfrage gesendet wird (wenn ein User auf einen Link klickt), bis die Seite dem Nutzer mit allen Funktionen zur Verfügung steht. Page Rendering Speed und Page Load Speed (die Zeit, bis Nutzern eine Seite angezeigt wird) werden synonym verwendet, da beide Prozesse normalerweise innerhalb von Sekundenbruchteilen ablaufen.

Eine geringe Page Rendering Speed erhöht die Bounce Rate und verringert die Anzahl der Conversions. Laut einer Studie von Google waren die Ladezeiten bei abgebrochenen Sessions um 2,5 Sekunden langsamer als bei Sessions, die nicht beendet wurden^[4].

Bild der Bounce Rate pro Seite von thinkwithgoogle.com. Eine schnellere Page Rendering Speed hat eine niedrigere Bounce Rate zur Folge.

Da die Geschwindigkeit des Renderings auch die User Experience beeinflusst, erklärte Google den Pagespeed im Jahr 2010 zu einem offiziellen Rankingfaktor. ^[5] Die Geschwindigkeit beim Page Rendering und den allgemeinen Pagespeed so schnell wie möglich zu halten, ist daher eine wichtige Aufgabe der SEO.

Relevanz für die SEO

Das Rendern von Webseiten wirkt sich darauf aus, wie eine Seite von Bots indexiert und von Usern wahrgenommen wird. In jedem Entwicklerteam sollte aus diesem Grund der Einfluss des Renderns auf Suchmaschinen-Rankings und SEO ein wichtiger Aspekt sein, den es zu beachten gilt.

Zusammenfassend lässt sich sagen, dass für viele Websites (z. B. von Online-Händlern) die Erstellung einer Website hauptsächlich in JavaScript das benutzerfreundlichste und ästhetisch ansprechendste Interface bieten kann. Suchmaschinen-Bots können allerdings Schwierigkeiten damit haben, diese Websites zu crawlen, was sich negativ auf die Suchmaschinen-Rankings und den organischen Traffic auswirken kann. Seiten, die nur langsam gerendert werden, haben wiederum einen negativen Einfluss auf die User Experience und die Rankings bei Suchmaschinen.

Angesichts dessen müssen Webentwickler die Anforderungen sowohl an Bots als auch an Menschen sorgfältig beachten, wenn sie die SEO-Performance optimieren möchten.

Einzelnachweise

1. ↑ Anatomy of a Compiler Abgerufen 11. Dezember 2020.
2. ↑ Netzwerkknoten Computer Weekly. Abgerufen 20. Mai 2021.
3. ↑ Dynamisches Rendering implementieren Google Search Central. Abgerufen 8. Dezember 2020.
4. ↑ Why marketers should care about mobile page speed Think with Google. Abgerufen 3. Dezember 2020.
5. ↑ Using site speed in web search ranking Google Search Central. Abgerufen 11. Dezember 2020.

Weiterführende Links

• https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction
• https://www.html5rocks.com/de/tutorials/internals/howbrowserswork/
• https://developers.google.com/search/docs/guides/javascript-seo-basics?hl=de
• https://blog.bloofusion.de/rendern-google/

Ähnliche Artikel

• HTML
• Pagespeed

Über den Autor

Das Seobility Wiki Team besteht aus SEO-, Online-Marketing- und Web-Experten mit praktischer Erfahrung in den Bereichen Suchmaschinenoptimierung, Online-Marketing und Webentwicklung. Alle unsere Artikel durchlaufen einen mehrstufigen Redaktionsprozess, um Dir die bestmögliche Qualität und wirklich hilfreiche Informationen bieten zu können. Mehr Informationen über das Seobility Wiki Team.