Website-Geschwindigkeit verbessern: Render-blockierendes JS & CSS entfernen

Mit WordPress können Sie eine benutzerdefinierte Website mit Plugins und Themen Ihrer Wahl erstellen. Dies kann jedoch bedeuten, dass Ihre Website viele Skripte enthält, die die Ladezeiten und die Leistung verlangsamen. Nicht alle diese Skripte müssen sofort geladen werden, und einige können Besucher tatsächlich daran hindern, Ihre Inhalte so schnell wie möglich zu sehen.

Diese fremden Dateien werden Render-blockierendes JavaScript und CSS genannt. In diesem Artikel erklären wir, was diese Render-Blocking-Ressourcen sind, und zeigen Ihnen dann, wie Sie Render-Blocking-Ressourcen von Ihrer WordPress-Site entfernen können. Lass uns anfangen!

Was ist Renderblocking von JavaScript und CSS?

Wenn eine Website im Browser geladen wird, sendet sie Aufrufe an jedes einzelne Skript in einer Warteschlange. Normalerweise muss diese Warteschlange leer sein, bevor die Website im Browser sichtbar ist. Die Warteschlange von Skripten, die das vollständige Laden Ihrer Website verhindern können, sind die renderblockierenden JavaScript- und CSS-Dateien.

Wenn die Skriptwarteschlange sehr lang ist, kann es eine Weile dauern, bis Besucher auf Ihre Website zugreifen können. Oft sind viele dieser Skripte nicht erforderlich, um die Website sofort anzuzeigen, und könnten genauso gut mit der Ausführung warten, bis die Website selbst vollständig geladen ist.

Mit anderen Worten, diese Art von Skripten verlangsamt Ihre Webseiten, ohne tatsächlich zu den unmittelbaren Bedürfnissen Ihrer Zuschauer beizutragen. Jedes Skript, das nicht das beinhaltet, was der Betrachter sofort sehen wird (oft als "above the fold"-Elemente bezeichnet), sollte zurückgestellt werden, bis der Rest der Seite geladen ist.

Warum ist Render-Blocking von JavaScript und CSS schlecht für Webseiten?

Renderblockierende JavaScript- und CSS-Skripte verlangsamen Ihre Webseiten, was aus vielen Gründen schlecht ist. Die Seitengeschwindigkeit spielt bei vielen wichtigen Aspekten Ihrer WordPress-Website eine Rolle, einschließlich der allgemeinen Benutzerfreundlichkeit und der Suchmaschinenoptimierung (SEO). Wenn Ihre Website langsam geladen wird, ist es wahrscheinlicher, dass Sie Besucher verlieren, und es ist weniger wahrscheinlich, dass Sie in den Suchmaschinenergebnissen einen hohen Rang einnehmen.

Natürlich werden Geschwindigkeit und Leistung der Website von mehr als nur Render-Blocking-Ressourcen beeinflusst. Abgesehen davon ist dies ein Faktor, der die Ladezeiten erheblich beeinflussen kann. Denken Sie daran, dass jede Ressource auf einer Webseite Bytes belegt, von denen mehr zu längeren Downloadzeiten führen kann. Je weniger und leichtere Skripte Ihre Website hat, desto besser. Schließlich möchten Sie nicht zulassen, dass sich eine langsame Website negativ auf Ihr Geschäft auswirkt.

Im Allgemeinen ist es am besten, sicherzustellen, dass der Code Ihrer Website so sauber und minimal wie möglich ist, um die Gesamtgeschwindigkeit zu verbessern. Es wird jedoch immer etwas Code übrig bleiben. Standardmäßig versuchen Browser, alles auf einmal zu laden, einschließlich der Render-Blocking-Skripte.

Es liegt an Ihnen, sicherzustellen, dass Ihre Website zuerst die Skripte lädt, die erforderlich sind, damit sie korrekt aussieht und verwendbar ist, wenn ein Besucher zum ersten Mal auf einer Seite landet. Erst dann sollten die restlichen Skripte geladen werden.

So beseitigen Sie Render-blockierendes JavaScript und CSS

