SPEED IS KEY – WARUM PAGESPEED (DIE GESCHWINDIGKEIT VON WEBSITES) SO WICHTIG IST

Pagespeed – Die Geschwindigkeit von Websites

In einer Zeit zu der die Hardware von Geräten immer schneller wird ist das einzige, was unbeständig ist, die Geschwindigkeit der Internetverbindung. Ob der Benutzer nun unterwegs mit dem Smartphone surft, wobei die Verbindungsqualität stetig schwankt, oder er in einem Gebiet wohnt, wo die DSL-Leitung nicht sehr gut ausgebaut ist, will er doch möglichst schnell die gewünschten Inhalte auf Ihrer Website finden.

Daher ist Pagespeed mittlerweile nicht nur ein sehr wichtiger Faktor, wenn es um die Benutzererfahrung geht, sondern auch ein SEO-Rankingfaktor bei Google & co. Doch wie kann man nun dafür Sorge tragen, dass die vielen hübschen Bilder, Schriften und Scripts auf Ihrer Seite auch schnell geladen werden und der Benutzer nicht genervt von der Wartezeit die Seite verlässt? Wir haben uns intensiv mit diesem Thema auseinandergesetzt und stellen Ihnen nachfolgend die wichtigsten Punkte der Pagespeed-Optimierung vor.

Schritt 1: Pagespeed Analyse

Im Netz findet sich eine Vielzahl an Tools, mit denen man die Performance seiner Website analysieren kann. Wir greifen dabei auf einen Pool von 5 Tools zurück, deren Auswertungen und Optimierungsvorschläge für uns zu den besten Ergebnissen geführt haben.
Zum einen gibt es da natürlich das allseits bekannte und weitverbreitete PageSpeedInsights von Google, welches von vielen als Maßstab der Dinge gesehen wird. Jedoch ist es unglaublich schwierig immer alle Anforderungen dieses Tools zu erfüllen. So erreichen zum Beispiel der Play Store von Google, oder Google Maps jeweils respektive nur 64% und 80% auf mobilen Endgeräten bzw. 82% und 93% auf Desktop-Rechnern. Wir selbst konnten nach Optimierung mit unserer Website einen Pagespeed-Score von 74% auf Smartphones, sowie 85% auf dem Desktop erreichen.

Einen etwas umfangreicheren Überblick liefert uns dann GTmetrix, welches für seine Auswertungen auf wiederum andere Tools zurückgreift, die Ergebnisse, jedoch viel übersichtlicher darstellt. Danach gehen wir dann ans Eingemachte und ziehen die sehr ausführliche und technisch intensive Analyse von webpagetest.org zu Rate. Dort finden sich dann ausführliche, technische Informationen und Optimierungstips, sowie Wasserfall-Diagramme für den Content, uvm. Zuletzt greifen wir dann noch auf die Analyse-Tools von pingdom und Cloudinary zurück. Natürlich sind die Auswertungen der unterschiedlichen Programme zu einem Großteil deckungsgleich, da alle die Website auf ähnliche Faktoren überprüfen, jedoch sind einige auch auf bestimmte Bereiche spezialisiert, wie z.B. das Tool von Cloudinary, welches hauptsächlich Informationen zu Bildern liefert und diese auch gleich in einer besseren Version zum Download zur Verfügung stellt, oder liefern einfach detaillierte Ergebnisse als andere.

Schritt 2 – Optimierungen an der Website selbst (Der eigentliche Pagespeed)

Der erste Schritt nach der Analyse der Seite ist dann die Performanceoptimierung der Website selbst. Dort gilt es statische Ressourcen, wie Stylesheets, Javascript, und co. soweit es geht zu reduzieren und auch erst dann zu laden, wenn sie benötigt werden. Dazu werden die eben genannten Stylesheets und Javascript-Files zuerst minimiert (minified), sowie komprimiert. Dabei werden u.A. Kommentare, Leerzeichen und Zeilenumbrüche, welche den Code für uns besser lesbar machen, auf die Ausführung allerdings keinen Einfluss haben, entfernt, was letztendlich in einer kleineren Datei resultiert. Danach greifen wir auf verschiedene Caches zurück, die dafür sorgen aus vielen einzelnen Javascript- und CSS-Dateien so wenige wie nur möglich zu machen. Beim aktuell noch weit verbreiteten HTTP/1.1-Standard ist es nämlich am besten so wenig Dateien wie nur möglich nach zu laden. Weiterhin sollte dann darauf geachtet werden, identische Ressourcen nicht unter verschiedenen Links zur Verfügung zu stellen. So sollte man Beispielsweise das gleiche Bild (ein Thema, auf das wir weiter unten in diesem Beitrag noch ausführlicher eingehen), sollte es auf einer Seite mehrfach vorkommen, nicht mehrfach hochladen, sondern auf das gleiche Bild zurückgreifen. Das klingt erst einmal selbstverständlich, doch kann es natürlich passieren, dass Sie etwas an dem Bild ändern, die neue Version unter anderem Namen hochladen und die Einbettung des Bildes nur an einer Stelle aktualisieren, statt überall. Nachdem nun Javascript und CSS minified wurden, sollte dies natürlich am besten auch mit dem gesamten HTML-Code der Seite passieren. Auch dort kann nämlich auf unnötige Leerzeichen und Zeilenumbrüche verzichtet werden.

