So entfernen Sie Render-Blocking JS & CSS für die Geschwindigkeit der Website

Während die Ästhetik einer Website wichtig ist, sorgen ihr Inhalt und ihre Ladegeschwindigkeit dafür, dass die Leute wiederkommen. WordPress bietet Benutzern eine ausgeklügelte Toolbox mit Plugins und Themen, um schnell ihre eigenen benutzerdefinierten Websites zu erstellen.

Diese Designs und Plugins erfordern jedoch JavaScript (JS) und Cascading Style Sheets (CSS), um zu funktionieren. WordPress erstellt sie automatisch in Form von Skriptdateien. Sie sind oft schlecht optimiert. Als solche können sie Ihre Website erheblich verlangsamen.

Das kann für Leser frustrierend sein. Daher werden wir in diesem Leitfaden untersuchen, wie Sie diese Render-Blocking-Skripte finden und entfernen, und Ihnen zeigen, wie Sie die Ladegeschwindigkeit Ihrer WordPress-Website erhöhen können.

Was sind Render-blockierende JS- und CSS-Skripte und warum sind sie schlecht?

Die meisten Webseiten im Internet bestehen aus drei Schlüsselkomponenten: JavaScript, CSS und Hypertext Markup Languages. Als Basis dient HTML, in das JavaScript und CSS eingebettet sind. Heutzutage ist es jedoch üblicher, Aufrufe externer Skripte in das HTML-Dokument einzubetten.

Diese Skripte werden in einer Warteschlange gespeichert, die Ihr Webbrowser zum Rendern der Webseite verwendet. Der einfachste Weg, um zu sehen, welche Skripte eine Webseite verwendet, ohne auf den Quellcode zu schauen, besteht darin, ihn von Ihrem (Strg + S) Webbrowser herunterzuladen. Der Webbrowser lädt das HTML-Dokument zusammen mit einem Ordner mit allen (oder den meisten) Skripten, Bildern und anderen Dateien herunter, die die Webseite verwendet.

Je komplexere Skripte Ihre Webseite aus der Warteschlange aufrufen muss, desto länger dauert das Rendern. Häufig laden Webbrowser Webseitenressourcen wie Skripte und Bilder in einen lokalen Cache herunter, um Webseiten schneller zu laden. Während Benutzer auf der Client-Seite die Rendering-Zeiten von Webseiten beschleunigen können, indem sie JavaScript deaktivieren, die Cache-Größe erhöhen und AdBlocker verwenden, ist dies keine ideale Lösung. Die Verantwortung sollte beim Webentwickler liegen.

Wenn Sie Beschwerden erhalten oder festgestellt haben, dass Ihre Website Probleme beim Rendern ihrer Inhalte hat, ist es noch nicht zu spät, diese zu beheben.

So optimieren Sie Ihre Website, indem Sie Render-Blocking-Skripte finden und beheben

Bevor Sie entscheiden, welche Skripte beendet oder optimiert werden sollen, müssen Sie die Geschwindigkeit Ihrer Website oder Webseite bewerten. Sie können eine Online-Plattform wie GTmetrix oder PageSpeed ​​Insights von Google verwenden. Alles, was Sie tun müssen, ist die URL der Website oder Webseite einzufügen, die Sie testen möchten, und das Tool wird sie bewerten und andere Erkenntnisse liefern.

Sie werden auch Audits vorschlagen, mit denen Sie Ihre Website schneller machen können. Sie werden Ihnen beispielsweise vorschlagen, weniger Elemente auf Ihrer Webseite zu verwenden oder ungenutztes CSS und JavaScript zu reduzieren. GTmetrix geht so weit, Ihnen zu zeigen, welche Skripte optimiert werden müssen.

Alternativ können Sie die Abdeckungsregisterkarte von Chrome DevTools verwenden, um sich die Nutzungsdaten Ihrer Skripts anzeigen zu lassen. Sobald Sie festgestellt haben, welche Skripts nicht optimal sind, können Sie einige Maßnahmen ergreifen, um sie zu beheben. Diese Schritte erfordern jedoch einige Programmierkenntnisse, um sie erfolgreich zu implementieren. Sie benötigen zumindest ein grundlegendes Verständnis der funktionalen JavaScript-Programmierung.

