So beseitigen Sie Render-blockierende Ressourcen

Render-Blocking-Ressourcen sind ein wichtiger Bestandteil der Optimierung der Infrastruktur Ihrer Webseite.

Sie zu reduzieren kann dazu beitragen, dass Ihre Seite viel schneller geladen wird, und die Core Web Vitals Ihrer Seite erheblich verbessern.

Zu diesen Ressourcen, die das Rendern blockieren, gehören Dinge wie externe Schriftarten, deren Laden zu lange dauert (die nicht verwendet werden müssen), unnötige Mediendateien, aufgeblähter Code, der einfach nicht verschwindet, und zusätzliche Plug-Ins, die nicht verschwinden notwendig.

Es gibt unzählige dieser Arten von Ressourcen, die Sie komprimieren und kombinieren können, um einzelne Dateien zu erstellen, die schneller auf Ihre Geräte heruntergeladen werden und eine viel schnellere Seitengeschwindigkeit erzeugen.

Indem Sie Ihre Seitenstruktur in dieser Hinsicht optimieren, können Sie den Arbeitsaufwand reduzieren, den Google zum Crawlen Ihrer Website leisten muss, und Sie können dadurch Ihre Benutzererfahrung verbessern.

Zu den vollen Vorteilen dieses Prozesses gehören:

• Schnellere Seitengeschwindigkeit.
• Weniger Ressourcen, die von Google zum Laden Ihrer Seite benötigt werden.
• Reduzierung von Problemen, die durch aufgeblähten Code verursacht werden.
• Kleinere Gesamtdateigröße Ihres DOM (Dokumentobjektmodell).
• Weniger herunterzuladende JavaScript- und CSS-Dateien.
• Bessere und schnellere Bereitstellung auf einer Reihe von Plattformen und Geräten.
• Verbesserte Benutzerinteraktion auf Mobilgeräten.
• Insgesamt verbesserte Leistung.

Es ist klar, dass die Durchführung dieser Art von Optimierungsprozess auf Ihrer Website enorme Vorteile bietet.

Warum sollten Sie Render-Blocking-Ressourcen identifizieren?

Das Identifizieren und Reduzieren von Ressourcen, die für das Blockieren der Darstellung Ihrer Webseite verantwortlich sind, ist ein kritischer Optimierungspunkt, der Ihre Seitengeschwindigkeit beeinträchtigen oder beeinträchtigen kann.

Es kann so wichtig sein, dass es sich als Ergebnis für die Seitenerfahrungsmetriken Ihrer Website (und die Zufriedenheit Ihrer Benutzer) auszahlt.

Im Jahr 2021 betrug die durchschnittliche Zeit, die zum vollständigen Rendern einer mobilen Webseite benötigt wurde, 22 Sekunden. 2018 waren es 15 Sekunden.

Dies ist eindeutig eine wesentlich höhere Zahl als die von Google empfohlene Zeit von zwei bis drei Sekunden. Es ist auch wesentlich höher als früher.

Was könnte diese Probleme mit Render-Blocking-Ressourcen verursachen?

Was treibt diese Erhöhung der gesamten Seitenrendergeschwindigkeit an?

Ein interessanter Trend ist die zunehmende Abhängigkeit von Schriftarten von Drittanbietern im Vergleich zu Systemschriftarten. Die Verwendung von Schriftarten von Drittanbietern als Ressource beeinträchtigt in der Regel die Verarbeitung und Darstellung einer Seite.

Bei Systemfonts muss der Browser nichts extra laden, er hat also diesen zusätzlichen Verarbeitungsschritt nicht zur Folge.

Screenshot aus Web Almanac, November 2022

Diese branchenübergreifende Abhängigkeit wirkt sich wahrscheinlich auf diese Renderzeit aus. Dies ist natürlich nicht die einzige Ursache für dieses Problem mit Render-Blocking-Ressourcen.

Darüber hinaus haben die eigenen Dienste von Google in der Regel einen erheblichen Einfluss auf die Renderingzeit, wie z. B. Google Analytics oder die Verwendung eines Facebook-Pixels eines Drittanbieters für Tracking-Zwecke.

Der Wunsch, sich auf solche Technologien zu verlassen, ist aus Marketingsicht nicht unbedingt schrecklich.

Aus der Perspektive von Ressourcen, die das Rendern blockieren, kann dies jedoch zu einer erheblichen Verlängerung der Seitenladezeit und der Wahrnehmung Ihrer Seite durch Google (und Benutzer) führen.

Die ideale Lösung besteht darin, sicherzustellen, dass Ihre Seite für die Benutzerinteraktion so schnell wie möglich geladen wird.

Es ist auch möglich, dass schlechte Webentwicklungspraktiken, die heute von Webentwicklern verwendet werden, schuld sind.

In jedem Fall sollte dies bei jedem Website-Projekt im Rahmen Ihrer Core Web Vitals-Audits berücksichtigt werden.

Bei der Seitenerfahrung geht es jedoch nicht nur darum, wie schnell die gesamte Seite geladen wird.

Stattdessen geht es mehr um das Gesamterlebnis der Seite, gemessen durch Googles Page Experience Framework oder Core Web Vitals.

Aus diesem Grund sollten Sie daran arbeiten, Ihre Seitengeschwindigkeit für den kritischen Rendering-Pfad im gesamten DOM- oder Dokumentobjektmodell zu verbessern und zu optimieren.

