Onpage

Wie mache ich eine Pagespeed-Optimierung?

Titelbild Pagespeed Optimierung SEO Kompass
Anna Maria von Kentzinsky
Anna Maria von Kentzinsky | 05.04.2021

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.