Während die Ästhetik einer Website wichtig ist, sorgen ihr Inhalt und ihre Ladegeschwindigkeit dafür, dass die Leute immer wiederkommen. WordPress bietet Benutzern eine ausgeklügelte Toolbox von Plugins und Themes, um schnell ihre eigenen benutzerdefinierten Websites zu erstellen.
Diese Themes und Plugins benötigen 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.
Dies kann für die Leser frustrierend sein. Daher werden wir in diesem Handbuch 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 Rendering-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. HTML dient als Basis, während JavaScript und CSS darin eingebettet sind. Heutzutage ist es jedoch üblicher, Aufrufe externer Skripte in das HTML-Dokument einzubetten.
Diese Skripte werden in einer Warteschlange gehalten, die Ihr Webbrowser zum Rendern der Webseite verwendet. Der einfachste Weg, um zu sehen, welche Skripte eine Webseite verwendet, ohne sich den Quellcode anzusehen, besteht darin, sie 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 Renderzeiten von Webseiten um beschleunigen können JavaScript deaktivieren, die Cachegröß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 auf Ihrer Website Probleme beim Rendern des Inhalts auftreten, ist es noch nicht zu spät, das Problem zu beheben.
So optimieren Sie Ihre Website, indem Sie Render-Blocking-Skripte finden und beheben
Bevor Sie entscheiden, welche Skripte Sie beenden oder optimieren möchten, müssen Sie die Geschwindigkeit Ihrer Website oder Webseite bewerten. Sie können eine Online-Plattform wie GTmetrix oder Googles PageSpeed Insights verwenden. Sie müssen lediglich die URL der Website oder Webseite eingeben, die Sie testen möchten, und das Tool bewertet sie und liefert weitere Erkenntnisse.
Sie werden auch Audits vorschlagen, mit denen Sie Ihre Website schneller machen können. Sie schlagen beispielsweise vor, 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 Registerkarte „Abdeckung“ in Chrome DevTools um Ihnen die Nutzungsdaten Ihrer Skripte anzuzeigen. Sobald Sie erkannt haben, welche Skripte nicht optimal sind, können Sie einige Dinge tun, um sie zu beheben. Diese Schritte erfordern jedoch einiges an Programmierkenntnissen, 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 auch eine gute Idee, um Ihre Fähigkeiten weiterzuentwickeln. Im Durchschnitt kann ein Coding Bootcamp bis zu 15 Wochen bis zum Abschluss, und dies mag sich nach einer langen Zeit anhören, aber es lohnt sich, wenn man bedenkt, wie wichtig grundlegende Codekompetenz in der modernen Welt ist. Dennoch finden Sie hier fünf Möglichkeiten, Render-Blocking-Skripte zu beheben und die Geschwindigkeit Ihrer Webseite zu erhöhen.
1. Optimieren Sie die Ladereihenfolge
Der Kopfbereich () der Webseite wird zum Vorladen von Elementen verwendet. Die Grundlage Ihrer Webseite sollte hier liegen, damit der Benutzer beim Laden Ihrer Webseite nicht mit einem weißen Bildschirm begrüßt wird. Obwohl eingebettetes CSS in Ordnung ist, sollten Sie es vermeiden, JavaScript hier einzufügen.
Nachdem Sie das Kopfteil optimiert haben, müssen Sie den Körper optimieren. Die meisten Webbrowser rendern Webseiten von oben nach unten. Sie müssen Aufrufe von Skripten nach ihrer Wichtigkeit und Komplexität ordnen. Sie sollten Skripte, die für das Rendering der Webseite nicht entscheidend sind, zuletzt zusammen mit komplexen Skripten platzieren, die Zeit in Anspruch nehmen.
2. Code minimieren
Das Minimieren von Code beinhaltet das Umschreiben und das Löschen 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 für Ihre Webseite erhöht.
Plugins und Tools wie W3TC verfügen über Module, die JavaScript und CSS in Ihren Themes verkleinern. Alternativ können Sie Ihren Skriptcode auch manuell mit einem kostenlosen Online-Tool wie JavaScript Minifier verkleinern.
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.
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 verschieben -Attribut, um das Parsen von Skripten zu verzögern. Dies bedeutet, dass es das Skript auch parallel zur Webseite lädt, es jedoch nur ausführt, wenn der Browser die Webseite parst.
Wir raten davon ab, die asynchron oder verschieben Attribute für Skripte, die zum Rendern und Anzeigen von visuellen Elementen verwendet werden. Die JavaScript-Schlüsselwortäquivalente zu diesen Attributen sind die asynchron und erwarten Schlüsselwörter. Sie können sie verwenden, um Laden Sie Ihre Javascripts asynchroner 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. CSS 1.0 und 2.0 enthielten beispielsweise keine UI-Tools wie grundlegende Steuerelemente und Schieberegler.
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 Verwendung übermäßiger JavaScript-Mengen Ihre Website erheblich. Wenn Sie feststellen, dass Ihre Webseite JavaScript verwendet, um die Lücke zu schließen, wo frühere CSS-Versionen versagt haben, sollten Sie es ändern und alles unnötige JavaScript durch CSS ersetzen – wo 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 auf 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, um die Geschwindigkeit Ihrer Website zu optimieren, alle ungenutzten Skripte zu eliminieren. Sie müssen analysieren, welche Skripte völlig unnötig sind, und sie entfernen. Auch hier können Sie die Registerkarte Coverage von Chrome DevTools oder GTmetrix verwenden, um die am wenigsten genutzten Skripte auf Ihrer Webseite zu finden und sie dann zu entfernen.
Nachdem 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 im Webdesign nicht so erfahren oder versiert sind, sollten sich jedoch keine Sorgen machen. WordPress erleichtert es Ihnen, Skripte auf Ihrer Website zu erkennen und mit verschiedenen Optimierungs-Plugins zu bearbeiten. Wir werden diese als nächstes behandeln.
6. Verwenden von Plugins zur Optimierung Ihrer WordPress-Website
Auch hier benötigen Sie keine Programmierkenntnisse, um Ihre WP-Website zu optimieren. Obwohl etwas Erfahrung hilfreich wäre. 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 effizientere 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.
- Autooptimieren: Dies kann nicht notwendige Skripte zurückstellen und eliminieren, Inline-CSS integrieren und Skripte, HTML und Bilder minimieren. Autoptimize ist durch eine offene API und erweiterte Optionen hochgradig anpassbar.
- W3 Gesamtcache: Dieses Plugin erfordert ein wenig Arbeit, um es zu verwenden. Sie müssen Skripts 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 von WordPress. Es ermöglicht Ihnen, JavaScript zu erkennen, das das Rendern blockiert, und es dann zu verschieben oder asynchron zu laden.
Warum haben wir also nicht gleich Plugins empfohlen? Leider werden Sie einige dieser Plugins kosten. Autoptimize kostet beispielsweise 49 US-Dollar pro Jahr. Obwohl es sich um eine angemessene Gebühr handelt, kann sie für Leute, die bereits einen großen Teil des Geldes für das Hosting und andere Anwendungen und Plugins bezahlen, ungeeignet sein.
Unabhängig davon, ob Sie Plugins verwenden oder manuell nach Skripten suchen, müssen Sie jedoch Konzepte wie Minimierung, asynchrones Laden und Ladereihenfolge verstehen. Es erleichtert Ihnen die Behebung von Ladeproblemen, falls eines Ihrer Skripte fehlschlägt.