Was ist der kritische Renderpfad?

Der kritische Rendering-Pfad bezieht sich auf alle Schritte, die zum Rendern der gesamten Seite erforderlich sind, vom Beginn des ersten Datenempfangs durch den Browser bis zum endgültigen Kompilieren der Seite beim endgültigen Rendern.

Dies ist ein Vorgang, der nur wenige Millisekunden dauern kann, wenn Sie ihn richtig optimieren.

Die Optimierung für den kritischen Renderpfad bedeutet sicherzustellen, dass Sie die Renderleistung auf vielen verschiedenen Geräten optimieren.

Dies wird erreicht, indem der kritische Rendering-Pfad optimiert wird, um so schnell wie möglich zu Ihrer ersten Farbe zu gelangen.

Im Grunde reduzieren Sie die Zeit, die Benutzer damit verbringen, auf einen leeren weißen Bildschirm zu schauen, um so schnell wie möglich visuelle Inhalte anzuzeigen (siehe 0,0 Sekunden unten).

Screenshot von web.dev, November 2022

Es gibt einen ganzen Prozess, wie das geht, der in der Dokumentation des Google-Entwicklerhandbuchs beschrieben ist, aber ich werde mich insbesondere auf einen schweren Schlager konzentrieren: die Reduzierung von Render-Blocking-Ressourcen.

Wie funktioniert der kritische Rendering-Pfad?

Der kritische Rendering-Pfad bezieht sich auf die Reihe von Schritten, die ein Browser auf seiner Reise zum Rendern einer Seite unternimmt, indem HTML, CSS und JavaScript in tatsächliche Pixel auf dem Bildschirm konvertiert werden.

Screenshot von Medium, November 2022

Im Wesentlichen muss der Browser alle HTML- und CSS-Dateien (plus einige zusätzliche Arbeiten) anfordern, empfangen und analysieren, bevor er mit dem Rendern visueller Inhalte beginnt.

Dieser Vorgang erfolgt (in den meisten Fällen) innerhalb von Sekundenbruchteilen. Benutzer sehen eine leere weiße Seite, bis der Browser diese Schritte abgeschlossen hat.

Das Folgende ist ein Beispiel dafür, wie Benutzer erleben können, wie eine Seite entsprechend den verschiedenen Phasen des Seitenladeprozesses geladen wird:

Screenshot von web.dev, November 2022

Die Verbesserung des kritischen Rendering-Pfads kann somit das allgemeine Seitenerlebnis verbessern, was dazu beitragen kann, die Leistung der Core Web Vitals-Metriken zu verbessern.

Wie optimiere ich den kritischen Rendering-Pfad?

Um den kritischen Renderpfad zu verbessern, müssen Sie Ihre Renderblocker-Ressourcen analysieren.

Ressourcen, die das Rendering blockieren, können das anfängliche Rendering der Seite blockieren und sich dadurch negativ auf Ihre Core Web Vitals-Ergebnisse auswirken.

Dies beinhaltet einen Optimierungsprozess von:

• Reduzieren der Anzahl der Ressourcen , die für den Rendering-Pfad kritisch sind. Dies kann durch Verwendung einer Defer-Methode für alle möglichen Render-Blocking-Ressourcen erfolgen.
• Priorisieren Sie Inhalte , die „above the fold“ sind, und laden Sie wichtige Medieninhalte so früh wie möglich herunter.
• Komprimieren Sie die Dateigröße aller verbleibenden kritischen Ressourcen.

Auf diese Weise ist es möglich, sowohl Core Web Vitals als auch die physische Darstellung Ihrer Seite für den Benutzer zu verbessern.

Bevor Sie Optimierungstechniken besprechen, die Sie zum Optimieren des kritischen Rendering-Pfads verwenden können, ist es wichtig, den anfänglichen Browser-Ladeprozess zu besprechen und warum der kritische Rendering-Pfad so wichtig ist.

Und dieser Prozess beinhaltet:

• Seitenelemente vorab laden.
• Inlining kritischer Stile.
• Verzögern des Ladens von JavaScript-Dateien.
• Frühe Hinweise.

Seitenelemente vorab laden

Wenn die Seite vom Browser vom Server abgerufen wird, scannt der Browser zunächst alle herunterzuladenden Seitenelemente und findet sie. Standardmäßig geschieht dies in einem Prozess, bei dem der Browser alle Elemente gleichzeitig herunterlädt.

Aber was passiert, wenn Sie viele Seitenelemente herunterladen müssen (was häufig bei einer WordPress-Website passiert?) Nun, dies kann Serverressourcen in Anspruch nehmen, was die Ladezeit der Seite weiter erhöht.

Wie umgehen Sie das? Durch die Verwendung des Preload-Links zum asynchronen Herunterladen kritischer Dateien, die das Rendern der Seite blockieren (weiter unten in diesem Artikel erläutert).

Das Vorladen von Elementen ist eine Technik, die dazu beiträgt, Render-blockierende Stylesheets zu eliminieren, da sie kritische Dateien lädt, die für die erste Zeichenphase des Prozesses benötigt werden, bevor alle anderen Dateien geladen werden.

Sie können CSS, JS, Schriftarten oder Bilder vorab laden. Hier sind Beispiele, wie Sie sie vorab laden können:

JavaScript vorab laden

 <link rel="preload" as="script" href="critical.js">

CSS-Vorabladen

 <link rel="preload" href="style.css" as="style" />

