Wie PageSpeed Optimierung deine Conversion Rate & Bounce Rate beeinflusst

PageSpeed Optimierung … brauch ich nicht! Doch, denn die Ladezeit deiner Webseite hat einen ganz entscheidenden Einfluss auf deinen wirtschaftlichen Erfolg.

Welche Parameter beeinflussen den wirtschaftlichen Erfolg einer Internetseite am stärksten? Richtig, die Conversion Rate und die Besucheranzahl. Sowohl die Conversion Rate, als auch die Visits werden extrem stark von der Ladezeit deiner Webseite beeinflusst.

Pagespeed als Ranking-Faktor

Schon im Jahr 2010 hat Google in einem Artikel im Webmaster Central Blog auf den Zusammenhang zwischen Ladezeit einer Webseite und deren Ranking im Google Index hingewiesen.

Langsam ladende Webseiten verursachen eine negative Nutzungserfahrung, negative Nutzungserlebnisse werden von deinen Besuchern zum Beispiel mit sogenannten Bounces quittiert.

Die Bounce Rate gibt dir Auskunft wieviele Besucher deine Seite verlassen ohne irgendeine weitere Aktion ausgeführt zu haben. Entweder weil deine Nutzer nicht gefunden haben was sie suchen oder weil die Nutzungserfahrung mit deiner Webseite nicht besonders toll war.

Für Google stellt die Bounce Rate ein sogenanntes „User Signal“ dar, eine wertende Aussage des Nutzers über die Qualität/Attraktivität der besuchten Seite. Daraus können wir unschwer schliessen, dass eine hohe Bounce Rate einen negativen Ranking-Faktor für den Google Algorithmus darstellt. Ein schlechtes Ranking bei Google bedeutet für dich, dass deine Webseite wenig besucht wird, also wenige Visits verzeichnet.

Betrachtet wir den Zusammenhang zwischen Ladezeit einer Webseite und der Bounce Rate ihrer Besucher, dann wird schnell klar wie wichtig PageSpeed Optimierung ist. Die rote Linie im folgenden Diagramm zeigt dir, dass Webseiten, die schnell geladen werden eine niedrig Bounce Rate haben.

Pagespeed Optimierung - Abhängigkeit der Bounce Rate von der Ladezeit

PageSpeed Optimierung ist gleich Conversion Optimierung

Es gibt also einen direkten Zusammenhang zwischen Ladezeit und Bounce Rate, wie aber wirkt sich die Ladegeschwindigkeit auf die Conversion Rate aus?

Die Bounce Rate ist ein Indikator für zufriedene Besucher und eine positive Nutzungserfahrung ist die Grundvoraussetzung für eine gute Conversion Rate. Auch die CR, ebenfalls als rote Linie im folgenden Diagramm dargestellt, weist eine starke Abhängigkeit zur Ladegeschwindigkeit einer Webseite auf.

Pagespeed Optimierung - Abhängigkeit der Conversion Rate von der Ladezeit

PageSpeed Optimierung, ein Erfolgsfaktor

Zusammengefasst, deine Webseite auf schnelle Ladezeiten zu optimieren wirkt sich positiv auf deinen wirtschaftlichen Erfolg aus! Zum Beispiel hat Amazon schon im Jahr 2012 berechnet, dass pro 100 Millisekunden zusätzliche Ladezeit 1% Umsatz verloren geht. Bei einem geschätzten Tagesumsatz von ca. 70 Mio. Dollar sind das im Falle von Amazon immerhin 700.000 Dollar pro Tag.

Was kannst du tun um die Ladezeit deiner Webseite zu verkürzen? Hier habe ich ein paar einfache Tipps zusammengestellt, die schon eine Menge bewirken.

Erste, einfache Maßnahmen zur Ladezeit Optimierung deiner Webseite

