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 Renderblocker-Skripte finden und entfernen, und Ihnen zeigen, wie Sie die Ladegeschwindigkeit Ihrer WordPress-Website erhöhen können.
Was sind renderblockierende CSS- und JS-Skripte und warum sind sie schlecht?
Die meisten Webseiten im Internet bestehen aus drei Schlüsselkomponenten: JavaScript, CSS und Hypertext-Auszeichnungssprachen. Als Basis dient HTML, in das JavaScript und CSS eingebaut 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 Webbrowser herunterzuladen (Strg + S). Der Webbrowser lädt das HTML-Dokument zusammen mit einem Ordner herunter, der alle (oder die meisten) Skripte, Bilder und andere Dateien enthält, die von der Webseite verwendet werden.
Je komplexer die Skripte sind, die 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 clientseitige Benutzer die Renderingzeiten 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 Verarbeitungsblockierungsskripts 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 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 Registerkarte Chrome DevTools-Abdeckung verwenden, um Nutzungsdaten für Ihre Skripts anzuzeigen. Sobald Sie festgestellt haben, welche Skripts nicht optimal sind, können Sie einige Dinge tun, um sie zu korrigieren. Diese Schritte erfordern jedoch einige Programmierkenntnisse, um sie erfolgreich zu implementieren. Sie benötigen mindestens ein Grundverstä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 wie eine lange Zeit erscheinen mag, lohnt es sich, wenn man bedenkt, dass grundlegende Code-Kenntnisse eine wichtige Fähigkeit in der modernen Welt sind. Hier sind jedoch fünf Möglichkeiten, Render-blockierende Skripte zu beheben und die Geschwindigkeit Ihrer Webseite zu erhöhen.
1. Optimieren Sie die Ladereihenfolge
Kopfteil () der Webseite wird verwendet, um Elemente vorab zu laden. Hier sollte die Basis Ihrer Webseite stehen, damit der Benutzer beim Laden Ihrer Webseite nicht mit einem leeren Bildschirm begrüßt wird. Obwohl eingebettetes CSS in Ordnung ist, sollten Sie es vermeiden, JavaScript hier zu platzieren.
Nachdem Sie den Kopfbereich optimiert haben, müssen Sie den Körper optimieren. Die meisten Webbrowser zeigen Webseiten von oben nach unten an. Sie müssen die Skriptaufrufe nach ihrer Wichtigkeit und Komplexität sortieren. Sie sollten Aufrufe von Skripten, die für die Verarbeitung von Webseiten nicht entscheidend sind, zuletzt ausführen, zusammen mit komplexen Skripten, die Zeit in Anspruch nehmen.
2. Minimieren Sie den Code
Das Minimieren von Code beinhaltet das Umschreiben und Entfernen unnötiger Zeichen wie Leerzeichen, Kommentare, Kommas, Zeilenumbrüche usw. Dadurch wird der Code prägnanter und kompakter, was letztendlich die Größe des Skripts reduziert und die Ladezeiten Ihrer Webseite erhöht.
Plugins und Tools wie W3TC haben Module, die JavaScript und CSS in ihren Themen minimieren. Alternativ können Sie Ihren Skriptcode manuell mit einem kostenlosen Online-Tool wie JavaScript Minifier minimieren.
3. Verwenden Sie JavaScript Lazy und asynchrones Laden
Webbrowser lesen Code von oben nach unten. Wenn sie ein Skript-Tag finden, stoppen sie das Laden der Webseite und lesen die Skriptdatei. Dies verlangsamt das Rendern.
du kannst den … benutzen asynchron -Attribut, um das Skript parallel zur Webseite zu laden und auszuführen, sobald es verfügbar ist. Alternativ können Sie die verwenden verschieben -Attribut zum Verzögern des Parsens von Skripten. Das bedeutet, dass er das Skript auch parallel zur Webseite lädt, aber erst dann ausführt, wenn die Webseite vom Browser geparst wird.
Wir empfehlen Ihnen, die nicht zu verwenden asynchron oder verschieben Attribute in Skripten, die zum Rendern und Anzeigen visueller Elemente verwendet werden. Die JavaScript-Schlüsselwörter, die diesen Attributen entsprechen, sind die asynchron Y erwarten von Schlüsselwörter. Sie können sie verwenden, um Ihr JavaScript 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 fehlten CSS 1.0 und 2.0 Benutzeroberflächen-Tools wie grundlegende Steuerelemente und Schieberegler.
Dann kam CSS 3. Es enthielt neue Farben, Kastenschatten, Deckkraft usw. JavaScript eignet sich hervorragend zum Hinzufügen komplexer UI-Steuerelemente. Allerdings ist Javascript ressourcenintensiver als CSS.
Daher verlangsamt der übermäßige Einsatz von JavaScript Ihre Website erheblich. Wenn Sie feststellen, dass Ihre Webseite JavaScript verwendet, um das auszugleichen, was frühere Versionen von CSS verfehlt haben, sollten Sie es optimieren und alles unnötige JavaScript durch CSS ersetzen, wo immer Sie können. Dadurch können Webseiten schneller geladen werden.
5. Entfernen 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 schneller geladen.
Daher ist der beste Weg, die Geschwindigkeit Ihrer Website zu optimieren, alle nicht ausreichend genutzten Skripte zu entfernen. Sie müssen analysieren, welche Skripte völlig unnötig sind, und diese entfernen. Auch hier können Sie die Registerkarte Coverage von Chrome DevTools oder GTmetrix verwenden, um die am wenigsten genutzten Skripts auf Ihrer Webseite zu finden und sie dann zu entfernen.
Nachdem Sie alle unnötigen Funktionen oder Tags entfernt haben, können Sie Skripte mit ähnlichen Funktionen kombinieren. Wenn Sie bereits wissen, wie Sie den Quellcode Ihrer Webseite manipulieren, sollte dies keine schwierige Aufgabe für Sie sein. Benutzer, die nicht so viel Erfahrung oder Kenntnisse im Webdesign haben, sollten sich jedoch keine Sorgen machen. WordPress macht es Ihnen leicht, die Skripte auf Ihrer Website zu identifizieren und mithilfe verschiedener Optimierungs-Plugins zu bearbeiten. Wir werden sie unten 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. Es gibt jedoch eine Reihe von Plugins, die auf die Skriptoptimierung ausgerichtet sind. Einige von ihnen verwenden KI, um Code zu minimieren, die Ladereihenfolge zu ändern und zu wenig genutzte Skripte durch effizientere Codes und Skripte zu ersetzen.
Einige der besten Plugins für die Skriptoptimierung sind:
- WP-Rakete: 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.
- automatisch optimieren: Dies kann unwesentliche Skripte verschieben und entfernen, CSS inline einbetten und Skripte, HTML und Bilder minimieren. Autoptimize ist durch eine offene API und erweiterte Optionen hochgradig anpassbar.
- Gesamter W3-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 Ihnen von WordPress zur Verfügung gestellt wird. Es ermöglicht Ihnen, Rendering-blockierendes JavaScript zu erkennen und es dann asynchron zu verschieben oder zu laden.
Warum empfehlen wir also nicht gleich Plugins? Leider sind einige dieser Plugins kostenpflichtig. Beispielsweise kostet Autoptimize 49 US-Dollar pro Jahr. Obwohl es sich um einen angemessenen Preis handelt, ist er möglicherweise nicht ideal für Leute, die bereits viel Geld für das Hosting und andere Apps und Plugins bezahlen.
Unabhängig davon, ob Sie Plugins verwenden oder manuell nach Skripts suchen, müssen Sie Konzepte wie Minimierung, asynchrones Laden und Ladereihenfolge verstehen. Dies erleichtert Ihnen die Behebung von Ladeproblemen, falls eines Ihrer Skripts fehlschlägt.
