Performance Optimierung above the fold
Der Begriff “above the fold” beschreibt den Teil der Webseite, der beim Laden direkt ohne Scrollen angezeigt wird. Bei der Performance Optimierung wollen wir diesen Teil der Seite so schnell wie möglich und möglichst vollständig anzeigen. Damit unsere Besucher bereits mit dem Lesen der Seite beginnen kann, während weitere Inhalte wie Bilder, Stylesheet etc noch geladen werden.
Durch diese Optimierung gewinnen wir wertvolle Zeit, da der Kunde denkt, die Seite wäre schon verfügbar, obwohl noch nicht alle Scripte und Stylesheets zur Verfügung stehen.
Für welche Geräte/Auflösungen sollten wir das “above the fold” erstellen
Besonders Achten müssen wir hierbei auf die verschiedenen Auflösungen von Endgeräten.
Sei es bei Desktop PC, Tablets oder Smartphones.
Sowie müssen wir ggf. noch die unterschiedlichen Layouts unserer Seite beachten. Denn nicht jede Unterseite sieht immer gleich im Kopfbereich aus.
Zum Auslesen der Auflösungen können wir unser Google Analytics zu Hilfe nehmen, und unsere Kunden und deren Auflösungen betrachten.
Hier können wir nicht nur die Auflösung der Endgeräte einsehen, sondern auch die Betriebssystemauswahl. Auf Basis dieser Statistiken sollten wir nicht nur das “above the fold” implementieren, sondern auch die allgemeine Gestaltung der Webseite anpassen und ggf. überdenken.
Wie können wir das “above the fold” testen
Zum Testen des “above the fold” Bereiches sowie dem Auslesen der nötigen Elemente können wir die Entwickler Console unseres Browsers benutzen.
Im Chrome können wir diese unter Windows mit F12 öffnen und anschließend mit “STRG + SHIFT + M” die Geräte Toolbar öffnen.
Anschließend können wir nun alle Seiten und Elemente mit den gewünschten Auflösungen aufrufen und prüfen.
Alternativ stehen auch Browser Plug-Ins zur Verfügung, wie z. B. Window Resizer. Mit diesem könnt ihr die Auflösung des Fensters ebenfalls euren Bedürfnissen anpassen.
Wie erstellen wir Automatisiert das “above the fold” CSS
Zum Erstellen des “above the fold” CSS gibt es unterschiedliche Möglichkeiten.
Man Findet teilweise einige JavaScript Bookmarks die einen hierbei helfen, wenn Sie nicht durch Browser Updates ausgehebelt werden.
Alternativ gibt es auch die Möglichkeit über NPM zu gehen und hier entsprechende Bibliotheken zu nutzen.
Browser JavaScript
Die Browser Version habe ich anfangs genutzt, da Sie einfach in der Anwendung ist.
Wir gehen auf die gewünschte Seite, öffnen die Entwickler Tools und passen die Auflösung entsprechend an.
Anschließend betätigen wir das Bookmark und in der Console steht der CSS Part der aktuellen Auflösung, den wir nun Kopieren und einfügen können.
Ein entsprechendes Bookmark hierzu war: https://github.com/DirkPersky/criticalcss
Um dieses einzubinden, geht in den Lesezeichen Manager erstellt ein neues Bookmark, wählt einen treffenden Titel und kopiert das Snippet in den URL Part.
Leider ist es in der Vergangenheit immer mal wieder dazu gekommen, dass einige der Funktionen nicht mehr zur Verfügung standen, und daher kann ich euch den weg über NPM ans Herzen legen. Zum einen Wegen der Update Sicherheit zum anderen weil er Komfortabler ist.
NPM
Ein NPM Modul welches ich hierfür nutze ist Penthouse (https://www.npmjs.com/package/penthouse) mit einer entsprechenden Konfiguration erledigt das Module die Arbeit für euch eigenständig.
Eingebunden in euren Build Prozess z. B. über Jenkins wird das “above the fold” CSS mit jedem Build Prozess neu generiert und bleibt so immer auf dem Aktuellen stand.
Eine Beispielkonfiguration dazu findet ihr hier: https://github.com/DirkPersky/typo3-initial-layout-bs4/blob/master/abovethefold.js
Dafür müsst ihr bei:
const urls = [
'example.de',
'example.de/imprint'
]; die Seiten angeben die zur above the fold Generierung herangezogen werden.
Ergänzend mit den Konfigurationen der Variablen für:
const penthouseOptions const penthouseMobileOptions
wird CSS mit diesen Einstellungen generiert und entsprechend gespeichert.
Wo kommt das “above the fold” CSS hin?
Das “above the fold” CSS kommt in den <head> eurer Webseite, und verdrängt damit euer eigentliches CSS ans Ende des <body>
<html>
<head>
<style type="text/css" media="(max-width: 991px)"> /** Mobile CSS **/ </script>
<style type="text/css" media="(min-width: 992px)"> /** DesktopCSS **/ </script>
</head>
<body>
..
<link rel="stylesheet" type="text/css" media="all" href="css/style.css">
</body>
</html>
Mehr Artikel zum Thema Performance Optimierung
Wie Sie diese Optimierung im Detail angehen, können Sie in den folgenden Artikeln finden:
- Performance Optimierung: Critical Rendering Path
- Performance Optimierung: Imagemin
- Performance Optimierung: Above The Fold
- Performance Optimierung: TYPO3
Sollten Sie danach noch Fragen haben, oder benötigen Hilfe bei der Umsetzung, nehmen sie gerne Kontakt mit mir über XING oder EMail auf.
Hier noch einige Links und Wissenswertes
Wichtig ist hierbei, dass das “above the fold” direkt in der HTML-Antwort des Servers steht, und somit ohne einen weiteren Roundtrip geladen werden muss. Nur dann bekommt ihr auch die gewünschten Ergebnisse.