So eliminieren Sie Render-Blocking-Ressourcen in WordPress

Rifat WordPress-Tutorials Dec 15, 2022

Wenn Sie Ihre Website über Lighthouse betreiben, ist Ihnen möglicherweise ein Vorschlag zum Entfernen von Render-Blocking-Ressourcen aufgefallen.

Indem Sie JavaScript verzögern und wichtige CSS-Stile inline einfügen, können Sie Ressourcen in WordPress loswerden, die das Rendern verlangsamen. Dies wird von den meisten Cache-Plugins, Autoptimize und Async JavaScript unterstützt. Sowohl Elementor als auch Divi verfügen über integrierte Möglichkeiten, um Ressourcen zu entfernen, die das Rendern der Seite verhindern, indem sie verzögertes und Inline-CSS verwenden. Das Entfernen von nicht benötigtem CSS, JavaScript und Code von Drittanbietern kann ebenfalls bei der Lösung helfen.

In diesem Artikel definieren wir Render-Blocking-Ressourcen und gehen auf die Vorteile ein, sie von Ihrer Website zu entfernen. Dann zeigen wir Ihnen fünf alternative Wege, um sie loszuwerden.

Was sind renderblockierende Ressourcen?

Das Verständnis des typischen Website-Ladevorgangs ist entscheidend, bevor wir uns genauer mit Render-Blocking-Ressourcen befassen. Der gesamte Inhalt Ihrer Website muss vom Browser des Besuchers gerendert (oder heruntergeladen) werden, nachdem er auf einen Link zu ihm geklickt hat. Es liest den gesamten HTML-, CSS- und JavaScript-Code auf Ihrer Website von oben nach unten. Ihre Website ist für Besucher nicht sichtbar, bis der Browser diese Skriptwarteschlange vollständig gelesen hat. Sie müssen möglicherweise lange warten, wenn Render-Blocking-Ressourcen vorhanden sind. Grundsätzlich ist eine CSS- oder JavaScript-Datei, die den Browser daran hindert, andere Inhalte zu laden, während sie verarbeitet werden, eine Ressource, die das Rendern blockiert. Dies könnte den Rendering-Prozess stoppen und die Seite unfertig oder leer aussehen lassen.

Erstellen Sie erstaunliche Websites

Mit dem besten kostenlosen Seite Builder Elementor

Jetzt anfangen

Wenn es auf Ihrer Website Ressourcen gibt, die das Rendering blockieren, werden zusätzliche Dateien am Anfang des Codes geladen. Vor dem Anzeigen der Website müssen Benutzer warten, während diese Dateien verarbeitet werden. Render-Blocking-Ressourcen haben das Potenzial, mehrere Website-Leistungsindikatoren zu beeinflussen. Beispielsweise misst der größte Contentful Paint, wie lange es dauert, bis der Hauptinhalt einer Seite geladen ist. Das erste Mal, dass Material aus dem Document Object Model (DOM) Ihrer Website vom Browser gerendert wird, wird als erster Contentful Paint bezeichnet. Die Gesamtblockierzeit ist die Zeit zwischen dem ersten Malen mit Inhalt und der Zeit für die Interaktion (wie lange es dauert, bis eine Seite vollständig interaktiv wird).

Obwohl sie zum Laden nicht erforderlich sind, können renderblockierende Ressourcen das Rendern behindern. Die User Experience Ihrer Website kann darunter leiden (UX). Daher ist es wichtig, dass Sie diese entfernen, um Besucher daran zu hindern, Ihre Seiten zu verlassen.

Vorteile der Eliminierung von Render-Blocking-Ressourcen

Internetnutzer warten im Allgemeinen nicht gerne darauf, dass Websites geladen werden. Eine schnelle Website kann Benutzer dazu verleiten, Ihr Material zu erkunden, und sie davon abhalten, einen Konkurrenten zu besuchen. Durch das Entfernen von Elementen, die das Rendering blockieren, machen Sie den Code Ihrer Website effektiv so leicht wie möglich, wodurch die Seitengeschwindigkeit erhöht werden kann. Da Website-Performance und Benutzerinteraktion zwei Faktoren sind, die Suchmaschinengiganten wie Google bei der Bewertung von Websites berücksichtigen, kann das Entfernen von Dateien, die das Rendering blockieren, dazu beitragen, das Suchmaschinenranking Ihrer Website zu verbessern.

So eliminieren Sie Render-Blocking-Ressourcen in WordPress