Ein weiterer wichtiger Faktor beim Thema Pagespeed ist der so genannte „Content above the fold“. Das ist der Inhalt einer Website, den man direkt beim Aufruf im Browser sieht, ohne zu scrollen. Dabei sollte dafür Sorge getragen werden, dass zuerst nur das Javascript und CSS geladen wird, welches auch für die Inhalte „above the fold“ relevant ist und der Rest erst danach geladen wird. Dazu kann es unter anderem hilfreich sein diesen Teil des CSS und Javascript direkt im HTML einzubetten, statt auf verlinkte Dateien zurückzugreifen, die extra geladen werden müssen. Weitere Javascript-Files sollten dann auch nicht im head-Bereich der Website geladen werden, sondern erst ganz am Schluss der Seite, vor dem schließenden body-Tag platziert werden.

Vorher (170kb)

Nachher (130kb)

Analyse der Bilder auf marketing-thom.de (https://webspeedtest.cloudinary.com)

Vorher (23kb)

Nachher (11kb)

Schritt 3 – Bilder optimieren

Ein leider oft vergessener, aber sehr wichtiger Schritt bei der Optimierung des Pagespeeds einer Website, ist die Komprimierung von Bildern und vor allem die Verwendung der korrekten Größe und Optionen. Das meist genutzte Bildformat auf Websites ist JPG. Dieses bietet die Option der progressiven Darstellung. Dabei wird das Bild erst verschwommen auf der Seite geladen, was eine schnellere Ladezeit ermöglicht. Erst danach wird das Bild in mehreren Schritten immer schärfer, bis die korrekte Darstellung erreicht ist. Nutzer mit einer durchschnittlichen DSL-Leitung bekommen davon zunächst erst einmal nichts mit. Nutzer mit einer schlechten Internetverbindung jedoch werden merken, dass die Seite sofort lädt, und das Bild erst später nachgeladen wird. Dadurch springt der Nutzer nicht direkt ab, da er schneller zu seinen gewünschten Inhalten kommt.

Neben dieser sehr speziellen Option für JPGs können aber auch andere Bildformate durch Komprimierung (Reduzierung der Dateigröße) optimiert werden. Weiterhin sollte auch darauf geachtet werden, dass die Bilder immer in der Auflösung hochgeladen und zur Verfügung gestellt werden, in der sie nachher auch angezeigt werden. Ein Bild, welches als Anreißer im Format 300x200px dargestellt wird, braucht nicht in 600x400px auf der Seite hochgeladen werden. Sollte das Bild an andere Stelle in einer höheren Auflösung benötigt werden, so ist es Sinnvoller das Bild ein weiteres mal in der anderen Auflösung bereit zu stellen und einzubetten.

Auch möchten wir an dieser Stelle das noch recht neue Format WebP von Google nicht unerwähnt lassen. Dieses Format ermöglicht eine verlustfreie Komprimierung von Bildern und erreicht eine wesentlich geringere Dateigröße als ein herkömmliches JPG. So hat nebenstehendes JPG-Foto 11kb, das gleiche Foto als WebP aber nur 6,4kb. Das einzige Problem daran ist, dass noch nicht alle Browser das Format unterstützen. Aktuell unterstützen lediglich Chrome und Opera das WebP-Format, jedoch können für andere Browser Fallback-Bilder im JPG-Format hinterlegt werden, sodass von den anderen Browsern eben diese verwendet werden.

Schritt 4: Optimierung des Servers

Natürlich bringt die beste optimierte Website nichts, wenn der Server dahinter keine ausreichende Performance bietet, oder schlecht konfiguriert ist. Unser eigener Server ist bestens optimiert um Seiten schnell auszuliefern. Dennoch hat jede Website noch einmal spezielle Anforderungen und so werden unter anderem die Apache-Einstellungen (zum Teil auch über .htaccess), die nginx-Einstellungen und auch die PHP-Konfiguration individuell angepasst. Wir empfehlen zum Beispiel bei einem WordPress wie unserer eigenen Website mindestens 256 bis 512MB RAM zur Verfügung zu stellen.

Weiterhin ausschlaggebende Punkte für den Pagespeed sind die Komprimierung der ausgelieferten Inhalte, sowie die Informationen für den Browsercache. Dazu konfigurieren wir in erster Linie die gzip-Komprimierung in nginx bzw. Apache und teilen über die ExpireHeader dem Browser mit, welche Ressourcen wie lange im Cache bleiben dürfen. Zum Beispiel statische Ressourcen wie CSS werden auf einer herkömmlichen Website wohl kaum öfter als einmal im Monat aktualisiert und so kann man das natürlich zum Vorteil nutzen und dem Browser des Website-Besuchers mitteilen, dass er diese Art von Dateien beispielsweise erst nach 30 Tagen wieder neu herunterladen soll.

Pagespeed Optimierung des Servers

Fazit

Selbstverständlich gibt es noch viele weitere Faktoren, die den Pagespeed beeinflussen. Die hier von uns vorgestellten Punkte decken allerdings einen Großteil der Optionen ab und verbessern die Geschwindigkeit schon enorm. Wenn Sie in diesem Artikel nun nur Bahnhof verstanden haben oder festgestellt haben, dass Ihre Website eine solche Optimierung benötigt, dann rufen Sie uns an unter 06898 933 95 12 und wir beraten Sie mit Freude umfassend zum Thema Pagespeed und vielen weiteren Themen.

Lassen Sie sich beraten unter

06898 933 95 12

Wir freuen uns auf Ihren Anruf!

SPEED IS KEY – WARUM PAGESPEED (DIE GESCHWINDIGKEIT VON WEBSITES) SO WICHTIG IST wurde am 16. August 2017 von Oliver Thom veröffentlicht.