Was sind Render-Blocking-Ressourcen und wie werden Probleme mit Render-Blocking behoben?

Render-Blocking-Ressourcen sind einer der häufigsten Gründe für langsam ladende Websites. Und wenn Ihre Website nicht schnell genug ist, schaden Sie nicht nur der Benutzererfahrung Ihrer Besucher, sondern auch Ihrem Suchmaschinenranking. Die schlechte Nachricht ist, dass Sie Kunden und Einnahmen verlieren, wenn Ihre Website langsam ist.

Es gibt jedoch auch gute Neuigkeiten – Sie können die Geschwindigkeit Ihrer Website verbessern, indem Sie Render-Blocking-Ressourcen eliminieren. In diesem Artikel erklären wir, wie sich Renderblocking-Ressourcen auf Ihre Ladezeiten auswirken, und zeigen Ihnen, wie Sie sie beheben können.

Was sind Render-Blocking-Ressourcen?

Die häufigsten Render-Blocking-Ressourcen sind JavaScript- und CSS-Dateien, die sich im Kopf Ihrer Webseite befinden. Sie werden im Bereich „above the fold“ geladen (oder der Bereich, den Sie normalerweise auf einer Website sehen, bevor Sie nach unten scrollen, um den Rest des Inhalts zu sehen) und sind Teil des kritischen Rendering-Pfads, der von einem Webbrowser verwendet wird.

Laienhaft ausgedrückt bedeutet dies, dass bestimmte Ereignisse eintreten müssen, damit Ihr Browser die anfängliche Ansicht einer Webseite richtig anzeigen (rendern) kann. Hier ist ein Beispiel dafür, wie ein grundlegender Rendering-Pfad funktioniert:

• Der Browser lädt eine Webseite herunter, die aus einer HTML-Datei besteht, die die Struktur der Webseite enthält
• Der Browser liest dann den HTML-Code und bemerkt 3 zusätzliche Dateien: eine CSS-Datei, eine Javascript-Datei und ein Bild
• Der Browser lädt zuerst das Bild herunter
• Der Browser erkennt dann, dass er die Seite nicht weiter anzeigen kann, ohne CSS und JavaScript zu greifen
• Der Browser lädt die CSS-Datei herunter und liest sie, um sicherzustellen, dass nichts anderes aufgerufen wird
• Der Browser lädt die JavaScript-Datei herunter und liest sie, um sicherzustellen, dass nichts anderes aufgerufen wird
• Der Browser kann schließlich die Webseite anzeigen

Während der Browser damit beschäftigt ist, jede der CSS- und JavaScript-Dateien zu laden und zu lesen, starren Ihre Besucher auf einen leeren Bildschirm und warten darauf, dass Ihre Website geladen wird. Wenn Sie ein CMS wie WordPress verwenden, kann Ihr Browser eine ganze Weile beschäftigt sein, da er nicht nur die Stil- und Skriptdateien Ihres Designs laden muss, sondern auch die Skript- und Stildateien, die mit WordPress selbst geliefert werden diejenigen, die mit allen Plugins und Widgets geliefert werden, die Sie verwenden.

Wenn es um die Optimierung Ihrer Website-Geschwindigkeit geht, sollte die erste Aufgabe auf Ihrer Liste darin bestehen, die Zeit zu verkürzen, die Ihre Benutzer benötigen, um Ihre Inhalte anzuzeigen und mit ihnen zu interagieren. Der einfachste Weg, dies zu tun, besteht darin, Ihren kritischen Rendering-Pfad zu optimieren.

So beheben Sie Probleme mit der Renderblockierung

Nachdem Sie nun wissen, was Render-Blocking-Probleme verursacht und wie sie sich auf die Geschwindigkeit Ihrer Website auswirken, lassen Sie uns darüber sprechen, wie Sie diese Probleme beheben können.

Renderblockierendes CSS

Es gibt drei Möglichkeiten, Renderblocking-CSS-Probleme zu beheben:

• Rufen Sie Ihre CSS-Dateien richtig auf – Ihre CSS-Datei sollte in Ihrer HTML-Datei folgendermaßen verlinkt sein: <link rel="style.css" href=“style.css"> anstatt sich auf die Verwendung der @import @import Methode zu verlassen befindet sich normalerweise am Anfang Ihres regulären Stylesheets und führt dazu, dass der Browser zurückgeht und die importierte Datei findet, bevor er den Rest der CSS-Datei lesen kann, was zu einer noch größeren Verzögerung beim Rendern Ihrer Webseite führt
• Verringern Sie die Anzahl der CSS-Dateien im kritischen Pfad – kombinieren Sie nach Möglichkeit alle verschiedenen CSS-Dateien zu einer einzigen und entfernen Sie den Aufruf dieser Dateien aus Ihrem HTML

