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 Zeitalter des Internets und des digitalen Marketings benötigen Sie die schnellste Website, um mit Tausenden von Konkurrenten weltweit erfolgreich zu konkurrieren. Zweifellos hat eine schnellere Website bessere Chancen, Besucher anzuziehen und deren Engagement für ihre Inhalte 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 sind nicht alle dieser Elemente immer unbedingt erforderlich. Wenn Sie jemals die Leistung Ihrer Website mit Google Page Speed Insights, sind Sie wahrscheinlich schon auf die renderblockierende JavaScript- und CSS-Option gestoßen, die sich auf die Geschwindigkeit auswirkt.
Heute sprechen wir über diese überflüssigen Dateien und erklären Ihnen, wie Sie sie entfernen können, um Ihre Site 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 normaler Vorgang, da eine Seite ohne diese wesentlichen Elemente unbrauchbar ist. Das Problem besteht darin, dass der Webbrowser die Seite erst rendern 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 JavaScript- und CSS-Codes für Nicht-ATF-Abschnitte lädt, dauert das Laden der Seiten daher länger. Aus diesem Grund versucht Google, Sie dazu zu bewegen, die unnötigen Ressourcen in den Codes Ihrer Website nicht mehr auszuführen.
Finden Sie Render-blockierendes JavaScript und CSS
Der einfachste Weg, dieses Problem zu erkennen, ist ein Geschwindigkeitstest mit Google PageSpeed Insights. Sobald Sie die Seite besuchen, geben Sie einfach Ihre URL-Adresse in das erforderliche Feld ein und klicken Sie anschließend auf „Analysieren“.
Wenn dieses Problem auf der Seite auftritt, wird Ihnen ein Vorschlag angezeigt, renderblockierendes JavaScript und CSS im Above-the-Fold-Inhalt zu entfernen.
Es wäre am besten, wenn Sie nicht vergessen, dass die meisten Websites-Score irgendwo zwischen 70 und 90, und selbst die leistungsstärksten erreichen selten eine Zahl nahe 100. Sie sollten Ihre Site also niemals zwingen, 100 zu erreichen. Tun Sie Ihr Bestes, um die höchste Punktzahl zu erreichen, ohne die Benutzererfahrung negativ zu beeinflussen.
Abhängig vom Thema und den Tools, die Sie auf Ihrer Website verwenden, sind einige Skripte unerlässlich für die perfekte UX Sie sollen Ihrem Publikum etwas bieten. Daher ist es völlig unklug, sie zu entfernen, um auf der Ergebnisseite dieses Google-Tools eine etwas höhere Punktzahl zu erreichen.
Beheben Sie renderblockierendes JavaScript und CSS
Es gibt zahlreiche Strategien, um JavaScript zu eliminieren, das die Darstellung blockiert. Die wichtigsten Methoden sind Async und Defer. Die erste Methode ermöglicht es dem Browser des Benutzers, das JavaScript herunterzuladen, während andere HTML-Teile analysiert werden.
Obwohl das Parsen während des Downloads der Datei nicht vollständig gestoppt wird, HTML-Parser pausiert die Ausführung des Skripts während des Downloads. Beim Defer-Ansatz hingegen lädt der Browser das JavaScript herunter, während andere HTML-Teile analysiert werden, 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 durchschnittlichen Benutzer, 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 nächsten Abschnitten stellen wir fünf leistungsstärkste WordPress-Plugins die Ihnen dabei helfen, dieses Problem gründlich zu lösen.
Vorsicht: Bevor Sie eines der folgenden Tools verwenden, erstellen Sie unbedingt eine Sicherungskopie Ihrer Website, um einen möglichen Datenverlust zu vermeiden.
Autoptimize
Das Autoptimize Das Plugin wurde speziell entwickelt, um die von Website-Analysetools wie Google PageSpeed Insights angezeigten Probleme zu beheben. Es verbessert die Bereitstellung von JavaScripts und CSS-Dateien, ohne sich groß auf andere Aspekte der Website-Performance zu konzentrieren.
Wenn Sie nach grundlegenden Optimierungsfunktionen suchen, bietet Ihnen dieses Plugin genau das, was Sie brauchen. Ein großer Vorteil dieses Tools ist die Konvertierung der Bilder Ihrer Website in das optimierte WebP-Format.
Sobald Sie Autoptimize installiert und aktiviert haben, müssen Sie in den Plugin-Einstellungen die Optionen „JavaScript-Code optimieren“ und „CSS-Code optimieren“ aktivieren. Achten Sie darauf, die Kontrollkästchen unter diesen beiden Optionen, die die CSS- und Skriptdateien aggregieren, 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-Modifikationen und Lazy-Loading-Einstellungen. Die Einrichtung von WP Rocket ist recht einfach, aber Sie werden es möglicherweise zunächst schwierig finden, die Funktionsweise der Benutzeroberfläche zu verstehen.
Das Plugin ist sofort einsatzbereit und wendet direkt nach der Installation optimale Einstellungen auf Ihrer Website an. Da Website-Fehlfunktionen aufgrund von Skriptänderungen unvermeidlich sind, aktiviert das Plugin die renderblockierenden JavaScript- und CSS-Einstellungen standardmäßig nicht.
Sie können diese Funktion jedoch ganz einfach aktivieren, indem Sie in den Einstellungen des Plugins nach den entsprechenden Optionen in den Abschnitten „CSS-Dateien“ und „JavaScript-Dateien“ suchen.
Das Haupt-Plugin kostet 49 US-Dollar pro Jahr und beinhaltet ein Jahr Support. Darüber hinaus finden Sie mehrere kostenlose Extras auch für das Kern-Plugin auf WordPress.
Kaninchenlader
Kaninchenlader ist ein hochmodernes Plugin zur Leistungsoptimierung für WordPress, das dafür sorgt, dass eine Website schneller, reibungsloser und effizienter läuft.
Ähnlich wie das weithin anerkannte WP Rocket bringt RabbitLoader nicht nur die Leistung Ihrer Site auf ein neues Niveau, sondern führt auch einige innovative Funktionen ein, die es von anderen Spielern im Spiel abheben.
Caching-Magie: RabbitLoader geht noch einen Schritt weiter und bietet ein dynamisches Caching-System, das sich in Echtzeit an Änderungen auf Ihrer Site anpasst und sicherstellt, dass Ihre Besucher immer die neuesten Inhalte sehen, ohne dass die Geschwindigkeit darunter leidet.
Bildoptimierung: Bilder können eine Website erheblich verlangsamen, doch die Bildoptimierungsfunktion von RabbitLoader verändert dies grundlegend. Sie komprimiert und skaliert Bilder automatisch auf eine optimale Größe, ohne die Qualität zu beeinträchtigen. So wird sichergestellt, dass Ihre Website schnell lädt, ohne dass die visuelle Attraktivität darunter leidet.
Faules Laden: Sowohl WP Rocket als auch RabbitLoader bieten Lazy Loading für Bilder und Iframes, RabbitLoader geht jedoch noch weiter und bietet verzögertes Laden von JavaScript.
Kompatibilität: RabbitLoader ist so konzipiert, dass es, genau wie WP Rocket, reibungslos mit einer Vielzahl von WordPress-Themes und -Plugins funktioniert. Egal, ob Sie einen einfachen Blog oder eine komplexe E-Commerce-Website betreiben – RabbitLoader wurde entwickelt, um die Leistung Ihrer Website ohne Konflikte zu verbessern.
W3 Total Cache
W3 Total Cache ist ein robuster Leistungssteigerer, der nicht nur Caching-Probleme, sondern auch die durch Skripte und Stylesheets verursachten Probleme behebt.
Sie können das renderblockierende JavaScript und CSS einfach entfernen, indem Sie zuerst die Minify-Option in den Plugin-Einstellungen aktivieren und auf den manuellen Modus einstellen.
Klicken Sie anschließend auf die Registerkarte „Render-blockierende Ressourcen entfernen“ und kopieren Sie die vollständigen Linkadressen der erforderlichen Dateien für blockierende Skripte und Stylesheets. Diese Links können Sie nun verwenden und im Abschnitt „JS“ des Leistung>Minimieren Tab.
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
Geschwindigkeitsverstärker-Pack ist ein zuverlässiges Tool zur Optimierung von Stylesheets, JavaScripts, Lazy Loading und zur Beseitigung von Datenmüll. Das Entwicklerteam aktualisiert das Plugin kontinuierlich, um es mit den neuesten Updates und Sicherheitsmaßnahmen auf dem neuesten Stand 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 das Rendern blockierender JavaScript- und CSS-Dateien auf Ihrer WordPress-Website schnell beheben, indem Sie im Speed Booster Pack-Menü Ihres Admin-Bereichs auf die Registerkarte „Erweitert“ klicken.
Aktivieren Sie für JavaScript die Optionen „Skripte in die Fußzeile verschieben“ und „Analyse von JavaScript-Dateien verschieben“. Wechseln 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 Optimieren ist das letzte Element auf dieser Liste der empfohlenen Plugins, das mit nützlichen Tools ausgestattet ist, um Beschleunigen Sie das Laden der Seite. Beispielsweise können Sie damit die Anzahl der zum Laden Ihrer Seiten erforderlichen HTTP-Anfragen verringern und gleichzeitig die Größe dieser Seiten reduzieren.
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 die renderblockierenden JavaScript- und CSS-Elemente entfernen, wenn Sie auf ein Premium-Paket upgraden. Aktivieren Sie dazu einfach die Option „Premium“ oder „Optimum“ im Bereich „Automatische Einstellungen“. 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.
Das renderblockierende JavaScript- und CSS-Element ist einer der häufigsten Vorschläge, die Sie bei der Verwendung des leistungsstarken Tools von Google sehen können. Sie können dieses Problem ganz einfach beheben, indem Sie eines der fünf Plugins installieren, die wir in diesem Artikel vorgestellt haben. Beschleunigen Sie die Ladegeschwindigkeit Ihrer Seiten weitgehend.
Wir hoffen, dass dieses Tutorial für Sie hilfreich ist und Sie sich über eine schnell ladende Website und die bestmöglichen Ergebnisse freuen.
