PageSpeed – der Erfolgsfaktor Ihrer Webseite

Habt ihr schon einmal eine Person den Satz sagen hören:

„Ich liebe Warteschlangen. Jedes Mal, wenn ich eine sehe, stelle ich mich sofort dazu“

Nein? Wir auch nicht.

Auch die Ladezeit Ihrer Webseite oder Ihres Webshops – sogenannter PageSpeed – sollte so gering wie möglich sein. Sonst verlieren Sie mögliche Kunden und Umsatz.

Als Webshop-Agentur in Stuttgart und Heilbronn empfehlen wir Ihnen dringend Ihren PageSpeed zu verbessern, denn laut einem Google PageSpeed Benchmark-Bericht aus dem Jahr 2017, steigt die Zahl der „abgesprungenen Besucher“ einer Website exponentiell zu der Ladezeit.

Steigt die Wahrscheinlichkeit, dass der Besucher die Seite wieder verlässt innerhalb der ersten 3 Sekunden Ladezeit noch um 32%, sind es bei 5 Sekunden 90% und bei 10 Sekunden schon eine Steigerung um 123%.

Und das ungeachtet jeglicher Qualität des Inhalts der Website – mit anderen Worten: Sie können eine noch so gute Website haben, noch so tollen Inhalt vermitteln, wenn die Ladezeit zu lange ist, dann wird es Ihre Besucher nicht lange auf dieser Seite halten.

Was ist nun eigentlich dieser „PageSpeed“?

Als PageSpeed wird die Geschwindigkeit zwischen dem Absenden einer Anfrage und der vollständigen Auslieferung der angefragten Inhalte definiert. Dazu gehören natürlich sämtliche Inhalte wie auch Skripte, Stylesheets, etc.

Den PageSpeed Ihrer eigenen Website können Sie unter PageSpeed Insights nachmessen, das damit verbundene Google-Ranking und auch eine Analyse der möglichen Verbesserungsmaßnahmen einsehen.

Bevor wir einen Blick auf die Verbesserungsmaßnahmen werfen, widmen wir uns den Auswirkungen, die Sie mit einer Optimierung erreichen können:

SEO-Ranking

2010 wurde der PageSpeed von Google offiziell als Ranking-Faktor vorgestellt. Dabei sind 2 Einflüsse entscheidend – zum einen der direkte Einfluss als Teil des Ranking-Algorithmus, zum anderen der indirekte Einfluss, der sich aus dem Userverhalten ableiten lässt.

Also: Je höher der PageSpeed, desto besser ihr SEO-Ranking

User Experience (UX)

Wie schon im indirekten Einfluss des SEO-Rankings zu sehen ist, spielt das Benutzererlebnis der Besucher Ihrer Website eine große Rolle. Wie lange hält es die Besucher auf Ihrer Website? Neben einem bestechlichen Content, ist die Usability der Website ein nicht zu unterschätzender Faktor – und zu jener Usability gehört dementsprechend auch eine verkürzte Ladezeit.

Hierzu hat auch Google einheitliche Qualitätsmerkmale, sog. Core Web Vitals definiert, welche die Nutzererfahrung auf einer Website widerspiegeln.

Conversion-Rate

Die Conversion-Rate misst die Zahl, wie viele Besucher Ihrer Website „konvertiert“ werden – d.h. genau die Aktionen ausführen, welche die Seite als Ziel hat. Bei einer E-Commerce-Seite wäre das z.B. der Kauf eines Produktes.

Laut skilled.co, beträgt die Conversion-Rate bei einer Ladezeit mehr als 5,7 Sekunden 0,6%.

Seiten, die in 2,4 Sekunden geladen werden, hatten eine Conversion-Rate von 1,9%

Auch Erfahrungsberichte von Firmen lassen ähnliches erkennen:

COOK steigerte bspw. die Konversionen um 7%, indem die Seitenladedauer um 0,85 Sekunden reduziert wurde.

Business-Image

Ein Besucher wird sich vielleicht nicht bewusst an eine positive schnelle Ladezeit erinnern. Er wird sie gar nicht bemerken, sondern nur unterbewusst wahrnehmen, dass die Seite eben „läuft“.

Was er aber definitiv merken wird ist, wenn die Seite Ewigkeiten braucht um zu laden. Mit ein bisschen Glück klickt er sich durch 1-2 Themen auf Ihrer Seite und hat spätestens beim 3. keine Lust mehr, ehe er sich eine Seite sucht, die ähnliches bietet, aber eben schnell läuft.

Diesen Besucher werden Sie wohl nicht mehr wiedersehen.

Vor allem für Betreiber einer E-Commerce-Seite ist jeder zufriedene Besucher und gewonnene Kunde ein Erfolgsmultiplikator seines Geschäfts.

Bestimmt hat sich bis hierhin der ein oder andere Leser gefragt: „Ja und wie kann ich nun meine PageSpeed optimieren?“ – Das ist natürlich zugegebenermaßen der Casus Knacksus.

