Geschwindigkeit • WordPress •

Warum und wie man Render-Blocking-Ressourcen einfach eliminiert

May 13, 2022 • in 6 Min gelesen • Cal Evans

Inhaltsverzeichnis

In den frühen Tagen des Internets wurden die ersten Webseiten in einer vereinfachten Version von XML namens HTML erstellt. Weiß mit schwarzem Text. Wenn man einen Textabschnitt mit einer blauen Unterstreichung sah, wusste man, dass man darauf klicken kann. Wenn dieser lila war, wusste man, dass der Text bereits angeklickt wurde.

Das Leben war einfach.

Heutzutage ist HTML normalerweise der kleinste Teil einer Webseite. Wenn ein Browser eine Seite anfordert, erhält er den HTML-Code, muss ihn dann aber teilen und die Ressourcen herunterladen.

CSS
JavaScript
Bilder
Schriftarten
… und andere externe Dateien, die für die Bereitstellung der Benutzererfahrung erforderlich sind.

Nicht alle Ressourcen sind gleich. Einige Ressourcen, die geladen werden müssen, können die Anzeige der Webseite sogar verlangsamen. Diese Ressourcen werden „Renderblocking-Ressourcen“ genannt und dieser Artikel zeigt Ihnen einige Taktiken, mit denen Sie die Anzahl der Renderblocking-Ressourcen auf Ihrer Website reduzieren können, und wie Sie sie manuell oder mit dem SiteGround Optimizer-Plugin anwenden.

Was bedeutet die Eliminierung von Ressourcen, die das Rendering blockieren?

„Render“ ist der Fachbegriff für „Anzeigen“. Wenn wir in diesem Artikel über Rendering sprechen, meinen wir den Prozess der Anzeige Ihrer Website auf einem Bildschirm.

In Anbetracht dessen ist Renderblocking alles, was diesen Prozess anhält oder verlangsamt.

In der Anfangszeit des Internets wurde alles in der Reihenfolge geladen, in der es im HTML codiert war. Wenn Ihr HEAD 5 JavaScript-Tags hätte, die alle geladen, kompiliert und ausgeführt werden müssten, bevor der HEAD fertig wäre, könnten diese möglicherweise Ihre Website verlangsamen. Aus diesem Grund haben wir angefangen, JavaScript-Tags in die Fußzeile einzufügen, damit sie die Anzeige der Seite nicht verhindern.

Arten von Render-Blocking-Ressourcen

Jede Ressource, die auf Ihre Website geladen wird, hat das Potenzial, eine Render-Blocking-Ressource zu sein.

Wenn ein Bild groß ist und Zeit zum Laden benötigt, ist es möglicherweise eine Ressource, die das Rendering blockiert.
Wenn JavaScript im <head> Ihrer Seite ausgeführt werden muss, handelt es sich möglicherweise um eine Ressource, die das Rendering blockiert.
Wenn Ihr CSS groß ist und Ihre Seite nicht angezeigt werden kann, bis alles geladen ist, handelt es sich möglicherweise um eine Renderblockierungsressource.
Wenn Sie eine Ressource von einer anderen Seite laden und diese Seite langsamer ist als Ihre, ist diese Ressource möglicherweise eine Renderblockierungsressource.
Wenn Sie viele Plugins haben, die jeweils ihre eigenen CSS- und JavaScript-Dateien haben, sind diese möglicherweise Ressourcen, die das Rendering blockieren.

Kurz gesagt, alles, was Sie in Ihrem zu ladenden HTML-Code haben, ist möglicherweise eine Ressource, die das Rendering blockiert.

Wie kann ich testen, ob meine Website Ressourcen enthält, die das Rendering blockieren?

Es gibt viele Tools im Web, die Ihnen zeigen, wie Ihre Website geladen wird. Meine Favoriten sind diese beiden:

Die Option „Inspect Element“ aus dem Browser

