Selbst in Zeiten von 5G-Flatrates und extrem leistungsstarken Endgeräten ist und bleibt es wichtig, den Datenaustausch zwischen Server und Client möglichst gering zu halten. Nicht unbedingt um Daten zu sparen, sondern um den User nicht mit langen Ladezeiten zu nerven.
Aus einem Bericht von Google aus dem Jahr 2017 geht hervor, dass die Wahrscheinlichkeit um 60% geringer ist, dass Besucher erneut bei einer Marke einkaufen, wenn sie dort zuvor auf einem mobilen Gerät ein negatives Erlebnis hatten. Einer der am häufigsten genannten negativen Punkte war dabei tatsächlich die Performance der Website. 53% der Website-Besucher verlassen diese sofort, falls das Laden länger als 3 Sekunden dauert – und dabei muss man bedenken, dass die Geduld der User in den letzten Jahren sicher nicht zugenommen hat.
Deswegen ist es sehr wichtig, dass eine Website beim Öffnen sofort und möglichst komplett angezeigt wird. Dies kann man natürlich einfach selbst testen, indem man die Seite auf verschiedenen Geräten mit verschiedenen Netzwerkgeschwindigkeiten öffnet. Doch es gibt auch ein sehr praktisches Tool dafür: Google PageSpeed Insights.
Google PageSpeed Insights
Google PageSpeed Insights (ehemals Google PageSpeed) misst die Performance einer Website. Dabei kann jede beliebige URL eingegeben und analysiert werden. Nebst einer Gesamtpunktzahl (0 bis 100), welche auf diversen Best Practices zur Leistungsoptimierung beruht, gibt Google auch gleich Empfehlungen ab, wie man die Performance verbessern kann. Eine Analyse sieht dabei beispielsweise wie folgt aus:
Eine häufig auftretende und wichtige Empfehlung dabei ist die Verminderung von sogenannten “render-blocking” Ressourcen. Der offizielle Hinweis lautet wie folgt:
“Resources are blocking the first paint of your page. Consider delivering critical JS/CSS inline and deferring all non-critical JS/styles.”
Damit ist gemeint, dass es auf der Website JavaScript- und CSS-Dateien gibt, welche vom Browser zuerst komplett heruntergeladen und verarbeitet werden müssen, bevor der Rest der Seite angezeigt werden kann. Im Grunde “liest” der Browser eine Website von oben nach unten. Stösst er dabei auf eine solche Datei, hält er mit dem Lesen an und kümmert sich nur um diese, bis er damit fertig ist. Nachfolgend zeigen wir dafür mögliche Optimierungen betreffend CSS.
CSS
CSS steht für Cascading Style Sheets und wird benutzt, um den Look und das Layout einer Website zu gestalten. Dabei werden sämtliche visuell wahrnehmbaren Teile einer Website wie zum Beispiel Farben, Schriftarten, Schriftgrössen, Abstände zwischen Elementen, Positionierung von Elementen, unterschiedliche Darstellungen für unterschiedliche Geräte oder Bildschirmgrössen und noch vieles mehr definiert.
CSS Optimierungen
Im Bezug auf den PageSpeed gibt es für das CSS mehrere Optimierungsmöglichkeiten:
- Styling identifizieren, welches für die initiale Anzeige der Website notwendig ist und dieses inline im HTML liefern (siehe dazu nachfolgend Critical CSS)
- media-Attribute einsetzen, damit CSS-Dateien nur für bestimmte Geräte (z.B. print) oder Situationen (z.B. device-width, orientation) geladen werden (siehe dazu link media Attribute)
- Restliche CSS-Dateien asynchron laden
Nachfolgend möchten wir nun aber genauer auf den ersten Punkt eingehen.
Critical CSS
Critical CSS ist das CSS, welches auf “above-the-fold” Elemente angewendet wird.
Einfacher gesagt, jenes, das für den sofort sichtbaren Teil einer Website benötigt wird. Sprich: Bevor der User scrollt. Deswegen wird es auch als kritisch bezeichnet. Critical CSS wird nicht einfach so generiert, sondern muss selbst gepflegt werden. Dabei gibt es verschiedene Wege, dies zu tun.
Die entsprechenden Stylings können in einem externen CSS-File gespeichert und im head-Element der Website eingebunden werden:
<html>
<head>
<link rel="stylesheet" href="critical.css">
</head>
<body>
[...]
</body>
</html>Externe CSS-Files sind quasi Standard, da sie einfacher zu pflegen sind. Der Browser muss jedoch das File erst finden und herunterladen, bevor er mit dem Rendering der Seite weitermachen kann. Dies hat, wie bereits oben erklärt, negative Auswirkungen auf den PageSpeed.
Internes CSS wird hingegen direkt im head in einem style Tag gepflegt:
<html>
<head>
<style>
body {
font-size: 18px;
color: #000000;
}
h1 {
font-size: 24px;
}
</style>
</head>
<body>
[...]
</body>
</html>CSS so zu pflegen ist einiges mühsamer und deswegen wird eher davon abgeraten. Aber Critical CSS kann so am effizientesten eingesetzt werden und verbessert den PageSpeed sowie die User Experience merklich, da es nicht “render-blocking” ist. Das direkt eingebundene und sehr weit oben platzierte CSS verhindert zudem das sogenannte Flash of Unstyled Content (FOUC).
Fazit
Critical CSS verbessert also nicht nur die Loading-Performance der Website, sondern auch die subjektive Wahrnehmung davon, wie schnell eine Website ist. Die User erhalten beim Öffnen sofort visuelles Feedback und können sich direkt orientieren, ohne durch einen Loader oder eine sich aufbauende Seite blockiert zu werden. Das Pflegen von Critical CSS ist zwar aufwändig, verhindert aber, dass User vorzeitig abspringen. Deswegen ist Critical CSS so kritisch.
Geschrieben von:
Kevin Rochel, Frontend-Entwickler bei der raffiniert media AG
Bleib mit unserem Newsletter auf dem Laufenden
Hast du eine Idee?
Nur keine scheu! Schreib uns.