Du fragst dich vielleicht, wie du renderblockierende Elemente von deiner Website entfernen kannst, nachdem du weißt, wie man sie in WordPress erkennt. Glücklicherweise haben wir eine Liste mit vielen Ansätzen zusammengestellt, mit denen Sie dies erreichen können, beginnend mit den einfachsten.

Optimieren Sie das Laden von CSS

Das Erhöhen der Geschwindigkeit, mit der CSS auf Ihrer Website geladen wird, ist eine Methode, um Render-Blocking-Ressourcen loszuwerden. Ein Browser lädt Ihre Webseite, wie bereits erwähnt, von oben nach unten. Dies kann dazu führen, dass der Ladevorgang länger dauert, wenn bestimmte Dateien verarbeitet werden müssen. Denken Sie unbedingt daran, dass nur einige CSS-Dateien geladen werden müssen, damit die Seite angezeigt wird. Daher können Sie die wichtigsten Dateien zuerst anzeigen, wenn Sie das Laden von CSS optimieren. Render-blockierendes CSS kann manuell entfernt werden, aber Sie können auch ein Plugin installieren, um die Arbeit zu vereinfachen. Mit Jetpack Boost können Sie Ihre Website direkt von Ihrem WordPress-Dashboard aus optimieren. Dieses Plugin macht es einfach, verzögertes Laden zu implementieren, nicht unbedingt erforderliches JavaScript zu verschieben und das Laden von CSS zu verbessern. Eine der einfachsten Möglichkeiten, Render-Blocking-Ressourcen in WordPress loszuwerden, ist dies.

Beginnen Sie mit der Suche nach Jetpack Boost unter Plugins Neu hinzufügen in Ihrem WordPress-Dashboard. Installieren und aktivieren Sie das Plugin auf Ihrer Website.

installing Jetpack Boost

Sie können zu Jetpack Mein Jetpack gehen, wenn Sie Jetpack bereits geladen haben. Suchen Sie nach Boost und wählen Sie Aktivieren aus der Liste der Jetpack-Waren.

activating Jetpack Boost

Nachdem das Plugin aktiviert wurde, klicken Sie auf die Registerkarte Jetpack Boost und wählen Sie Erste Schritte.

getting started with Jetpack Boost

Ihre Website erhält sofort eine Leistungsbewertung von Jetpack. Sie sehen eine Buchstabennote zusammen mit Informationen zu Ihren Desktop- und mobilen Ergebnissen.

mobile and desktop score from Jetpack Boost

Aktivieren Sie dann diese Funktion, indem Sie nach unten zu CSS-Laden optimieren scrollen. Wenn aktiviert, erhöht Jetpack Boost das entscheidende CSS für Ihre Website, damit sie schneller geladen wird.

optimizing CSS loading

Unwesentliches JavaScript zurückstellen

Sie können weitere Maßnahmen ergreifen, um Render-Blocking-Ressourcen in WordPress loszuwerden, abgesehen davon, dass Sie nur das Laden von CSS optimieren. Nicht unbedingt benötigtes JavaScript kann ebenfalls verschoben werden, um das Laden Ihrer Website noch weiter zu beschleunigen. Unwesentliches JavaScript kann verzögert werden, um einige Prozesse zu verzögern, bis Ihre Inhalte geladen wurden. Sie können verhindern, dass der Browser JavaScript-Dateien ausführt, wenn diese zum Laden einer Seite nicht erforderlich sind. Glücklicherweise macht die Verwendung des Jetpack Boost-Plugins dies einfach. Sie können nicht unbedingt benötigtes JavaScript einfach verschieben, nachdem Sie den CSS-Ladeprozess optimiert haben. Schalten Sie den Kippschalter des Bereichs „Unwesentliches JavaScript zurückstellen“ auf „Ein“. Dieser Abschnitt befindet sich unterhalb des Abschnitts Optimieren des CSS-Ladens.

deferring non-essential JavaScript with Jetpack

Das Plug-in aktualisiert seine Bewertung der Gesamtleistung Ihrer Seite, nachdem Sie diese Einstellung aktiviert haben. Ihre Punktzahl vor und nach der Verwendung von Jetpack Boost wird angezeigt.

a higher website page speed score

