So beseitigen Sie Rendering-blockierende Ressourcen in WordPress

Hinweis: Der folgende Artikel hilft Ihnen dabei: So beseitigen Sie Rendering-blockierende Ressourcen in WordPress

So beseitigen Sie Rendering-blockierende Ressourcen in WordPress

Derzeit gibt es 810 Millionen Websites, die WordPress verwenden eine aktuelle Studie von Colorlib. Obwohl diese Zahl beeindruckend ist, zeigt sie keine Anzeichen einer Verlangsamung.

Dieselbe Studie zeigt, dass täglich 500 neue Websites auf WordPress erstellt werden. Um es ins rechte Licht zu rücken: Diese Zahl steht im Vergleich zu nur 60–80 neuen Websites pro Tag für Plattformen wie Squarespace und Shopify.

WordPress ist nicht ohne Grund beliebt. Es handelt sich um eine benutzerfreundliche Plattform, die jeder nutzen kann, um einen Blog oder ein Unternehmen zu starten. Die Plugin-Bibliothek bietet Benutzern außerdem nahezu unbegrenzte Funktionalität auf ihrer Website. Aber auch diese Plugin-Bibliothek kann ein Problem verursachen.

Google ist sich darüber im Klaren, dass die Seitengeschwindigkeit ein entscheidendes Ranking-Signal für SEO ist. Dies liegt daran, dass die Ladegeschwindigkeit einer Seite direkt mit der gesamten Benutzererfahrung zusammenhängt.

Um die für Google akzeptablen Seitengeschwindigkeitswerte zu erreichen, sind möglicherweise einige Website-Anpassungen erforderlich. Eine dieser Anpassungen, die Google normalerweise fordert, besteht darin, die Renderblockierung für JavaScript in WordPress zu entfernen.

Erhalten Sie vollständig verwaltetes WordPress-Hosting

Versorgen Sie Ihre Website mit dem branchenweit am besten optimierten WordPress-Hosting

Identifizieren von Rendering-blockierenden Ressourcen

Der erste Schritt, um zu lernen, wie man Render-blockierende Ressourcen in WordPress entfernt, besteht darin, herauszufinden, um welche Ressourcen es sich handelt. Der Prozess ist nicht schwierig, erfordert jedoch die Verwendung einiger Website-Analysetools.

Die DevTools von Google Chrome bieten drei Optionen zum Identifizieren von renderblockierenden Ressourcen. Diese drei Tools sind:

In Lighthouse werden Ihre Rendering-blockierenden Ressourcen auf der Registerkarte „Möglichkeiten“ angezeigt, jedoch nur, wenn diese Ressourcen Probleme auf Ihrer Website verursachen. Wenn Sie die Registerkarte „Gelegenheiten“ auswählen, werden die gekennzeichneten Rendering-blockierenden Ressourcen, eine kurze Beschreibung des von ihnen verursachten Problems und ein Vorschlag zur Behebung angezeigt.

PageSpeed ​​Insights und GTmetrix sind Plattformen, die die Bibliothek von Lighthouse verwenden, um mehrere Ranking-Faktoren von Google zu messen, wie z. B. Seitengeschwindigkeit, Core Web Vitals usw. Sie führen „Ressourcen, die das Rendern blockieren, beseitigen“ als eine der Lösungen für Ihre Website auf, dies ist jedoch möglicherweise der Fall mit niedriger Priorität aufgeführt werden.

Lesen:  Die Rolle der Zusammenfassung im Lernprozess

Obwohl die Plattform möglicherweise eine niedrige Priorität angibt, listet sie dennoch die einzelnen Dateien auf, die das Problem verursachen, und bietet Ihnen eine detaillierte Lösung.

Gemeinsame Ressourcen, die das Rendern blockieren

Typischerweise ist in der WordPress-Welt Der Begriff „renderblockierende Ressourcen“ bezieht sich auf JavaScript oder CSS.

Nicht alle CSS- oder JavaScript-Dateien blockieren das Rendern, aber beide Quellen sind für die meisten Geschwindigkeitsprobleme der Website verantwortlich. Zusätzliche Ressourcen, die das Rendern blockieren, könnten sein:

  • HTML-Importe
  • CSS-Stylesheets

HTML-Importe erfreuen sich nicht mehr so ​​großer Beliebtheit, aber es ist immer noch wichtig, sie zu kennen. Sie sind möglicherweise noch auf vielen älteren Websites vorhanden, obwohl es sich dabei um veraltete Technologie handelt.

So entfernen Sie Rendering-blockierende Ressourcen in WordPress