Ich bevorzuge ein Tool, das mir eine „Wasserfalldiagramm“ zeigt, wie meine Seite geladen wurde. Alle modernen Browser zeigen Ihnen eine einfache Version einer Wasserfallanzeige. Klicken Sie einfach mit der rechten Maustaste auf eine Webseite, dann auf „Inspizieren“ und suchen Sie die Registerkarte „Netzwerk“.

Sobald Sie das haben, laden Sie die Seite neu. Sie sollten so etwas sehen:

Die rechte Seite des obigen Bildes zeigt die Registerkarte „Netzwerk“. Die kleinen Balken ganz rechts ist das „Wasserfalldiagramm”. Daran kann man erkennen, wie lange es dauert, eine bestimmte Ressource zu laden. So zeigt mir, z.B. die dünne blaue Linie, die die Seite hinunterläuft, wann die Seite tatsächlich mit dem Rendern begonnen hat. Viele meiner Ressourcen auf dieser Seite werden also geladen, bevor die Seite geladen wird, und das ist ja nicht großartig. Das bedeutet, dass ich auf dieser speziellen Seite möglicherweise etwas Raum für Verbesserungen habe.

Diese Ansicht ist gut, wenn Sie nur herumbasteln, aber sie sagt Ihnen eigentlich nur, wie schnell die Dinge auf Ihrem Computer geladen werden. Das ist ja keine echte Metrik. Ich zum Beispiel mache meine gesamte Entwicklung lokal, und wie schnell Dinge von einem Server, der auf demselben Computer läuft, in meinen Browser geladen werden, sagt mir überhaupt nicht viel.

Deshalb verwende ich Online-Tools wie https://www.webpagetest.org/, wenn ich Dinge ernsthaft messen will.

Webseitentest

Wenn Sie zu WebPageTest gehen und Ihre URL eingeben, erhalten Sie ein viel besseres Bild der Realität. Darüber hinaus können Sie an den Einstellungen basteln, um genau den gewünschten Test zu erhalten.

Zum größten Teil empfehle ich Ihnen, dasselbe zu tun wie ich:

Testen Sie zuerst den Desktop
Wählen Sie einen Server aus, der sich nicht in der Nähe des Hosts Ihrer Website befindet
Wählen Sie Chrome aus, es sei denn, Sie benötigen einen anderen Browser

Sie können diese Einstellungen auf der Registerkarte „Erweiterte Konfiguration“ anpassen.

Klicken Sie dann auf „Test starten“.

Jetzt erhalten Sie eine viel nützlichere Wasserfallanzeige. Es ist ein bisschen klein, also klicken Sie darauf und Sie gelangen zu einer größeren Ansicht. Eines der Dinge, die es Ihnen zeigen wird, ist eine Liste der Ressourcen, die das Rendering blockieren.

In diesem Fall habe ich 32 Render-Blocking-Ressourcen. Fast alle davon sind CSS-Dateien, die letzten sind JavaScript-Dateien.

Für die JavaScript-Dateien ist es schon klar, aber warum sollten CSS-Dateien das Rendering blockieren? Die Seite kann nicht angezeigt werden, bis sie das gesamte CSS kennt, das zum Anzeigen des Bildschirminhalts erforderlich ist. Wenn Ihre Website also viele CSS-Dateien lädt und sich am Ende der Liste eine CSS-Regel befindet, die zum Anzeigen des ersten Elements auf Ihrer Seite verwendet wird, muss Ihre Seite warten, bis diese Regel geladen ist, bevor der Browser fortfahren kann um das Display darzustellen. So kann CSS eine Render-Blocking-Ressource sein.

So beseitigen Sie Render-blockierende Ressourcen

Im Laufe der Jahre sind Techniken gekommen und gegangen, um Render-Blocking-Ressourcen zu reduzieren oder zu eliminieren. Es gibt einige Techniken, die sich bewährt haben.

So beseitigen Sie Render-blockierendes JavaScript

Um zu verhindern, dass ein JavaScript-Tag eine Renderblockierungsressource ist, können Sie jetzt die DEFER– oder ASYNC-Attribute verwenden.

