Warum und wie man Render-Blocking-Ressourcen einfach eliminiert
Inhaltsverzeichnis
In den frühen Tagen des Internets wurden die ersten Webseiten in einer vereinfachten Version von XML namens HTML erstellt. Weiß mit schwarzem Text. Wenn man einen Textabschnitt mit einer blauen Unterstreichung sah, wusste man, dass man darauf klicken kann. Wenn dieser lila war, wusste man, dass der Text bereits angeklickt wurde.
Das Leben war einfach.
Heutzutage ist HTML normalerweise der kleinste Teil einer Webseite. Wenn ein Browser eine Seite anfordert, erhält er den HTML-Code, muss ihn dann aber teilen und die Ressourcen herunterladen.
- CSS
- JavaScript
- Bilder
- Schriftarten
- … und andere externe Dateien, die für die Bereitstellung der Benutzererfahrung erforderlich sind.
Nicht alle Ressourcen sind gleich. Einige Ressourcen, die geladen werden müssen, können die Anzeige der Webseite sogar verlangsamen. Diese Ressourcen werden „Renderblocking-Ressourcen“ genannt und dieser Artikel zeigt Ihnen einige Taktiken, mit denen Sie die Anzahl der Renderblocking-Ressourcen auf Ihrer Website reduzieren können, und wie Sie sie manuell oder mit dem SiteGround Optimizer-Plugin anwenden.
Was bedeutet die Eliminierung von Ressourcen, die das Rendering blockieren?
„Render“ ist der Fachbegriff für „Anzeigen“. Wenn wir in diesem Artikel über Rendering sprechen, meinen wir den Prozess der Anzeige Ihrer Website auf einem Bildschirm.
In Anbetracht dessen ist Renderblocking alles, was diesen Prozess anhält oder verlangsamt.
In der Anfangszeit des Internets wurde alles in der Reihenfolge geladen, in der es im HTML codiert war. Wenn Ihr HEAD 5 JavaScript-Tags hätte, die alle geladen, kompiliert und ausgeführt werden müssten, bevor der HEAD fertig wäre, könnten diese möglicherweise Ihre Website verlangsamen. Aus diesem Grund haben wir angefangen, JavaScript-Tags in die Fußzeile einzufügen, damit sie die Anzeige der Seite nicht verhindern.
Arten von Render-Blocking-Ressourcen
Jede Ressource, die auf Ihre Website geladen wird, hat das Potenzial, eine Render-Blocking-Ressource zu sein.
- Wenn ein Bild groß ist und Zeit zum Laden benötigt, ist es möglicherweise eine Ressource, die das Rendering blockiert.
- Wenn JavaScript im <head> Ihrer Seite ausgeführt werden muss, handelt es sich möglicherweise um eine Ressource, die das Rendering blockiert.
- Wenn Ihr CSS groß ist und Ihre Seite nicht angezeigt werden kann, bis alles geladen ist, handelt es sich möglicherweise um eine Renderblockierungsressource.
- Wenn Sie eine Ressource von einer anderen Seite laden und diese Seite langsamer ist als Ihre, ist diese Ressource möglicherweise eine Renderblockierungsressource.
- Wenn Sie viele Plugins haben, die jeweils ihre eigenen CSS- und JavaScript-Dateien haben, sind diese möglicherweise Ressourcen, die das Rendering blockieren.
Kurz gesagt, alles, was Sie in Ihrem zu ladenden HTML-Code haben, ist möglicherweise eine Ressource, die das Rendering blockiert.
Wie kann ich testen, ob meine Website Ressourcen enthält, die das Rendering blockieren?
Es gibt viele Tools im Web, die Ihnen zeigen, wie Ihre Website geladen wird. Meine Favoriten sind diese beiden:
Die Option „Inspect Element“ aus dem Browser
Ich bevorzuge ein Tool, das mir eine „Wasserfalldiagramm“ zeigt, wie meine Seite geladen wurde. Alle modernen Browser zeigen Ihnen eine einfache Version einer Wasserfallanzeige. Klicken Sie einfach mit der rechten Maustaste auf eine Webseite, dann auf „Inspizieren“ und suchen Sie die Registerkarte „Netzwerk“.
Sobald Sie das haben, laden Sie die Seite neu. Sie sollten so etwas sehen:
Die rechte Seite des obigen Bildes zeigt die Registerkarte „Netzwerk“. Die kleinen Balken ganz rechts ist das „Wasserfalldiagramm”. Daran kann man erkennen, wie lange es dauert, eine bestimmte Ressource zu laden. So zeigt mir, z.B. die dünne blaue Linie, die die Seite hinunterläuft, wann die Seite tatsächlich mit dem Rendern begonnen hat. Viele meiner Ressourcen auf dieser Seite werden also geladen, bevor die Seite geladen wird, und das ist ja nicht großartig. Das bedeutet, dass ich auf dieser speziellen Seite möglicherweise etwas Raum für Verbesserungen habe.
Diese Ansicht ist gut, wenn Sie nur herumbasteln, aber sie sagt Ihnen eigentlich nur, wie schnell die Dinge auf Ihrem Computer geladen werden. Das ist ja keine echte Metrik. Ich zum Beispiel mache meine gesamte Entwicklung lokal, und wie schnell Dinge von einem Server, der auf demselben Computer läuft, in meinen Browser geladen werden, sagt mir überhaupt nicht viel.
Deshalb verwende ich Online-Tools wie https://www.webpagetest.org/, wenn ich Dinge ernsthaft messen will.
Webseitentest
Wenn Sie zu WebPageTest gehen und Ihre URL eingeben, erhalten Sie ein viel besseres Bild der Realität. Darüber hinaus können Sie an den Einstellungen basteln, um genau den gewünschten Test zu erhalten.
Zum größten Teil empfehle ich Ihnen, dasselbe zu tun wie ich:
- Testen Sie zuerst den Desktop
- Wählen Sie einen Server aus, der sich nicht in der Nähe des Hosts Ihrer Website befindet
- Wählen Sie Chrome aus, es sei denn, Sie benötigen einen anderen Browser
Sie können diese Einstellungen auf der Registerkarte „Erweiterte Konfiguration“ anpassen.
Klicken Sie dann auf „Test starten“.
Jetzt erhalten Sie eine viel nützlichere Wasserfallanzeige. Es ist ein bisschen klein, also klicken Sie darauf und Sie gelangen zu einer größeren Ansicht. Eines der Dinge, die es Ihnen zeigen wird, ist eine Liste der Ressourcen, die das Rendering blockieren.
In diesem Fall habe ich 32 Render-Blocking-Ressourcen. Fast alle davon sind CSS-Dateien, die letzten sind JavaScript-Dateien.
Für die JavaScript-Dateien ist es schon klar, aber warum sollten CSS-Dateien das Rendering blockieren? Die Seite kann nicht angezeigt werden, bis sie das gesamte CSS kennt, das zum Anzeigen des Bildschirminhalts erforderlich ist. Wenn Ihre Website also viele CSS-Dateien lädt und sich am Ende der Liste eine CSS-Regel befindet, die zum Anzeigen des ersten Elements auf Ihrer Seite verwendet wird, muss Ihre Seite warten, bis diese Regel geladen ist, bevor der Browser fortfahren kann um das Display darzustellen. So kann CSS eine Render-Blocking-Ressource sein.
Danke! Ihr Kommentar wird zur Moderation zurückgehalten und in Kürze veröffentlicht, wenn er einen Bezug zu diesem Blog-Artikel hat. Kommentare für Support-Anfragen oder Probleme werden nicht veröffentlicht, wenn Sie solche haben, melden Sie es bitte über
Starten Sie die Diskussion
Danke! Ihr Kommentar wird zur Moderation zurückgehalten und in Kürze veröffentlicht, wenn er einen Bezug zu diesem Blog-Artikel hat. Kommentare für Support-Anfragen oder Probleme werden nicht veröffentlicht, wenn Sie solche haben, melden Sie es bitte über