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 jemals die Leistung Ihrer Website mit Google Page Speed InsightsSie sind wahrscheinlich schon einmal auf die renderblockierende JavaScript- und CSS-Option gestoßen, die sich auf die Geschwindigkeit auswirkt.
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.
Es wäre am besten, wenn Sie nicht vergessen, dass die meisten Websites-Score Irgendwo zwischen 70 und 90 Punkten, und selbst die leistungsstärksten Websites erreichen selten einen Wert nahe 100. Sie sollten Ihre Website also niemals krampfhaft auf 100 Punkte ausrichten. Tun Sie Ihr Möglichstes, um die höchste Punktzahl zu erreichen, ohne die Benutzerfreundlichkeit 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 Ihren Zielgruppen Angebote machen. Daher ist es völlig unklug, diese zu entfernen, um in diesem Google-Tool eine etwas höhere Punktzahl auf der Ergebnisseite zu erreichen.
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 Analyseprozess während des Herunterladens der Datei nicht vollständig unterbrochen wird, HTML-Parser Die erste Methode pausiert die Ausführung des Skripts, sobald es heruntergeladen ist. Die zweite Methode, `Defer`, ermöglicht es dem Browser hingegen, das JavaScript herunterzuladen, während er andere HTML-Bestandteile 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 werden wir fünf vorstellen. 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 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-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.
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 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 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 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 die Ladezeit einer Website erheblich verlangsamen, doch die Bildoptimierungsfunktion von RabbitLoader ist 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.
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 nahtlos mit einer Vielzahl von WordPress-Themes und -Plugins zusammenarbeitet, genau wie WP Rocket. 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 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 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 Abschnitt „JS“ der Datei einfügen. 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 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 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 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 bei der Verwendung von Googles leistungsstarkem Tool angezeigt werden. Sie können dieses Problem leicht beheben, indem Sie eines der fünf in diesem Artikel vorgestellten Plugins installieren. 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.