Schriftarten vorab laden

 <link rel="preload" href="fonts/webfont.woff2" as="font" type="font/woff2" crossorigin />

Bilder vorladen

 <link rel=preload href="cat.png" as=image image>

Dies hilft, den Prozess der Seite zu beschleunigen. Dies ist jedoch keine ideale Methode.

Die ideale Methode besteht darin, die Website so zu optimieren, dass nur zwei bis drei Plugins und vielleicht zwei bis drei andere Dateien verwendet werden, und die Dinge für die vollständige Seitenwiedergabe auf das absolute Minimum beschränkt bleiben.

Leider ist dies kein realistisches Unterfangen.

Da WordPress-Seiten dazu neigen, viele Plugins und Ressourcen zu haben, mit denen Entwickler einfach nicht umgehen wollen (oder wollen), besteht der einfachste Weg zum Erfolg darin, sicherzustellen, dass diese Ressourcen durch die Verwendung bestimmter Plugins richtig optimiert werden.

Inlining kritischer Stile

Critical CSS ist eine Technik, die CSS für „above the fold“-Inhalte extrahiert, um Inhalte so schnell wie möglich für den Benutzer darzustellen.

Dies erfordert normalerweise mindestens:

• Beliebige Schriftartdeklarationen.
• Beliebiges layoutspezifisches CSS.
• Alle CSS-Stilregeln für die Above-the-Fold-DOM-Elemente (Document Object Model).

In unserem früheren Beispiel der Seite, in der alle Ressourcen gleichzeitig geladen werden, beinhaltet das Inlinen kritischer Stile die Verwendung von Code innerhalb des HTML-<head>-Tags selbst.

Wenn Sie beispielsweise den Quellcode von google.com überprüfen, sehen Sie, dass er wichtiges CSS in den <head>-Abschnitt des HTML-Codes eingebettet hat.

Screenshot aus dem Quellcode von Google.com, November 2022

Es gibt mehrere Tools, die helfen können, kritisches CSS zu extrahieren.

• Criticalcss.com.
• Kritisch.
• HTML Critical Webpack-Plugin.

Verzögern des Ladens von JavaScript-Dateien

Durch die Verwendung dieser Methode ist es möglich, das Laden von JavaScript-Dateien zu verzögern, bis andere kritische Elemente des DOM-Baums geladen sind. Dies ist jedoch mit einigen Einschränkungen verbunden.

Beispiel zum Zurückstellen einer JavaScript-Datei:

 <script defer src="script.js"></script>

Erstens können Sie das Erscheinungsbild der Website negativ beeinflussen, wenn Sie das Laden von JavaScript-Dateien verzögern, da einige dieser Elemente möglicherweise erforderlich sind, damit die Seite vollständig geladen werden kann.

Nummer zwei ist, wenn Sie nicht aufpassen, indem Sie das Laden von JavaScript-Dateien verschieben, könnten Sie möglicherweise Probleme mit der Interaktivität der Seite einführen (Interaktion zum nächsten Malen der Core Web Vitals-Metrik).

Nummer drei ist, dass Sie auch Probleme mit der Funktionsweise der Website insgesamt einbringen können.

Die Idee ist, dass Sie vorsichtig sein müssen, wenn Sie an diesen Arten von Optimierungen arbeiten, damit Sie nicht versehentlich an anderer Stelle im Prozess Probleme verursachen.

Auf diese Weise können Sie Ihre Seitengeschwindigkeit und die Wahrnehmung Ihrer Website durch Google erheblich beeinflussen.

Die andere Sorge ist jedoch, wenn Sie Plugins wie Nitro verwenden, um kritische Dateien wie CSS und JavaScript zurückzustellen.

Während sich dies positiv auf die Seitengeschwindigkeit auswirken kann, besteht das Hauptproblem darin, dass das Plugin alle KRITISCHEN Dateien zurückstellt, bis die Seite den HTML-Teil des Dokuments geladen hat.

Was bedeutet das? Dies bedeutet, dass Google nicht das gesamte Dokument so sehen kann, wie es angezeigt werden soll. Dies ähnelt dem Blockieren Ihrer CSS-Dateien und JavaScript-Dateien mithilfe von robots.txt, die Google benötigt, um festzustellen, ob Ihre Website für Mobilgeräte geeignet ist.

Die offizielle Google-Entwicklerseite sagt dies, wie an anderer Stelle erwähnt:

„Für eine optimale Darstellung und Indizierung sollten Sie dem Googlebot immer Zugriff auf die von Ihrer Website verwendeten JavaScript-, CSS- und Bilddateien gewähren, damit der Googlebot Ihre Website wie ein durchschnittlicher Benutzer sehen kann.

Wenn die robots.txt-Datei Ihrer Website das Crawlen dieser Assets nicht zulässt, beeinträchtigt dies direkt die Darstellung und Indexierung Ihrer Inhalte durch unsere Algorithmen. Dies kann zu suboptimalen Rankings führen.“

Wenn Sie kritische CSS- und JavaScript-Dateien aus SEO-Gründen zurückstellen, sollten Sie keine größeren Probleme damit haben, wie Google Ihre Website sehen kann, solange Sie sicherstellen, dass Google diese Dateien beim Laden der Seite sehen kann.

Verwenden früher Hinweise für eine bessere Serveroptimierung

