Suchmaschinenoptimierung

Pagespeed optimieren: Ein Guide zur Verbesserung der Ladezeiten

Ladezeiten optimieren Grafik

Die Optimierung der Ladezeiten sollte ein essenzieller Bestandteil der SEO-Arbeit sein, denn schnelle Ladezeiten bedeuten eine bessere Usability und somit auch eine geringere Absprungrate. Dies kann sich wiederum positiv auf das Ranking auswirken. Die besten Inhalte und die attraktivsten Angebote werden Ihnen nichts bringen, wenn der Pageload länger dauert, als es die Geduld der User zulässt. Besonders relevant ist die Ladegeschwindigkeit für die Benutzererfahrung auf mobilen Endgeräten. Bereits seit 2010 werden die Ladezeiten als Ranking-Signal genutzt. In folgendem Beitrag werde ich detailliert auf die Pagespeed-Optimierung eingehen.

Warum schnelle Ladezeiten wichtig sind

Primär helfen schnelle Ladezeiten der User Experience und die Absprungrate nimmt nachweislich ab. Dazu kommt, dass gemäss Google über die Hälfe der Suchanfragen von mobilen Endgeräten kommen – Tablets nicht miteingerechnet. Somit sind Smartphones das meistgenutzte Medium für den Zugang ins Internet und Grund genug für Google, mobile Suchanfragen in den Hauptfokus zu nehmen. Der Pageload spielt hier insofern eine Rolle, da mobile Anfragen vielfach über ein 3G oder 4G Netz kommen. Diese haben höhere Latenzen (Verzögerungen) und somit eine längere Ladezeit als Aufrufe über eine Breitband-Verbindung. Wer also keine mobile-optimierte Website betreibt, muss immer stärker mit Rankingverlusten rechnen.

Grundlage der Massnahmen

Zur Erstellung dieses Guides habe ich mich an Pagespeed Insights von Google orientiert. Dafür kann aber auch Pingdom genutzt werden. Beide Tools erstellen eine To-Do-Liste und zeigen erfüllte Kriterien auf. Das Tool von Pingdom ist dabei noch etwas ausführlicher. Wichtig ist mir noch zu erwähnen, dass Google Pagespeed Insights nicht unumstritten ist und es über die effektive Ladezeit einer Website nichts aussagt.

Die effektiven Ladezeiten von Seiten können am einfachsten mit dem Entwicklertool von Chrome evaluiert werden. Dazu einfach die Entwicklertools öffnen und unter «Network» einen Refresh der Seite machen. Am Fusse der Wasserfall-Grafik findet man nun die Ladezeiten des DOMs (blau) und die komplette Ladezeit (rot).

Die Reihenfolge wie die Massnahmen umgesetzt werden, spielt keine Rolle. Persönlich bin ich aber der Meinung, dass Massnahmen die serverseitig vorgenommen werden müssen, zuerst anzugehen sind, da für diese unter Umständen Entwickler miteingebunden werden müssen. Fangen wir an.

Browser Caching nutzen

Was ist Browser Caching?

Browser Caching bezeichnet die Anweisung an den Browser, bereits geladene Inhalte für eine gewisse Zeitspanne im Zwischenspeicher zu behalten. Falls ein User auf eine Website zurückkehrt, hat er somit eine schnellere Ladezeit, da einzelne Inhalte direkt aus dem Zwischenspeicher geladen werden können.

Wie wird Browser Caching angewandt?

Um den Browser anzuweisen, Inhalte im Zwischenspeicher zu behalten, nutzt man die .htaccess-Datei auf dem Server. Falls man nicht weiss, wo man die .htaccess-Datei findet oder keine Berechtigung zum Editieren der Datei vorhanden ist, wendet man sich am besten an den Webhosting-Anbieter. Davon ausgehend, dass die Website auf einem Apache-Server gehostet wird und das Modul «mod_expires.c» aktiviert ist, kann man zum Beispiel folgendes Code-Snippet in die .htaccess-Datei einfügen:

 

<IfModule mod_expires.c>

ExpiresActive On

ExpiresByType image/gif "access 1 month"

ExpiresByType image/ico "access 1 month"

ExpiresByType image/jpeg "access 1 month"

ExpiresByType image/jpg " access 1 month "

ExpiresByType image/png "access 1 month"

ExpiresByType image/svg+xml "access 1 month"

ExpiresByType text/css "access 1 month"

ExpiresByType text/javascript "access 1 month"

ExpiresByType application/x-javascript "access 1 month"

ExpiresByType application/javascript "access 1 month"

</IfModule>