Bevor du loslegst solltest du die Ladegeschwindigkeit deiner Webseite messen, sozusagen einen Referenzwert schaffen. Diesen Referenzwert kannst du zum Beispiel auf webpagetest.org ermitteln, dort erhält du ziemlich detailierte Auskünfte über die Ladezeiten der einzelnen Bestandteile deiner Webseite und erste Hinweise für wichtigsten Optimierungsschritte. Schliesslich macht Optimieren  ja erst richtig Spaß, wenn man den Erfolg seiner Maßnahmen messen kann. Das heißt, setze dir ein Ziel und kontrolliere den Erfolg jeder einzelnen Maßnahme bis du dein Zeil erreicht hast.

1. Sorge dafür, dass deine Bilder richtig optimiert und eingebunden sind

Bilder haben häufig einen großen Anteil an der zu ladenden Datenmenge einer Webseite, Bilder optimieren lohnt sich extrem. Bilder richtig zu komprimieren ist eigentlich ganz einfach, achte nur darauf für jedes Dateiformat den wirksamsten Encoder zu verwenden. Aktuell sind das wohl,  mozJPEG für JPEG, Pingo für PNG und Lossy GIF für GIF. Da mir das alles zu unhandlich ist verwende ich persönlich die Mac App ImageOptim, sie vereint sehr gute Encoder für JPEG, PNG und GIF in einer Anwendung und ist sehr einfach zu bedienen.

Deine komprimierten Bilder musst du dann nur noch optimal in deine Webseite integrieren. Optimal bedeutet, du sorgst dafür, dass du je nach Bildschirmauflösung das richtige Bild mit der besten Dateigröße zur Verfügung stellst. Insbesondere die Ladezeit auf mobilen Gräten mit kleinen Bildschirmen und schlechten Internetverbindungen profitiert davon. Das scrset-Attribut und das <picture>-Element sorgen dafür, dass du das passende Bild zu jeder Bildschirmauflösung auslieferst. Wie das genau funktioniert ist sehr gut und ausführlich im Artikel: Der neue Standard für responsive Bilder auf Webkrauts.de beschrieben.

Mit dem Responsive Image Breakpoints Generator kannst du ganz einfach die richtigen Bildformate, das scrset, generieren. Optimieren nicht vergessen!

2. Achte darauf, dass deine aktiven Javascript und CSS Dateien optimiert sind

Leerzeichen, Zeilenumbrüche, Dopplungen, lange Variablennamen usw. blähen deine Javascript und CSS Dateien unnötig auf. Entfernst du diese Störenfriede, erreichst du kleinere Dateien, die schneller heruntergeladen, geparst und ausgeführt werden.

  • Javascript-Code kannst du zum Beispiel sehr gut mit Packer optimieren
  • CSS-Code kannst du mit CSSmin verkleinern

3. Aktiviere GZIP-Komprimierung für deine Webseite

Mit aktiver GZIP-Komprimierung kann dein Webserver die Menge der Daten, die beim Aufruf deiner Webseite übertragenen werden, per Kompression um bis zu 70% reduzieren. Daraus folgt, dass sich die Wartezeit für den Seitenaufbau deiner Webseite verkürzt und deine Besucher weniger Datenvolumen verbrauchen. Die GZIP-Komprimierung kannst du durch einen Eintrag in der .htaccess–Datei aktivieren.

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
</IfModule>

Jetzt musst du nur noch herausfinden, welches Apache Modul (GZIP o. Deflate) zur Komprimierung auf deinem Webserver oder Hosting Paket aktiviert ist und dann die zutreffenden Zeilen kopieren (1. Block module_gzip, 2. Block module_deflate).

4. Ermögliche ein optimales Browsercaching

Besuchst du eine Webseite, so speichert dein Browser die besuchte Webseite in einem Zwischenspeicher, dem sogenannten Browsercache. Beim zweiten Besuch der selben Webseite  fragt dein Browser den Webserver ob sich seither etwas an der Seite verändert hat. Hat sich etwas geändert, fordert dein Browser die Webseite neu beim Webserver an, hat sich nichts geändert, so liest dein Browser die Webseite aus seinem Cache. Logischerweise geht es viel schneller die Webseite aus dem lokalen Cache zu lesen als sie erneut über das Internet zu übertragen, PageSpeed Optimierung wie sie im Bilderbuche steht.

