Es ist noch nicht lange her, dass Google bekannt gab, dass Websites, deren Ladezeit mehr als drei Sekunden beträgt, nicht SEO-freundlich seien.
Im heutigen Internetzeitalter und digitalen Marketings benötigen Sie eine extrem schnelle Website, um sich gegen Tausende von Mitbewerbern weltweit erfolgreich zu behaupten. Zweifellos erhöht eine schnellere Website die Chancen, Besucher anzulocken und deren Interaktion mit den Inhalten zu steigern.
Das Betreiben einer WordPress-Website bedeutet, dass eine beträchtliche Anzahl von Skripten gleichzeitig ausgeführt werden, um Ihre Website zugänglich zu machen.
Allerdings müssen nicht alle diese Elemente immer geladen werden. Wenn Sie die Leistung Ihrer Website schon einmal mit Google PageSpeed Insights überprüft haben , sind Sie wahrscheinlich auf die Option „Renderblockierendes JavaScript und CSS“ gestoßen, die die Geschwindigkeit beeinträchtigt.
Heute werden wir über diese überflüssigen Dateien sprechen und Ihnen zeigen, wie Sie diese entfernen können, um Ihre Website zu verbessern.
Was ist Render-blockierendes JavaScript und CSS?
Zusammengefasst handelt es sich bei renderblockierendem JavaScript und CSS um eine Reihe von Stylesheets und Skripten, die vollständig ausgeführt werden müssen, bevor eine Site geladen und sichtbar wird.
Die Themes und Plugins, die Sie auf Ihrer WordPress-Website installieren, fügen viele dieser Dateien zum Frontend-Bereich Ihrer Website hinzu. Und wie Sie vielleicht schon vermutet haben, verlangsamen einige davon die Seitenladezeit und verhindern, dass Ihre Seiten gerendert werden.
Wenn ein Website-Besucher Ihre Website öffnet, lädt der Internetbrowser zunächst die erforderlichen JavaScript- und CSS-Dateien und dann das HTML.
Dies ist ein üblicher Vorgang, da eine Seite ohne diese wesentlichen Elemente unbrauchbar wäre. Das Problem besteht darin, dass der Webbrowser die Seite erst dann darstellen kann, wenn diese Dateien vollständig geladen sind.
Der Trick dabei besteht darin, dass Sie das Laden einiger Skripte verzögern können, ohne dass dadurch Probleme für das entstehen, was die Besucher beim Öffnen einer Ihrer Seiten sehen.
Websitebesitzer können Änderungen an ihrer Site vornehmen, um zu verhindern, dass Webbrowser Codes laden, die über das hinausgehen, was für den oberen Teil der Seite, den ein Benutzer sofort sieht, erforderlich ist.
Mit anderen Worten: Die Browser laden nur die für diesen Abschnitt erforderlichen Dateien, bevor der Nutzer die Seite nach unten scrollt. Dieser Bereich von Webseiten wird ATF genannt, was für Above the Fold (Above the Fold) steht. Andere Bereiche, für die der Nutzer nach unten scrollen muss, sind der Nicht-ATF-Bereich.
Wenn Ihre Website also JavaScript- und CSS-Code für Nicht-ATF-Bereiche lädt, dauert das Laden der Seiten länger. Aus diesem Grund versucht Google, Sie darauf hinzuweisen, unnötige Ressourcen im Code Ihrer Website zu vermeiden.
Finden Sie Render-blockierendes JavaScript und CSS
Am einfachsten lässt sich dieses Problem mit einem Geschwindigkeitstest mithilfe von Google PageSpeed Insights feststellen. Rufen Sie dazu die Seite auf, geben Sie einfach Ihre URL in das entsprechende Feld ein und klicken Sie anschließend auf „Analysieren“.
Wenn dieses Problem auf der Seite auftritt, wird Ihnen ein Vorschlag angezeigt, der Sie auffordert, renderblockierendes JavaScript und CSS im sichtbaren Bereich zu entfernen.
Vergessen Sie nicht, dass die meisten Websites zwischen 70 und 90 Punkten erreichen und selbst die leistungsstärksten selten einen Wert nahe 100 erzielen. Versuchen Sie also niemals krampfhaft, 100 Punkte zu erreichen. Konzentrieren Sie sich stattdessen darauf, die höchstmögliche Punktzahl zu erzielen, ohne die Benutzerfreundlichkeit zu beeinträchtigen.
Je nach Design und verwendeten Tools Ihrer Website sind manche Skripte unerlässlich für eine optimale Nutzererfahrung. Daher ist es völlig unklug, diese zu entfernen, um in den Suchergebnissen dieses Google-Tools eine etwas bessere Platzierung zu erzielen.
Beheben Sie renderblockierendes JavaScript und CSS
Es gibt zahlreiche Strategien, um renderblockierendes JavaScript zu vermeiden. Die wichtigsten Methoden sind Async und Defer. Die erste Methode ermöglicht es dem Browser des Benutzers, das JavaScript herunterzuladen, während andere HTML-Elemente geparst werden.
Obwohl der HTML-Parser während des Downloads nicht vollständig aufhört, pausiert er, um das Skript auszuführen. Der Defer-Ansatz hingegen ermöglicht es dem Browser, das JavaScript herunterzuladen, während er andere HTML-Teile analysiert, und führt das Skript erst aus, wenn die HTML-Analyse abgeschlossen ist.
Das Entfernen des renderblockierenden CSS ist schwieriger, da es zu Verzögerungen beim Laden des ATF-Inhalts kommen kann. Das Verfahren ist etwas kompliziert und erfordert gute Kenntnisse der Webentwicklung.
Dennoch richten wir uns an den Durchschnittsnutzer, der seine Website selbst betreibt.
Wir alle wissen, dass WordPress ein modulares System ist, das es durchschnittlichen Benutzern ermöglicht, alles zu optimieren, ohne eine einzige Zeile Code schreiben zu müssen. Die Behebung dieses Problems ist ebenfalls möglich und lässt sich schnell durch die Installation des entsprechenden Plugins lösen.
Die besten WordPress-Plugins zur Behebung von Render-blockierendem JavaScript und CSS
In den folgenden Abschnitten stellen wir fünf leistungsstarke WordPress-Plugins vor , die Ihnen dabei helfen, dieses Problem optimal zu lösen.
Achtung: Bevor Sie eines der folgenden Tools verwenden, sollten Sie unbedingt ein Backup Ihrer Website erstellen, um einen möglichen Datenverlust zu vermeiden.
Autoptimize
Das Autoptimize- Plugin wurde speziell entwickelt, um die von Website-Analysetools wie Google PageSpeed Insights aufgezeigten Probleme zu beheben. Es verbessert die Auslieferung von JavaScript- und CSS-Dateien, ohne sich dabei auf andere Aspekte der Website-Performance zu konzentrieren.
Wenn Sie grundlegende Optimierungsfunktionen suchen, bietet Ihnen dieses Plugin alles Notwendige. Ein großer Vorteil dieses Tools ist die Konvertierung der Bilder Ihrer Website in das optimierte WebP-Format.
Nach der Installation und Aktivierung von Autoptimize müssen Sie in den Plugin-Einstellungen die Optionen „JavaScript-Code optimieren“ und „CSS-Code optimieren“ aktivieren. Achten Sie darauf, die darunterliegenden Optionen, die CSS- und Skriptdateien zusammenfassen, nicht zu aktivieren.
Obwohl dieses Plugin kostenlos erhältlich ist, können Sie auch Premiumpakete erwerben, die Ihnen bei der Website-Konfiguration helfen.
WP Rocket
WP Rocket ist ein bekannter Name unter den WordPress-Optimierungstools und unterstützt Sie in verschiedenen Bereichen wie JavaScript- und CSS-Anpassungen sowie Lazy-Loading-Einstellungen. Die Einrichtung von WP Rocket ist recht einfach, die Bedienung der Benutzeroberfläche kann jedoch anfangs etwas verwirrend sein.
Es ist sofort einsatzbereit und wendet direkt nach der Installation optimale Einstellungen auf Ihrer Website an. Da Website-Fehler aufgrund von Skriptänderungen unvermeidbar sind, aktiviert das Plugin die renderblockierenden JavaScript- und CSS-Einstellungen nicht standardmäßig.
Sie können diese Funktion aber ganz einfach aktivieren, indem Sie die Einstellungen des Plugins aufrufen und in den Abschnitten „CSS-Dateien“ und „JavaScript-Dateien“ nach den entsprechenden Optionen suchen.
Das Haupt-Plugin kostet 49 US-Dollar pro Jahr und beinhaltet ein Jahr Support. Darüber hinaus finden Sie auf WordPress zahlreiche kostenlose Erweiterungen für das Kern-Plugin.
Kaninchenlader
RabbitLoader ist ein hochmodernes WordPress-Performance-Optimierungs-Plugin, das entwickelt wurde, um eine Website schneller, reibungsloser und effizienter laufen zu lassen.
Ähnlich wie das vielfach gelobte WP Rocket hebt RabbitLoader nicht nur die Performance Ihrer Website auf ein neues Niveau, sondern führt auch einige innovative Funktionen ein, die es von anderen Anbietern auf dem Markt abheben.
Caching-Magie: RabbitLoader setzt noch einen drauf, indem es ein dynamisches Caching-System bietet, das sich in Echtzeit an Änderungen auf Ihrer Website anpasst und so sicherstellt, dass Ihre Besucher immer die aktuellsten Inhalte sehen, ohne dass die Geschwindigkeit beeinträchtigt wird.
Bildoptimierung: Bilder können die Ladezeit einer Website erheblich verlangsamen. Die Bildoptimierungsfunktion von RabbitLoader ist jedoch ein echter Durchbruch. Sie komprimiert und skaliert Bilder automatisch auf die optimale Größe, ohne die Qualität zu beeinträchtigen. So lädt Ihre Website schnell und sieht dabei trotzdem gut aus.
Lazy Loading: Sowohl WP Rocket als auch RabbitLoader bieten Lazy Loading für Bilder und iFrames, RabbitLoader geht aber noch einen Schritt weiter und bietet zusätzlich verzögertes Laden von JavaScript.
Kompatibilität: RabbitLoader ist so konzipiert, dass es nahtlos mit einer Vielzahl von WordPress-Themes und -Plugins, wie beispielsweise WP Rocket, zusammenarbeitet. Egal, ob Sie einen einfachen Blog oder einen komplexen Onlineshop betreiben – RabbitLoader optimiert die Performance Ihrer Website ohne Konflikte.
W3 Total Cache
W3 Total Cache ist ein leistungsstarker Performance-Enhancer, der nicht nur Caching-Probleme, sondern auch Probleme, die durch Skripte und Stylesheets verursacht werden, behebt.
Sie können das renderblockierende JavaScript und CSS ganz einfach entfernen, indem Sie zuerst die Option „Minify“ in den Plugin-Einstellungen aktivieren und auf den manuellen Modus einstellen.
Klicken Sie anschließend auf den Tab „Renderblockierende Ressourcen entfernen“ und kopieren Sie die vollständigen Linkadressen der benötigten Dateien für blockierende Skripte und Stylesheets. Diese Links können Sie nun im Bereich „JS“ unter „ Performance > Minify “ einfügen.
W3 Total Cache verfügt über mehr als eine Million aktive Installationen und Sie können es kostenlos von der WordPress.org-Website auf Ihre Site herunterladen.
Geschwindigkeitsverstärker-Pack
Speed Booster Pack ist ein zuverlässiges Tool zur Optimierung von Stylesheets, JavaScripts, Lazy Loading und zur Beseitigung von unnötigem Code. Das Entwicklerteam aktualisiert das Plugin kontinuierlich, um es stets auf dem neuesten Stand der Sicherheitsfunktionen zu halten.
Wenn Sie Produkte und Dienstleistungen online verkaufen, WooCommerce-spezifische Optimierung Die Funktionen des Speed Booster Pack helfen Ihnen erheblich dabei, die Sichtbarkeit Ihres Shops im Internet zu erhöhen.
Sie können renderblockierendes JavaScript und CSS auf Ihrer WordPress-Website schnell beheben, indem Sie im Menü „Speed Booster Pack“ Ihres Admin-Panels auf die Registerkarte „Erweitert“ klicken.
Aktivieren Sie für JavaScript die Optionen „Skripte in die Fußzeile verschieben“ und „JavaScript-Dateien verzögern“. Gehen Sie anschließend zum Menü „CSS-Optimierung“ und wählen Sie aus den verfügbaren Optionen, um die Leistung Ihrer Website zu verbessern.
Speed Booster Pack ist eine kostenlose Lösung, die auf der Website WordPress.org verfügbar ist.
JCH Optimieren
JCH Optimize ist das letzte Plugin auf dieser Liste empfohlener Anwendungen und bietet nützliche Funktionen zur Beschleunigung des Seitenladens . Es hilft Ihnen beispielsweise, die Anzahl der zum Laden Ihrer Seiten erforderlichen HTTP-Anfragen zu reduzieren und gleichzeitig die Seitengröße zu verringern.
Der Sprite-Generator ist eine weitere spannende Funktion dieses Plugins, die die Anzahl der HTTP-Anfragen zum Laden der Hintergrundbilder reduziert.
Mit JCH Optimize können Sie renderblockierendes JavaScript und CSS entfernen, wenn Sie auf einen Premium-Tarif upgraden. Aktivieren Sie dazu einfach die Optionen „Premium“ oder „Optimum“ im Bereich „Automatische Einstellungen“. Die CSS-Auslieferungseinstellungen sind ebenfalls nur in der Pro-Version verfügbar.
Sie können dieses Plugin kostenlos von WordPress.org installieren, benötigen aber einen Premium-Plan, um sein volles Potenzial auszuschöpfen. Die Preise beginnen bei 29 $ für sechs Monate und reichen bis zu 99 $ für lebenslangen Zugriff.
Zusammenfassung
Die Ladegeschwindigkeit einer Website ist eines der wichtigsten Elemente, um Besucher zu gewinnen, zu binden und zu halten. Sie sollten ihr bei der Suchmaschinenoptimierung Ihrer Website hohe Priorität einräumen und mit dem Tool Google PageSpeed Insights Ihre Leistung in diesem Bereich messen.
Der Hinweis auf renderblockierendes JavaScript und CSS ist einer der häufigsten Vorschläge, die Ihnen bei der Verwendung dieses leistungsstarken Tools angezeigt werden. Sie können dieses Problem ganz einfach beheben, indem Sie eines der fünf in diesem Artikel vorgestellten Plugins installieren und so die Ladezeit Ihrer Seiten deutlich beschleunigen.
Wir hoffen, dass dieses Tutorial für Sie hilfreich ist und Sie sich über eine schnell ladende Website und die bestmöglichen Ergebnisse freuen.