Nachdem wir nun ein wenig Hintergrundwissen darüber haben, warum das Entfernen von renderblockierendem JavaScript in WordPress wichtig ist, wollen wir uns Schritt für Schritt mit dem Prozess zur Beschleunigung einer WordPress-Site befassen.

Schritt 1: CSS- und JavaScript-Dateien „minimieren“.

Der erste Schritt besteht darin, die Menge der auf Ihrer Website ausgeführten CSS- und JavaScript-Dateien zu reduzieren. Sie können dies erreichen, indem Sie die Menge unnötiger Leerzeichen und Kommentare im Code Ihrer Website reduzieren.

Schritt 2: CSS und JavaScript verketten

Dieser Prozess mag komplexer klingen, als er tatsächlich ist. Beim Verketten geht es darum, geeignete .css- und .js-Dateien zu kombinieren, um den von ihnen verbrauchten Speicherplatz zu reduzieren. Im Code Ihrer Website sollten nur eine Handvoll Dateien verkettet werden, sodass die Handhabung nicht zu groß sein sollte.

Schritt 3: Verzögern Sie das Laden von JavaScript

Sie können Ihre JavaScript-Dateien so konfigurieren, dass sie nach allen anderen Elementen auf Ihren Webseiten gestartet werden. Eine der beliebtesten Möglichkeiten, dies zu tun, ist ein fortgeschritteneres Thema namens „Asynchrones Laden“, das wir später behandeln werden.

Diese drei Schritte runden den Prozess zum Entfernen von renderblockierendem JavaScript in WordPress ohne Plugin ab. Die gleichen Schritte gelten auch für CSS-Dateien.

Obwohl diese Schritte recht einfach sind, kann es eine Herausforderung sein, sie manuell in WordPress auszuführen. Dies liegt zum großen Teil an der Natur der WordPress-Plugins. Jedes Frontend-Plugin auf Ihrer Website führt möglicherweise mehrere eigene CSS- und JavaScript-Dateien aus.

Lesen:  So korrigieren Sie die Perspektive im Foto

WordPress bietet eine Liste, die alle Ihre JavaScript- und CSS-Dateien aller Plugins an einem Ort zusammenfasst. Dies macht zwar die Sache einfacher, aber der einfachste Weg, Render-blockierende Ressourcen zu entfernen, ist mit einem Plugin.

Eliminieren Sie renderblockierende CSS- und JavaScript-Ressourcen mit WordPress-Plugins

WordPress-Plugins sind hervorragende Tools, um Ihrer Website alle möglichen Funktionen bereitzustellen – insbesondere in der Welt des E-Commerce. Viele dieser Plugins bieten jedoch auch Lösungen für technische Website-Probleme, wie z. B. die Seitengeschwindigkeit und das Entfernen von Rendering-blockierenden Ressourcen.

Hier ist eine Liste einiger beliebter Plugins und Tools, mit denen Sie Rendering-blockierende Ressourcen eliminieren und Ihren Website-Seiten eine blitzschnelle Geschwindigkeit verleihen können.

1. JetPack

Durch die Installation von JetPack Boost auf Ihrer Website erhalten Sie alle Tools, die Sie benötigen, um Rendering-blockierende Ressourcen zu entfernen und Ihre Seitengeschwindigkeit zu optimieren. JetPack Boost enthält Kippschalter, mit denen Sie die CSS-Optimierung einfach aktivieren und nicht unbedingt erforderliches JavaScript direkt in den Plugin-Einstellungen zurückstellen können.

Sie können auch nicht unbedingt benötigte Bilder zurückstellen, die zwar keine Rendering-blockierenden Ressourcen darstellen, aber die Gesamtgeschwindigkeit der Website verbessern können. Darüber hinaus gibt JetPack Boost Ihrer Website eine Gesamtbewertung, die Sie überwachen können, um zu sehen, wie sich Änderungen auf Ihre Website auswirken.

2. JCH-Optimierung

WordPress-Benutzer müssen für dieses Plugin etwas technisch versierter sein als die meisten anderen, aber es ist nützlich, um die Seitengeschwindigkeit zu erhöhen. JCH Optimize erhöht die Geschwindigkeit, indem es die Anzahl der HTTP-Anfragen reduziert, die zum Laden Ihrer Webseiten erforderlich sind.

Das Plugin hilft über seinen Sprite-Generator auch bei der Optimierung von Bildern für eine WordPress-Site. Diese Funktion kombiniert größere Website-Bilder zu kleinen „Sprites“, wodurch sie für Ihren Browser einfacher zu laden sind.

