PageSpeed-Insights: So macht Ihr Eure Website schneller!

Zugegeben: Geduld zählt nicht zu meinen allergrößten Stärken. Schon gar nicht, wenn ich im Netz unterwegs bin. Ich gehören zu den Usern, die schon bei leicht verzögerten Ladezeiten anfangen, nervös zu klicken und zu schimpfen. Ebenso wie ich reagiert auch Google bei einer langsamen Seitengeschwindigkeit verschnupft. Die Suchmaschine wird dann zwar nicht laut, wertet Eure Seite aber eventuell empfindlich ab. Denn der sogenannte PageSpeed ist einer der wichtigsten Google-Ranking-Faktoren. Mit den PageSpeed-Insights liefert Google netterweise gleich ein Tool mit, das Euch anzeigt, welche Fehler Ihr für mehr Tempo beheben müsst. Das Problem dabei: Selbst erfahrene Nutzer wissen häufig nicht, wie sie die Verbesserungsvorschläge praktisch umsetzen sollen. Wir versuchen, etwas Licht ins Dunkel zu bringen.

Was ist der PageSpeed genau und wieso ist er so wichtig?

Der PageSpeed zählt seit 2010 zu den Ranking-Faktoren von Google. Kurz zuvor hatte der Konzern die Initiative „Let’s make the web faster“ gestartet – mit der Aufnahme der Ladegeschwindigkeit in die Ranking-Faktoren erhöhte Google den Druck auf Webseitenbetreiber, dieses Thema ernst zu nehmen. Ziel war und ist es, dass Webseiten genauso schnell „durchgeblättert“ werden können wie Printmagazine:

Laut Google soll der PageSpeed einen Einfluss von 1 Prozent auf die Suchanfragen-Ergebnisse haben. Hört sich nach wenig an, lohnt aber dennoch, etwas Zeit und Arbeit zu investieren, denn es zählt nicht nur der direkte, sondern auch der indirekte Einfluss durch die User-Signale. Ein ganz eindeutiges negatives User-Signal sind zum Beispiel viele Nutzer, die die Seite sehr schnell wieder verlassen. Und das passiert bei erhöhten Ladezeiten schneller als mancher Seitenbetreiber denkt, wie diese Infografik von kissmetrics zeigt:

Bereits bei einer Ladezeit von 4 Sekunden verlassen 25 Prozent der User die aufgerufene Website umgehend. Infografik: kissmetrics.com
Bereits bei einer Ladezeit von 4 Sekunden verlassen 25 Prozent der User die aufgerufene Website umgehend. Infografik: kissmetrics.com

Wie berechnet Google den PageSpeed?

Natürlich legt Google in diesem Punkt wie gewohnt nicht alle Karten offen, gibt im Dienste der Sache schnelleres Netz aber eine ganze Reihe von Einblicken:

Den eigenen PageSpeed ermitteln: Das PageSpeed Insights Tool

Spätestens wenn Ihr selber feststellt, dass Eure Seite Ladehemmungen hat, solltet Ihr das Google-Tool PageSpeed Insights nutzen. Einfach die Webseiten-Adresse eintragen, auf analysieren klicken und wenige Momente später bekommt Ihr das Ergebnis geliefert:

Das PageSpeed Insights Tool liefert Euch wichtige Verbesserungsvorschläge in Sachen Ladegeschwindigkeit. Einige sind ganz einfach umsetzbar, andere sorgen oft für Stirnrunzeln. Screenshot: S. Cantzler
Das PageSpeed Insights Tool liefert Euch wichtige Verbesserungsvorschläge in Sachen Ladegeschwindigkeit. Einige sind ganz einfach umsetzbar, andere sorgen oft für Stirnrunzeln. Screenshot: S. Cantzler

Der PageSpeed-Wert bewegt sich auf einer Bandbreite von 0 bis 100. Die 100 ist das optimale Ergebnis, ist aber so gut wie unerreichbar. Google teilt die Ergebnisse in drei Kategorien ein:

  • Werte von 0 bis 64: schlechter PageSpeed
  • Werte von 65 bis 84: neutraler PageSpeed
  • Werte von 85 bis 100: guter PageSpeed

Zusätzlich zum Ergebnis liefert das Tool zahlreiche Verbesserungsvorschläge mit. Einige davon erschließen sich auch mit geringen Vorkenntnisse sofort. Andere dagegen sind mehr oder weniger ein Rätsel. Wir erklären Euch deshalb die vier wichtigsten beziehungsweise häufigsten Optimierungsmaßnahmen Schritt für Schritt.

Nummer 1: Bilder optimieren