Renderblockierendes JavaScript

Um Render-blockierendes JavaScript zu entfernen, müssen Sie wissen, wie viele JavaScript-Dateien geladen werden und wo sie in Ihrem HTML aufgerufen werden. Eine gute Möglichkeit, dies herauszufinden, ist die Verwendung des Google PageSpeed ​​Insights-Tools. Als das in Australien ansässige Reinigungsunternehmen This Is Neat Cleaning seine Website erstellte, nutzte es Googles PageSpeed ​​Insights als Benchmark und testete verschiedene Szenarien, um genau herauszufinden, was es sowohl für Mobilgeräte als auch für Desktops benötigte.

Aus Tests ging hervor, dass das Einfügen der meisten Skripte am Ende von HTML-Dateien die besten Ergebnisse lieferte. Der Hauptgrund dafür ist, dass das Verschieben von Skripts an das Ende der Seite entfernt wurde und Javascript daran gehindert wurde, die Benutzererfahrung zu blockieren. Da kritisches CSS immer noch „above the fold“ geladen wird, kann der Benutzer die Website grundsätzlich immer noch verwenden, während Interaktionen und Funktionen weiterhin im Hintergrund geladen werden.

Verwendung eines Plugins

Natürlich können Sie, wie bei allem, was mit WordPress zu tun hat, ein Plugin verwenden, um Probleme mit der Renderblockierung zu beheben. Bei insgesamt über einer Million aktiver Installationen war es ein Kinderspiel, dass This is Neat Cleaning W3 Total Cache zum Caching, Minimieren und zur Leistungsoptimierung verwenden würde.

So können Sie W3 Total Cache verwenden, um Render-Blocking-Probleme zu beheben.

Gehen Sie in Ihrem WordPress-Dashboard zu Leistung > Einstellungen und scrollen Sie nach unten zum Abschnitt Minimieren . Aktivieren Sie das Kontrollkästchen Aktivieren und wählen Sie dann Manuell aus dem Dropdown -Menü neben dem Minimierungsmodus. Einstellungen speichern . Sie müssen dann alle Skripte und Stile hinzufügen, die Sie minimieren möchten.

Um herauszufinden, wo sich die Skripte und Stylesheets befinden, die das Rendering blockieren, rufen Sie das Google Page Speed ​​Insights Tool auf und analysieren Sie Ihre Website. Sehen Sie sich dann die Registerkarte „Vorschläge“ an und suchen Sie den Abschnitt mit folgendem Wortlaut: Eliminieren Sie Render-blockierendes JavaScript und CSS in Inhalten „above the fold“ . Klicken Sie auf Fehlerbehebung anzeigen und wählen Sie die URL der Datei aus und kopieren Sie sie.

Gehen Sie zurück zu Ihrem WordPress-Dashboard und navigieren Sie zu W3 Total Cache > Performance > Minify . Scrollen Sie nach unten zum Abschnitt „JavaScript“ und stellen Sie unter „ Operationen in Bereichen “ sicher, dass der Einbettungstyp auf „ Nicht blockierend“ eingestellt ist, indem Sie „defer “ für den Abschnitt <head> “ verwenden. Klicken Sie dann auf die Schaltfläche Skript hinzufügen und fügen Sie die URL ein, die Sie aus dem Google PageSpeed-Tool kopiert haben.

Nachdem Sie alle Skriptdateien hinzugefügt haben, scrollen Sie nach unten zum Abschnitt CSS , klicken Sie auf Stylesheet hinzufügen und fügen Sie die URLs der Stylesheet-Dateien hinzu, die aus Google PageSpeed ​​Insights kopiert wurden.

Wenn Sie fertig sind, klicken Sie auf die Schaltfläche Einstellungen speichern und Cache löschen.

Abschließende Gedanken

Render-Blocking-Ressourcen können verheerende Auswirkungen auf die Website-Geschwindigkeit haben. Glücklicherweise gibt es einige Möglichkeiten, diese Probleme zu beheben. Verwenden Sie also die hier bereitgestellten Tipps, um die Geschwindigkeit Ihrer Website zu verbessern und sicherzustellen, dass Ihre Besucher die bestmögliche Benutzererfahrung haben.