Wie mache ich eine Pagespeed-Optimierung? 🚀 | XOVI
Nur fĂŒr die ersten 100 Neukunden! 49,50 €/mtl. Laufzeit 12 Monate. Spare 594€!Jetzt bestellen
Onpage

Wie mache ich eine Pagespeed-Optimierung?

Wie schnell deine Seite einsatzbereit ist bestimmt nicht nur deine Rankings, sondern auch deine UmsĂ€tze. Du glaubst es nicht? Erfahre, was genau Pagespeed ist und welche Bedeutung Pagespeed fĂŒr SEO und fĂŒr die User Experience hat.

Außerdem lernst du, wie du den Pagespeed deiner Seite analysierst und optimierst - inklusive praktischer Infografik zum Download.

Titelbild Pagespeed Optimierung SEO Kompass

Welche fatalen Folgen ein langsamer Seitenaufbau fĂŒr dein Online-Business und deine Rankings haben kann, haben wir oben bereits ausfĂŒhrlich erlĂ€utert. Doch was bedeutet das jetzt fĂŒr dich und deine Seite? Wir helfen dir heute dabei, folgende Fragen zu beantworten:

  1. Wie finde ich die Ladezeit meiner Seite heraus?
  2. Wie schnell ist schnell genug?
  3. Wie optimiere ich die Ladezeit meiner Seite?

1. Wie finde ich die Ladezeit meiner Seite heraus?

Du ahnst es vielleicht bereits: Deine Seite braucht ein paar Sekunden, um am Desktop oder auf dem Smartphone zu laden. Doch wie schnell (oder langsam) ist sie eigentlich konkret? Ist ihre Geschwindigkeit ein Problem, oder nicht?

Um das herauszufinden, kannst du kostenlose Pagespeed Tools nutzen mit denen du deinen Pagespeed messen und analysieren kannst. Außerdem beinhalten die meisten SEO Tools auch ein Pagespeed Tool an, die auch ein Monitoring mitbringen. Wir haben fĂŒr dich eine Reihe an Tools herausgesucht, die du fĂŒr die Analyse der Ladezeit verwenden kannst. Am besten nutzt du eine Kombination aus mehreren Tools, da nicht alle dieselben Daten liefern.

Pagespeed Insight von Google

Pagespeed Insights ist ein Teil von Google Lighthouse und wird sehr hĂ€ufig fĂŒr Pagespeed Analysen herangezogen.

Wie funktioniert Pagespeed Insights?

Pagespeed Insights vergibt eine Punktzahl zwischen 0 und 100, wobei 100 der bestmögliche Wert ist. Diese Skala hat Google nach dem Ampelsystem in drei Kategorien eingeteilt:

Punktzahl Einstufung Farbcode
0-49 Schlecht Rot
50-89 MittelmĂ€ĂŸig Orange
90-100 Gut GrĂŒn

Du erfĂ€hrst, wie lange deine Website braucht, um Pagespeed-relevante Stadien zu erreichen. Auch hier kannst du anhand des Farbcodes ablesen, ob die ermittelten Zeitspannen tendenziell gut, schlecht oder mittelmĂ€ĂŸig sind.

google pagespeed insights blume2000

Davon ausgehend, dass eine Website dann vollstĂ€ndig geladen ist, sobald der User sie nicht nur sehen, sondern auch mit ihr interagieren kann, findest du die Ladezeit deiner Seite unter “Zeit bis InteraktivitĂ€t”.

Merke-Icon Du erhĂ€ltst keine Details darĂŒber, wie die gemessenen Geschwindigkeiten zustande kommen und durch welche Ressourcen sie maßgeblich verursacht werden.

Neben den Messergebnissen liefert dir Pagespeed Insights auch Empfehlungen, wie du deine Ladezeit optimieren kannst und wie groß die Zeitersparnis im Idealfall sein kann.

google pagespeed insights empfehlungen

