Hoher Pagespeed und gute Web Performance erfreuen nicht nur den User
Niemand wartet gern und schon gar nicht darauf, das eine Website endlich fertig geladen ist. Einige wenige vielleicht schon, dass hat aber sicher ganz andere – persönliche Gründe. Surft der User über den heimischen PC eine Seite an, lässt sich die entstehende Wartezeit sicher mit einigen anderen Tätigkeiten überbrücken. Man könnte noch mal mit dem Hund raus, mit dem Partner ausgiebig über den vergangenen Tag philosophieren, ein paar neu erworbene Küchen-Gadges testen oder sich anderweitig die Zeit vertreiben.
Nun ist aber nicht jeder mit einem Hund gesegnet, einige sind sogar Single und ein längerer Aufenthalt in der Küche ist auch nicht jedermanns Sache – Wie stellt man also die ungeduldigen Zeitgenossen ruhig? Dafür gibt es Mittel und Wege aber zuerst brauchen wir objektive Messdaten.
Pagespeed, Ladezeiten und Web Performance testen – Browsertools
Sowohl Firefox als auch der IE haben ein eigenes Tool an Board mit dem sich einige Daten zur Bestimmung der Web Performance auslesen lassen. Als erstes rufen wir die Website auf, deren Daten wir uns genauer anschauen möchten.
Firefox:
Um den Inspektor in Firefox aufzurufen, reicht ein Klick mit der rechten Maustaste irgendwo in der Website. Im Popupmenu auf Element Untersuchen klicken und es erscheint das Inspektor-Fenster. Alternativ ginge auch ein Klick auf Extras in der Browsermenu-Leiste, weiter auf → Web-Entwickler → Inspektor oder noch einfacher Strg-Umschalt-C (Cmd-Option-C auf dem Mac OSX und in Linux).
IE:
Der Aufruf im IE erfolgt entweder über die Taste F12 oder ebenfalls über einen Klick mit der rechten Maustaste irgendwo in der Seite. Im Popupmenu auf → Element Untersuchen oder über die Browsermenu-Leiste Extras → Entwicklertools.
In dem Inspektor-Fenster wechseln wir auf die Anzeige der Netzwerkanalyse (Firefox), bzw. Netzwerk (IE). Die angezeigte Balkengrafik ist leider nicht wirklich aussagekräftig. Hier ist eigentlich nur zu sehen, wie lange unser Browser für die Anfragen gebraucht hat. Die Tabelle daneben ist schon eher interessant. Hier ist zu sehen, was vom Browser woher heruntergeladen wurde und die Größe der heruntergeladenen Dateien. Hier könnte man sich auch gleich die „Schwergewichte“ vornehmen (Bilder und Scripte) und über mögliche Optimierungen nachdenken (dazu in einem späteren Artikel mehr). Ebenso wichtig wie die Größe der Daten ist die Zahl der Anfragen, die vom Browser verursacht wurde und die Gesamt-Datenmenge in KB. Hier ist das größte Einsparungspotenzial zu finden. Das Ziel ist, möglichst wenige Anfragen und möglichst kleine Daten an den Browser zu senden um Page load und Web Performace zu steigern.
Pagespeed und Page load extern messen
Die erste Seite, die ich vorstellen möchte, ist gtmetrix.com (Englisch). Nach Eingabe der URL erhält man wenig später einige interessante Daten und Lösungsvorschläge um den Pagespeed der Website zu verbessern. Die Ergebnisse sind – nahezu – selbsterklärend und lassen sich meistens schon mit wenigen Eingriffen verbessern. Ein Wert in den hohen 80 ist schon mal gar nicht so schlecht. Aber wer will, kann sich an der einen oder anderen vorgeschlagenen Verbesserung versuchen um diesen Wert noch zu steigern. 100 von 100 zu erreichen würde wohl gehen, ist aber nicht wirklich sinnvoll und man sollte den Aufwand im Verhältnis betrachten. Als zweites kommen wir zu PageSpeed Insights von Google. Auch hier erhalten wir alle relevanten Daten und Lösungsvorschläge. Zusätzlich erhalten wir auch noch das Ergebnis, wie unsere Website auf einem mobilen Endgerät abgeschnitten hat und können mit den Optimierungen beginnen.
Web Performance und Page load verbessern – 404 vermeiden
Die ersten Schritte die Webperformance zu verbessern ist das Pageload zu verringern, d.h. die Anfragen zu reduzieren. Sollten bei einem der Tests ein 404 in den Ergebnissen auftauche, ist dies der erste Schritt der unternommen werden sollte um die Anfragen zu reduzieren. Es gibt zwar ein paar schön gemachte 404 Seiten aber der Informationsgehalt dürfte sich in Grenzen halten. Am einfachsten lässt sich den 404-Verursachern, ebenfalls mit den Browsertools auf die Schliche kommen. Hat man sie lokalisiert, werden sie „eiskalt“ aus dem Quelltext gelöscht und man hat eine Sorge weniger.
Zu ladende Scripte und CSS reduzieren
Angenommen, man setzt ein Javascript zur Verifizierung seines Kontaktformular ein. Dann ist es wenig sinnvoll dieses Script auch auf den Seiten mitzuschleppen, auf denen gar kein Formular ist. Man sollte sich also überlegen a. wo brauche ich welche Scripte und b. sind die verwendeten Scripte evtl. völlig überflüssig und können durch andere Lösungen (CSS?) ersetzt werden. Stellt man fest, dass jedes der Scripte unersetzbar ist, gäbe es auch die Option viele einzelne Scripte in einem gemeinsamen zusammen zu fassen und nicht jedes einzeln zu laden. Das ist zwar nicht immer möglich, aber oft genug. Gleiches gilt für CSS Stylesheets. Es kann sich als sinnvoller erweisen, anstelle von 3 getrennten Stylesheets ein ganzes zu laden. Die Stylesheet Datei vergrößert sich oft nicht wesentlich und spart wieder einen Ladevorgang. Zusätzlich lassen sich Javascript, CSS und auch HTML Code wunderbar minimieren. Dabei werden Zeilenumbrüche und Kommentarzeilen entfernt und sparen zusätzlich KB ein. Man sollte aber – der Übersichtlichkeit wegen – die ursprünglichen Dateien behalten, denn in einem minimierten Script zu editieren ist nichts, was man einfach nennen könnte. Bei der Minimierung des HTML Quellcodes sollte man aber Vorsicht walten lassen. Hier kann das minimieren – ähnlich wie bei Javascript – zu sehr unvorteilhaften Verhalten führen.
Bilder für das Web optimieren – Die Maße entscheiden
Dieser Punkt ist sicherlich einer der Wichtigsten und man könnte Seitenweise über die verschiedenen Formate, ihre Vorzüge/Nachteile und Einstellungen beim abspeichern diskutieren aber das würde erheblich zu weit führen. Jedes Format hat seine Stärken und Schwächen. Wäre es anders müsste man die Daseinsberechtigung der einzelnen Format vielleicht genauer hinterfragen aber darum geht es – wie gesagt – nicht. Woran man aber denken sollte – und das ist völlig unabhängig vom verwendeten Format – ist, Bilder nur in der Größe zu verwenden, wie sie auch gebraucht werden. Wird ein Bild in 320 Pixel Breite verwendet, sollte es nicht in 340 Pixel Breite vom Server geladen und vom Browser kleiner skaliert werden. Diese 20px können, in Bezug auf die Dateigröße einen nicht unerheblichen Unterschied machen… Bigger ist nicht immer better! Wer auch noch das letzte Quäntchen aus seinen Bildern und Grafiken quetschen möchte, der findet in diesen Artikeln reichlich Lesestoff.