In den meisten Fällen landet die Maßnahme „Bilder optimieren“ ganz oben – und ist erfreulicherweise ein Punkt, den jeder Nutzer selbst in den Griff bekommen kann. Klar ist: Ohne Bilder geht auf modernen Webseiten nichts, schon gar nicht, wenn es sich um einen Online-Shop handelt. Klar ist auch, dass die Bilder auch in der Darstellung möglichst hochwertig wirken sollen. Auf der anderen Seite binden Bilder einen sehr großen Teil der Lade-Ressourcen – was wiederum viel Potenzial für die Optimierung bietet.

PageSpeed Insights liefert Euch detaillierte Informationen darüber, welche Bilder optimiert werden können und wie viel Einsparungspotenzial über eine Komprimierung und korrekte Formatierung Euch jedes Motiv bietet:

  • Die richtige Bildabmessung: Ein häufiger Fehler ist das Laden von Bildern in einer zu großen Größe. Welche Abmessung optimal ist, hängt davon ab, für was Ihr das Foto einsetzt. Bei einem Bild, das als Illustration im Fließtext dient, sollte die größte Seitenlänge etwa 300 Pixel betragen. Möchtet Ihr Bilder in der Großansicht zeigen, können es dagegen bis zu 1000 Pixel größte Seitenlänge sein. Achtet bereits beim Upload auf die passende Größe, um die Ressourcen nicht übermäßig zu belasten. Das ist einfacher, als im Nachhinein viele Bilder auf die passenden Abmessungen zu bringen.
  • Das richtige Bildformat: Eine weitere Einsparmöglichkeit besteht beim Dateiformat. In der Regel werden Bilder als .jpeg (Joint Photographic Expert Group) oder als .png (Portable Network Graphics) hochgeladen. Mit .jpeg liegt Ihr richtig, wenn Ihr Bilder verwendet, die nur eine geringe Dateigröße benötigen – Motive mit diesem Dateiformat sind automatisch komprimiert und verbrauchen dadurch weniger Speicherplatz, die Qualität leidet jedoch bei der Bearbeitung. Wer eine hohe Darstellungsqualität möchte, für den empfiehlt sich das Format .png, das verlustfrei bearbeitet werden kann, aber auch entsprechend Ressourcen frisst und so die Ladegeschwindigkeiten erheblich ausbremsen kann.
  • Bildkomprimierung: Bildkomprimierung bedeutet, so viel Dateigröße wie möglich einzusparen, dabei aber die Bildqualität zu erhalten. was Ihr dafür braucht ist ein Bildbearbeitungsprogramm wie Photoshop oder – als kostenlose Alternative – Gimp. Als Photoshop-Benutzer geht Ihr einfach unter Datei auf den Punkt „Für das Web speichern“. Dort könnt Ihr Eure Bilder als .jpeg oder .png abspeichern und im Falle von .jpegs genau regeln, welche Qualität das Motiv haben soll:
Die "Vorher-Nachher-Ansicht" zeigt Euch bei der Komprimierung via Photoshop, wie sich die Qualität des Bildes verändert und wie viel Speicherplatz Ihr durch diese Aktion einspart. Screenshot: S. Cantzler
Die „Vorher-Nachher-Ansicht“ zeigt Euch bei der Komprimierung via Photoshop, wie sich die Qualität des Bildes verändert und wie viel Speicherplatz Ihr durch diese Aktion einspart. Screenshot: S. Cantzler

Ihr möchtet noch mehr Speicherplatz sparen? Dann stehen Euch im Netz noch zusätzliche Image-Crush-Tools zur Verfügung – zum Beispiel tinyjpg und tinypng. Bei diesen Tools ladet Ihr Eure Wunschmotive hoch, anschließend werden alle verzichtbaren Bytes aus den Bilddateien entfernt. Die Tools werben mit nahezu verlustfreier Komprimierung, trotzdem solltet Ihr kritisch hinsehen, ob die Qualität am Ende noch für Euch passt.

Nummer 2: Browser Caching

Browser Caching bedeutet – vereinfacht ausgedrückt – dass der Webbroswer zunächst alle benötigten Dateien (HTML/CSS/JavaScript und Bilddateien) von der angesteuerten Webseite herunterlädt und diese auf dem Rechner Eurer Seitenbesucher in einem Zwischenspeicher, dem Cache, ablegt. Alle Informationen müssen also erst einmal quasi offline zur Verfügung stehen, erst dann interpretiert der Browser die Dateien und stellt die Webseite dar.

Ist das Browser Caching richtig eingestellt, kann der Browser bei einem erneuten Seitenaufruf auf die im Cache bereitgestellten Dateien zurückgreifen, statt alle Dateien erneut herunterzuladen. Der Browser fragt beim Server ab, ob sich die benötigten Daten geändert haben. Wenn ja, werden die Daten neu angefordert. Wenn nein, wird direkt aus dem Cache geladen. Das verringert die Datenübertragung von Eurem Server zu Euren Nutzern und damit auch die Ladezeit der Webseite.