Optimierung Ihres PageSpeed

Als erfahrene Webshop-Agentur ist das auch für uns ein Thema, mit dem wir uns täglich auseinandersetzen, um unseren Kunden die bestmögliche Leistung zu bieten.

Die Möglichkeiten detailliert und tiefgehend zu erörtern, würde den Rahmen dieses Artikels um einiges sprengen, weswegen wir uns für eine allgemeinere und kürzere Variante entschieden haben.

1. Ressourcen eliminieren, welche das Rendering blockieren

Was bedeutet das denn nun im Klartext?

Das Rendering ist nichts anderes als der Seitenaufbau. Und Ressourcen, welche den Seitenaufbau blockieren, können z.B. JavaScript- oder CSS-Dateien sein.

Alle Skripte oder Stylesheets, welche wirklich notwendig für die Sichtbarkeit und Nutzbarkeit der Seite sind, werden „kritisch“ bzw. „critical“ genannt.

Wenn Google PageSpeed Insights meckert, dass es Ressourcen gibt, welche das Rendering blockieren, meint es also nicht anderes, als dass Nicht-kritische Skripte oder Stylesheets zu „früh“ im HTML-Dokument geladen werden und diese das Laden der kritischen Elemente blockiert.

Ihre Aufgabe ist es also nun, herauszufiltern, welche Dateien essentiell für den Seitenaufbau sind und diese am Anfang laden zu lassen, während der Rest erst am Ende des Bodys oder asynchron geladen werden sollte.

2. Browser-Caching

Ein Cache ist ein Zwischenspeicher, Punkt :-)

Bei einem Besuch einer Seite, speichert der Browser die Seite und ihre einzelnen Ressourcen (CSS, JS, Bilder) im Cache ab. Bei einem erneuten Besuch fragt der Browser ab, ob sich die gespeicherten Ressourcen geändert haben. Falls nicht, lädt der Browser diese direkt aus dem Cache und müssen nicht neu vom Server angefordert werden.

→ Sie liegen sozusagen auf dem lokalen Speicher des Nutzers.

Google PageSpeed empfiehlt für Ressourcen eine Speicher-Mindestdauer von einer Woche. Wie man die Mindestdauer selber steuern kann?

Durch eine kleine Anzahl an Zeilen in Ihrer .htaccess-Datei.

Hier empfiehlt es sich, einfach mit der Suchmaschine seiner Wahl nach dem entsprechenden Code zu suchen.

Für eine einfache Funktionalität könnte der Code ungefähr so aussehen:

<IfModule mod_headers.c>
<FilesMatch "\.(gif|ico|jpeg|jpg|png|css|js)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>
</IfModule>

Kleine Änderung – große Wirkung! :-)

3. Komprimierung von Bildern

Bilder stellen eine der größten Ressourcen dar, welche eine Website laden muss. Vor allem mit dem technischen Fortschritt der Bild-Qualität, nimmt die Datengröße der Bilder in Zukunft eher zu als ab.

Daher sind Bilder ein großer Punkt in Sachen PageSpeed, aus dem aber auch einiges rausgeholt werden kann.

Was mit dem richtigen Format der Bilder anfängt, hört bei der optimalen Auflösung und Größe der Bilder auf. Da dieses Thema sehr umfangreich ist, empfehlen wir diesen Beitrag, um einen Überblick über die Möglichkeiten und Bildbearbeitungstools zu bekommen.

Was man auch hier in einem Atemzug nennen kann und muss ist das sogenannte „Lazy-Loading“.

Das Lazy-Loading ist eine Technik, welche die Daten erst dann vom Server anfordert, sobald sie in den sichtbaren Bereich des Nutzers gelangen.

Dies empfiehlt sich z.B. bei größeren Seiten mit vielen Bildern.

4. Einfach aber wirkungsvoll:

Benutzen Sie das HTTP/2-Protokoll mit einem SSL Zertifikat.

Für tiefere PageSpeed-Einblicke:

Es gibt definitiv noch viele weitere Möglichkeiten, den PageSpeed individuell zu erhöhen.

Wem wir Lust gemacht haben, auch noch an den kleinsten Stellschrauben seiner Website zu drehen, um den letzten Rest an PageSpeed herauszukitzeln, dem möchten wir noch ein paar Anregungen mit auf den Weg geben:

TTFB, FCP, FMP, TTI, Schnelle DNS-Connection, CDN, Infrastructure-bottlenecks, server-side caching, GZip compression, WebP, JS-&CSS-Outsourcing, -Minimize, -Merging, -Bundling, Prefetching, Prerendering, Preloading, Redirect-Reduction

Expertenhinweis unserer Webshop-Agentur:

Die Optimierung des PageSpeeds Ihrer Webseite oder Webshops ist sehr vielschichtig und facettenreich. Um das Optimum zu erreichen muss für jede Webseite eine maßgeschneiderte, individuelle Lösung gefunden werden. Hierfür stehen Ihnen gerne unsere qualifizierten Webshop-Entwickler zur Seite.