Die Teilnahme an einem Coding-Tutorial-Kurs (oder Bootcamp) ist ebenfalls eine gute Idee, um Ihre Fähigkeiten weiterzuentwickeln. Im Durchschnitt kann ein Coding-Bootcamp bis zu fünfzehn Wochen dauern, und obwohl dies nach einer langen Zeit klingen mag, lohnt es sich, wenn man bedenkt, wie wichtig grundlegende Code-Kenntnisse in der modernen Welt sind. Nichtsdestotrotz sind hier fünf Möglichkeiten, Render-blockierende Skripte zu reparieren und die Geschwindigkeit Ihrer Webseite zu erhöhen.

1. Optimieren Sie die Ladereihenfolge

Der Head-Bereich (</head></head> ) der Webseite wird zum Vorladen von Elementen verwendet. Hier sollte das Fundament Ihrer Webseite stehen, damit der Benutzer beim Laden Ihrer Webseite nicht von einem weißen Bildschirm begrüßt wird. Obwohl eingebettetes CSS in Ordnung ist, sollten Sie es vermeiden, hier JavaScript zu platzieren.

Nachdem Sie den Kopfbereich optimiert haben, müssen Sie den Körper optimieren. Die meisten Webbrowser rendern Webseiten von oben nach unten. Aufrufe von Skripten müssen Sie nach Wichtigkeit und Komplexität ordnen. Sie sollten Aufrufe von Skripten, die für die Darstellung der Webseite nicht entscheidend sind, zuletzt zusammen mit komplexen Skripten platzieren, die Zeit in Anspruch nehmen.

2. Minimieren Sie den Code

Beim Minimieren von Code wird dieser umgeschrieben und unnötige Zeichen wie Leerzeichen, Kommentare, Kommas, Zeilenumbrüche usw. gelöscht. Dadurch wird der Code prägnanter und kompakter, was letztendlich die Größe des Skripts verringert und die Ladezeiten Ihrer Webseite verlängert.

Plugins und Tools wie W3TC verfügen über Module, die JavaScript und CSS in Ihren Designs minimieren. Alternativ können Sie Ihren Skriptcode manuell mit einem kostenlosen Online-Tool wie JavaScript Minifier minimieren.

3. Verwenden Sie verzögertes und asynchrones Laden von JavaScript

Webbrowser lesen Code von oben nach unten. Wenn sie auf ein Skript-Tag stoßen, stoppen sie das Laden der Webseite und lesen die Skriptdatei. Dies verlangsamt das Rendern.

Mit dem async -Attribut können Sie das Skript parallel zur Webseite laden und ausführen, sobald es verfügbar ist. Alternativ können Sie das Attribut defer verwenden, um das Parsen von Skripten zu verzögern. Das heißt, er lädt das Skript auch parallel zur Webseite, führt es aber erst aus, wenn der Browser die Webseite parst.

Wir raten davon ab, die Attribute „ async“ oder „defer “ für Skripts zu verwenden, die zum Rendern und Anzeigen visueller Elemente verwendet werden. Die JavaScript-Schlüsselwortäquivalente zu diesen Attributen sind die Schlüsselwörter async und await . Sie können sie verwenden, um Ihre Javascripts asynchroner zu laden, ohne die HTML-Tags auf Ihrer Webseite zu bearbeiten.

4. Ersetzen Sie visuelle JavaScript-Elemente durch CSS3

In der Vergangenheit war CSS nicht so vielseitig wie heute. Zum Beispiel waren CSS 1.0 und 2.0 frei von UI-Tools wie grundlegenden Steuerelementen und Schiebereglern.

Dann kam CSS 3. Es präsentierte neue Farben, Boxschatten, Deckkraft usw. JavaScript eignet sich hervorragend zum Hinzufügen komplexer Steuerelemente für die Benutzeroberfläche. Javascript ist jedoch ressourcenintensiver als CSS.

Daher verlangsamt die übermäßige Verwendung von JavaScript Ihre Website erheblich. Wenn Sie feststellen, dass Ihre Webseite JavaScript verwendet, um die Schwachstelle auszugleichen, wo frühere CSS-Versionen fehlgeschlagen sind, sollten Sie sie ändern und alles unnötige JavaScript durch CSS ersetzen – wo immer Sie können. Dadurch können Webseiten schneller geladen werden.

