Seit 2010 wissen wir, dass die Ladezeit einer Seite ein Bestandteil des Google-Rankings ist. Für gute SEO’s ist es natürlich selbstverständlich alle Rankingfaktoren zu beachten und dementsprechend zu optimieren, so manch anderer neigt dagegen eher dazu diesen Faktor der Suchmaschinenoptimierung zu vernachlässigen, weil es seiner Meinung nach auf die paar Millisekunden nicht ankommt. Womit er vielleicht sogar nicht ganz Unrecht hat, doch kann sich PageSpeed-Optimierung gerade für (größere) Online Shops durchaus lohnen. Aus drei Gründen:

  1. Der PageSpeed hat Auswirkungen auf das Google-Ranking in zweifacher Hinsicht:
  • Zum Einen werden langsame Seiten einfach von Google bestraft („If your site is really, really slow, we’ve said that we do use page speed in our rankings. And so all of the things beeing equal, yes, a site can rank lower.” https://www.youtube.com/watch?v=-I4rWnQxxkM)
  • Zum Anderen springen Menschen von der Seite, die ihrer Meinung nach zu lange lädt, vermehrt ab. Dies registriert Google, die Bounce-Rate steigt und die Ergebnisse fließen dann in den eigenen Ranking-Algorithmus ein.
  1. Der PageSpeed hat auch Auswirkungen auf den Google-AdWords-Qualitätsfaktor:

Der Qualitätsfaktor Ihrer Landing Page ist sehr wichtig. Google prüft immer den Nutzen einer Seite für die Besucher. Wenn Ihre Seite also nach dem Klick auf Ihre Werbung zu lange braucht um zu laden und der Kunde genervt abspringt, wird auch dies von Google registriert, auch diese Ergebnisse fließen dann in die Bewertung Ihrer Seite mit ein.

  1. Der Pagespeed hat Auswirkungen auf die Conversion-Rate:

Studien großer Händler haben folgende Ergebnisse geliefert:

  • Walmart erhöhte die Conversionsrate bei jeder Sekunde Ladezeit-Verbesserung um 2 Prozent
  • Gleichzeitig stieg der Umsatz um 1 Prozent für jede Verbesserung der Ladezeit um 100ms
  • Darüber hinaus ist die Bounce-Rate gesunken und das Ranking hat sich gebessert
  • Amazon fand heraus, dass jede 100ms an zusätzlicher Ladezeit 1 Prozent an Conversion kostet (
  • Shopzilla erreichte eine Verbesserung der Conversionsrate um 7 bis 12 Prozent durch die Reduzierung der Ladezeit um 5 Sekunden.

Quellen:

www.slideshare.net/devonauerswald/walmart-pagespeedslide

https://sites.google.com/site/glinden/Home/StanfordDataMining.2006-11-28.ppt?attredirects=0

http://de.slideshare.net/timmorrow/shopzilla-performance-by-design-2433735?ref=http://www.speedboosting.de/?p=154&preview=true

Testen Sie die Ladezeit Ihrer Website

Für das Testen der Ladezeit Ihrer Seite gibt es natürlich eine Fülle an Tools, hier eine kleine Auswahl:

Der Google Developer ist ein sehr nützliches Werkzeug, das für die meisten Bedürfnisse mehr als ausreicht. Meine persönliche Seite z.B. schneidet bei der Analyse mit diesem Tool nur durchschnittlich ab: bei „Mobile“ sogar etwas unterdurchschnittlich:

page-speed-optimierung-1

 

Es müsste also noch Einiges getan werden…

Insgesamt gibt es 4 große Problembereiche, auf die Sie Ihren Fokus legen sollten:

  1. Java Script- und CSS-Rendering optimieren

Die meisten Fehler gibt es im Java Script- und CSS-Rendering-Bereich, die eher von echten Profis beseitigt werden sollten, da es mit viel Kleinarbeit verbunden ist und technisches Know-How erfordert. Werden JS- & CSS-Dateien im Quellcode nicht richtig positioniert, kann es vorkommen, dass diese den Aufbau der Seite blockieren. Durch diese Blockierung des Renderings verlängert sich die Ladezeit, in der sich der für den User sichtbare Bereich (above the fold) aufbaut. Ziel bei der Optimierung dieses Bereichs ist es nicht, die gesamte Ladezeit zu optimieren, sonder nur die des sichtbaren Bereichs. Dateien also, die für diesen Bereich zuständig sind, müssen bevorzugt geladen werden. Dateien, die für die Darstellung des „Above the fold“-Bereichs nicht benötigt werden, sollten innerhalb des Quelltextes an das Ende verschoben oder im Hintergrund (asynchron) geladen werden. Folgende Tipps sollten Sie darüber hinaus beherzigen:

  • JS & CSS sollten immer nur den notwendigen Code enthalten, also möglichst aufgeräumt sein
  • Grenzen Sie die Anzahl der unterschiedlichen JS-Dateien möglichst ein
  • JS sollte nach Möglichkeit erst am Ende des Quellcodes geladen werden.
  • Das notwendige CSS für den sichtbaren Bereich dagegen sollte möglichst im Head der Seite geladen werden

 

  1. Browser Caching nutzen

Sie kennen es vielleicht: wenn Sie eine Seite im Netz besuchen, speichert Ihr Browser die Seite und ihre Eigenschaften im Zwischenspeicher (Cache) ab. Besuchen Sie die Seite erneut, lädt der Browser die Seite direkt aus dem Cache (solange sich die Seite in der Zwischenzeit nicht geändert hat, was der Browser zuerst abfragt). Browser Caching lässt sich relativ einfach und schnell über die .htaccess-Datei aktivieren und bietet somit die Möglichkeit, mit wenig Aufwand die Ladezeit für wiederkehrende Besucher zu reduzieren.

 

  1. Bilder komprimieren

Bilder gehören bekanntermaßen zu den größten Ressourcenfressern. Laut httparchive.org/interesting.php verursachen Bilder über 60 Prozent der Dateigröße aller Ressourcen. Gerade bei Online Shops spielen Bilder oft eine wichtige Rolle, haben eine hohe Auflösung und Qualität und nehmen dementsprechend viel Platz ein.

  • Bildkomprimierung: Bei der Bildkomprimierung versucht man die Größe der Datei zu komprimieren, dabei aber die Qualität des Bildes möglichst beizubehalten. Die ersten Schritte erfolgen mit Programmen wie Adobe Photoshop, für die es aber sicherlich bessere Experten gibt als mich (Es gibt aber bei Photoshop den Button „Für Web und Geräte abspeichern“, der seinen Zweck beim Einsparen von Dateigröße durchaus erfüllt). Tools wie Image-Crush helfen zusätzlich an Dateigröße einzusparen.
  • JPEG oder PNG? JPEG hat den großen Vorteil, dass man den Kompromiss zwischen Qualität und Bildgröße komplett selbst steuern kann. Der große Nachteil bei JPEG ist, dass die Qualität der Bilder durch jeden Bearbeitungsprozess abnimmt. Wenn man Bilder in höchster Qualität darstellen will, empfiehlt es sich PNG zu nehmen. Ein weiterer Vorteil ist, dass das Bildformat die Möglichkeit der Transparenz bietet, weswegen das Format vor allem von Webdesignern gerne genutzt wird. Allerdings nimmt PNG recht viel Speicherplatz im Vergleich zu JPEG ein.
  • Verwendung von LazyLoading: Bei dieser Technik werden Bilder erst dann vom Server geladen, sobald der Nutzer diese anfordert, wenn die Bilder also in den sichtbaren Bereich gelangen.
  • Verwendung von WebP: WebP ist ein von Google entwickeltes Bildformat, mit dem man gegenüber JPEG bis zu 80 Prozent der Dateigröße sparen kann. Der große Nachteil ist aber, dass es nur unter den Browsern Chrome und Opera funktioniert. Nichtsdestotrotz sollte man nicht darauf verzichten!
  1. Komprimierung aktivieren (Gzip):

Gzip gilt als die einfachste Technik zur Reduzierung der Seitengröße, die gleichzeitig aber den stärksten positiven Einfluss auf den PageSpeed hat. Dabei wird – vereinfacht gesprochen – die Übertragungsgröße durch das Komprimieren von Dateien bei der Auslieferung vom Webserver verringert. Wenn z.B. Gzip auf dem Server aktiviert wird, liefert der Webserver die Datei in gepackter Form an den Browser, dieser entpackt sie dann und öffnet sie.

Es muss davon ausgegangen werden, dass das Thema PageSpeed in Zukunft weiter an Bedeutung gewinnen wird in dem Ranking-Algorithmus von Google, vor allem in Hinsicht auf die mobilen Seiten, die bisher viel zu langsam laden. Oft sind sie nach wie vor aus SEO-Sicht nicht gut und darüber hinaus auch wenig benutzerfreundlich. Auch wenn sich der Trend merklich ändert.

Diese 4 Tipps sollen aber als grobe Richtung erst mal reichen. Wenn Sie das Thema interessiert merken Sie sich vielleicht die folgenden Anregungen und recherchieren auch selbst weiter:

  • CSS & JavaScript komprimieren und an der richtigen Stelle integrieren
  • CSS3 statt Grafiken für Buttons und Co. zu nutzen
  • HTML Code verringern & ungenutztes CSS entfernen
  • Browser-Caching nutzen
  • Cookies vermeiden
  • HTTP Requests reduzieren
  • Quellcode reduzieren
  • Weiterleitungen vermeiden & 404 Fehler (bei Bildern, Skripten & Co.) beseitigen
  • Inhalte per AJAX nachladen (gerne auch das, was nicht im Sichtbereich der Nutzers ist)
  • Datenbanken optimieren & ggf. reparieren
  • Keine Inline-Frames einbauen
  • Mobile First – für alle, die wirklich Gas geben wollen!
  • Fertige Social Widgets (von Facebook & Co.) bitte nicht nutzen
  • Bilder:
  • Bildgrößen und Datei-Formate richtig wählen (bitte keine Bilder mittels CSS kleiner machen)
  • Bilder komprimieren, Meta-Tags entfernen
  • Icons als Font laden (http://fontawesome.io/,http://fontello.com/)
  • Image-Sprites verwenden (reduziert automatisch die HTTP Requests)
  • Responsive Bilder nutzen (http://adaptive-images.com/)

(Quelle: http://www.121watt.de/seo/pagespeed-optimierung/)

 

Schauen Sie bitte auch auf die Seiten https://www.indexlift.com/de/blog/zehn-tricks-page-speed-optimierung, https://e-commerce-blog.de/pagespeed-fuer-shops/ und https://www.hosteurope.de/blog/pagespeed-optimierung-fuer-wordpress/ (gut für WordPress-Kunden!) für weitere Anregungen!

 

Viel Erfolg!