Ladezeiten verbessern für bessere Rankings, Conversions und Umsätze

Ein guter Pagespeed ist für den Erfolg eines Onlineshops essentiell. Denn gute Ladegeschwindigkeiten sind nicht nur wichtig, um  das Google Ranking zu verbessern und somit den Traffic zu steigern. Schnelle Ladezeiten erhöhen zudem die User Experience und können so die Conversion und den Umsatz des Shops nennenswert und nachhaltig steigern.

In diesem Artikel haben wir Ihnen 15 Tipps zusammengestellt, mit denen der Pagespeed Ihres Onlineshops signifikant optimiert werden kann.

1. Bilder komprimieren für einen besseren Pagespeed

Oft sind zu große und unkomprimierte Bilder maßgeblich verantwortlich für schlechte Ladezeiten von Onlineshops. Deswegen sollten Sie nicht nur Größe und Komprimierung anpassen, sondern auch irrelevante Meta-Informationen entfernen, um das Datenvolumen der Bilder zu minimieren. Hier die Details zu Größe, Auflösung und Datenformat im Einzelnen:

• Empfohlene Größe für Produktbilder: 2800 x 2800 px, 72 dpi, JPEG-Format
• Empfohlene Größe für sonstige Bilder (z. B. Header): max. 1920 x 1080 px, 72 dpi
• Bildformat: JPEG oder PNG (bei transparenten Bereichen im Bild)

Sie können die Größe und Auflösung von Bildern mit kostenlosen Tools wie GIMP anpassen. Zur Kompression von Bildern empfehlen wir Ihnen das ebenfalls kostenlose Tool TinyJPG, das Bilder automatisch komprimiert. TinyJPG entfernt bei der Komprimierung auch unnötige Meta-Informationen (z. B. Name des Fotografen bei Fotos).

TinyJPG ist übrigens auch als (kostenpflichtes) Plugin für einige Shopsysteme verfügbar, beispielsweise für Shopware oder Magento. Wenn dieses Plugin bei dem Shopsystem installiert ist, komprimiert es automatisch neue Bilder, die Sie hochladen. Die manuelle und zeitintensive Kompression der Bilder vor dem Upload in den jeweiligen Shopsystemen entfällt dann.

2. Webhosting optimieren

Generell sollten Sie Ihren Onlineshop bei einem Hoster hosten, der performante Hostingpakete für Onlineshops bietet. Zum Beispiel TimmeHosting oder Mittwald. Wenn Sie bei einem kleineren Hoster unter Vertrag sind, der Webshops nur nebenbei hostet und der keinen performanten Webserver (Apache oder nginx) anbietet, sollten Sie einen Serverwechsel in Betracht ziehen.

Falls Ihr Shop langsam laden sollte, hilft oft ein Wechsel von einem Hostingpaket in ein leistungsfähigeres, dass mehr Prozessorkerne hat und mehr Arbeitsspeicher und Speicherplatz bietet. Ein Wechsel des Hostingpakets kann den Pagespeed bereits optimieren, für weitere Verbesserungen der Ladezeit müssen ggf. detaillierte Einstellungen beim Hostinganbieter vorgenommen werden.

3. Ggf. Wechsel des Shopsystems

Viele All-In-One Shopsysteme bieten von vorgefertigen Shops bis zum Hosting alle Leistungen aus einer Hand. Oft ist es so, dass bei einem integrierten Hosting keine Einstellungen vorgenommen werden können. Wenn dies der Fall ist, sollten Sie zu einem Shopsystem wechseln, bei dem Sie den Hostinganbieter frei wählen und notwendige Konfigurationen vornehmen können. Bei kleinen Shops mit wenigen Produkten empfehlen wir WooCommerce, bei Shops die groß sind und viele Produkte anbieten, empfehlen wir größere Lösungen wie Magento oder Shopware.

4. AMP verwenden

AMP steht für Accelerated Mobile Pages und ist ein Standard für Websites und Onlineshops, die auf mobilen Endgeräten genutzt werden. Vereinfacht gesagt, wird bei AMP der HTML-Code um Informationen reduziert, die für Mobilgeräte irrelevant sind. Das kann die Ladezeit bei der mobilen Nutzung Ihres Shops erheblich verbessern. Mit diesem Standard ist es möglich, Onlineshops mit dem Smartphone und einer langsamen Internetverbindung relativ schnell zu laden. Besonders in Zeiten von steigenden mobilen Internetnutzern vor allem im Onlineshopping, sollten Sie diesen Standard für Ihren Shop einsetzen. Die meisten professionellen Shopsysteme können mit einem entsprechenden Plugin erweitert werden, z. B. mit dem AMP für Shopware.

5. HTTP-Anfragen reduzieren