Bevor wir über frühe Hinweise sprechen können, müssen wir den Prozess besprechen, wie der Server eine Webseite lädt. Websites sind in der Tat in den letzten Jahren anspruchsvoller geworden.

Und damit auch Server. Aber es gibt Einschränkungen. Obwohl Server den ganzen Tag über triviale Aufgaben ausführen können und tun, ist es dennoch möglich, dass ein Server ins Stocken gerät, indem er daran arbeitet, zu überdenken, wie er mit den Ressourcen einer Site umgeht.

In diesem Fall tritt also eine zusätzliche Latenz auf, als es sonst der Fall wäre – und dies geschieht, bevor der Browser mit dem Rendern der Seite beginnen kann.

Wenn diese Latenz auftritt, können Situationen auftreten, in denen eine Website einige Sekunden dauern kann, bevor sie im Browserfenster angezeigt wird.

Und sicherzustellen, dass Ihr Server die Dateien richtig rendert, ist ein ausgezeichneter erster Schritt zur Erhöhung Ihrer Seitengeschwindigkeit.

Hier ist ein Beispiel dafür, was passiert, wenn Ihr Server nicht richtig antwortet und zu lange braucht, um bestimmte Ressourcen zu verarbeiten:

Screenshot von developer.chrome.com, November 2022

Also, wie funktionieren frühe Hinweise?

Laut dem Google Chrome Developer Guide sind „frühe Hinweise ein HTTP-Statuscode (103 Early Hints), der verwendet wird, um eine genaue vorläufige HTTP-Antwort vor einer endgültigen Antwort zu senden.“

Was bewirkt das?

Dadurch kann ein Server einem Browser bestimmte Arten von Hinweisen für bestimmte kritische Ressourcen (JavaScript-Dateien, CSS-Stylesheets und mehr) bereitstellen, die wahrscheinlich von der Webseite selbst geladen und verwendet werden.

Dieser Vorgang erfolgt innerhalb weniger Millisekunden oder weniger, während der Server am Rendern der Hauptseitenressourcen arbeitet.

Frühe Hinweise sind etwas, das „einem Browser weiterhilft“ und die Denkzeit des Servers verkürzen, indem sie im Voraus an diesem Laden arbeiten.

Aus diesem Grund trägt dieser Prozess dazu bei, die Ladezeit der Seite zu beschleunigen.

Tools, die Ihnen helfen, Ihren kritischen Rendering-Pfad zu optimieren

Sind Sie kein außergewöhnlicher Code-Meister und nicht in der Lage, mit Code, Plugins und Dingen unter der Haube Ihrer Website zu arbeiten und diese zu optimieren?

Nun, keine Angst (zu viel!). Es gibt WordPress-Plugins, die Ihnen dabei helfen können.

Im Folgenden finden Sie eine Liste von Tools, die Sie verwenden können, um Ihren eigenen kritischen Rendering-Pfad für den Erfolg zu optimieren:

• Critical CSS Plugin : Mit diesem praktischen Tool können Sie kritisches CSS generieren, das Ihre Website benötigt. Fügen Sie einfach Ihre URL hinzu, klicken Sie auf Generieren und los geht's.
• Autoptimize Page Speed ​​Plugin: Dieses spezielle Plugin ist ein weiteres Plugin für die Seitengeschwindigkeit, mit dem Sie auch kritische Dateien zurückstellen können. Darüber hinaus hilft es, Inline-CSS in den Seitenkopf einzufügen, Skripte in die Fußzeile zu verschieben und Ihre HTML-Dateien zu verkleinern.
• WP Rocket Page Speed ​​Plugin: Dieses Page Speed ​​Plugin ist eines der leistungsstärksten Caching-Plugins. Nach der Installation können Sie mit diesem speziellen Plugin das Seiten-Caching, die GZIP-Komprimierung, das Vorladen des Caches und das Browser-Caching nutzen.
• WP-Optimize: Dies ist ein WordPress-Plugin, mit dem Sie verschiedene Dinge tun können, um Ihre Website besser für schnelle Ladezeiten zu optimieren. Dazu gehören das Optimieren Ihrer Datenbank, das Komprimieren Ihrer Bilder und das Caching Ihrer Seiten sowie das Minimieren und Asynchronisieren Ihrer CSS- und JavaScript-Dateien.

Bitte beachten Sie: Dieser Autor hat keine finanzielle Vorliebe für eines dieser Tools.

Warum sollte es mich kümmern?

Die Daten zum Nutzerverhalten von Google berichten, dass die meisten Nutzer eine langsame Website nach etwa drei Sekunden verlassen.

Neben Studien, die zeigen, dass die Reduzierung der Seitenladezeit und die Verbesserung des Seitenerlebnisses zu einer höheren Benutzerzufriedenheit führen, stehen auch mehrere große Google-Updates am Horizont, auf die Sie sich vorbereiten sollten.

Das Identifizieren und Optimieren von Render-Blocking-Ressourcen wird entscheidend sein, um bei diesen Updates auf dem Laufenden zu bleiben.

Google wird die Seitenerfahrung auf dem Desktop im Jahr 2022 implementieren, wobei die Einführung der Desktop-Seitenerfahrung im Februar beginnt und im März abgeschlossen wird.

Laut Google werden dieselben drei Core Web Vitals-Metriken (LCP, FID und CLS) zusammen mit den zugehörigen Schwellenwerten nun mit dem Desktop-Ranking verknüpft.