Das obige Code-Snippet befiehlt nun, dass Bilder mit der Endung .gif, .jpg, .png usw. einen Monat im Zwischenspeicher des Browsers gespeichert bleiben, sofern der User den Browser Cache nicht manuell löscht. Die Speicherbefehle kann man je nach Bedürfnis anpassen. Einen ausführlichen Guide mit den jeweiligen Anpassungsoptionen findet man hier.

Website Inhalte mit Gzip komprimieren

Das Komprimieren einer Website ist vergleichbar mit dem «Zippen» einer Datei. Was passiert dabei? Wird eine Website vom User aufgerufen, «verpackt» der Server die Inhalte und sendet diese komprimiert an den Browser, welcher die Informationen wieder «entpackt» und ganz normal anzeigt. Zwischen Server und Browser werden somit weniger Daten transferiert, wodurch der Pageload beschleunigt wird.

Auch dies lässt sich über die .htaccess-Datei lösen. Es gibt zwei Möglichkeiten die Gzip-Kompression zu aktivieren. Entweder man nutzt «mod_gzip» oder «mod_deflate». Welche Variante man nutzt ist letzten Endes egal. Beide Varianten komprimieren die Inhalte der Website auf ein Maximum. Es sei denn, dass eine Variante vom Server nicht unterstützt wird. Am besten kurz beim Webhoster nachfragen welche Komprimierung am besten passt. Die Code-Snippets für den Apache-Server sehen folgendermassen aus:

Variante «mod_gzip»:

<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>

 

Variante «mod_deflate»:

<IfModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html

AddOutputFilterByType DEFLATE text/css

AddOutputFilterByType DEFLATE text/javascript

AddOutputFilterByType DEFLATE text/xml

AddOutputFilterByType DEFLATE text/plain

AddOutputFilterByType DEFLATE image/x-icon

AddOutputFilterByType DEFLATE image/svg+xml

AddOutputFilterByType DEFLATE application/rss+xml

AddOutputFilterByType DEFLATE application/javascript

AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/xml

AddOutputFilterByType DEFLATE application/xhtml+xml

AddOutputFilterByType DEFLATE application/x-font

AddOutputFilterByType DEFLATE application/x-font-truetype

AddOutputFilterByType DEFLATE application/x-font-ttf

AddOutputFilterByType DEFLATE application/x-font-otf

AddOutputFilterByType DEFLATE application/x-font-opentype

AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

AddOutputFilterByType DEFLATE font/ttf

AddOutputFilterByType DEFLATE font/otf

AddOutputFilterByType DEFLATE font/opentype

# For Olders Browsers Which Can't Handle Compression

BrowserMatch ^Mozilla/4 gzip-only-text/html

BrowserMatch ^Mozilla/4\.0[678] no-gzip

BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

</IfModule>

Hier werden nun Zeile für Zeile die einzelnen Bestandteile der Website komprimiert, bevor sie über das Internet verschickt werden. Der aufmerksame Leser wird nun festgestellt haben, dass hier die Bilder nicht komprimiert werden. Dies ist auch nicht nötig, da JPGs bereits komprimiert sind und deshalb keine weitere Komprimierung erreicht werden kann.

Ein Content Delivery Network (CDN) nutzen

Ein Content Delivery Network sollte dann genutzt werden, wenn man rechenintensive Inhalte auf einer Website bereitstellt. Dies können Werbebanner, Videos aber auch Javascript- und CSS-Files sein.

Was ist ein CDN?

Ein Content Delivery Netzwerk ist in der Regel ein Netzwerk aus Servern an verschiedenen Standorten dieser Welt. Die Daten werden auf dem Originserver (Ursprungsserver) abgelegt und Kopien davon werden auf sogenannten Replica-Servern via Distributionssystem weiterverteilt. Die «Content Delivery» erfolgt dann jeweils vom geografisch nächsten Server. Der Standort des Users wird via IP-Adresse ermittelt.

Infografik CDN replica Server

Was nützt ein CDNs?

Primär wird die Belastung des eigenen Servers geschont, da die Daten über ein CDN bereitgestellt werden. Weiter können Server nur eine bestimmte Anzahl an Verbindungen aufmachen, um Daten zu holen. Wer ein CDN nutzt, stellt seine Daten von mehreren Servern zur Verfügung. Somit können Daten gleichzeitig geladen werden, was wiederum den Pageload beschleunigt. Das vielleicht bekannteste CDN ist Cloudflare.

Für Grafiken CSS3 und SVG verwenden