Wenn ein User Ihren Onlineshop aufruft, muss er bei jedem Aufruf für jede neue Quelle eine HTTP-Anfrage (http-request) an den Server senden. Eine Quelle können Bilder, Texte oder Tabellen sein. Jeder Aufruf kostet Ladezeit und verschlechtert den Pagespeed des Shops.

Um den Pagespeed des Shops zu optimieren, sollten die nötigen Aufrufe reduziert werden. Probate Mittel, um die http-requests zu verringern sind die Komprimierung von Bildern, die Zusammenfassung und Auslagerung von CSS in externen CSS-Dateien oder die Nutzung von AJAX. AJAX ermöglicht das asynchrone Laden von Inhaltselementen (beispielweise Texte) z. B: beim Nach-unten-Scrollen in einem Shop. So muss nur ein Teil der Seite des Shops neu geladen werden, was Resourccen spart und die Ladezeit verbessert.

6. External CSS benutzen

CSS enthält Information zu Layout, Farben, Schriftart und andere gestalterische Details von Websites und Onlineshops. Es ist möglich, für jede Unterseite eines Shopseine CSS-Datei (inline / internal CSS) mit Informationen zu hinterlegen. Dies kostet Ladezeit und verlangsamt den Shop. Besser ist es, alle Informationen zu Design und Layout gesammelt in einer ausgelagerten CSS-Datei (external CSS) zu integrieren. So läuft Ihr Onlineshop schneller.

7. CSS und JavaScript-Dateien reduzieren

CSS- und JS-Dateien können unnötige Informationen (z. B. Leerzeichen) enthalten, die Ballast für den Quellcode des Onlineshops sind. Onlineshops mit ballastreichem Quellcode laden langsamer. Durch das Entfernen von z. B. Leerzeichen kann der Quellcode auf nur eine Zeile reduziert werden, was förderlich für den Pagespeed ist.

Zum Komprimieren gibt es verschiedene Tools. Beispielsweise den YUI Compressor für CSS-Dateien und Closure Compiler für JavaScript.

8. JavaScript am Ende des Quellcodes laden

Ihr Webshop wird erst vollständig im Browser angezeigt, wenn alle JavaScript-Dateien und CSS-Dateien vollständig geladen wurden. Für die Ladezeit ist es förderlich, wenn Sie JavaScript-Dateien an das Ende des HTML-Codes platzieren. Die CSS-Dateien müssen allerdings im Head-Bereich des Quellcodes platziert werden, damit alle grafischen Elemente des Shops korrekt dargestellt werden.

9. Benutzen Sie CSS-Sprites

CSS-Sprites sind CSS-Dateien, die aus mehreren einzelnen Bildern bestehen. In CSS-Sprites können z. B. mehrere Icons oder alle Hintergrundbilder auf einer Seite zusammengefasst werden. CSS-Sprites können die Ladezeit eines Onlineshops optimieren, da der Browser statt vieler einzelner Anfragen nur noch einen Request benötigt, um alle Bilder einer Unterseite zu laden und darzustellen. CSS-Sprites können mit Generatoren erstellt werden. Beispielsweise mit dem Sprite-Generator von toptal.

10. Benutzen Sie serverseitiges Caching

Beim serverseitigen Caching werden HTML-Dokumente, die wichtige Elemente des Shops enthalten, auf einem Server zwischengespeichert. Wenn ein Kunde eine Unterseite Ihres Shops ein zweites Mal aufruft, müssen weniger Inhalte geladen werden, da die wichtigsten Elemente der Seite bereits im Zwischenspeicher sind.

11. Externe Skripte verringern

Sharebuttons für Facebook und Pinterest oder Trackingcodes von z. B. Analysetools enthalten Skripte, die sich negativ auf den Pagespeed des Onlineshops auswirken können. Deswegen sollten Sie nur Skripte installieren, die Sie wirklich benötigen. Wenn also in Ihrem Blog kein User einen Artikel über einen Sharebutton auf Facebook teilt oder Niemand ein Produktfoto Ihres Shops über Pinterest teilt, sind Sharebuttons an diesen Stellen wenig sinnig. Tracking-Codes sollten zudem reduziert werden, soweit möglich.

Zusätzliche Tipps für die sinnvolle Benutzung von externen Skripten

• Sie sollten in Ihrem Onlineshop asynchrone Skripte verwenden, die erst laden, wenn die Seite komplett gerendert ist
• Verwenden Sie den Google Tag Manager, so muss nur ein Code-Schnipel in die HTML-Seite integriert werden (über den Tag Manager können verschiedene Trackingdienste laufen)
• Setzen Sie iframes in Maßen ein (z. B. YouTube-Videos über einen iframe)