DEFER weist den Browser an, Dateien herunterzuladen, während die Seite gerendert wird, und Dateien in sequenzieller Reihenfolge auszuführen, sobald die Seite gerendert ist.
ASYNC weist den Browser an, Dateien herunterzuladen, während die Seite gerendert wird, und Dateien auszuführen, sobald sie verfügbar sind.

Die bessere Option ist DEFER, wenn möglich. Auf diese Weise kann das Display das Darstellen beenden und dann das JavaScript ausführen. Wie Sie im obigen Beispiel sehen können, verschiebe ich das Laden von jQuery, bis die Seite dargestellt ist. Sobald es geladen ist, wird es ausgeführt. Da jQuery eine große Bibliothek ist, hilft die Zurückstellung beim Anzeigen, es sei denn, meine Seite enthält etwas, das jQuery erfordert.

So beseitigen Sie Render-Blocking-CSS

CSS ist ein wenig schwierig zu arrangieren. Wenn der Browser ein CSS-Element im Code sieht, muss er auf die bisher geladenen Regeln verweisen und prüfen, ob er diese Regel enthält. Wenn diese Regel noch nicht geladen wurde, muss das Rendern angehalten werden, bis diese Regel geladen ist.

Google hat den Begriff „Critical CSS“ geprägt. Kritisches CSS ist das CSS, auf das in dem Teil der Seite verwiesen wird, den Sie sehen können, wenn die Seite angezeigt wird. Wenn Sie beispielsweise eine Fußzeile auf Ihrer Seite haben, die eine CSS-Regel hat, die sie gestaltet, und diese Fußzeile nicht sichtbar ist, bis Ihr Betrachter die Seite nach unten scrollt, dann ist diese CSS-Regel nicht kritisch.

Google empfiehlt, dass Sie Ihr gesamtes kritisches CSS herausziehen und es in den HTML-Code einfügen. Dadurch wird das CSS von einer Renderblockierungsressource entfernt, da der Browser über das gesamte CSS verfügt, das er unbedingt haben muss, um den sichtbaren Teil der Seite anzuzeigen.

Das ist schwierig, denn das bedeutet, dass Sie sich alle Ihre CSS ansehen und Teile herausziehen müssen. Verwenden Sie am besten das Google Chrome Coverage Tool. Es zeigt Ihnen unkritisches (roter Balken) und kritisches (grüner Balken) CSS, das Sie laden.

Chrome Coverage Tool showing non-critical CSS

Indem Sie das kritische CSS herausziehen und inline platzieren, können Sie das CSS als Renderblockierungsressource entfernen.

Das klingt einfach, aber in Wirklichkeit kann es sehr schwierig sein, Ihr CSS so umzugestalten, da es sich um eine fortgeschrittene Technik handelt.

So reduzieren Sie Render-Blocking-Ressourcen in WordPress mit dem SiteGround Optimizer Plugin

Eines der Dinge, die Sie tun können, ohne dass Sie Ihren Code umgestalten oder Ihren HTML-Code manuell bearbeiten müssen, ist die Verwendung des SiteGround Optimizer. Selbst wenn Sie Ihre Website nicht bei SiteGround hosten, hilft dieses Plugin dabei, die Render-Blocking-Ressourcen auf der Seite zu reduzieren.

Es gibt ein paar Dinge, die Sie mit dem Plugin tun können

Memcache aktivieren

Wenn Sie Ihre Seite bei SiteGround hosten, gehen Sie zunächst zu Ihren Site-Tools und aktivieren Sie Memcached. Das hat nichts mit Render-Blocking-Ressourcen zu tun, aber es wird wirklich einen Unterschied machen.

Gehen Sie als Nächstes zum Einstellungsmenü des Plugins und wählen Sie „Frontend“.

Frontend_optimisation_to_eliminate_render_blocking_resources_with_SiteGround_Optimizer

Nun, muss man bei den Einstellungen aufpassen. Ich empfehle, eine Sache nach der anderen zu ändern und dann Ihre Website neu zu laden (in einem anderen Browser).

Optimieren Sie Ihr CSS

