Wie wirken sich DCL und FCP auf die SEO aus? | Web-Performance-Metriken

Was ist DCL?

DCL, kurz für DOMContentLoaded, ist eine wichtige Performance-Metrik für Webseiten. DCL misst den Punkt, an dem ein Browser bereit ist, Client-seitiges Scripting zu implementieren. Technischer ausgedrückt ist DCL die Zeit während des Ladevorgangs einer Webseite, wenn das DOM (Document Object Model) vom Browser zusammengesetzt wurde und keine Stylesheets die Ausführung von JavaScript verhindern. (Zum besseren Verständnis dieser Begriffe siehe „Kurze Anmerkung zur Funktionsweise von Webseiten“ weiter unten).

Was ist das DOM (Document Object Model)?

DOM ist eine Abkürzung für Document Object Model. Das Document Object Model ist eine Darstellung der Struktur einer Webseite, ungefähr wie eine Gliederung einer Forschungsarbeit mit Punkten und Unterpunkten. Alternativ kann man sich das DOM als Baum vorstellen, wobei die Seite selbst die Wurzel bildet und in die verschiedenen HTML-Elemente der Seite verzweigt.

DOMContentLoaded bedeutet, dass der Browser dieses Modell der Seite aus dem empfangenen HTML-Code generiert hat. Es bedeutet auch, dass er bereit ist, Skripte auszuführen und dynamische Inhalte anzuzeigen.

Was ist FCP?

First Contentful Paint – oder FCP – ist eine weitere entscheidende Performance-Metrik. FCP misst den Zeitpunkt, an dem der erste Inhalt aus dem DOM gerendert wird, d. h. wann das erste HTML-Element angezeigt wird. Dabei kann es sich um Text, Bilder oder alles handeln, was ein Benutzer als Teil der Webseite betrachten würde. First Contentful Paint unterscheidet sich von First Paint (FP), bei dem gemessen wird, wann ein beliebiges Element der Seite gerendert wird.

Es gibt mehrere andere Performance-Metriken, die ein „erstes“ Auftreten messen. Time To First Byte (TTFB) misst zum Beispiel, wann das allererste Byte von einem Webserver den Browser erreicht. FCP misst jedoch den ersten Zeitpunkt, an dem ein Benutzer erkennen kann, dass das erfolgreiche Laden einer Seite beginnt. Damit der Benutzer weiterhin an einer Website interessiert ist, kommt es auf seine Wahrnehmung der Web-Performance an. Deshalb ist die TTFB ist aus Sicht eines Benutzers fast irrelevant.

Wie wirken sich DCL und FCP auf die SEO aus?

Die Geschwindigkeit einer Website ist ein grundlegender Aspekt einer soliden SEO-Strategie (Suchmaschinenoptimierung). Performance ist ein besonders wichtiger Faktor für das Ranking in den Google-Suchmaschinen. DCL und FCP sind zwei Metriken, die Google bei der Bewertung der Performance hervorhebt, und Google PageSpeed Insights hilft Entwicklern bei deren Messung. (Google teilt zwar nicht genau mit, in welchem Maße diese beiden Performance-Metriken in die Suchrangfolge eingehen, berücksichtigt sie aber auf jeden Fall).

Entwickler können eine Reihe von Schritten unternehmen, um diese Performance-Metriken für eine Website zu verbessern. Caching und Einsatz eines CDN sind zwei wesentliche Schritte zur Verbesserung der DCL- und FCP-Zeiten.

Wie verbessert Cloudflare DCL und FCP?

Das Cloudflare-CDN beschleunigt Websites erheblich, indem es Inhalte an Orten auf der ganzen Welt zwischenspeichert, so dass HTTP-Anfragen viel schneller beantwortet werden. Infolgedessen erhalten die Browser den HTML-Code einer Seite schneller, wodurch diese beiden Metriken verbessert werden.

Kurze Anmerkung zur Funktionsweise von Webseiten

Eine Webseite besteht aus einer Kombination aus HTML-Code, CSS-Code und JavaScript-Code. Wenn ein Browser eine Webseite anfordert, sendet der entsprechende Webserver eine HTML-Datei, die u. a. eine Liste aller CSS-, JavaScript- und anderer Assets enthält, die der Browser dann separat anfordern muss.

• HTML (Hypertext Markup Language) ist ein Code, der Anweisungen für Browser zur Darstellung von Inhalten und zur Anforderung anderer Assets enthält.
• CSS (Cascading Style Sheets) ist Code, der weitere Anweisungen zur Darstellung von HTML-Inhalten und zum Layout von Webseiten enthält.
• JavaScript ist eine Programmiersprache, die HTML-Inhalte übernehmen und ändern kann, wenn bestimmte Bedingungen erfüllt sind. Darüber hinaus kann JavaScript für komplexere Aufgaben wie 3D-Rendering, Spiele oder andere technisch komplexe Aktivitäten verwendet werden.

Die HTML-Datei enthält den Inhalt, der auf der Seite erscheint, Anweisungen zur Darstellung dieses Inhalts sowie Anweisungen zum Laden anderer Inhalte, wie z. B. von Bildern, aus anderen Quellen. Sie enthält Links zu CSS-Dateien (Stylesheets) und zu JavaScript-Bibliotheken mit weiteren Anweisungen. Der Browser nimmt dann diesen Code, interpretiert ihn und stellt die resultierende Webseite dar.

In den meisten Browsern kann man die HTML-Datei, die der Browser gerade interpretiert, dadurch anzeigen, dass man mit der rechten Maustaste auf eine beliebige Webseite klickt und im Dropdown-Menü „Seitenquelle anzeigen“ auswählt. Die HTML-Datei wird dann in einem neuen Tab geöffnet. Der Text der Datei beginnt fast immer mit „<!DOCTYPE html>“.