12. Verwenden Sie eine GZip-Komprimierung

GZip ist ein Kompressionsprogramm, mit dem z. B. ein kompletter Onlineshop komprimiert werden kann. Dank einer GZip-Komprimierung benötigt ein Webbrowser weniger Zeit, um den Onlineshop darzustellen. So wird die Ladezeit des Onlineshops verbessert.

Onlineshops und natürlich auch Websites können relativ einfach mit GZip komprimiert werden. Dazu müssen einige Code-Passagen in das Apache oder ngix-Modul des Servers und in die .htaccess-Datei geschrieben werden. Wenn Sie Fragen zu den technischen Detail der GZip-Komprimierung haben, kontaktieren Sie uns gerne. Zur Kontaktseite.

13. Prefetching und Prerendering nutzen

Bei der Prefetching-Technik werden bestimmte Elemente (Fotos, Hintergründe, CSS) des Onlineshops im Cache geladen, bevor der Shop komplett gerendert ist. So können diese Elemente geladen werden, ohne die gesamte Ladezeit des Shops zu verschlechtern. Um Prefetching im Onlineshop zu nutzen, muss der Quellcode um einige Codezeilen ergänzt werden.

Beim Prerendering werden alle Inhalte eines Onlineshops oder einer Website komplett heruntergeladen und im Cache zwischengespeichert. Die bereits vorgeladene Seite wird dann sehr schnell dargestellt, wenn der Nutzer sie besucht. Um  Prerendering zu nutzen, muss eine Codepassage im Quellcode des Onlineshops eingefügt werden. Wie genau das geht, zeigen wir Ihnen gerne. Kontaktieren Sie uns dazu über unsere Kontaktseite.

14. Benutzen Sie ein Content Delivery Network (CDN)

Auf einem Content Delivery Network (CDN) werden bestimmte Elemente eines Onlineshops (z. B. Produktfotos) dezentral auf verschiedenen Server gespeichert. Die Server sind weltweit verteilt und nach Möglichkeit in der Nähe des jeweiligen Kunden, der Ihren Onlineshop aufruft. Mit einem CDN kann die Ladezeit des Shops deutlich reduziert werden, da die Inhalte mit hohem Datenvolumen nicht mehr über den Server des Shops geladen werden, sondern über externe Server. Zudem können verschiedene Daten (Texte, Fotos, Hintergründe) von verschiedenen Servern parallel geladen werden, was ohne ein CND nicht möglich wäre.

Um ein Content Delivery Network zu nutzen, müssen Sie sich bei einem Anbieter registrieren. Beispielsweise bei Amazon CloudFront, dort ist die Nutzung des CND unter bestimmten Umständen im ersten Jahr kostenfrei. Nach der Registrierung müssen Sie einen Code im Amazon CDN generieren und diesen über ein Plugin in Ihren Onlineshop integrieren. Wie das funktioniert zeigen wir Ihnen gerne.

15. Quellcode des Onlineshops verschlanken

Wenn ein Kunde Ihren Onlineshop besucht, liest der Webbrowser den HTML-Code des Shops Zeile für Zeile. Unnötige Zeichen wie Zeilenumbrüche oder Leerzeichen werden mit ausgelesen. Dieser unnötige Code-Ballast kann die Ladezeit des Onlineshop verschlechtern, deswegen sollte der Quellcode aufgeräumt werden.

So kann der Quellcode aufgeräumt werden

• Alle unnötigen Leerzeichen (White Spaces) und Zeilenumbrüche sollten entfernt werden
• Unnötige Kommentare im Quellcode sollten ebenfalls entfernt werden
• Unnötige Formatierungen im Quellcode (z. B. <h2></h2>) ohne Inhalte sollten gelöscht werden

Wie genau Sie den HTML-Code von unnötigem Ballast befreien können, erklären wir Ihnen gerne in einem unverbindlichen Beratungsgespräch.

Kontaktieren Sie uns für eine Beratung zum Thema Pagespeed Optimierung

Gerne besprechen wir mit Ihnen im Detail die Möglichkeiten der Ladezeit-Optimierung für Ihren Onlineshop. Gerne erstellen wir nach dem Beratungsgepsräch einen Maßnahmenkatalog, um den Pagespeed Ihres Shops zu verbessern. Hier geht’s zu unserer Kontaktseite. Wir freuen uns auf das Gespräch mit Ihnen!

Diese Inhalte könnten Sie auch interessieren

10 Marketing-Ideen für Webshops: Für mehr Reichweite, Kundenbindung & Umsatz
Social Commerce über soziale Netzwerke und Onlineshops
Smart Shopping Kampagnen von Google – Vorteil oder Nachteil für Onlineshops?