PageSpeed Insights – Ressourcen die das Rendering blockieren.

Ich habe die letzten Tage meinen Hoster gewechselt und dabei auch gleich mal geprüft ob ich meine Websites verbessern kann. Als ich meine persönliche Website (sebastianbrosch.de) mit PageSpeed Insights überprüft habe, ist mir der Punkt „JavaScript- und CSS-Ressourcen, die das Rendering blockieren…“ aufgefallen. Ich hatte diese Meldung auch bei anderen Websites, habe diese jedoch immer wieder ignoriert. Diesmal habe ich mich entschlossen diesen Punkt zu überprüfen und eine Lösung für dieses Problem zu finden.

Warum wird diese Meldung angezeigt?

Das Problem ist grundlegend sehr einfach zu verstehen. Der Browser lädt die Website nicht im Hintergrund und zeigt dann, sobald alle Inhalte ermittelt und formatiert wurden, die fertige Seite an, sondern gibt alle Informationen direkt aus. Sobald also Informationen für das Rendering vorhanden sind, werden diese auch vom Browser gerendert. Da jedoch vor dem Inhalt der Website der Kopfbereich vorhanden ist, welcher meist auch externe CSS- und JavaScript-Dateien enthält, kann es zu einer Verzögerung kommen. Der Browser ist zuerst damit beschäftigt die externen Dateien zu laden bevor er Inhalte für das Rendering erhält. Da sich jedoch in diesen externen Ressourcen meist auch Informationen befinden welche nicht direkt nach dem Rendern sichtbar sind wird der Browser unnötig blockiert bzw. ausgebremst. Zusätzlich muss der Browser weitere Verbindungen zu diesen externen Ressourcen aufbauen welche ebenfalls viel Zeit kosten können.

Wie kann dieses Problem gelöst werden?

Um dieses Problem zu lösen, müssen wir entscheiden welche Definitionen direkt nach dem Rendern der Website sichtbar sind, und welche nicht. Um diese Elemente zu ermitteln können wir die Developer-Konsole des Browsers öffnen und alle Elemente von Hand ermitteln, oder aber ein kleines Snippet von Paul Kinlan verwenden. Dieses Snippet muss nur in der Developer-Konsole der entsprechenden Website ausgeführt werden. Anschließend werden alle CSS-Definitionen ausgegeben welche für die grundlegende Darstellung der Website benötigt werden. Dieser CSS-Code sollte anschließend komprimiert und inline (nicht in eine externe Datei) im Kopfbereich der Seite eingebunden werden. Die CSS-Datei kann dann asynchron geladen werden. Da im Gegensatz zu JavaScript-Dateien diese Option für CSS-Dateien momentan nicht unterstützt wird, müssen wir diesen Mechanismus über ein kleines JavaScript-Snippet verfügbar machen. Dafür können wir die Snippets loadCSS.js und cssrelpreload.js verwenden. Ich habe beide Snippets komprimiert im Kopfbereich der Seite eingebunden. Die komprimierte Variante habe ich als Gist auf GitHub zur Verfügung gestellt. Die externen JavaScript-Dateien habe ich an das Ende der Seite verschoben, da diese für die Darstellung primär nicht benötigt werden. Die CSS-Dateien wurden wie im folgenden Beispiel im Kopfbereich der Seite eingebunden.

<head>
     <style>
         /* "above the fold" (minified) CSS */
     </style>
     <link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">
     <noscript>
         <link rel="stylesheet" href="style.css">
     </noscript>
     <script>
         /* the (minified) loadCSS */
     </script>
</head>

Die Gesamtgröße der Seite wird dabei nicht unbedingt verringert. Jedoch wird das sichtbare Laden der Seite spürbar verbessert. Ich hatte bisher einen Preloader eingebunden, welcher ein kleines Tetris angezeigt hat, während im Hintergrund die Inhalte geladen wurden. Diesen Preloader habe ich entfernt, da statt der eigentlichen Inhalte der Preloader sichtbar war. Ohne diesen Preloader wird nun direkt der Inhalt angezeigt.

Wie kann die Optimierung überprüft werden?

Um zu erkennen ob die Optimierung funktioniert, kann der Service von WebPagetest verwendet werden. Hier können sehr detaillierte Informationen über das Laden einer Website ermittelt werden. Es besteht aber auch die Möglichkeit die Verbindungungsgeschwindigkeit, mit welcher die Website geladen werden soll, festzulegen. Für die Tests habe ich eine 3G-Verbindung mit dem Chrome-Browser gewählt um einen sehr detaillierten Ladevorgang zu erhalten. Ohne Optimierung hat der Browser erst nach 2.7 Sekunden (bester Wert – Test #1, Test #2) mit dem Rendern der Seite begonnen. Mit der Optimierung hingegen begann der Browser bereits nach einer Sekunde (schlechtester Wert – Test #1, Test #2) mit dem Rendern. Somit wurde die Seite in diesem Bereich sichtlich verbessert, was auch die nicht mehr vorhandene Meldung bei PageSpeed Insights zeigt.

sebastianbrosch

Ich bin gelernter Fachinformatiker und konnte Erfahrungen in HTML, CSS, JavaScript, jQuery, PHP sowie VB.NET sammeln. In diesem Blog schreibe ich über meine Probleme und Erfahrungen sowie Aritkel aus dem Gebiet der Anwendungsentwicklung.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.