Werfen Sie einen Blick auf die Ergebnisse in den Screenshots, die vor und nach Abschluss dieses Vorgangs aufgenommen wurden. Sie werden feststellen, dass die Erhöhung der Seitengeschwindigkeit erreicht wurde, indem nicht unbedingt erforderliches JavaScript verzögert und CSS effizienter geladen wurde. Browser können Ihre Inhalte schneller laden, da sie keine großen Skripte ausführen müssen.

Verschieben Sie Offscreen-Bilder

Obwohl Bilder keine Ressource sind, die das Rendern von Seiten verhindert, sollten Sie vielleicht darüber nachdenken, ihre Ladezeit zu beschleunigen. Websites haben häufig Off-Screen-Bilder, die erst angezeigt werden, wenn ein Benutzer mit der Seite interagiert, z. B. beim Scrollen. Sie können diese mit Lazy Loading verschieben, da sie für das Laden der Webseite nicht erforderlich sind. Nur die Bilder, die Besucher sehen können, werden träge geladen. Diese Fotos werden geladen, kurz bevor sie auf der Seite angezeigt werden, sobald der Benutzer scrollt. Ein Browser versucht, jedes Bild auf einer Seite auf einmal zu laden, wenn Lazy Loading nicht aktiviert ist. Je länger es dauert, bis Ihr Material geladen ist, desto wahrscheinlicher ist es, dass Besucher Ihre Website verlassen.

Regelmäßiges Laden ist möglicherweise kein Problem, wenn ein Besucher einen Desktop-Computer verwendet. Smartphones und Tablets hingegen haben kleinere Bildschirme und weniger Bandbreite. Ihre Website kann mehr Bandbreite verbrauchen und für Mobiltelefonbenutzer länger zum Laden benötigen, wenn alle Fotos auf einmal vollständig geladen werden. Dieses Problem wird durch verzögertes Laden behoben.

Verwenden Sie Jetpack Boost, um Lazy Loading auf Ihrer Website zu aktivieren. Suchen Sie einfach nach der Option Lazy Image Loading und aktivieren Sie sie.

turning on image lazy loading

Wenn Sie dies tun, sieht der Betrachter nur Bilder, die auf Ihrer Website geladen werden, wenn er die Seite nach unten scrollt. Auch wenn Fotos keine Ressource sind, die Blöcke rendert, kann das Aktivieren von Lazy Loading Ihre Seite beschleunigen.

Eliminieren Sie Render-Blocking-Ressourcen mit Elementor/Divi

Sowohl Elementor als auch Divi enthalten Optionen zum Entfernen von Ressourcen, die das Rendern behindern.

Aktivieren Sie „Verbessertes CSS-Laden“ und „Font-Awesome Inline“ in Ihren Einstellungen für Elementor -Experimente, um CSS und Schriftarten inline zu laden, sodass sie nicht mehr gerendert werden. Das verbesserte Laden von Assets eliminiert unnötiges CSS/JavaScript, wodurch grundlegende Web-Vitals auf vielfältige Weise verbessert werden.

Durch das Anwenden von entscheidendem CSS, das Zurückstellen von CSS/JavaScript und das Inline-Laden Ihrer Schriftarten können die Leistungsoptionen von Divi auch Render-Blocking-Ressourcen reduzieren.

Renderblockierendes JavaScript manuell entfernen

Sie können Render-Blocking-Ressourcen auch manuell löschen, obwohl die Installation eines Optimierungs-Plugins eine viel einfachere Option ist. Idealerweise sollten Sie über diese Wahl nur nachdenken, wenn Sie ein erfahrener Programmierer sind. Wenn Sie die Anzahl der Plugins auf Ihrer Website reduzieren möchten, kann dieses Verfahren ebenfalls hilfreich sein. Sie können Ihren Dateien eine async- oder defer-Eigenschaft zuweisen, damit JavaScript effizienter ausgeführt wird. Der Browser wird angewiesen, die unkritischen Skripte separat darzustellen, indem er sie als solche markiert. Beide Eigenschaften können verwendet werden, um das Laden von HTML-Informationen zu beschleunigen.

Die HTML-Datei wird auf typische Weise analysiert, bis sie auf die Skriptdatei trifft. Die Analyse wird dann angehalten, während das Skript gefunden wird. Nach dem Herunterladen und Ausführen wird das Parsen fortgesetzt.

script parsing illustrated

Während der Verarbeitung des verbleibenden HTML-Codes kann der Browser dank der Async-Funktion JavaScript herunterladen. Nach dem Herunterladen kann es die HTML-Verarbeitung anhalten und das Skript ausführen.

script async illustrated

