Die Entwickler von Google haben einige Videos zur Optimierung des Google Pagespeed Werts veröffentlicht. Durch Beachten der Tipps kann man den Geschwindigkeitsmesswert deutlich erhöhen – mittlerweile ein wichtiger Faktor bei der Suchmaschinenoptimierung. Google beachtet bei der Platzierung von Webseiten in der Google Suche diesen Pagespeed Index mit einem hohen Gewichtungsfaktor, deshalb sollte man sich an diese Empfehlungen halten und die Seite schnellstmöglich verbessern. Gerade bei mobilen Internetseiten ist die Geschwindigkeit bei geringen Übertragungsgeschwindigkeiten essentiell für gute Platzierungen!
Google Entwickler Video mit wichtigen Tipps zum Verbessern deiner Webseite
Der Google Entwickler Matt Gaunt gibt unter Anderem folgende Tipps:
- Die Ladezeit sollte auf Mobilgeräten unter 1 Sekunde liegen
- Javascript / CSS sollte bereits auf dem Server komprimiert werden
- Javascript / CSS sollte in möglichst geringe Anzahl von Dateien gefasst werden, um viele Anfragen an den Server zu vermeiden
- Bilder optimieren (Qualität bzw. Kompression beachten), um Dateigröße zu verkleinern
- Javascript Dateien an das Ende vom „body“-Tag (Ende des Dokuments) packen, damit die Seite zuerst dargestellt wird
- Javascript-Dateien asynchron laden mit „<script src=’…‘ async></script>“
- Auf dem Server sollte „Cache Control“ konfiguriert sein (Angabe ob und wie lange die angeforderte Datei im Browser gecacht werden soll)
- als Referenz für Cache Zeiten von bestimmten Dateitypen (CSS, JS, PNG, JPEG, PDF etc.) kann HTML5 Boilerplate verwendet werden
- die Kompression „GZIP“ sollte auf dem Server aktiv sein, dadurch kann Text (HTML, CSS, JS) um bis zu 80% komprimiert werden und spart wieder Bandbreite
Das Minifizieren (Komprimieren / Verkleinern von Dateien) kann durch Build-Tools automatisiert werden. Dazu benötigt man jedoch einige Kenntnisse, für Laien ist dies sicherlich schwieriger zu bewerkstelligen. Dieser Schritt mag auf den ersten Blick zu viel Aufwand bedeuten, er lohnt sich aber auf lange Sicht gesehen – neben der geringeren Ladezeit beim Endbenutzer vermeidet es auch unnötigen Traffic auf dem Server und spart damit Kosten. Außerdem verhelfen Build-Tools der Qualität, da sie repetitive Schritte immer gleich gut bewerkstelligen und keinen Punkt auslassen.
Falls es auf deiner Seite möglich ist, sollte Javascript und CSS immer asynchron geladen werden, damit der Rest vom DOM weiter geladen werden kann. Externe Ressourcen blockieren das Rendern im Webbrowser. Wenn die Ressourcen asynchron geladen werden, umgeht man das Problem und die Seite lädt erheblich schneller. Es sollte jedoch genau getestet werden, ob die Seite immer noch korrekt funktioniert, einige Scripte funktionieren nicht, wenn sie asynchron geladen werden!
Das Verschieben der Scripte an das Ende des Dokuments hilft jedoch in jedem Fall und sollte unbedingt durchgeführt werden.
Ein weiterer Punkt ist das Einbinden von CSS „inline“, also direkt im HTML-Code. Entgegen früheren Best Practices und Lehren wird nun mehr auf Geschwindigkeit als auf Trennung von Design und Inhalten geachtet. Durch die neue Ausrichtung gibt es nun die Empfehlung, Styles, die essentiell für die Darstellung der Webseite (bzw. des Anzeigeteils der Webseite, sprich obere Hälfte) notwendig sind, in den HTML Code mit „<style>…</style>“ zu übernehmen. Durch das direkte Einbinden muss der Browser nicht auf externe CSS Ressourcen warten, um die Webseite darzustellen, was der Geschwindigkeit entgegenkommt!
Mir jedoch widerstrebt das direkte Einbinden von CSS in die Seite, ich nehme die Strafe (noch) in Kauf trenne lieber Style und Inhalt.
Was ist eure Meinung zu den neuen Empfehlungen von Google? Habt ihr sie mittlerweile umgesetzt?