Bevor Sie Render-blockierende Skripts entfernen können, müssen Sie ermitteln, welche Skripts Probleme verursachen. Dazu empfehlen wir die Verwendung von PageSpeed ​​Insights von Google. Geben Sie einfach Ihre URL ein und Google sagt Ihnen genau, welche Skripte Ihre Seitenleistung verlangsamen:

Erstellen Sie eine Liste aller Skripts, die in den Ergebnissen unter Renderblockierendes JavaScript und CSS beseitigen angezeigt werden. Unabhängig davon, ob Sie versuchen, sie manuell zu beheben oder ein Plugin zu verwenden, sollten Sie diesen Skripten besondere Aufmerksamkeit schenken, wenn Sie die folgenden Korrekturen anwenden.

Um die Anzahl der Skripts zum Blockieren des Renderings auf Ihrer Website zu reduzieren, müssen Sie einige Best Practices befolgen:

• „Minimieren“ Sie Ihr JavaScript und CSS. Das bedeutet, dass alle zusätzlichen Leerzeichen und unnötigen Kommentare im Code entfernt werden.
• Verketten Sie Ihr JavaScript und CSS. Dazu müssen Sie mehrere verschiedene .js- und .css- Dateien nehmen und sie kombinieren. Idealerweise haben Sie nur wenige solcher Dateien.
• Verzögern Sie das Laden von JavaScript. Es kann nützlich sein, JavaScript-Dateien dazu zu zwingen, mit dem Laden zu warten, bis alles andere auf der Seite fertig ist. Eine zuverlässige Methode zum Verzögern von JavaScript ist das asynchrone Laden.

Diese Tipps können in WordPress von Hand schwierig zu bewerkstelligen sein, da viele frontseitige Plugins mit ihren eigenen JavaScript- und CSS-Dateien geliefert werden. Ein Plugin kann problemlos bis zu fünf oder sechs Skripte an das Frontend Ihrer Website anhängen. Diese Dateien können sich schnell summieren!

Glücklicherweise verwendet WordPress einen kombinierten Filter, um alle Frontend-zugewandten Skripte zu registrieren. Das bedeutet, dass Sie die Möglichkeit haben, alle eingehenden JavaScript- oder CSS-Dateien zu identifizieren und zu handhaben – auch wenn Sie nicht genau wissen, wonach Sie suchen müssen. Natürlich ist dies viel einfacher mit einem Plugin zu bewerkstelligen, als von vorne anzufangen.

Plugins zum Reduzieren von Render-blockierendem JavaScript und CSS

Es gibt ein paar WordPress-Plugins, die Ihnen helfen können, Ihre Website zu optimieren, indem sie Render-blockierendes JavaScript und CSS entfernen. In diesem Abschnitt sehen wir uns vier beliebte Optionen an.

1. WP-Rakete

WP Rocket hilft bei der Seitenoptimierung durch Aufgaben wie die Minimierung von CSS und JavaScript, verzögertes Laden von Bildern, Zurückstellen von Remote-JavaScript-Anfragen und mehr. Es ist das „Schweizer Taschenmesser“ der Optimierungs-Plugins.

Einer der größten Vorteile bei der Verwendung dieses Plugins ist der einfache Einrichtungsprozess. Ein potenzieller Nachteil ist jedoch die Benutzeroberfläche. Das Plugin schafft eine andere Erfahrung in Ihrem WordPress-Dashboard, als Sie es vielleicht gewohnt sind. Einige langjährige Benutzer werden diese Schnittstellenänderung möglicherweise nicht zu schätzen wissen. Dennoch bleibt die eigentliche Funktionalität des Plugins erstklassig.

Es gibt ein paar kostenlose Extras, die Sie für WP Rocket im WordPress-Plugin-Verzeichnis erhalten können. Das Basis-Plugin selbst kostet jedoch 49 US-Dollar pro Jahr für eine Website und ein Jahr Support, wobei zusätzliche Stufen mehr Optionen bieten.

2. Automatische Optimierung

Autoptimize wurde speziell entwickelt, um Probleme zu lösen, die von Empfehlungstools wie PageSpeed ​​Insights aufgeworfen werden. Alle Einstellungen, mit denen Sie das Plugin für Ihre Website konfigurieren können, werden in einem neuen Menü in Ihrem WordPress-Dashboard enthalten sein.