Außerdem arbeitet Google an einer brandneuen, möglicherweise experimentellen Core Web Vitals-Metrik, die die maximale Ereignisdauer und die Gesamtereignisdauer berücksichtigt.

Ihre Erklärung für diese Faktoren, die sie in Betracht ziehen, lautet:

Maximale Ereignisdauer: Die Interaktionslatenz ist gleich der größten einzelnen Ereignisdauer von jedem Ereignis in der Interaktionsgruppe.
Gesamtereignisdauer: Die Interaktionslatenz ist die Summe aller Ereignisdauern, wobei Überschneidungen ignoriert werden.

Da viele Studien die Reduzierung der Ladezeiten von Seiten mit Verbesserungen bei wertvollen KPIs (Konversionen, Absprungrate, Verweildauer auf der Website) in Verbindung bringen, ist die Verbesserung der Website-Latenz für viele Unternehmen zu einem vorrangigen Geschäftsziel geworden.

SEO-Experten sind einzigartig positioniert, um diese Bemühungen zu leiten, da unsere Rolle oft darin besteht, die Lücke zwischen den Geschäftszielen und den Prioritäten der Webentwickler zu schließen.

Die Möglichkeit, eine Website zu prüfen, Ergebnisse zu analysieren und Verbesserungsbereiche zu identifizieren, hilft uns, mit Entwicklern zusammenzuarbeiten, um die Leistung zu verbessern und die Ergebnisse an die wichtigsten Interessengruppen weiterzugeben.

Die Ziele der Optimierung von Render-Blocking-Ressourcen

Eines der Hauptziele bei der Optimierung des kritischen Rendering-Pfads besteht darin, sicherzustellen, dass die Ressourcen, die zum Rendern dieser wichtigen, „above the fold“-Inhalte benötigt werden, so schnell wie möglich geladen werden.

Alle Ressourcen, die das Rendern blockieren, müssen depriorisiert werden, ebenso wie alle Ressourcen, die ein schnelles Rendern der Seite verhindern.

Jeder Optimierungspunkt trägt zur allgemeinen Verbesserung Ihrer Seitengeschwindigkeit, Ihres Seitenerlebnisses und Ihrer Core Web Vitals-Punktzahlen bei.

Warum Render-Blocking-CSS verbessern?

Google hat oft gesagt, dass Codierung nicht unbedingt wichtig für das Ranking ist.

Aber aus dem gleichen Grund kann es je nach Suchanfrage möglicherweise hilfreich sein, einen Ranking-Vorteil aus Verbesserungen der Seitengeschwindigkeitsoptimierung zu ziehen.

Wenn es um CSS-Dateien geht, gelten sie als Ressourcen, die das Rendern blockieren.

Warum ist das?

Auch wenn dies (in den meisten Fällen) innerhalb einer Millisekunde oder weniger geschieht, beginnt der Browser nicht mit der Darstellung von Seiteninhalten, bis er alle CSS-Stile anfordern, empfangen und verarbeiten kann.

Wenn ein Browser Inhalte darstellt, die nicht richtig formatiert sind, erhalten Sie lediglich eine Menge gewöhnlichen Text und Links, die nicht einmal formatiert sind.

Das bedeutet, dass Ihre Seite in Ermangelung eines besseren Begriffs im Grunde „nackt“ ist.

Das Entfernen der CSS-Stile führt zu einer Seite, die buchstäblich unbrauchbar ist.

Der Großteil des Inhalts muss neu gezeichnet werden, um für einen Benutzer so wenig schmackhaft wie möglich auszusehen.

Wenn wir den Seiten-Rendering-Prozess untersuchen, stellt das graue Kästchen unten die Browserzeit dar, die benötigt wird, um alle CSS-Ressourcen zu erhalten. Auf diese Weise kann es mit dem Aufbau des DOM von CSS (oder CCSOM-Baum) beginnen.

Dies kann zwischen einer Millisekunde und mehreren Sekunden dauern, je nachdem, was Ihr Server tun muss, um diese Ressourcen zu laden.

Es kann auch variieren, was von der Größe und der Menge dieser CSS-Dateien abhängen kann.

Der folgende Renderbaum zeigt ein Beispiel eines Browsers, der alle Dateien zusammen mit CSS innerhalb des DOM rendert:

Screenshot von Medium, November 2022

Darüber hinaus zeigt das Folgende ein Beispiel für die Rendering-Sequenz einer Seite, bei der alle Dateien in einem Prozess geladen werden, von der Konstruktion des DOM bis zum endgültigen Malen und Zusammensetzen der Seite, was als kritischer Rendering-Pfad bezeichnet wird .

Da CSS standardmäßig eine Ressource ist, die das Rendering blockiert, ist es sinnvoll, CSS so weit zu verbessern, dass es den Renderingprozess der Seite nicht mehr negativ beeinflusst.

Die offizielle Google-Empfehlung besagt Folgendes:

„CSS ist eine Render-Blocking-Ressource. Bringen Sie es dem Kunden so schnell und so schnell wie möglich, um die Zeit bis zum ersten Rendern zu optimieren.“

Das HTML muss in etwas konvertiert werden, mit dem der Browser arbeiten kann: das DOM. CSS-Dateien sind auf die gleiche Weise. Diese muss in das CSSOM umgewandelt werden.

Durch die Optimierung der CSS-Dateien innerhalb des DOM und CSSOM können Sie dazu beitragen, die Zeit zu verkürzen, die ein Browser benötigt, um alles zu rendern, was erheblich zu einem verbesserten Seitenerlebnis beiträgt.