Leider erfordert JHC Optimize ein kostenpflichtiges Abonnement, aber bei 29 US-Dollar pro Monat sind über 10.000 WordPress-Benutzer der Meinung, dass es das Geld wert ist.

3. Geschwindigkeits-Booster-Paket

Die Funktionen dieses Plugins helfen Ihnen, Unordnung zu beseitigen, CSS zu optimieren und ein „verzögertes Laden“ von Website-Elementen zu ermöglichen. Das Entwicklungsteam hält das Plugin auf dem neuesten Stand und lässt sich sogar in WooCommerce integrieren, um E-Commerce-Benutzern zu helfen.

Möglicherweise ist einiges an „Versuch und Irrtum“ nötig, um das kostenlose Plugin richtig einzurichten, aber fühlen Sie sich nicht allein gelassen. Einer der größten Vorteile des Speed ​​Booster Packs ist seine Unterstützung. Das Entwicklungsteam stellt drei praktische Supportpakete auf professionellem Niveau zur Verfügung, die Ihnen dabei helfen, das Speed ​​Booster Pack so zu konfigurieren, dass es den individuellen Anforderungen Ihrer Website entspricht.

Lesen:  MSI Claw vs. Steam Deck: Welchen Handheld-Gaming-PC sollten Sie wählen?

4. WP-Rakete

WP Rocket bietet mehrere Funktionen, die dabei helfen, Rendering-blockierende Ressourcen zu entfernen und eine WordPress-Site im Hinblick auf Geschwindigkeit zu optimieren. Das Plugin kann Ihnen helfen:

  • Verschieben Sie Remote-JavaScript-Abfragen
  • Führen Sie eine CSS- und JavaScript-Minifizierung durch
  • Implementieren Sie „Lazy Loading“ für Bilder

Das Plugin bietet einen einfachen Einrichtungsprozess für WordPress, aber einigen Benutzern gefallen die Änderungen, die es an Ihrem WP-Dashboard vornimmt, möglicherweise nicht. Wenn Sie mit dem herkömmlichen WordPress-Setup vertraut sind, kann es etwas gewöhnungsbedürftig sein. Unabhängig von der Änderung der Benutzeroberfläche bietet das Plugin weiterhin zahlreiche Funktionen und Tools zum Entfernen von Rendering-blockierenden Ressourcen.

Der Betrieb von WP Rocket kostet für das primäre Plugin 49 US-Dollar pro Jahr. Sie können auch eine Handvoll kostenloser Extras aus der WordPress-Plugin-Bibliothek hinzufügen.

4. Automatisch optimieren

Autoptimize verfügt über eine einzigartige Möglichkeit, Bilder zu komprimieren, um die Geschwindigkeit Ihrer Website zu erhöhen. Das Plugin erledigt dies, indem es alle Bilder in das WebP-Format konvertiert. Darüber hinaus bietet Autoptimize alle grundlegenden Render-Blockierungstools, die Sie sich vorstellen können, wie die Minimierung von CSS und JavaScript sowie Skript-Caching-Funktionen. Das Autoptimize-Plugin funktioniert auch mit dem Asynchrones JavaScript-Plugin.

Das Plugin arbeitet mit PageSpeed ​​Insights zusammen und optimiert speziell die von dieser Plattform erkannten Probleme. Die Einrichtung von Autoptimize kann etwas komplex sein, aber sobald sich Benutzer an die Benutzeroberfläche gewöhnt haben, werden sie die darin enthaltenen Funktionen zu schätzen wissen.

Sie können zwei Versionen dieses Plugins erwerben – eine benutzerdefinierte Konfigurationsversion für 165 $ oder eine Expertenkonfiguration, die eine professionelle Überprüfung Ihrer Website für 667 $ beinhaltet.

Fortschrittliche Techniken zur Beseitigung von Rendering-blockierenden Ressourcen

Für Leute, die noch einen Schritt weiter gehen und mehr Kontrolle über das Entfernen von Rendering-blockierenden Ressourcen auf ihrer WordPress-Site haben möchten, gibt es ein paar manuelle Methoden, die Sie implementieren können.

Asynchrones und verzögertes Laden für JavaScript- und CSS-Dateien

Wenn Sie JavaScript zu WordPress (oder CSS) hinzufügen, können Sie dem Code Ihrer Website ein „async“- oder „defer“-Attribut hinzufügen. Das Zuweisen dieser Markierung zu bestimmten Dateien führt dazu, dass Ihre Website diese als nicht wesentlich behandelt und Ihrem Browser signalisiert, sie getrennt von anderen kritischen Dateien auf der Website darzustellen.

Um einem bestimmten Skript asynchrones Laden zuzuweisen, fügen Sie „