Der Tipp ist vielleicht nicht mehr ganz so neu, aber meines Erachtens immer noch erwähnenswert: Einfache Gestaltungselemente wie zum Beispiel Buttons oder Divider usw. sollten mit CSS3 realisiert werden. Der CSS3 Code weist in allen Fällen eine wesentlich geringere Datenmenge auf als PNGs oder JPGs. Des Weiteren sind mit CSS3 erzeugte Grafiken scharf wie japanische Messer.

Falls Grafiken nicht mehr mit CSS3 erzeugt werden können, gibt es immer noch die Möglichkeit, diese in Sketch oder Illustrator zu erstellen und als SVG abzuspeichern. Warum SVG? SVG-Dateien sind vektor-basiert und deshalb verlustfrei skalierbar und in der Regel kleiner als PNGs und JPGs.

Qualitätvergleich JPG und SVG

HTTPS-Protokoll verwenden

Nun, ein HTTPS-Protokoll macht die Website nicht schneller, aber es gibt dem Browser die Möglichkeit die Verbindung zum Server mit HTTP/2 aufzubauen, wenn die Umstände es zulassen.

Die HTTPS-Verschlüsselung und das HTTP/2-Protokoll

HTTP ist der Standard für die Übertragung von Daten zwischen Server und Client. HTTP/2 ist die neueste Version des Protokolls und ermöglicht das asynchrone Laden von Daten. Inhalte können somit gleichzeitig und nicht wie bisher nacheinander geladen werden. Dies beschleunigt die Ladezeiten enorm. Damit eine Verbindung mit HTTP/2 aufgebaut werden kann, braucht es wiederum eine HTTPS-Verschlüsselung. Für eine HTTPS-Verschlüsselung braucht man das digitale Zertifikat «SSL», welches über die meisten Webhoster angefragt werden kann. Die einfachste und meistgenutzte Variante ist «Let’s Encrypt». Das Zertifikat wird von allen modernen Browsern unterstützt.

CSS-Datei zusammenfügen, minimieren und auslagern

CSS und JavaScript machen einen Grossteil des Quellcodes aus. Deshalb sollten diese jeweils in einer .css-Datei respektive in einer .js-Datei zusammengeführt, eventuell minimiert und extern verlinkt sein. Dies hat mehrere Vorteile. CSS und JavaScript-Befehle können so bequem nur einmal geändert werden, falls sie auf mehreren Seiten zum Einsatz kommen.

Um weiter an Datenmenge zu sparen, gibt es die Möglichkeit der Minimierung der CSS- und JS-Dateien. Bei einer Minimierung werden Leerschläge getilgt und gewisse Befehle zusammengeführt, was dann die Dateigrösse verringert. Leider macht eine Minimierung die Datei auch unübersichtlich. Tipp: Zur besseren Orientierung innerhalb der Dateien können auch die Multiline Comments ( /* Hier steht ein Kommentar */ ) genutzt werden. Ein bequemes Tool zur Minimierung der Daten ist Minify.

Die richtige Platzierung von JavaScript

Grundsätzlich darf das JavaScript überall im HTML-Dokument stehen – sowohl im <head> als auch im <body>. Jedoch gibt es aus Performance-Gründen auch Regeln, die man beachten sollte. Als «Best Practice» gilt CSS-Dateien und externe Skripte in den <head>-Bereich einzubetten und lokale Skripte am Ende des HTML-Dokuments, VOR dem </body> Endtag, zu platzieren. Auf jeden Fall sollten die Javascript-Dateien NACH den CSS-Dateien geladen werden. Warum ist das so? An dieser Stelle ein bisschen Theorie:

Was passiert, wenn ein Browser eine Website mit externem JavaScript lädt?

  1. Der Browser greift auf das HTML zu (zum Beispiel: index.html)
  2. Der Browser parst das HTML. Beim «parsen» interpretiert der Browser den Aufbau der Website.
  3. Der Parser trifft auf ein <script>-Tag, welches auf ein externes JavaScript-File verweist und holt die Informationen vom externen JavaScript-File und stoppt in der Zwischenzeit den Ladevorgang der restlichen Dateien.
  4. Ist das externe File geladen, wird es vom Browser zuerst ausgeführt.
  5. Wurde das externe File fertig ausgeführt, macht der Parser an der Stelle weiter, wo er vor dem externen File «aufgehalten» wurde.

Versteht man diesen Vorgang, macht es Sinn, wenn man die Skripte nach den CSS-Dateien oder am Ende des HTML-Dokuments platziert, da JavaScript meistens – aber nicht nur – erst auf Interaktion mit dem User ausgeführt wird. Da CSS für die Gestaltung und den Aufbau der Website verantwortlich ist, wird der User bei der richtigen Platzierung der Files keine Verzögerung wahrnehmen.