Warum Render-Blocking-JavaScript verbessern?

Wussten Sie, dass das Laden von JavaScript nicht immer erforderlich ist?

Bei JavaScript ist das Herunterladen und Analysieren aller JavaScript-Ressourcen kein notwendiger Schritt zum vollständigen Rendern einer Seite.

Dies ist also nicht wirklich ein technisch erforderlicher Teil des Seitenrenderings.

Aber die Einschränkung dabei ist: Die meisten modernen Websites sind so codiert, dass JavaScript (z. B. das Bootstrap JS-Framework) erforderlich ist, um das Erlebnis "above the fold" zu rendern.

Wenn ein Browser jedoch JavaScript-Dateien findet, bevor eine Seite zum ersten Mal gerendert wird, kann der Rendering-Prozess bis zu einem späteren Zeitpunkt und nach vollständiger Ausführung der JavaScript-Dateien angehalten werden.

Dies kann anderweitig angegeben werden, indem JavaScript-Dateien für die spätere Verwendung zurückgestellt werden.

Ein Beispiel hierfür ist, wenn JS-Funktionen wie eine in HTML integrierte Warnung vorhanden sind. Dies könnte die Seitenwiedergabe bis nach der Ausführung dieses JavaScript-Codes stoppen.

JavaScript hat die alleinige Befugnis, sowohl HTML- als auch CSS-Stile zu ändern, daher ist dies sinnvoll.

Das Parsen und Ausführen von JavaScript kann sich verzögern, da JavaScript möglicherweise den gesamten Seiteninhalt ändert. Diese Verzögerung ist standardmäßig in den Browser eingebaut – für genau so ein „nur für den Fall“-Szenario.

Offizielle Google-Empfehlung:

„JavaScript kann auch die DOM-Konstruktion blockieren und das Rendern der Seite verzögern. Um eine optimale Leistung zu erzielen … eliminieren Sie unnötiges JavaScript aus dem kritischen Rendering-Pfad.“

So identifizieren Sie Render-Blocking-Ressourcen

So identifizieren Sie den kritischen Renderpfad und analysieren kritische Ressourcen:

• Führen Sie einen Test mit webpagetest.org durch und klicken Sie auf das „Wasserfall“-Bild.
• Konzentrieren Sie sich auf alle angeforderten und heruntergeladenen Ressourcen vor der grünen „Start Render“-Zeile.

Analysieren Sie Ihre Wasserfallansicht; Suchen Sie nach CSS- oder JavaScript-Dateien, die vor der grünen „start render“-Zeile angefordert werden, aber für das Laden von „above the fold“-Inhalten nicht kritisch sind.

Screenshot von WebPageTest, November 2022

Testen Sie nach dem Identifizieren einer Ressource, die das Rendering blockiert, diese zu entfernen, um zu sehen, ob Inhalte "above the fold" (ohne Scrollen sichtbar) betroffen sind.

In meinem Beispiel sind mir einige JavaScript-Anfragen aufgefallen, die möglicherweise kritisch sind.

Auch wenn sie kritisch sind, ist es manchmal eine gute Idee, das Entfernen dieser Skripts zu testen, um zu testen, wie sich das Verschieben von Elementen auf der Website auf das Erlebnis auswirkt.

Screenshot von WebPageTest, November 2022

Es gibt auch andere Möglichkeiten, solche Ressourcen zu verbessern.

Bei unkritischen JavaScript-Dateien möchten Sie möglicherweise die Dateien kombinieren und zurückstellen, indem Sie diese Dateien unten auf Ihrer Seite einfügen.

Bei unkritischen CSS-Dateien können Sie auch die Anzahl Ihrer CSS-Dateien reduzieren, indem Sie sie zu einer Datei zusammenfassen und komprimieren.

Die Verbesserung Ihrer Codierungstechniken kann auch zu einer Datei führen, die schneller heruntergeladen werden kann und weniger Auswirkungen auf die Wiedergabegeschwindigkeit Ihrer Seite hat.

So reduzieren Sie Render-Blocking-Elemente auf der Seite

Sobald Sie festgestellt haben, dass eine Ressource, die das Rendering blockiert, für das Rendern von Inhalten „above the fold“ nicht entscheidend ist, sollten Sie eine Vielzahl von Methoden erkunden, die verfügbar sind, um das Rendering Ihrer Seite zu verbessern und nicht kritische Ressourcen zurückzustellen.

Es gibt viele Lösungen für dieses Problem, von der Verzögerung von JavaScript- und CSS-Dateien bis hin zur Verringerung der Auswirkungen, die CSS haben kann.

Eine mögliche Lösung besteht darin, CSS nicht mit der @import-Regel hinzuzufügen.

Achten Sie darauf, CSS nicht mit der @Import-Regel hinzuzufügen

Aus Leistungssicht kann @import, obwohl es scheint, Ihre HTML-Datei sauberer zu halten, tatsächlich zu Leistungsproblemen führen.

Die Deklaration @import bewirkt tatsächlich, dass der Browser eine CSS-Datei langsamer verarbeitet. Wieso den? Weil es auch alle importierten Dateien herunterlädt.

Das Rendern wird vollständig blockiert, bis der Vorgang abgeschlossen ist.

Tatsächlich ist die beste Lösung, die Standardmethode zu verwenden, ein CSS-Stylesheet mit der <link rel=”stylesheet”>-Deklaration in den HTML-Code einzubinden.