Mit einem Expires Header kannst du verhindern, dass Daten erneut vom Webserver angefragt werden. Als Konsequenz des Expires Header teilt der Server dem Browser mit, dass er für einen Zeitraum X auf die Abfrage nach einer Änderung verzichten soll. So ein Expires Header kann auch Nachteile haben, schliesslich fragt der Browser ja nicht mehr immer beim Webserver nach ob es Änderungen gab. Bei der Auswahl der richtigen Verfallszeiträume ist dein Fingerspitzengefühl gefragt. Als Faustregel gilt: Dateien die sich häufiger ändern solltest du mit einem kurzen Verfallszeitraum versehen, Dateien die sich nicht ändern, Bilder zum Beispiel, kannst du mit langen Verfallszeiträumen versehen.

Wie schon die GZIP-Komprimierung kannst du die Expires Header über deine .htaccess Datei beeinflussen. Eine aus meiner Sicht sinnvolle Einstellung für die Expires Header ist:

<IfModule mod_expires.c>
ExpiresActive on
ExpiresDefault "access plus 24 hours"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 week"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType font/truetype "access plus 1 month"
ExpiresByType font/opentype "access plus 1 month"
ExpiresByType application/x-font-woff "access plus 1 month"
ExpiresByType image/svg+xml "access plus 1 month"
</IfModule>

Bis ich herausgefunden hatte wie ich einen Expires Header für ein Favicon definieren konnte hat es einige Zeit gedauert. Scheinbar kann der Apache mit der Dateiendung .ico nichts anfangen und interpretiert sie als yxz??? :). Die Lösung war dann aber ganz einfach, ich musste dem Webserver nur mitteilen, dass die Dateiendung .ico den MIME type image/vnd.microsoft.icon hat.

AddType image/vnd.microsoft.icon .ico
ExpiresByType image/vnd.microsoft.icon "access plus 3 months"

Voila,mit diesen zusätzlichen Zeilen in der .htaccess wird auch dem Favicon ein Expires Header zugewiesen.

5. Webfonts und PageSpeed Optimierung

Beschäftigt man sich mit dem Thema PageSpeed Optimierung tauchen immer wieder Vorschläge auf wie man Webfont Ladezeiten optimiert. Ein häufig genannter Tipp ist „Lade nur relevante Subsets einer Font“. Mittlerweile erledigen neuere Browser das ganz von alleine, allerdings musst du in deinen CSS Anweisungen eine unicode-range definieren. Mit Hilfe dieser Anweisung entscheidet der Browser, welches Subset das richtige ist und lädt auch nur dies. Webfont Dienste wie z.B. Google Fonts liefern diese unicode ranges schon mit, hier besteht eigentlich kein weiterer Optimierungsbedarf: ein Beispiel:

/* latin-ext */
@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 300;
  src: local('Fira Sans Light'), local('FiraSans-Light'), url(http://fonts.gstatic.com/s/firasans/v7/VTBnrK42EiOBncVyQXZ7j4joYw3YTyktCCer_ilOlhE.woff2) format('woff2');
  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
}

Unter Umständen musst du manuell eingreifen und selbst unicode ranges anlegen, eine dokumentierte Liste aller Unicode Blöcke findest du auf Wikipedia. Ältere Browser, welche die Anweisung unicode-range noch nicht interpretieren, kannst du mit dem Parameter &subset=cyrillic (lädt das Subset Cyrillic, nur Google Fonts) dazu bewegen das richtige Subset zu laden.

https://fonts.googleapis.com/css?family=Roboto+Mono&subset=cyrillic

Eine ausführliche Beschreibung der API findest du in der Google Fonts Dokumentation.

Empfehlung zum Thema Ladezeit Optimierung

Das Smashing Magazine hat unter dem Titel Front-End Performance Checklist 2017 eine sehr ausführliche Anleitung zum Thema PageSpeed Optimierung veröffentlicht. Diesen Artikel kann ich jedem Webseitenbetreiber nur wärmstens empfehlen.

 

A.Schramm

 

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.