Autoptimize deckt alle grundlegenden Optimierungsaufgaben ab, wie das Minimieren und Caching von Skripten. Einzigartig ist, dass es auch Bilder optimieren und in das WebP-Format konvertieren kann. Dieses Tool hat hervorragende Gesamtbewertungen, obwohl Sie bedenken sollten, dass die Konfiguration etwas komplex sein kann.

Während das Plugin selbst kostenlos ist, können Sie eines von zwei Paketen von den Entwicklern erwerben, um bei der Konfiguration zu helfen. Es gibt einen benutzerdefinierten Konfigurationsplan zum Preis von etwa 165 $ (149 €). Für rund 667 US-Dollar (599 Euro) können Sie auch eine professionelle Überprüfung Ihrer Website und eine fachmännische Plug-in-Konfiguration erhalten.

3. JCH optimieren

JCH Optimize bietet auch einige einzigartige Tools, mit denen Sie die Ladezeit Ihrer Seite verbessern können. Beispielsweise kann es die Anzahl der HTTP-Anfragen reduzieren, die zum Laden Ihrer Seiten erforderlich sind, und auch die Größe dieser Seiten verringern. Dies führt zu einer verringerten Serverlast und geringeren Bandbreitenanforderungen.

Eine weitere einzigartige Funktion von JCH Optimize ist der Sprite-Generator. Dadurch werden Hintergrundbilder zu „Sprites“ kombiniert, sodass weniger HTTP-Anforderungen erforderlich sind, um sie in einen Browser zu laden. Einer der Nachteile dieses Plugins kann jedoch die steile Lernkurve sein. Die meisten Benutzer müssen sich auf die Support-Dokumentation verlassen, um sicherzustellen, dass sie das Plugin richtig konfiguriert haben, um Fehler zu vermeiden.

Abgesehen davon hat das Plugin viele Fünf-Sterne-Bewertungen und über 10.000 aktive Installationen. Preislich steht eine kostenlose Version des Plugins zur Verfügung. Wenn Sie jedoch auf Support und erweiterte Funktionen wie die Optimize Image API zugreifen möchten, müssen Sie ein Abonnement erwerben. Diese beginnen bei 29 $ für sechs Monate Support und API-Zugriff.

4. Speed-Booster-Paket

Speed ​​Booster Pack bietet CSS- und JavaScript-Optimierung, verzögertes Laden und eine Funktion zum Entfernen von Unordnung. Die Entwickler von Optimocha halten das Plugin mit einer sich ständig weiterentwickelnden Codebasis auf dem neuesten Stand, sodass Sie wissen, dass Sie immer die neuesten Methoden verwenden werden. Es gibt auch eine integrierte WooCommerce-Optimierungsfunktion, mit der Engpässe behoben werden können.

Einer der Vorteile der Verwendung des Speed ​​Booster Packs ist, dass es über eine Content Delivery Network (CDN)-Integrationsfunktion verfügt. Dies macht es einfach, das CDN Ihrer Wahl in WordPress zu verwenden und gleichzeitig mit dem Plugin zu optimieren. Der Nachteil dieses Plugins liegt in dem Trial-and-Error-Prozess, den Sie möglicherweise befolgen müssen, um es richtig zu konfigurieren.

Es ist auch erwähnenswert, dass es eine Serviceoption gibt, die mit dem kostenlosen Plugin einhergeht. Ähnlich wie bei Autoptimize bieten die Entwickler mehrere Optionen, um einen praktischen, professionellen Ansatz zur Konfiguration des Plugins bereitzustellen, damit es zu Ihrer einzigartigen Website passt.

Verbessern Sie die Geschwindigkeit Ihrer Website mit WP Engine

Wie auch immer Ihr Ansatz zur Verbesserung der Geschwindigkeit Ihrer Website aussehen mag, wir sind hier, um Ihnen zu helfen. Wir haben ein Geschwindigkeitstool zum Testen Ihrer Website und die besten Entwicklerressourcen, die Sie auf Ihrem Weg zu einem optimierten Erlebnis unterstützen.
Tatsächlich ist unsere Digital Experience Platform (DXP) ein großartiger Ort, um mit dem Aufbau einer besseren WordPress-Website zu beginnen. Sehen Sie sich noch heute unsere Preispläne an!