Minimieren Sie Ihre CSS- und JavaScript-Dateien

Wenn Sie WordPress verwenden, kann die Verwendung eines Plugins zum Minimieren Ihrer CSS- und JavaScript-Dateien enorme Auswirkungen haben.

Der Prozess der Minimierung nimmt alle unnötigen Leerzeichen in einer Datei und komprimiert sie noch weiter, sodass Sie am Ende einen schönen Leistungsschub erzielen können.

Auch wenn Sie nicht auf WordPress sind, können Sie die Dienste eines gut qualifizierten Entwicklers in Anspruch nehmen, um den Prozess manuell abzuschließen.

Dies wird mehr Zeit in Anspruch nehmen, kann sich aber lohnen.

Minimierte Dateien sind normalerweise viel leichter als ihre früheren Gegenstücke, was bedeutet, dass das anfängliche Rendern viel schneller abgeschlossen wird.

Darüber hinaus können Sie nach dem Minimierungsprozess auch davon ausgehen, dass der Download-Prozess schneller ist, da weniger Zeit zum Herunterladen von nicht renderblockierenden Ressourcen benötigt wird.

Verwenden Sie Systemschriftarten anstelle von Schriftarten von Drittanbietern

Obwohl Schriftarten von Drittanbietern eine Website „hübscher“ erscheinen lassen, ist dies nicht genau der Fall.

Auch wenn es auf den ersten Blick erstaunlich aussehen mag, dauert das Laden dieser Schriftartdateien von Drittanbietern oft länger und kann zu Ihrem Problem mit Render-Blocking-Ressourcen beitragen.

Aufgrund der externen Dateien muss der Browser externe Anfragen stellen, um diese Dateien herunterzuladen, um Ihre Seite zu rendern, was zu erheblich längeren Downloadzeiten führen kann.

Wenn Sie in einem Team sind, das über weniger als ideale Best Practices für die Entwicklung verfügt, kann es naheliegend sein, dass Sie viele Schriftartdateien von Drittanbietern haben, die für das Rendern Ihrer Website nicht erforderlich sind.

In diesem Fall kann das Entfernen all dieser unnötigen Dateien Ihre Render-Blocking-Ressourcen erheblich verbessern und zu Ihrer Gesamtverbesserung in Core Web Vitals beitragen.

Die Verwendung von Systemfonts hingegen hält die Verarbeitung nur innerhalb des Browsers ohne externe Anfragen.

Außerdem gibt es wahrscheinlich Systemschriftarten, die den von Ihnen verwendeten Schriftarten von Drittanbietern sehr ähnlich sein können.

Wenn Sie jedoch unbedingt Schriftarten von Drittanbietern verwenden müssen, sollten Sie zwei Dinge tun, um Probleme mit bestimmten Aspekten von Schriftarten von Drittanbietern zu mindern.

Erstens, wenn sie in Verbindung mit Preload und Font-Swap verwendet werden, werden die Probleme mit Schriftarten von Drittanbietern kein Problem mehr.

Das andere Problem bei der Verwendung von Schriftarten von Drittanbietern besteht darin, dass Schriftarten unsichtbar sind, bis die Schriftart selbst geladen wird, was sich negativ auf Core Web Vitals und die Benutzererfahrung auswirkt. Um dies zu vermeiden, können Sie Font-Swap-CSS verwenden.

So funktioniert es: Das Font-Swap-CSS erklärt dem Browser, dass Texte, die eine bestimmte Schriftart verwenden, sofort mit einer Systemschrift angezeigt werden müssen. Sobald die benutzerdefinierte Schriftart fertig ist, ersetzt diese benutzerdefinierte Schriftart die Systemschriftart. Dies ist die effektivste Methode, mit der Sie unsichtbare Schriftarten beim Laden der Seite vermeiden können.

Das neue Kind auf dem Block: Variable Schriftarten

Ab 2020 werden variable Schriftarten in den meisten Browsern weitgehend unterstützt. Was genau sind variable Schriftarten?

Bei variablen Schriftarten sind alle Ihre Schriftartstile in einer einzigen Datei enthalten. Aber bevor variable Schriftarten alltäglich wurden, brauchten Sie mehrere separate Schriftartdateien für Schriftarten.

Die Verwendung variabler Schriftarten hat auch mehrere Vorteile, darunter:

• Kleinere Dateigröße: Variable Schriftarten haben eine kleinere Dateigröße, da es sich um eine einzelne Schriftartdatei handelt, die alle Variationen von Breite, Gewicht und anderen Attributen enthält.
• Eine flexiblere Designauswahl: Bei anderen Schriftarten werden drei bis fünf verschiedene Schriftartdateien benötigt, um jede einzelne Darstellung der Designsprache/Stimme einer Website bereitzustellen. Und dies schließt jede Permutation von Überschriften, Fließtexten usw. ein. Aber mit variablen Schriftarten ermöglicht Ihnen die Verwendung einer einzigen Schriftartdatei, alle möglichen Variationen zu nutzen, die mit dem Design einer Schriftart verbunden sein könnten.
• Weniger und nur eine Datei: Aufgrund dieser Einsparungen bei der Dateigröße hilft dies, Ihre Seitengröße weiter zu komprimieren und die Seitengeschwindigkeit zu verringern. Und der Vorteil der einzelnen Datei selbst ermöglicht es dem Webmaster, die Seitengeschwindigkeit noch weiter zu komprimieren.

