So eliminieren Sie Render-Blocking-JavaScript und -CSS in Above-the-Fold-Inhalten

Beim Erstellen einer Website gibt es einige Aspekte, die von größter Bedeutung sind, um den Benutzern ein reibungsloses Erlebnis zu bieten. Einer dieser Aspekte ist die Ladezeit. Eine schnell ladende Website wird immer von Besuchern geschätzt, die so schnell wie möglich finden möchten, was sie suchen. Um eine schnelle Ladezeit zu erreichen, sollten Sie lernen, wie Sie JavaScript und CSS, die das Rendering blockieren, in Inhalten "above the fold" eliminieren.

Die Geschwindigkeit einer Website kann durch eine Vielzahl von Faktoren beeinflusst werden, aber die in diesem Artikel diskutierten Faktoren haben den größten Einfluss. Die perfekte Website-Gleichung kann schwierig zu lösen sein, da bestimmte Elemente nicht von Ihren Handlungen abhängen. Sie richten sich insbesondere nach der jeweiligen Situation (z. B. geografischer Standort, Internetgeschwindigkeit). Sie können die CSS-Bereitstellung jedoch optimieren, indem Sie die Elemente ändern, die Sie vollständig steuern können. Erfahren Sie unten mehr über dieses Thema in diesem Artikel, der von unserem Team bei wpDataTables erstellt wurde .

Definieren von Render-Blocking und Inhalten "above the fold".

Renderblockierung

Render-Blocking bezieht sich auf Elemente, die verhindern, dass wichtige Inhalte einer Website (z. B. der Haupttext eines Artikels) geladen werden, bevor die gesamte Seite geladen ist. Ein gutes Beispiel für ein solches Element ist jedes zusätzliche JavaScript oder CSS, das einer Website hinzugefügt wird. Dieser Code kann den Benutzer daran hindern, irgendetwas in seinem Browser zu sehen, bis der Code vollständig ausgeführt wurde, wodurch er zur Renderblockierung wird.

Above-the-Fold-Inhalte

Wenn ein Besucher auf eine Website zugreift, wird er von einem bestimmten Teil der Website begrüßt – dh dem obersten Teil. Um den Rest zu sehen, muss der Benutzer nach unten scrollen oder andere Aktionen auf der Website ausführen. Die Inhalte, die Besucher unmittelbar nach dem Zugriff zu sehen bekommen, werden als „above the fold”-Inhalte bezeichnet.

Über Render-Blocking in JavaScript und CSS

Browser lesen HTML, um eine Website anzuzeigen. Dies ist ein Prozess, der mehrere Schritte umfasst. Wenn der Browser auf Elemente stößt, die auf ein Skript/Stylesheet verweisen, sind zusätzliche Schritte erforderlich, um den Code zu lesen. Der Browser muss eine Datei anfordern, auf eine Antwort warten, die Datei vom Server herunterladen und dann die Datei ausführen.

Natürlich können diese zusätzlichen Schritte die Ladezeit verlangsamen. Denken Sie daran, dass einige WordPress-Themes mehr als nur eine CSS- oder eine JavaScript-Datei beinhalten. Die Ladezeit kann aufgrund dieser Dateien drastisch verlangsamt werden. Aus diesem Grund müssen Sie Render-Blocking-Ressourcen von Ihrer Website entfernen. In den meisten Fällen sind dies keine kritischen Dateien, sodass Sie das Parsen von JavaScript verschieben können, um die Blockierung der Seitenwiedergabe zu verringern und so die Geschwindigkeit Ihrer Website zu verbessern.

Identifizieren von JavaScript und CSS, die das Rendering blockieren

Um JavaScript und CSS, die das Rendering blockieren, in Inhalten "above the fold" zu eliminieren, müssen Sie diese Elemente identifizieren. Eine der einfachsten Möglichkeiten, sie zu identifizieren, besteht darin, Ihre Website mit einem Seitengeschwindigkeitstool zu öffnen, das Ihnen mitteilt, welche Probleme beim Laden auftreten. Googles PageSpeed ​​Insights ist ein solches Tool, das Ihnen helfen soll, die Dateien zu finden, die das Rendering auf Ihrer Website blockieren. Sobald Sie herausgefunden haben, was die Dateien sind, können Sie damit fortfahren, das renderblockierende JavaScript zu entfernen oder neu anzuordnen.

Wie kann man JavaScript und CSS, die das Rendering blockieren, in Inhalten "above the fold" eliminieren?

In dieser Situation haben Sie zwei Möglichkeiten: Lernen Sie, wie Sie JavaScript und CSS, die das Rendering blockieren, in Inhalten "above the fold" selbst beseitigen, oder verwenden Sie ein Plugin, um dies zu tun. Wenn Sie technisch versiert sind und bereit sind zu erfahren, wie Render-Blocking-Ressourcen eliminiert werden, wenden Sie eine dieser Methoden an:

Löschen Sie JavaScript aus dem kritischen Rendering-Pfad

Der kritische Rendering-Pfad sollte nur die für die Website wesentlichen Elemente enthalten. Sie können unnötige JavaScript-Ressourcen aus diesem Pfad verschieben. Dies geschieht durch Hinzufügen bestimmter Attribute, bei denen JavaScript erforderlich ist. Die Attribute sind:

• Async: Dieses Attribut teilt dem Browser mit, dass er sofort mit dem Herunterladen der Ressourcen beginnen soll, um langsame Ladezeiten zu vermeiden. Sobald die Ressourcen verfügbar sind, wird die HTML-Analyse vorübergehend angehalten und die Ressourcen werden geladen.
• Verzögern:  Dieses Attribut weist den Browser an, das Herunterladen der Ressourcen zu verschieben, bis der HTML-Parsing-Prozess abgeschlossen ist. Sobald dies abgeschlossen ist, lädt der Browser die Skripte herunter und rendert sie in der Reihenfolge ihres Erscheinens auf der Website.

Überprüfen Sie, wie CSS-Ressourcen bereitgestellt werden, und optimieren Sie sie

Um Render-Blocking-Ressourcen in CSS zu eliminieren, müssen Sie:

• Identifizieren Sie die für "above the fold"-Inhalte erforderlichen Ressourcen und integrieren Sie die CSS-Stile in HTML.
• Verwenden Sie ein weiteres Attribut, um die unbedingt benötigten CSS-Ressourcen zu kennzeichnen (Medienattribut).
• Laden Sie die CSS-Ressourcen asynchron (unter Verwendung der oben beschriebenen Attribute).

Eine Liste von Plugins, die Ihnen dabei helfen können, Render-Blocking-JavaScript einfacher zu eliminieren

Automatisch optimieren

Um Render-Blocking-JavaScript und CSS in „above the fold”-Inhalten von WordPress zu eliminieren, kannst du Plugins wie Autoptimize verwenden. Dieses Plugin verbessert die Ladezeit Ihrer WordPress-Seite, indem es Code-Bits kombiniert, Code-Blöcke verkleinert, indem unnötige Zeichen entfernt werden (Komprimierung) und so weiter. Durch diese Änderungen ist der Code leichter lesbar und die Dateigröße wird reduziert, wodurch die Ladezeit um einige hundert Millisekunden oder sogar Sekunden verkürzt wird.

Um dieses Plugin zu installieren, müssen Sie lediglich auf Ihr WordPress-Dashboard zugreifen und zur Registerkarte Plugins navigieren. Wählen Sie dann die Option Neu hinzufügen, die sich auf der oberen Seite des Fensters befindet. Danach können Sie in der Suchleiste nach Autoptimize oder anderen Plugins suchen. Klicken Sie auf Jetzt installieren, aktivieren Sie es für die gewünschte Website, und Sie können loslegen.

W3 Gesamtcache

Autoptimize hat viele andere Alternativen, die Sie verwenden können, um Render-Blocking-Ressourcen aus WordPress zu entfernen. Das W3 Total Cache-Plugin ist eines der besseren. Das Interessante an diesem Plugin ist, dass es mehrere zusätzliche Funktionen zur Optimierung von WordPress enthält. Caching stellt den Prozess dar, bei dem bestimmte Dateien auf dem Computer eines Benutzers gespeichert werden, um seine Erfahrung mit der Website zu verbessern. Nachfolgende Besuche werden einfacher und die Ladezeiten verbessern sich.

Speed-Booster-Paket

Eine weitere Option ist das Speed ​​Booster Pack. Sobald Sie es installiert haben, können Sie auf die Einstellungen zugreifen und die Optionen auswählen, die Ihren Anforderungen entsprechen. Das Plugin bietet einige Konfigurationsoptionen wie das Verschieben von Skripten in die Fußzeile oder das Zurückstellen von JavaScript-Dateien vom Parsen. Indem Sie diese auswählen, können Sie JavaScript und CSS, die das Rendering blockieren, in Inhalten "above the fold" mit nur wenigen Klicks entfernen.

JCH optimieren

JCH Optimize ist ein Plugin, das JavaScript und CSS kombiniert und gleichzeitig die Größe der Dateien reduziert. Es hat viele andere Funktionen, die auf lange Sicht nützlich sein können, aber es ist großartig darin, Render-Blocking-Ressourcen zu eliminieren. Navigieren Sie durch die Einstellungen und aktivieren Sie die Funktionen, die für Ihre Website relevant erscheinen.

Auch wenn es einige Aufmerksamkeit erfordert, wird die Lösung dieses Problems große Auswirkungen auf Ihre Website haben. Nachdem Sie gelernt haben, wie man JavaScript und CSS, die das Rendering blockieren, in Inhalten "above the fold" entfernt, stellen Sie sicher, dass Sie alle Elemente, die Ihre Website verlangsamen könnten, so schnell wie möglich entfernen.

Wenn es Ihnen gefallen hat, diesen Artikel darüber zu lesen, wie JavaScript und CSS, die das Rendering blockieren, in Inhalten "above the fold" beseitigt werden, sollten Sie sich diesen Artikel über das Ändern von Schriftarten in WordPress ansehen.

Wir haben auch über einige verwandte Themen geschrieben, wie das Einbetten eines WordPress-Iframes, das Finden der Seiten-ID in WordPress, das Herunterladen der WordPress-Medienbibliothek, das Stoppen eines DDoS-Angriffs und das Ausblenden des Seitentitels in WordPress.