5. Beseitigen Sie alle unnötigen Skripte

Der Zweck von JS und CSS besteht darin, die Funktionalität von Webseiten zu erweitern und Logik hinzuzufügen, wo HTML dies nicht kann. HTML 5.3 kam jedoch mit neuen Tags, die einige CSS- und JS-Operationen überflüssig machen würden. Durch die Verwendung von HTML anstelle von Skripten werden Ihre Webseiten natürlich schneller geladen.

Daher ist der beste Weg, die Geschwindigkeit Ihrer Website zu optimieren, alle nicht ausgelasteten Skripte zu eliminieren. Sie müssen analysieren, welche Skripte völlig unnötig sind, und sie entfernen. Auch hier können Sie die Coverage-Registerkarte von Chrome DevTools oder GTmetrix verwenden, um die am wenigsten genutzten Skripte auf Ihrer Webseite zu finden und sie dann zu entfernen.

Sobald Sie alle unnötigen Funktionen oder Tags entfernt haben, können Sie Skripte kombinieren, deren Funktionen ähnlich sind. Wenn Sie bereits wissen, wie Sie sich im Quellcode Ihrer Webseite zurechtfinden, sollte dies keine schwierige Aufgabe für Sie sein. Benutzer, die nicht so erfahren oder sachkundig im Webdesign sind, sollten sich jedoch keine Sorgen machen. WordPress erleichtert es Ihnen, Skripte auf Ihrer Website zu identifizieren und mithilfe verschiedener Optimierungs-Plugins zu bearbeiten. Wir werden diese als nächstes behandeln.

6. Verwendung von Plugins zur Optimierung Ihrer WordPress-Website

Auch hier benötigen Sie keine Programmierkenntnisse, um Ihre WP-Website zu optimieren. Obwohl etwas Erfahrung helfen würde. Dennoch gibt es eine Reihe von Plugins, die auf die Skriptoptimierung ausgerichtet sind. Einige von ihnen verwenden KI, um Code zu minimieren, die Ladereihenfolge zu ändern und nicht ausgelastete Skripte durch effizienteren Code und Skripte zu ersetzen.

Einige der besten Plugins für die Skriptoptimierung sind:

• WP Rocket : Dies ist eines der beliebtesten Plugins für die Weboptimierung. Es kann automatisch erkennen, welche Skripte problematisch sind, und sie für Sie beheben. Sie können es für schnelles Caching, Deferenz, Komprimierung und Minimierung verwenden.
• Autoptimize : Dies kann unwesentliche Skripte verschieben und eliminieren, Inline-CSS integrieren und Skripte, HTML und Bilder minimieren. Autoptimize ist durch eine offene API und erweiterte Optionen hochgradig anpassbar.
• W3 Total Cache : Dieses Plugin erfordert ein wenig Arbeit, um es zu verwenden. Sie müssen Skripte manuell nachverfolgen und identifizieren, bevor Sie sie entfernen oder bearbeiten. In den meisten Fällen ist dieses Plugin bereits mit Ihrem WordPress-Paket verfügbar.
• Asynchrones Javascript : Ein Open-Source-Plugin, das von WordPress präsentiert wird. Es ermöglicht Ihnen, Render-blockierendes JavaScript zu erkennen und es dann zu verschieben oder asynchron zu laden.

Warum haben wir also nicht gleich Plugins empfohlen? Leider sind einige dieser Plugins kostenpflichtig. Zum Beispiel kostet Autoptimize 49 $ pro Jahr. Es ist zwar eine angemessene Gebühr, aber für Leute, die bereits einen großen Geldbetrag für das Hosting und andere Anwendungen und Plugins bezahlen, möglicherweise unideal.

Unabhängig davon, ob Sie Plugins verwenden oder Skripte manuell suchen, müssen Sie Konzepte wie Minifizierung, asynchrones Laden und Ladereihenfolge verstehen. Dies erleichtert Ihnen die Behebung von Ladeproblemen, falls eines Ihrer Skripts fehlschlägt.