Die folgende Dokumentation behandelt variable Schriftarten und wie man sie implementiert. Aufgrund ihrer Vorteile ist die Verwendung variabler Schriftarten eine akzeptable Alternative, wenn Sie unbedingt Schriftarten von Drittanbietern implementieren müssen.

Verbessern Sie Ihre Codierungstechniken und kombinieren Sie Dateien

Wenn Sie selbst mit Code arbeiten, werden Sie vielleicht (oder auch nicht … niemand urteilt hier) feststellen, dass die Techniken alles andere als optimal sind.

Ein Beispiel: Sie verwenden überall Inline-CSS, was zu Verarbeitungs- und Darstellungsfehlern im Browser führt.

Die einfache Lösung besteht darin, sicherzustellen, dass Sie alle Inline-CSS nehmen und sie innerhalb der CSS-Stylesheet-Datei richtig codieren.

Wenn der Code eines anderen Entwicklers nicht den Anforderungen entspricht, kann dies zu großen Problemen bei der Seitenwiedergabe führen.

Beispiel: Angenommen, Sie haben eine Seite, die mit älteren Techniken codiert ist und nicht mit modernen und schlankeren.

Ältere Techniken können zu einer erheblichen Codeaufblähung führen und dadurch zu einer langsameren Darstellung der Seite führen.

Um dies zu vermeiden, können Sie Ihre Codierungstechniken verbessern, indem Sie schlankeren und weniger aufgeblähten Code erstellen, was zu einer viel besseren Seitendarstellung führt.

Auch das Kombinieren von Dateien kann die Situation verbessern

Beispiel: Wenn Sie acht oder zehn JavaScript-Dateien haben, die alle zu derselben Aufgabe beitragen, können Sie einen Entwickler beauftragen, der all diese Dateien für Sie kombinieren kann.

Und wenn es sich um weniger kritische JavaScript-Dateien handelt, können diese Dateien zur weiteren Verringerung der Seitendarstellungsprobleme auch zurückgestellt werden, indem sie am Ende des HTML-Codes auf der Seite hinzugefügt werden.

Durch das Kombinieren von Dateien und das Verbessern Ihrer Codierungstechniken können Sie erheblich zu einem besseren Seitenrendering beitragen.

Die zentralen Thesen

Wenn Sie Ihren eigenen Prozess erstellen möchten, um Render-blockierende Ressourcen zu finden und zu reduzieren, haben Sie jetzt die Tools dafür. Der Ablauf ist wie folgt skizziert:

• Schritt 1: Crawlen Sie Ihre Website mit Screaming Frog oder anderen Crawling-Tools.
• Schritt 2: Identifizieren Sie Seiten mit langsamer Seitengeschwindigkeit.
• Schritt 2a: Sie können für diesen Zweck auch die Google Search Console oder Google Analytics verwenden.
• Schritt 3: Ordnen Sie die Seiten mit der niedrigsten Leistung, die Sie finden, in einer priorisierten Liste an.
• Schritt 4: Gehen Sie die Punkte der Checkliste oben durch (Sie können auch eine Tabelle mit jedem Punkt pro Seite erstellen, wenn Sie dies vorziehen) und finden, reduzieren oder reparieren Sie diese Ressourcen, die das Rendern blockieren, nach Bedarf.
• Schritt 5: Spülen und für jede Seite Ihrer Website wiederholen.

Die Idee ist, einen Prozess zu schaffen, der einfach skalierbar und einfach zu implementieren ist und Sie mit einer viel geringeren Seitengeschwindigkeit als Ergebnis auf den Erfolgspfad bringen kann.

Mit diesem Prozess können auch Sie von dem Vorteil profitieren, den Sie haben, und Sie könnten auch einen Schub durch Googles Core Web Vitals erfahren.

Das Identifizieren und Reparieren von Ressourcen, die das Rendern blockieren, ist ein entscheidender Teil der Geschwindigkeitsoptimierung, da die meisten Audits diesen Schritt beinhalten. Der Grund dafür ist, dass sie dazu beitragen, die bestmöglichen Renderzeiten für Ihre Ranking-Seiten zu erzielen.

Google arbeitet ständig daran, die Seitengeschwindigkeit zu verbessern. Aber es gibt eine Sache, die immer gleich war: Je schneller Ihre Seitengeschwindigkeit, desto besser.

Durch die Integration eines skalierbaren Prozesses, mit dem Sie dies schnell erreichen können, ist es möglich, selbst die größten und komplexesten Projekte zur Optimierung der Seitengeschwindigkeit relativ einfach in Angriff zu nehmen.

Und dies führt auch zu einer besseren Benutzererfahrung.

Indem Sie Render-blockierende Ressourcen finden und reparieren, können Sie auch verbessern, wie Ihre Benutzer Ihre Website erleben, und Sie werden Ihre Website-Besucher weiterhin glücklich machen.

Schließlich geht es bei all dieser Optimierungsarbeit darum, Ihre Website für die Hauptsendezeit in Topform zu halten!

Mehr Ressourcen:

• Advanced Core Web Vitals: Ein technischer SEO-Leitfaden
• Unterschied zwischen Search Console CWV-Bericht und PageSpeed ​​Insights
• Core Web Vitals: Ein vollständiger Leitfaden

Beitragsbild: SuperOhMo/Shutterstock