Das Tool vergleicht deine Website mit einem vordefinierten ‘idealen’ technischen Zustand und legt die Differenzen offen. Ob diese Ìdeale`fĂŒr dich sinnvoll sind oder nicht, wird dabei nicht berĂŒcksichtigt. Konkrete Berichte ĂŒber die Ladezeit und GrĂ¶ĂŸe einzelner Ressourcen erhĂ€ltst du nicht. Nutze Google Pagespeed Insights bei deiner Pagespeed Optimierung daher nur ergĂ€nzend. Das Tool arbeitet sehr oberflĂ€chlich, hilft aber, eine erste EinschĂ€tzung vorzunehmen und erste AnsĂ€tze fĂŒr die Optimierung zu erhalten.

Pingdom.com

Pingdom.com ist ein kostenpflichtiges Pagespeed Monitoring Tool, das allerdings eine kostenlose Pagespeed Analyse anbietet. Du bekommst sehr detaillierte Ergebnisse, die du auch herunterladen und mit anderen teilen kannst.

In der Übersicht erhĂ€ltst du
deine Ladezeit,

  • die SeitengrĂ¶ĂŸe,
  • die Anzahl der benötigten Requests
  • Eine Gesamtbewertung

pingdom dot com pagespeed results

FĂŒr ein leichteres VerstĂ€ndnis werden deine Pagespeed Performance insgesamt sowie einzelne Faktoren benotet. Verwendet wird dafĂŒr das amerikanische Notensystem von A (entspricht der Schulnote 1) bis F (entspricht der Schulnote 6).

Du erhĂ€ltst Optimierungs-Empfehlungen zu deinen schlechtesten Ergebnissen (siehe oben), bekommst aber auch einen detaillierten Einblick in die Requests, die fĂŒr den Seitenaufbau benötigt werden (siehe unten).

pingdom dot com pagespeed analyse details

So erkennst du schnell, wo besonders viel geballtes Datenvolumen besteht, das reduziert werden kann oder wo und welche Requests besonders viel zeit in Anspruch nehmen.Dank seiner Exportfunktion und zahlreichen Daten eignet sich Pingdom recht gut fĂŒr eine erste Analyse deines Pagespeed.

GTmetrix

Ähnlich wie pingdom.com handelt es sich bei GTmetrix um ein eigentlich kostenpflichtiges Tool, das eine kostenlose Pagespeed Analyse anbietet. GTmetrix fragt dabei Google Pagespeed Insights und YSLOW von Yahoo ab und bietet außerdem Request-Timelines fĂŒr alle sowie fĂŒr einzelne Dateiformate an. Auch hier wird dein Pagespeed anhand von amerikanischen Schulnoten bewertet.

Wenn du GTmetrix ohne eigenes Konto nutzt, wird deine Seite von einem kanadischen Server aus analysiert. FĂŒr eine Analyse von einem Server in deiner Region musst du dir ein Nutzerkonto anlegen.

Google Analytics

Sicherlich benutzt du bereits Google Analytics fĂŒr die Webanalyse deiner Seite. Wenn nicht, solltest du das zĂŒgigst Ă€ndern.

SEO Kompass TippHier erfÀhrst du, welchen Nutzen Google Analytics hat, wie du es einrichtest und mit dem Tool und seinen Berichten richtig umgehst.

Neben seinen zahlreichen anderen Reports findest du auch einen ĂŒber “Websitegeschwindigkeit” im Bereich “Verhalten”. Die Daten verraten dir die durchschnittliche Ladezeit deiner Seite bei deinen Usern.

pagespeed overview google analytics

Unter “Seiten Timings” kannst du sehen, welche deiner Seiten besonders schnell, bzw. besonders langsam laden. “Empfehlungen zur schnellen Anzeige” ermöglicht es dir, OptimierungsvorschlĂ€ge zu einzelnen URLs einzuholen. Die entsprechende URL wird dann bei Pagespeed Insights analysiert.

SEO Kompass TippWenn du einen Online-Shop betreibst und mit Google Analytics deinen E-Commerce trackst, kannst du herausfinden, welchen Einfluss die Ladezeit auf deine Conversions (und damit auf deine UmsÀtze) hat.

Google Search Console

Dein Pagespeed wird natĂŒrlich auch dadurch bestimmt, wieviel Zeit fĂŒr das Herunterladen deiner Inhalte benötigt wird. Hier hilft der Bereich “Crawling” in der Google Search Console weiter.

Die Statistiken verraten dir, wie groß das Datenvolumen deiner Seite ist und wie viel Zeit der Crawler benötigt, um die Inhalte herunterzuladen. Diese Information kannst du nutzen, um Ladeprobleme zu identifizieren. Du kannst dir die Daten auch im Zeitverlauf ansehen und so Schwankungen sofort erkennen.

crawl stats google search console_pagespeed-optimierung-kompass

SEO Kompass Tipp Solltest du die Google Search Console noch nicht verwenden, erfĂ€hrst du hier, was du mit ihr machen kannst und wie du die Google Search Console einrichtest. Außerdem haben wir auch Artikel ĂŒber Crawling und Crawl Budget Optimierung fĂŒr dich.

Pagespeed mit einem SEO Tool messen

Kostenlose Tools analysieren den Pagespeed in Echtzeit und geben – je nach Tool – Daten zur LadefĂ€higkeit der eigenen Seite zurĂŒck.

Ein gutes SEO Tool liefert dir verlĂ€sslich alle technischen Daten, die du zur Analyse und Optimierung deines Pagespeeds benötigst. Eine Request-Timeline verrĂ€t dir, in welcher Abfolge welche Requests gemacht werden und wieviel Zeit und Datenvolumen dafĂŒr benötigt werden. Außerdem bekommst du konkrete Empfehlungen, wie du die Ladezeit deiner Seite deutlich verbessern kannst.

DarĂŒber hinaus hast du die Möglichkeit, deinen Pagespeed dauerhaft zu ĂŒberwachen und so VerĂ€nderungen schnell zu erkennen. Das Monitoring erlaubt es dir auch, deine Erfolge sichtbar zu machen. So kannst du die ersten Analyseergebnisse und den Erfolg deiner Optimierung in einem Reporting ĂŒberzeugend darstellen.

xovi pagespeed tool blume2000 analyse

2. Wie schnell ist schnell genug?

Nachdem du herausgefunden hast, wie lange deine Seite benötigt, bis sie fĂŒr den User einsatzbereit ist, stellen sich nun folgende Fragen:

  1. Ist die Ladegeschwindigkeit meiner Seite nun schnell genug oder muss ich die Ladezeit optimieren?
  2. Wenn meine Seite zu langsam ist, welchen Wert sollte ich mindestens erreichen?

Einige der oben vorgestellten Tools liefern dir neben den Daten zu deinem Pagespeed auch eine Kategorisierung ĂŒber die QualitĂ€t deines Pagespeeds. Das hilft dir bei einer ersten EinschĂ€tzung.

Von 0 auf 100 in unter 3 Sekunden

Da Websites in erster Linie meist einen Umsatz getriebenen Zweck erfĂŒllen sollen, richtet man sich am besten an der Absprungrate der User. Je geringer die durch deine Ladezeit hervorgerufene Bounce Rate, desto mehr Conversions (und Umsatz) kannst du maximal erreichen.

Weiter oben im Abschnitt “Warum ist Pagespeed so wichtig” haben wir bereits gezeigt, wie drastisch sich die Ladezeit auf die Bounce Rate auswirkt. Diese Werte solltest du als Ziel fĂŒr deine Pagespeed Optimierung setzen.

Merke-IconDer ideale Pagespeed – gerade mobil – liegt also bei einer Sekunde oder weniger. Mehr als 3 sollten es nicht sein.

Allerdings sollte deine Optimierungsmaßnahmen in einem ökonomischen Rahmen bleiben; fĂŒr ein paar Millisekunden großen Aufwand zu betreiben, ist sicher nicht die richtige Lösung.

3. Wie optimiere ich die Ladezeit meiner Seite?

Vorweg: Ganz wichtig ist natĂŒrlich eine gute Dokumentation deiner Analyseergebnisse und Maßnahmen, sonst kannst du deinen Erfolg nicht messen.

Einige Aufgaben wirst du – je nach deinen Schwerpunkten – selbst umsetzen können. FĂŒr andere Dinge benötigst du eventuell die UnterstĂŒtzung von anderen Abteilungen wie IT oder Grafik. FĂŒr die Onpage Optimierung schlagen wir eine Projektmanagement-orientierte Vorgehensweise vor, die du auch hier anwenden kannst.

Wichtig zu wissen ist: Lange Ladezeiten haben meist nicht nur eine Ursache, sondern viele. Die Hauptursachen sind:

  • Ressourcen mĂŒssen einzeln abgerufen werden und nicht gebĂŒndelt
  • Ressourcen mĂŒssen bei jedem Laden vollstĂ€ndig neu geladen werden
  • Ressourcen werden nicht komprimiert
  • Ressourcen werden nicht ausgelagert

Die verschiedenen Pagespeed Analyse Tools geben dir in der Regel bereits konkrete Empfehlungen, die auf die Ergebnisse deiner Analysen abgestimmt sind. Diese Empfehlungen kannst du direkt umsetzen.

11 Maßnahmen fĂŒr eine schnellere Seite

Es gibt eine ganze Reihe an Maßnahmen, die fĂŒr einen schnellen Seitenaufbau sorgen können. Viele von ihnen wirst du sicherlich auch in den Empfehlungen der Pagespeed Analyse Tools wiederfinden. Wir haben fĂŒr dich 11 Optimierungsmöglichkeiten fĂŒr die Pagespeed Optimierung zusammengestellt, die du dir am Ende des Artikels kostenlos herunterladen kannst.

Minimiere http-Requests

Icon fĂŒr die Reduzierung von HTTP RequestsFĂŒr den Aufbau einer Seite werden die entsprechenden Ressourcen vom Webserver abgerufen. Je mehr das sind, umso mehr Anfragen werden an den Server gestellt. Das dauert natĂŒrlich.

Konkret bedeutet das: Verringere die Anzahl an externen Skripten, CSS und Bildern, die nicht notwendigerweise geladen werden mĂŒssen. Je mehr Anfragen der Server bearbeiten muss, desto langsamer wird die Seite laden.

Reduziere dein JavaScript

Icon fĂŒr die Reduktion von JavaScript bei der Pagespeed OptimierungJavaScript sollte möglichst komprimiert werden, sodass die zu ladenden Ressourcen kleiner werden. Du kannst beispielsweise direkt zu Beginn des Seitenaufbaus nur das JavaScript laden lassen, welches fĂŒr die korrekte Darstellung der Website benötigt wird. Nicht benötigtes JavaScript sollte zu einem spĂ€teren Zeitpunkt nachgeladen werden.

Nutze nur ein CSS-Stylesheet

Icon fĂŒĂŒr die Nutzung eines CSS Stylesheets fĂŒr die Pagespeed OptimierungDamit CSS auch gecached werden kann, sollten Stylesheets zur einer CSS-Datei zusammengefasst werden, die dann in der Seite angegeben wird. So ist es möglich auch die CSS-Datei cachen zu lassen. Durch diesen Cache-Vorgang mĂŒssen Ressourcen, die bereits in der Vergangenheit geladen wurden, nicht erneut abgerufen werden.

Optimiere deine Bilder

Icon fĂŒr die Bilderoptimierung bei der Pagespeed OptimierungHĂ€ufig werden Bilder in ihrer OriginalgrĂ¶ĂŸe in die Website integriert und verursachen aufgrund ihrer immensen DateigrĂ¶ĂŸe lange Ladezeiten und einen hohen Datenverbrauch fĂŒr mobile Surfer. Achte darauf, deine Bilder möglichst sofort in den richtigen Abmessungen abzuspeichern, bevor du sie hochlĂ€dst. Fotos mit vielen Details speicherst du im JPEG Format, Grafiken und Logos im PNG Format. Wenn möglich, kannst du auch moderne Formate wie z.B. SVG oder WebP verwenden.

Nutze das Browser-Caching effizient

Icon fĂŒr effizientes Browser Chaching bei der Pagespeed OptimierungBeim Aufrufen einer Seite werden die relevanten Informationen (z.B. Bilder) vom Webserver abgerufen und im Cache des Browsers gespeichert. Sollte der User spĂ€ter dieselbe Seite erneut besuchen, werden diese Inhalte nicht mehr vom Webserver abgerufen, sondern aus dem Speicher des Browsers. Das spart Anfragen und damit Zeit.

Da sich die Inhalte natĂŒrlich auch Ă€ndern können, kann in dem jeweiligen Http-Header ein Ablaufdatum festgelegt werden. Definiere, ab wann die Inhalte erneut abgerufen werden sollen und ob die Inhalte ĂŒberhaupt gecached werden sollen. Möchtest du die Ladezeit deiner Website verringern, dann solltest du den Browser-Cache nutzen, um bereits in der Vergangenheit geladene Ressourcen und noch gĂŒltige Ressourcen nicht erneut abrufen zu lassen.

Nutze CSS-Sprites

Icon fĂŒr die Nutzung von CSS Sprites bei der Pagespeed OptimierungMit Hilfe von CSS-Sprites können mehrere Bilder zu einem (großen) Bild zusammengefasst werden. Wenn nun beispielsweise ein Icon in diesem „zusammengefassten” Bild angezeigt werden soll, dann wird nur dieser bestimmte Teilbereich angezeigt, sodass User nicht das ganze Bild sehen, sondern nur die relevanten FlĂ€chen. HĂ€ufig kommen CSS-Sprites bei Buttons, Icons und Logos zum Einsatz. Dadurch, dass nun nur ein Bild geladen werden muss und nicht mehr viele einzelne, wird die Anzahl an Http-Requests verringert, was einen schnelleren Seitenaufbau zur Folge hat.

Komprimiere Dateien mit gzip

Icon fĂŒr die Dateikomprimierung mit gzip bei der Pagespeed OptimierungDamit die GrĂ¶ĂŸe der zu ladenden Ressourcen möglichst gering wird, können beispielsweise Javascript und CSS mit gzip komprimiert werden. So komprimiert der Server vor der Auslieferung die benötigten Ressourcen und sendet diese an den Webbrowser, der diese wieder entpackt. Mit dieser Methode kann meist ein hoher Prozentsatz der Gesamt-Ladezeit eingespart werden.

Vermeide Weiterleitungen

Icon fĂŒr die Vermeidung von 301 Redirects fĂŒr die Pagespeed Optimierung301-Weiterleitungen haben ihre Berechtigung. Zum Beispiel dann, wenn Inhalte nicht mehr verfĂŒgbar sind und User und Crawler sonst auf einen 404 Statuscode treffen wĂŒrden. Allerdings solltest du nicht zwingend notwendige Weiterleitungen und Weiterleitungsketten vermeiden. Der unnötige (und evtl. lange) Weg zur gewĂŒnschten URL benötigt mehr Zeit und verlangsamt deinen Seitenaufbau.

Nutze asynchrones Laden

Icon fĂŒr die Nutzjng von asynchronem Laden fĂŒr die Pagespeed OptimierungBeim Laden einer Website wird das HTML-Dokument von oben nach unten ausgelesen und die Inhalte in der Reihenfolge geladen, wie sie im HTML vorkommen. Das nennt man auch synchrones Laden. Braucht ein Inhalt besonders viel Zeit, mĂŒssen alle nachfolgenden Dateien warten.

Asynchrones Laden verhindert diesen Stau, indem nachfolgende Inhalte bereits geladen werden, auch wenn der Download der vorausgehenden Datei noch nicht abgeschlossen ist. Eingebundes CSS oder JavaScript wird dann im Hintergrund weiter geladen.

Verwende Ajax bzw. Lazy Loading

Icon fĂŒr die Verwendung von AJAX oder Lazy Loading fĂŒr die Pagespeed OptimierungMit AJAX wird nicht die gesamte Seite auf einmal geladen, sondern vorerst nur der fĂŒr den User zuerst sichtbaren bereich, auch Above the Fold genannt. Scrollt er dann herunter, werden die Inhalte nachgeladen.

Nutze AMP oder PWA

Nutze AMP oder PWA fĂŒr die Pagespeed Optimierung AMP steht fĂŒr Accelerated Mobile Pages. Dabei handelt es sich um ein schlankes HTML-Format speziell fĂŒr mobile Seiten, dessen Pagespeed bis zu 4 Mal schneller ist, als gewöhnliches HTML.

PWA steht fĂŒr Progressive Web App, also websites mit App-Ă€hnlichen eigenschaften, die auch offline und vom Homescreen des Smartphones aus geladen werden können.

Infografik mit 11 Maßnahmen fĂŒr die Pagespeed Optimierung

Jetzt Downloaden

Welche Optimierungsmaßnahmen fĂŒr deine Seite in Frage kommen, hĂ€ngt von den Ergebnissen der Pagespeed Analysen ab und davon, welche technische Umsetzung fĂŒr deine Website am sinnvollsten ist. Sprich dich dafĂŒr am besten mit deiner IT ab, sie wird dich bei der Umsetzung unterstĂŒtzen.