Will man JavaScript-Dateien im <head> einer Seite verknüpfen, kann man das JavaScript-Attribut «async» nutzen. Dieses Attribut teilt dem Browser mit, das Skript asynchron mit dem Rest der Seite zu laden und somit ohne «Zwischenstopp» mit dem Download der Informationen fortzufahren.

Beispiel:

<script type=’text/javascript’ src=’path/to/script.js’ async></script>

Bilder optimieren

Zum Schluss der Klassiker. Die einfachste und schnellste Massnahme, wenn es darum geht, Ladezeiten zu optimieren: Die Datenmenge der Bilder reduzieren. Hier gilt es vernünftig zu sein. Nur um der kleinen Datenmenge Willen die Bilder zu komprimieren und dafür eine schlechte Qualität in Kauf zu nehmen, ist falsch. Die Bilder sollten trotz Komprimierung noch ansehnlich sein. Das Auge isst schliesslich mit.

Bevor man den Web Designer mit seinen Komprimierungswünschen in den Wahnsinn treibt, erstellt man am besten einen vernünftigen Plan, wie man die Bilder aufbereitet. Im besten Fall ist dies ein Kompromiss zwischen geringer Datenmenge und Qualität. Für die JPG-Komprimierung empfehle ich einen Wert zwischen 60 und 80 %. Falls es sich um grössere Bilder handelt, darf man auch mal bis auf 50 % runter. Von niedrigeren Werten rate ich ab.

Das jeweils passende Bildformat sollte auch noch gewählt werden. Für Fotografien empfehle ich das JPG-Format und für Bilder, die Transparenzen erfordern, das PNG-Format. GIFs sollten nur für Bewegtbilder verwendet werden, da ihre Farbtiefe mit 256 Farben relativ gering ist, sie aber eine Bildabfolge zulassen. Je nach Bildermenge/Bildabfolge können GIFs richtig gross werden.

Eine weitere Möglichkeit der Optimierung ist das Einbetten der Bilder mittels CSS. Mit Media Queries lassen sich verschiedene Displaygrössen ansprechen und somit je nach Viewport ausspielen. Für mobile Endgeräte optimierte Bilder können so separat angesprochen/ausgespielt werden.

Die beste Kontrolle beim herunterrechnen der Bilder bietet der «Export fürs Web» in Photoshop. Ein Gratis-Tool zur Optimierung der Bildgrösse (vorausgesetzt man hat Lightroom) ist der JPEG-Optimizer.

Fazit

Wer alle Tipps beachtet, wird die Ladezeiten seiner Website um einiges beschleunigen. Auch einzelne Massnahmen können schon vieles bewirken. Analysieren Sie zuerst Ihre Website mit dem bevorzugten Pagespeed-Tester-Tool, um herauszufinden wo Massnahmen umgesetzt werden müssen. Dokumentieren Sie vor der Umsetzung wo der Schuh drückt und führen Sie nach den Massnahmen einen weiteren Pagespeed-Test durch. Somit haben Sie einen direkten Vergleich über die Pageload-Verbesserung an Ihrer Website und eine Dokumentation über ihre Bemühungen.

Sven Scheuermeier
Weitere Blog Artikel zu den folgenden Themen könnten Sie ebenfalls interessieren

Ihre Ansprechpartnerin

Nicole Treipl

Head of SEO & Content +41 44 552 70 00 Anfrage senden
Molkenstrasse 8
8004 Zürich
Schweiz
© 2007 - 2021 | BlueGlass Interactive AG AGBDisclaimer
Awards

Marketing Intelligence & Innovation Award 2016
In der Kategorie “Best Native Advertising Campaign”
Lesen Sie mehr zum preisgekrönten Projekt «Legoslative»

SEMY Award 2020
SEMY Award 2020 In der Kategorie «Beste SEO/Content Marketing Kampagne» zusammen mit Hirslanden.

European Search Award 2017
In der Kategorie “Best Mobile Campaign”
Lesen Sie mehr zum preisgekrönten Projekt «Mobile Sales Excellence»

Digital Communication Awards 2017
In der Kategorie “Content Marketing” zusammen mit UPC Switzerland für «eSports.ch – Gaming Hero Content».

Best of Swiss Web 2020
In der Kategorie «Performance-driven Campaigns» zusammen mit EAT.ch.

European Search Award 2020
In der Kategorie „Best Use of Content Marketing“ zusammen mit Medela.

Partner