Das Attribut defer funktioniert ähnlich und ermöglicht es dem Browser, das Skript herunterzuladen, während es den HTML-Code parst. Der Unterschied besteht darin, dass es auch die Ausführung des Skripts verzögert, bis das HTML-Parsing abgeschlossen ist.

script defer illustration

Sie müssen ein Stück Code in Ihre Datei functions.php einfügen, um eine dieser Eigenschaften zu implementieren. Sie müssen zuerst das script>-Tag der renderblockierenden Ressource finden. Folgendes als asynchrones Attribut:

<script src="resource.js" async></script>

Überlegen Sie alternativ, wie ein Skript aussehen könnte, wenn die Eigenschaft defer verwendet wird:

http://resource.js

Während ein Plugin diese Attribute für Sie erledigen kann, könnte es Ihren Vorlieben besser entsprechen, wenn Sie es selbst tun. Wenn dies der Fall ist, ist es wichtig zu verstehen, wann jedes Attribut anzuwenden ist. Sie müssen eine Verzögerungseigenschaft für nicht unbedingt erforderliche Skripts verwenden, die von einem anderen Skript abhängen. Die async-Option ist für alle anderen Skripts geeignet.

Wenden Sie asynchrone oder verzögerte Attribute mit einem Plugin an

Verwenden Sie ein Plugin wie Async JavaScript, wenn Sie Probleme beim manuellen Bearbeiten von Skripten haben. Dank dieses Tools haben Sie die vollständige Kontrolle darüber, welche Skripte die Eigenschaft async oder defer haben.

Nachdem das Plugin installiert wurde, wählen Sie Async JavaScript aktivieren unter Einstellungen Async JavaScript.

enabling async JavaScript

Gehen Sie als Nächstes zum Abschnitt mit dem Titel Async JavaScript Method. Sie können hier wählen, ob Sie asynchrone oder zurückgestellte Attribute aktivieren möchten.

choosing between async and defer

Es ist eine gute Idee, diese Skripte auszuschließen, da viele Plugins von jQuery abhängen. Das Anwenden asynchroner Eigenschaften auf jQuery kann dazu führen, dass Ihre Website beschädigt wird.

Im Zweifelsfall können Sie das defer-Attribut verwenden, aber der vollständige Ausschluss von jQuery ist die beste Vorgehensweise.

excluding jQuery

Sie können jetzt angeben, welche Skripts Sie asynchron ausführen oder zurückstellen möchten. Sie müssen darauf achten, jedes Skript in den entsprechenden Abschnitt einzufügen.

choosing which scripts to defer

Sie können alle Skripts, die Sie von diesem Verfahren ausschließen möchten, im Abschnitt Skriptausschluss auflisten.

Es gibt auch Optionen zum Ausschließen von Plugins und Themes am Ende der Seite. Die Skripts für hier erwähnte Designs oder Plug-ins sind nicht auf die Merkmale „async“ oder „defer“ anwendbar.

excluding plugins and themes

Nachdem Sie alle erforderlichen Anpassungen vorgenommen haben, können Sie auf Einstellungen speichern klicken. Dieser Ansatz kann ein nützlicher Kompromiss zwischen dem manuellen Ändern von Skripten und der Verwendung eines Plugins sein, um die Aufgabe für Sie zu erledigen. Alternativ können Sie diese zusätzlichen Schritte eliminieren, indem Sie eine All-in-One-Anwendung wie Jetpack Boost verwenden.

Einpacken

Indem die Browser der Besucher das Rendern von „above the fold“-Inhalten aufschieben, während Ressourcen heruntergeladen werden, die nicht sofort erforderlich sind, erhöhen Renderblocker-Ressourcen die wahrgenommenen Seitenladezeiten Ihrer WordPress-Site. Sie sollten das Laden von Ressourcen, die nicht sofort benötigt werden, verzögern, damit Besucher den sichtbaren Bereich Ihrer Seite schneller laden können. Verwenden Sie vorgefertigte Plugins, um Render-Blocking-Ressourcen in WordPress loszuwerden. Sie können Autoptimize und Async JavaScript, zwei Plugins, die von demselben Entwickler erstellt wurden, für eine kostenlose Lösung kombinieren. Sie können WP Rocket verwenden, das eine besondere Interaktion mit Kinsta bietet und mit vielen zusätzlichen WordPress-Leistungsoptimierungen helfen kann, wenn Sie bereit sind, dafür zu bezahlen.

Divi WordPress Theme