Damit das Browser Caching funktioniert, muss der Browser wissen, wie lange er die Dateien im Cache speichern soll – die Dateien brauchen also ein „Ablaufdatum“. Google PageSpeed empfiehlt als Anhaltswert eine Ablaufzeit von einer Woche. Unter Umständen können aber auch längere Fristen sinnvoll sein. Das Browser-Caching könnt Ihr mit vergleichsweise wenig Aufwand über die .htaccess-Datei aktivieren. Diese detaillierte Anleitung hilft Euch dabei.

Tipp: Manche Dateien müssen innerhalb des festgelegten Zeitraums öfter verändert werden als andere. Damit diese Änderungen trotz Browser-Caching bei den Nutzern ankommen, sollten für verschiedene Dateitypen auch verschiedene Ablaufdaten festgelegt werden.

Nummer 3: JavaScript- und CSS-Rendering

Mit der Optimierung des Renderings versucht man, das Anzeigen des sichtbaren Bereichs – above the fold genannt – schneller zu machen. Damit das klappt, müssen alle Dateien, die für diesen Bereich nötig sind, beim Laden bevorzugt werden. Für diesen Teil nicht benötigte Dateien werden dagegen „nach hinten“ verschoben. Möglich wird das durch eine optimale Positionierung der JavaScript- und CSS-Dateien im Quellcode der Seite.

Häufig sind diese allerdings nicht korrekt positioniert und sorgen dann für eine Blockierung des Renderings. Für Nutzer ist das daran zu erkennen, dass sich der beim Start sichtbare Bereich nur Stück für Stück aufbaut und manchmal sogar zunächst eine komplett leere Seite zu sehen ist.

Wird das Rendering durch im Quellcode falsch positionierte JavaScript- und CSS-Dateien blockiert, verlängert sich die Ladezeit für den Bereich above the fold. Erst im Anschluss werden Stück für Stück die Inhalte "von oben nach unten" geladen. Screenshot: S. Cantzler
Wird das Rendering durch im Quellcode falsch positionierte JavaScript- und CSS-Dateien blockiert, verlängert sich die Ladezeit für den Bereich above the fold. Erst im Anschluss werden Stück für Stück die Inhalte „von oben nach unten“ geladen. Screenshot: S. Cantzler

Anders als bei den vorangegangenen Punkten gibt es für die Optimierung des Renderings keine konkreten Tipps, die für jede Webseite umsetzbar sind. Es hilft aber schon, sich an einige grundsätzliche Regeln zu halten:

  • Aufräumen: Achtet darauf, dass CSS und JavaScript nur den notwendigen Code enthalten. Außerdem sollte der Code in möglichst wenigen unterschiedlichen Dateien bereitgestellt werden – zu viele JavaScript-Dateien bedeuten zwangsläufig eine verlangsamte Ladezeit.
  • Positionieren: Ideal ist es, wenn das notwendige CSS für den sichtbaren Bereich so platziert wird, dass es als allererstes aufgerufen wird. Das restliche CSS sollte ans Ende des Quellcodes rutschen, ebenso wie JavaScript-Dateien.

Nummer 4: Komprimierung aktivieren

Dieser Schritt liefert Euch eine Art Wunderwaffe: die Reduzierung der Seitengröße mittels Aktivierung der Komprimierung. Mit dem Kompressions-Dienstprogramm Gzip (GNU zip) ist das relativ einfach und hat dabei einen großen Einfluss auf den PageSpeed. Habt Ihr Gzip auf Eurem Server aktiviert, wird der Großteil der Daten in „abgespeckter“ Variante an den Browser gesendet. Der Browser Eurer Nutzer entpackt die komprimierten Daten dann wieder und öffnet sie – so schnell, dass es für die Nutzer nicht zu merken ist. Der Vorteil: Die verkleinerten Pakete können schneller verschickt werden und ermöglichen einen schnelleren Aufbau der Seite.

Für die Aktivierung von Gzip benötigt Ihr einen Code, der in die .htaccess-Datei eingefügt werden muss. Bitte beachten: Bereits komprimierte Dateien – etwa Eure Bilder – solltet Ihr von der Gzip-Komprimierung ausschließen. Die erneute Komprimierung bedeutet zusätzlichen Aufwand und kann die Dateien sogar vergrößern.

Tempo bleibt wichtig

Experten schätzen, dass der PageSpeed für das GoogleRanking in Zukunft noch eine größere Rolle spielen wird, gerade im Hinblick auf den starken Zuwachs bei der mobilen Nutzung. Es lohnt sich also, sich mit den vorgeschlagenen Maßnahmen auseinander- und diese auf der eigenen Seite auch umzusetzen – und das nicht nur im Hinblick auf das Suchmaschinen-Ranking, sondern auch auf die wesentlich höhere Nutzerfreundlichkeit, die Ihr damit erreicht.