Wählen Sie im CSS-Bereich Minify CSS Files („CSS-Dateien minimieren“). Diese Optimierung ist sicher und unkompliziert. Es entfernt die veralteten Leerzeichen, neuen Zeilen, Kommentare usw. aus dem Code, wodurch die Größe Ihrer Seiten verringert wird.

minify-CSS-files-with-SiteGround-optimizer-plugin

Als nächstes wählen Sie Combine CSS Files („CSS-Dateien kombinieren“). Das ist das Erste, das Sie tun können, um Render-Blocking-Ressourcen zu eliminieren. Trotzdem sollten Sie es mit Vorsicht verwenden, da es möglicherweise nicht auf allen Websites gleich funktioniert.

Combine-CSS-files-with-SiteGround-optimizer-Plugin

Dann schalten Sie auch Preload Combined CSS („Combined CSS vorladen“) ein. Dadurch wird das CSS gezwungen, früh im Prozess geladen zu werden, sodass Ihr CSS da ist, wenn Sie es brauchen.

Preload-combined-CSS-with-SiteGround-Optimizer-Plugin

Optimieren Sie Ihr Javascript

Wechseln Sie als Nächstes zum JavaScript-Tab.

Javascript_Optimisation_SiteGround_Optimizer

Lassen Sie uns die gleichen Maßnahmen ergreifen:

Minimieren Sie JavaScript-Dateien

Minify-JavaScript-files-with-SiteGround-Optimizer

Kombinieren Sie JavaScript-Dateien

Combine-JavaScript-files-with-Siteground-Optimizer

Render-blockierendes JavaScript aufschieben

Defer-render-blocking-JavaScript-with-SiteGround-Optimizer

Normalerweise gibt es viel weniger Probleme beim Kombinieren von JavaScript als bei CSS. Auf jeder Seite, die ich ausprobiert habe, hat es funktioniert. Das Letztere ist wichtig, es fügt dem kombinierten JavaScript das DEFER-Tag hinzu.

Wenn Sie auf Ihrer Testseite alles getan haben, was Sie können, sind Sie von 32 auf 24 Render-Blocking-Ressourcen heruntergekommen. Das ist ein wirklich guter Anfang.

Site Performance Test After Optimisations

Der nächste Schritt auf dieser Seite besteht darin, alle meine kritischen CSS zu lokalisieren und einzubinden. Verschieben Sie dann alle Ihre anderen CSS. Dadurch werden fast alle verbleibenden Render-Blocker entfernt.

FAZIT

Nachdem nun die niedrig hängenden Früchte bei der Beschleunigung Ihrer Website abgeerntet sind

Caching
Kompression
Datenbankoptimierung

dann ist es Zeit, sich die kleinen Optimierungen anzusehen. Das sind die kleinen Anpassungen. Das heißt nicht, dass sie unwichtig sind. Denken Sie daran, dass Suchmaschinen angegeben haben, dass die Geschwindigkeit, mit der unsere Seiten geladen werden, in unser SEO-Ranking einfließt. Wenn Sie Ihr SEO-Ranking verbessern möchten, verbessern Sie die Ladegeschwindigkeit Ihrer Seite. Jedes bisschen hilft, und es ist noch besser, wenn Sie die richtigen Tools haben, um die Dinge einfach zu machen, wie das SiteGround Optimizer-Plugin, das Sie hier kostenlos herunterladen können.

Diesen Artikel teilen

KOPIERT

Cal Evans

PHP-Evangelist

Einer der am meisten bewunderten Menschen in der PHP-Community, der sich seit mehr als 16 Jahren dem Aufbau der fantastischen PHP-Community und der Betreuung der nächsten Generation von Entwicklern widmet. Wir fühlen uns sehr geehrt, dass er auch ein ganz besonderer Freund von SiteGround ist.

Mehr von Cal

Erhalten Sie professionelles Website-Hosting

Warum und wie man Render-Blocking-Ressourcen einfach eliminiert

Was bedeutet die Eliminierung von Ressourcen, die das Rendering blockieren?

Arten von Render-Blocking-Ressourcen

Wie kann ich testen, ob meine Website Ressourcen enthält, die das Rendering blockieren?