Wie man die Geschwindigkeit von E-Commerce-Sites misst und verbessert (11 Tipps) und warum es für die Optimierung der Conversion-Rate entscheidend ist

Langsam ladende Websites ranken schlecht, generieren weniger Umsatz und kosten mehr Betrieb. Unabhängig davon, in welchem ​​Geschäft Sie tätig sind, wenn Sie eine Online-Präsenz haben, ist die Verbesserung der Geschwindigkeit Ihrer Website eines der vorteilhaftesten Dinge, die Sie tun können, um Ihre Absprungrate zu reduzieren und die E-Commerce-Conversion-Rate zu steigern.

Wenn Sie im E-Commerce-Bereich tätig sind, ist es noch wichtiger, Zeit und Ressourcen aufzuwenden, um die schnellstmögliche Website-Geschwindigkeit zu erreichen. Untersuchungen zeigen, dass die Geschwindigkeit der Website direkt und signifikant die Produktrankings, Conversions und den Wert pro Besucher beeinflusst.

Viele Einzelhändler sind jedoch nicht bereit, sich zu wesentlichen Änderungen zu verpflichten. Die Optimierung der Website-Geschwindigkeit kann kompliziert erscheinen. Es gibt viele verschiedene Bereiche, die Aufmerksamkeit erfordern, von denen viele spezielle Programmierkenntnisse erfordern, die die meisten Menschen nicht besitzen.

Wenn es Ihnen ähnlich geht, machen Sie sich keine Sorgen. In diesem Handbuch werden wir alles abdecken, was Sie wissen müssen – von der Bildkomprimierung über CDNs bis hin zur serverseitigen Datenbankoptimierung und darüber hinaus. Sobald Sie sich mit den Grundlagen vertraut gemacht haben, werden Sie sich sicher und sachkundig genug fühlen, um Ihre Site-Geschwindigkeit direkt in die Stratosphäre zu schicken. Auch wenn Sie keine technischen Entwicklungs- oder Optimierungskenntnisse haben.

Das finden Sie in diesem Beitrag:

Was ist Website-Geschwindigkeit?
Warum ist die Website-Geschwindigkeit wichtig?
So überprüfen Sie Ihre aktuelle Website-Geschwindigkeit: Erläuterung der Ergebnisse von Google PageSpeed ​​Insights
Top datengestützte Methoden zur Steigerung der Seitengeschwindigkeit
1. Überprüfen und verbessern Sie die Geschwindigkeit Ihres Hosting-Providers
2. Bilder optimieren
3. Browser-Caching aktivieren
4. HTML, JavaScript und CSS minimieren
5. Nutzen Sie AMP (Accelerated Mobile Pages) und PWAs (Progressive Web Apps)
6. Töte schlecht funktionierende WordPress-Plugins
7. Verwenden Sie ein Content Distribution Network
8. Optimieren Sie Ihre Serverantwortzeit
9. Verwenden Sie nach Möglichkeit Kompression
10. Dateien nach Möglichkeit asynchron laden
11. Reduzieren Sie Weiterleitungen
Tools zur Steigerung der Website-Geschwindigkeit
Sind Sie bereit, die Geschwindigkeit Ihrer E-Commerce-Site zu verbessern?

Hört sich gut an? Dann graben wir ein!

Was ist Website-Geschwindigkeit?

Es gibt einige häufige Missverständnisse, wenn es um die Geschwindigkeit der Website geht. Bevor wir in den Kern der Post eintauchen, definieren wir einige Schlüsselbegriffe.

Zunächst einmal ist es wichtig, zwischen „Seitengeschwindigkeit“ und „Seitengeschwindigkeit“ zu unterscheiden. Die Seitengeschwindigkeit ist die Zeit, die benötigt wird, um eine einzelne bestimmte Seite auf Ihrer Website zu laden. Die Website-Geschwindigkeit ist die durchschnittliche Geschwindigkeit für eine Stichprobe von Seiten auf Ihrer Website.

In vielerlei Hinsicht ist diese Unterscheidung willkürlich, aber es lohnt sich, sie zu verstehen, um Verwirrung zu vermeiden. Dieser Beitrag soll Ihnen sowohl seitenspezifische als auch websiteweite Optimierungstipps geben. Durch die Implementierung von Best Page Practices (die bestimmen, wie Sie alle Ihre Seiten in Zukunft gestalten) verbessern Sie die Gesamtgeschwindigkeit Ihrer Website, die die entscheidende Kennzahl ist.

Die Website-Geschwindigkeit kann anhand der Seitenladezeit gemessen werden – der Zeit, die eine Seite zum vollständigen Rendern benötigt – oder der Zeit bis zum ersten Byte – der Zeit, die ein Browser benötigt, um das erste Byte an Daten von einem Server zu empfangen. Im Allgemeinen ist die Seitenladezeit (und ähnliche Variationen) das genauere und am häufigsten verwendete Maß, obwohl die Zeit bis zum ersten Byte in bestimmten Kontexten auch eine nützliche Zahl ist.

Warum ist die Website-Geschwindigkeit wichtig?

Die Website-Geschwindigkeit beeinflusst Ihre Website in vielerlei Hinsicht in Bezug auf Suchrankings, Engagement, Conversions und mehr. Aber viele Webmaster, darunter auch E-Commerce-Händler, übersehen diesen wichtigen Aspekt ihrer Websites.

Eine langsame Ladezeit wirkt sich direkt auf Ihr Endergebnis aus. Quelle

Die Verbesserung der Geschwindigkeit Ihrer Website ist eine der sichersten Möglichkeiten, um einen Wettbewerbsvorteil zu erzielen. Schauen wir uns kurz an, warum es so wichtig ist:

Website-Geschwindigkeit beeinflusst Suchrankings

Die Geschwindigkeit der Website ist ein wichtiger Rankingfaktor für Google. Google selbst hat dies bei vielen Gelegenheiten wiederholt. Und zahlreiche unabhängige Analysen bestätigen, dass die Seitengeschwindigkeit einer der wichtigsten Optimierungsbereiche in Sachen SEO ist.

Edwin Toonen, der für Yoast schreibt, sagt: „Sie müssen nicht einmal sehr genau zuhören, weil SEO-Leute von den Dächern schreien: Website-Geschwindigkeit ist alles. Es vergeht kein Tag, an dem uns kein neuer Artikel, ein Whitepaper, ein Google-Vertreter oder ein SEO-Experte sagt, dass die Optimierung auf Geschwindigkeit eines der wichtigsten Dinge ist, die Sie jetzt tun können. Und sie haben natürlich recht!“

Website-Geschwindigkeit beeinflusst die Absprungrate

Es ist wahrscheinlicher, dass Nutzer Ihre Website verlassen, wenn das Laden lange dauert. Diese Aktivität ist nicht nur ein negatives Signal für Google (was auf eine geringe Kundenbindung hinweist), sondern wirkt sich auch direkt auf Ihre Conversion-Rate aus.

Wenn Kunden nicht bleiben, weil das Laden Ihrer Website zu lange dauert, haben sie keine Chance, Ihre wundervolle, für Conversions optimierte Seite und Ihre hervorragenden Produkte zu sehen.

Die Geschwindigkeit der Website beeinflusst den Kundenwert

Untersuchungen zeigen, dass der Wert pro Seitenaufruf mit der Website-Geschwindigkeit steigt. Und wir reden hier nicht nur von ein paar Prozentpunkten. Wenn Sie die Ladezeit Ihrer Website auf eine Sekunde verkürzen, können Sie Ihren Wert pro Seitenaufruf um bis zu 100 % steigern.

Wenn Sie die Geschwindigkeit Ihrer Website auf unter ein Prozent reduzieren, kann der Wert pro Seitenaufruf um bis zu 100 % gesteigert werden. Quelle

Das Erleben einer niedrigen Site-Geschwindigkeit hat negative psychologische Auswirkungen

Eine langsam ladende Website führt zu Frustration bei den Kunden und kommuniziert mangelnde Professionalität Ihrerseits.

Menschen empfinden Stress, wenn das Laden einer Seite zu lange dauert. Und sobald ein potenzieller Kunde Ihre Marke mit dieser negativen Erfahrung in Verbindung bringt, wird er sie in Zukunft eher schwach sehen.

Umgekehrt bietet eine schnell ladende Site den Kunden eine positive Benutzererfahrung (siehe diese 11 UX-Tipps!) und kommuniziert die Professionalität und Qualität Ihres Shops.

So überprüfen Sie Ihre aktuelle Website-Geschwindigkeit: Erläuterung der Ergebnisse von Google PageSpeed ​​Insights

Es gibt zahlreiche Tools, mit denen Sie die Geschwindigkeit Ihrer Website testen können. Einige konzentrieren sich auf bestimmte Bereiche – wie die Geschwindigkeit Ihres DNS-Anbieters oder Ihre Zeit bis zum ersten Byte (TTFB) – während andere umfassender sind. Als Ausgangspunkt gibt es keine bessere Option als Google PageSpeed ​​Insights.

So geben Sie Ihrer Website ein vollständiges medizinisches Angebot und was die Ergebnisse bedeuten:

1. Gehen Sie über Google PageSpeed ​​Insights und geben Sie Ihre URL in die Textleiste ein. Klicken Sie auf „Analysieren“, um Ihre Ergebnisse zu erhalten. In dieser exemplarischen Vorgehensweise verwenden wir Zappos als Beispiel. Google PageInsights, das wohl beste verfügbare Tool zum Testen der Website-Geschwindigkeit, ist völlig kostenlos und sehr umfassend.

2. Zusammen mit einem Gesamtergebnis oben auf der Seite, das Ihre Seite entweder als langsam, durchschnittlich oder mittel einstuft, werden Ihnen drei Ergebnissätze für Mobilgeräte und Desktops angezeigt:

• Felddaten – Diese basieren auf historischen Daten und stammen aus einer Stichprobe von Benutzern, die von Google verfolgt wurden. Es ist nützlich, weil es Ihnen ermöglicht, anhaltende Probleme zu sehen, die möglicherweise in der Vergangenheit aufgetreten sind, und nicht nur in einem bestimmten Testfall. Die mehrfarbige Leiste darunter zeigt Ihnen, wie Ihre Seite im Vergleich zu anderen Seiten im Chrome-Nutzererfahrungsbericht abschneidet (alle Seiten, zu denen Google Daten enthält).
• Ursprungszusammenfassung (nicht automatisch angezeigt) – Die Ursprungszusammenfassung, die Sie zum Erweitern anklicken müssen, zeigt die durchschnittlichen Daten für Ihre Site als Ganzes (nicht eine einzelne Seite). „Ursprung“ bezieht sich auf die Basis-URL.
• Labordaten – Dies sind die unmittelbaren Ergebnisse Ihrer Webseite basierend auf ihrer Leistung, wenn Sie auf „Analysieren“ geklickt haben. Dies sind aktuelle Ergebnisse aus der momentanen Leistung, ohne dass andere Daten berücksichtigt werden. Die Gesamtbewertung der Website-Geschwindigkeit oben auf der Seite basiert auf diesen Labordaten.

Der Abschnitt "Labordaten" enthält die detaillierteste Aufschlüsselung der Messwerte zur Website-Geschwindigkeit.

3. Vergessen Sie nicht, dass es zwei Registerkarten (blaues Menü in der Kopfzeile) – eine für Mobilgeräte und eine für Desktop – gibt, die unterschiedliche Daten anzeigen. Häufig müssen Sie die jeweils zugeordneten Optimierungsvorschläge anwenden.

4. In jedem der Abschnitte gibt es zwei wichtige Geschwindigkeitsmaße (FCP und FID) zusammen mit fünf separaten Messwerten im Abschnitt „Labordaten“:

• First Contentful Paint FCP – In einem Web-Performance-Kontext bezeichnet der Begriff „First Paint“ das erste Webelement , das für einen Browserbenutzer sichtbar ist. „Erste inhaltliche Farbe“ ist, wenn der erste zusammenhängende Inhalt erscheint. Die Definition von „Inhalt“ ist hier alles, was im Dokumentobjektmodell diskret definiert ist – im Wesentlichen ein einzelnes und separates Element, das Teil der Seitenhierarchie ist, wie ein Bild oder ein Textblock. Ein Inhalt ist alles, was Webbenutzer „konsumieren“ können. Auf diese Weise unterscheidet es sich vom „ersten Malen“, das so einfach wie eine Hintergrundänderung oder ein einzelnes Pixel sein kann.
• First Input Delay (FID) – First Input Delay ist ein Maß dafür, wie schnell Ihre Website reagiert. Wenn ein Besucher mit Ihrer Site interagiert – indem er auf einen Link klickt, ein Bild vergrößert, eine Produktoption auswählt usw. – kann es aufgrund von Browserprozessen im Hintergrund, die interaktive Site-Elemente effektiv „deaktivieren“, etwas länger dauern, bis er eine Antwort erhält. FID basiert auf tatsächlichen Benutzerdaten, die von Google gesammelt werden, und sind daher nicht in Lab-Daten enthalten.
• Erste aussagekräftige Farbe – Im Wesentlichen ein Maß dafür, wann Zuschauer realistisch anfangen können, Inhalte zu konsumieren. Die erste sinnvolle Farbe ist aufgetreten, wenn sowohl der Hauptinhalt als auch die Webfonts geladen wurden. Google hat angegeben, dass dies die wichtigste Kennzahl für die Benutzererfahrung für die Website-Geschwindigkeit ist.
• Geschwindigkeitsindex – Die Zeit, die Ihre Seite benötigt, um visuell vollständig geladen zu werden. Sie basiert auf dem Zeitpunkt, zu dem sich das Browser-Rendering bei einem Frame-by-Frame-Vergleich nicht mehr ändert.
• Erster CPU-Leerlauf – Der erste CPU-Leerlauf bezeichnet die Zeit, in der eine Website zumindest bis zu einem gewissen Grad interaktiv ist. Möglicherweise sind nicht alle interaktiven Elemente einsatzbereit, aber einige werden es sein.
• Zeit bis zur Interaktivität – Die Zeit, die es dauert, bis die Website vollständig geladen ist und vollständig interaktiv ist, um auf jede Besucheraktion zu reagieren.
• Max Potential First Input Delay – Der vorhergesagte Wert für den höchstmöglichen FID, wenn er getestet werden sollte. Diese Zahl basiert auf Labordaten, nicht auf echten Daten.

5. Unter diesen drei Abschnitten befindet sich ein Abschnitt mit dem Titel „Chancen“ , zusammen mit der Zeit, die sie Ihrer Website-Geschwindigkeit verkürzen können. Dies ist das eigentliche Fleisch des Tests – die praktischen Vorschläge zur Verbesserung der Website-Geschwindigkeit. Sie können jeden Vorschlag für Implementierungsanweisungen erweitern.

Schauen wir uns einige Beispiele aus dem folgenden Screenshot an (die meisten davon werden wir im folgenden Abschnitt genauer betrachten):

Im Bereich „Chancen“ erhalten Sie konkrete Vorschläge zur Steigerung der Website-Geschwindigkeit.

• JavaScript verkleinern – Verkleinerung ist ein Prozess zum Komprimieren von Dateien, die Code (HTML, CSS, JavaScript usw.) enthalten, damit sie schneller von Servern zu Browsern übertragen werden können.
• Verschieben von Offscreen-Bildern – Das Verschieben von Offscreen -Bildern beinhaltet das Verzögern der Ladezeit von Bildern, die nicht über dem Fold liegen, die Reduzierung der Größe der ersten Serveranfrage und eine schnellere anfängliche Ladezeit insgesamt. Nachdem alle Bilder über dem Falz geladen wurden, werden die restlichen Bilder der Seite gerendert.
• Ungenutztes CSS entfernen – CSS- Stylesheets enthalten häufig große Mengen an überflüssigem Code. Das Entfernen dieses Codes kann die CSS-Dateigröße reduzieren. Das Einschließen des gesamten CSS in einer Datei kann auch die Zeit verringern, die ein Browser benötigt, um Daten zu interpretieren.
• Bereitstellen von Bildern in Formaten der nächsten Generation – Bildformate wie JPEG 2000, JPEG XR und WebP (zusammen mit einigen anderen) bieten eine bessere Komprimierung als Alternativen, ohne die Qualität zu beeinträchtigen.
• Reduzieren Sie die Server-Antwortzeit (TTFB) – Die Server-Antwortzeit kann auf verschiedene Weise beschleunigt werden, unter anderem durch die Optimierung Ihres CMS und die Entscheidung für einen schnelleren Hosting-Provider.
• Textkomprimierung aktivieren – Wenn Sie die gzip-Funktionalität auf Ihrem Server aktivieren, wird Text in Dateien komprimiert, wodurch ihre Größe reduziert und die Übertragung beschleunigt wird. Komprimierte Dateien können dann vom Browser verarbeitet werden.

6. Schließlich befinden sich unter dem Abschnitt „Chancen“ die Abschnitte „Diagnose“ und bestandene Audits. Diese decken (bzw.) weitere Beschleunigungsmöglichkeiten auf der Grundlage von bewährten Web-Praktiken und Kriterien ab, die Sie bestanden haben.

In den folgenden Abschnitten sehen Sie noch mehr Vorschläge zur Verbesserung der Website-Geschwindigkeit sowie die bestandenen Audits (ideal, um zu überprüfen, ob eine Änderung ordnungsgemäß implementiert wurde).

Google PageSpeed ​​Insights bietet eine lehrreiche und klare Dokumentation zu all seinen Funktionen und Vorschlägen und ist eine großartige Ressource, wenn Sie weitere Unsicherheiten haben.

Möchten Sie mehr solcher Einblicke?

Erhalten Sie wöchentliche E-Commerce-Tipps, Strategien und führendes Branchenwissen. Direkt in Ihren Posteingang geliefert.

am Ich habe die Datenschutzerklärung gelesen und akzeptiere die Newsletter-Bedingungen.

Bitte aktivieren Sie dieses Kontrollkästchen, um fortzufahren

Huhu! Sie haben sich gerade angemeldet. Überprüfen Sie Ihren Posteingang, um das Abonnement zu bestätigen.

Was ist mit anderen Tools?

Bei all seinen Funktionen ist PageSpeed ​​Insights nicht fehlerfrei.

Ein Gebiet, in dem es stolpert, ist das geografische Gebiet. Der Standort des Testservers ist unbekannt, daher sind die Ergebnisse möglicherweise nicht einheitlich. Wenn sich Ihr Server beispielsweise im Vereinigten Königreich befindet und der Testserver an der Westküste der USA, sind die Ergebnisse für jemanden, der Ihre Website im ehemaligen Land besucht, schneller.

Verwenden Sie Pingdom und GTmetrix, mit denen Sie den Standort des Testservers festlegen können, um das von PageSpeed ​​Insights bereitgestellte Bild zu ergänzen.

Top datengestützte Methoden zur Steigerung der Seitengeschwindigkeit

OK, also lassen Sie uns in einige praktische Tipps eintauchen.

Hier sind die zehn wichtigsten Schritte, die Sie unternehmen können, um sicherzustellen, dass Ihre Website im Handumdrehen geladen wird:

1. Überprüfen und verbessern Sie die Geschwindigkeit Ihres Hosting-Providers

Kurzfassung: Es gibt zwar positive Änderungen, die Sie an Ihren Servern vornehmen können, und es kann von Vorteil sein, von einem gemeinsam genutzten zu einem dedizierten Plan zu wechseln, manchmal müssen Sie jedoch nur den Anbieter wechseln. Bevor Sie mit Aufgaben fortfahren, die unter Ihrer Kontrolle stehen, überprüfen Sie die Qualität des Dienstes von Ihrem Anbieter.

Wenn die Server Ihres Hosting-Providers langsam sind, können Sie das Problem kaum beheben. Quelle

Verwenden Sie ein Tool wie Bitcatcha, um die Geschwindigkeit Ihres Website-Hosting-Servers zu testen und mit anderen Unternehmen zu vergleichen.

Wenn Ihr Hosting-Provider langsam ist, können Sie nicht viel dagegen tun. Möglicherweise müssen Sie einen Wechsel zu einem neuen Anbieter in Betracht ziehen. Wenn Sie einen Online-Shop betreiben, ist es normalerweise von Vorteil, zu einem dedizierten oder verwalteten Hosting-Anbieter mit E-Commerce-Erfahrung zu wechseln.

Hier sind die wichtigsten Unterschiede zwischen den Hosting-Plänen in Bezug auf die Geschwindigkeit:

• Shared Hosting – Shared Hosting ist die kostengünstigste und langsamste Form des Hostings. Ihre Website wird zusammen mit den Websites anderer Nutzer auf einem Server gespeichert. Der große Nachteil einer solchen Anordnung ist, dass auch alle Serverressourcen, insbesondere CPU und RAM, gemeinsam genutzt werden. Dies kann sich nachteilig auf die Site-Geschwindigkeit auswirken und kann besonders negative Folgen für größere Sites haben, die viel Rechenleistung benötigen.
• Virtual Private Server (VPS) – Ein virtueller privater Server ähnelt in vielerlei Hinsicht einem gemeinsam genutzten Server. Mehrere Sites werden auf einem einzigen Server gehostet, aber sie sind durch eine virtuelle Barriere getrennt, wodurch praktisch ein eigener Server entsteht. Der Hauptvorteil davon ist, dass alle Ihre Server-Ressourcen abgegrenzt sind – es besteht keine Chance, dass einer Ihrer Mitbewohner das gesamte heiße Wasser verbraucht und Sie trocken lässt. Virtual Private Server ermöglichen Ihnen zudem einen höheren Freiheitsgrad über den Admin des Servers. Wenn Sie mehr Platz benötigen, können Sie es auch einfach kaufen.
• Dediziertes Hosting – Dediziertes Hosting ist der nächste Schritt vom VPS-Hosting. Bei einem dedizierten Plan mieten Sie den Server, der ausschließlich für den Betrieb Ihrer Site verwendet wird. Sie haben auch die volle Admin- und Root-Kontrolle (einschließlich der Wahl des Betriebssystems und der Sicherheitseinstellungen), die technische Optimierungen der Server-Site-Geschwindigkeit ermöglichen können. Dedicated Hosting ist ideal für größere Websites und Unternehmen mit dedizierten Technikteams.

Wenn Sie eine E-Commerce-Site betreiben, sollten Sie sich im Allgemeinen entweder für dediziertes oder VPS-Hosting entscheiden.

Hier sind einige der am besten bewerteten Anbieter für Online-Händler:

SiteGround – SiteGround hat eine Reihe von speziellen Plänen für E-Commerce-Plattformen, darunter Magento, WooCommerce und PrestaShop.

Liquid Web – Einer der Kernpunkte von Liquid Web ist ein hervorragender Kundenservice. Das Unternehmen bietet rund um die Uhr Zugang zu Beratern, oft mit weniger als einer Minute Reaktionszeit. Es werden eine Reihe von E-Commerce-spezifischen Plänen angeboten (einschließlich dediziertes Hosting für WooCommerce) und es ist eine großartige Option für kleine und mittlere Einzelhändler, die in Zukunft skalieren möchten.

InMotion Hosting – InMotion ist bei E-Commerce-Händlern sehr beliebt und eine der günstigsten verfügbaren Optionen.

Rackspace – Rackspace ist eine der führenden Lösungen für den Unternehmens-E-Commerce und bietet eine Reihe dedizierter und Cloud-gehosteter Lösungen. Der Kundenservice und die Sicherheitsinfrastruktur gehören zu den besten der Branche.

Sparen Sie nicht an Ihrem Hosting-Provider. Es ist der einzige Bereich, der nicht unter Ihrer Kontrolle ist. Und die Priorisierung der Kosten über die Leistung führt langfristig nur zu geringeren Renditen.

2. Bilder optimieren

Kurzversion: Die Optimierung von Bildern ist eine der einfachsten und schnellsten Möglichkeiten, die Geschwindigkeit der Website zu verbessern. Stellen Sie sicher, dass die Bilder in einem für das Web geeigneten Format vorliegen. Verwenden Sie CSS-Sprites, um schnellere Bildladezeiten zu erzielen.

Bilder sind die Hauptschuldigen, wenn es um die Geschwindigkeit der Website geht. Unnötig große Bilddateien belegen unnötig Serverplatz und benötigen mehr Zeit zum Senden an die Browser der Besucher.

Sie sollten Bilder in einem Programm wie PhotoShop oder GIMP optimieren, um die volle Kontrolle über die Qualität der Bilder zu behalten. Unterschiedliche Formate eignen sich am besten für unterschiedliche Bildtypen. Im Allgemeinen sind JPEGs beispielsweise ideal für Fotos, während einfachere Bilder mit Standardfarben schneller als PNGs gerendert werden.

Hier ist ein kurzer Überblick über die gängigsten Formate und deren Verwendung:

• JPEG (Joint Photographics Expert Group) – JPEG ist wahrscheinlich das am weitesten verbreitete Format für hochwertige Fotos und detailreiche Bilder. Der Hauptvorteil besteht darin, dass JPEG-Bilder gut gerendert werden und gleichzeitig ein hohes Maß an Komprimierung bieten. Für Fotos ist JPEG die bevorzugte Option. Sie sollten auch die Verwendung neuerer JPEG-Varianten wie JPEG 2000 und JPEG XR in Betracht ziehen, die noch höhere Komprimierungsstufen bieten können.
• PNG (Portable Network Graphics) – PNG liegt als Format zwischen JPEG und GIF. Es bietet eine gute Balance zwischen Qualität, Unterstützung einer breiten Farbpalette und Größe. PNGs sind in der Regel kleiner als JPEGs, haben aber nicht ganz die gleiche Kapazität in Bezug auf Farbe und Details. Es gab Bedenken hinsichtlich der Kompatibilität mit älteren Browsern, aber diese sind jetzt weitgehend überflüssig.
• GIF (Graphic Interchange Format) – GIFs (eines der ältesten Formate im Web) funktionieren am besten für Bilder mit begrenzten Farbpaletten wie Logos. Wenn Sie ein Bild hochladen müssen, das hauptsächlich aus Text besteht, ist ein GIF das richtige Format. Der Hauptvorteil von GIF-Dateien besteht darin, dass sie in der Regel recht klein sind. Aufgrund der begrenzten Farbkapazität sollten GIFs nicht für reichhaltige Bilder oder Fotos verwendet werden. Sie können GIFs auch für grundlegende Animationen verwenden. Verwenden Sie keine GIFs für Rich Media. Die Verwendung von von Drittanbietern gehosteten Inhalten (wie YouTube) ist für die Geschwindigkeit der Website vorteilhafter.

Neben der Verwendung des richtigen Formats können Sie hier noch ein paar weitere Dinge tun, um Bilder für die Website-Geschwindigkeit zu optimieren:

• Machen Sie Bilder nicht größer als sie sein müssen – Viele Designer und Entwickler machen den Fehler, große Bilder (oft mit mehr als mehreren Tausend Pixeln) auf ihre Server hochzuladen und dann ihre Größe mithilfe von Seitencode zu ändern. Dies ist ein großer Fehler. Es macht absolut keinen Sinn, ein Bild mit einer Breite von 5.000 Pixeln an die Browser Ihrer Besucher zu senden, wenn es auf einer Produktseite nur mit 1000 Pixeln angezeigt wird. Oftmals müssen Bilder relativ groß sein, um die Zoomfunktion zu aktivieren, aber halten Sie sie so klein wie möglich. Ändern Sie die Größe von Bildern, bevor Sie sie hochladen.
• Bilder vor dem Hochladen komprimieren – Die Komprimierung entfernt alle überflüssigen Informationen aus Ihren Bilddateien und reduziert so deren Größe. Bestimmte „unsichtbare“ Details, wie der Zeitpunkt der Aufnahme, können in die Datei eingebettet sein. Tools wie TinyPNG, JPEG Optimizer und Plugins wie WPSmush können verwendet werden, um diese Aufgabe schnell auszuführen. Alle kostenpflichtigen Pläne, die für eine starke Nutzung erforderlich sind, sind sehr vernünftig.
• Verwenden Sie keine unnötigen Bilder auf Seiten – Jedes Bild belastet die Zeit, die zum vollständigen Laden Ihrer Website benötigt wird. Verwenden Sie also nicht mehr Bilder als unbedingt erforderlich. Es ist leicht, in die Falle zu tappen, Bilder nur um der Sache willen einzubinden. Ein Produktfoto mehr kann nicht schaden, oder? Es empfiehlt sich jedoch, beim Erstellen von Produktseiten unnötige Bilder zu vermeiden (sehen Sie sich die großartigen Produktseitenvorlagen an). Möglicherweise möchten Sie auch „Lazy-Loading“ nutzen, um zuerst Bilder über dem Falten zu rendern (und nicht alle Bilder auf der Seite gleichzeitig). Bilder, die Sie im HTML-Code auf „Lazy Load“ gesetzt haben, werden erst geladen, wenn die Informationen oben auf der Seite für Besucher sichtbar sind oder wenn ein Besucher zu scrollen beginnt.

Zum Schluss laden Sie gegebenenfalls Bilder als CSS-Sprites auf Ihren Server hoch. CSS-Sprites sind Sammlungen mehrerer Bilder, die in einer einzigen Datei kombiniert werden. Anstatt Bilder einzeln von einem Server zu laden, kann ein Browser das Äquivalent eines einzelnen Bildes herunterladen, wodurch die Notwendigkeit mehrerer Serveranfragen entfällt. Es ist dann möglich, den Seitencode so anzupassen, dass nur ein bestimmtes einzelnes Bild angezeigt wird, wenn es benötigt wird. Sie können diese Technik für alles verwenden, von Produktbildern über CTA-Schaltflächen (Call to Action) bis hin zu Social-Media-Symbolen.

3. Browser-Caching aktivieren

Kurzversion: „Bitten“ Sie Browser, Ihre Site-Dateien zu speichern und wiederzuverwenden, wenn Benutzer zurückkehren. Auf diese Weise werden die Seitenladezeiten für wiederkehrende Besucher reduziert, ohne dass Ihrerseits eine Eingabe erforderlich ist.

Browser-Caching tritt auf, wenn ein Browser wichtige Dateien speichert, aus denen Ihre Site besteht. Das bedeutet, dass, wenn ein Besucher zu Ihrer Website zurückkehrt, sein Browser nicht jede Datei direkt von Ihren Servern abrufen muss. Es müssen nur bestimmte Dateien angefordert werden, die wahrscheinlich aktualisiert wurden, oder sogar bestimmte Teile einzelner Seiten (wie das Logobild). Dies erhöht die Ladezeiten erheblich, da die Anzahl der Anfragen an den Server reduziert wird.

Das Aktivieren des Cachings ist ein ziemlich einfacher Vorgang und beinhaltet das Hinzufügen einer kleinen Menge Code zu Ihren HTTP-Headern, um Ablauffristen für bestimmte Dateien festzulegen. Wenn Ihre Website auf WordPress gehostet wird, gibt es zahlreiche Plugins wie W3 Total Cache, um diesen Prozess zu rationalisieren.

Browser-Caching kann für Online-Händler etwas schwierig sein, da Seiten häufig zeitkritischen Aktualisierungen in Bezug auf Preise, Lagerbestände, Bewertungen, Lieferinformationen usw. unterliegen. Aus diesem Grund ist es wichtig, zwischen den Dateien zu unterscheiden, die wirklich stabilen Inhalt speichern – CSS-Stile, Logos, Navigation usw. – und Inhalten, die Änderungen unterliegen . Dann kannst du entsprechend codieren. Denken Sie daran, dass es durchaus möglich ist, bestimmte Seitenelemente wie Kopf- und Fußzeilen zusammen mit größeren Dateien (wie CSS-Stylesheets) zu codieren, die nicht zeitkritisch sind.

4. HTML, JavaScript und CSS minimieren

Kurzversion: Verwenden Sie ein CDN (Content Delivery Network), um die automatische Minimierung zu aktivieren und Ihre Dateigröße um bis zu 60 % zu reduzieren. Die Einrichtung eines CDN ist ein relativ unkomplizierter Prozess, der durch bekannte Dienste wie CloudFlare und Amazon AWS ermöglicht wird.

Minimierung ist der Prozess der Minimierung von Code in Ihren Webdateien. Es hat sich gezeigt, dass es die Ladezeiten der Website erheblich verkürzt. Kleinere Dateien können schneller angefordert und dann vom Browser interpretiert werden. Diese Optimierungsstrategie wird oft von Seitengeschwindigkeitstools hervorgehoben und ist eine der effektivsten, die Sie implementieren können.

Es funktioniert aufgrund der Diskrepanz in Länge und Komplexität, die für Entwickler verständlich ist (die normalerweise Kommentare, Leerzeichen, Kommas und mehr enthält) und der Art von minimalem Code, der für einen Browser zum Rendern einer Seite erforderlich ist. Manchmal kann diese reduzierte Version nur 40% der Originalversion betragen.

Durch Minimierung kann die Größe von Webdateien drastisch reduziert werden. Quelle

Aber es gibt ein zentrales Problem. Manuelle Minimierung ist ein großes No-Go. Es braucht zu viel Zeit und es gibt viel zu viel Spielraum für Fehler. Selbst bei automatisierten Tools ist in der Entwicklungsphase ein hohes Maß an manueller Eingabe erforderlich, um den gesamten Alternativcode zu verarbeiten und zu implementieren.

Stattdessen ist die beste Option die Verwendung eines CDN (Content Delivery Network), das den Code automatisch minimiert, bevor er an einen Browser übermittelt wird. Die Originaldateien werden auf Ihrem eigenen Server aufbewahrt, während verkleinerte Versionen auf den CDN-Servern gespeichert werden. Wenn Sie Änderungen an Seiten vornehmen, werden diese mit den CDN-Servern synchronisiert. CDNs sind auch aus einer Vielzahl anderer Gründe nützlich, aber dazu kommen wir später.

5. Nutzen Sie AMP (Accelerated Mobile Pages) und PWAs (Progressive Web Apps)

Kurzfassung: AMPs und PWAs, beide von Google entwickelt, können die Ladegeschwindigkeit Ihrer mobilen Seiten drastisch erhöhen. Es gibt hohe Entwicklungskosten, daher sollte der Übergang zu PWAs oder AMPs im Lichte anderer positiver Faktoren erfolgen (falls Sie dazu geneigt sind). Wenn Sie sich entscheiden, fortzufahren, können die Auswirkungen auf die Geschwindigkeit Ihrer Website erheblich sein.

Die Konvertierung Ihrer mobilen Seiten in AMPs kann eine große Aufgabe sein und ist nicht jedermanns Sache. Als längerfristige Strategie lohnt es sich jedoch auf jeden Fall, sie zu erkunden.

Was genau sind AMPs und PWAs? Hier eine kurze Übersicht:

• Accelerated Mobile Page (AMP) – AMP ist ein Entwicklungsframework – bestehend aus einem HTML-Subset (AMP HTML), einem JavaScript-Framework und einem optionalen CDN (Content Delivery Network) – das von Google erstellt wurde, um Entwicklern die Bereitstellung von Blitz- schnelle mobile Seiten, ohne dass erhebliche Ressourcen in die Geschwindigkeitsoptimierung investiert werden müssen. Während AMP ursprünglich für inhaltsbasierte Websites entwickelt wurde (Sie können den kleinen Blitzpfeil in den Suchergebnissen vieler Nachrichtenseiten sehen), wird es bei Online-Händlern immer beliebter.
• Progressive Web App (PWA) – PWAs sind wie mobile Apps, auf die über einen mobilen Browser zugegriffen wird. Sie replizieren viele der Funktionen von Apps, wie den Zugriff über ein Symbol auf dem mobilen Startbildschirm und Push-Benachrichtigungen, ohne jedoch eine benutzerdefinierte Software erstellen oder Benutzer auf ihren Telefonen installieren zu müssen.

Es gibt einige wichtige Unterschiede zwischen den beiden (und viele Diskussionen), aber beide verbessern die Geschwindigkeit der mobilen Website. In der umfassenden Dokumentation von Google erfahren Sie mehr über die praktischen Aspekte von AMPs und PWAs.

6. Töte schlecht funktionierende WordPress-Plugins

Kurzversion: Plugins können die Ladezeiten stark belasten. Wenn Ihre E-Commerce-Site auf WordPress gehostet wird, führen Sie eine umfassende Überprüfung der Plugins durch, entfernen Sie diejenigen, die Sie nicht benötigen, und suchen Sie nach alternativen Lösungen für „schwere“ Plugins.

Die Verfügbarkeit einfach zu bedienender Plugins ist einer der Gründe, warum sich viele Händler für Plattformen wie WooCommerce und Shopify entscheiden. Meistens sind Plugins für Händler von Vorteil. Sie steigern die Leistung, machen komplizierte Entwicklungsaufgaben überflüssig und sind oft kostenlos.

Schlecht codierte Plugins , Konflikte mit anderen Elementen Ihrer Website oder veraltete Plugins können jedoch die Ladezeiten der Website stark belasten. Ebenso müssen große Plugins oft mehrere Dateianfragen senden, um ihre eigenen Stylesheets oder JavaScript abzurufen.

Glücklicherweise ist die Fehlerbehebung bei Plugins recht einfach. Die einfachste Methode besteht oft darin, Ihren Geschwindigkeitsbericht zu verwenden, um Probleme zu lokalisieren, die mit Plugins zusammenhängen könnten, und erneut zu testen, sobald sie deaktiviert wurden.

Alternativ können Sie ein WordPress-Plugin wie P3 verwenden. Es scannt Ihre Plugins und hebt alle Bereiche mit geringer Leistung hervor.
Das andere Interessante an Plugins ist, dass viele der Probleme, die sie lösen, oft durch einfache Änderungen am Code in Webdateien behoben werden können. Die übermäßige Verwendung von Plugins ist ein sicheres Zeichen für fehlende Entwicklerkenntnisse. Wenn Sie regelmäßig in die Falle tappen, relativ kleine Probleme mit klobigen Plugins zu lösen, dann könnten Sie Ihrer Website-Geschwindigkeit ein großes Unrecht zufügen.

7. Verwenden Sie ein Content Distribution Network

Kurzfassung: CDNs (Content Distribution/Delivery Networks) sind kostengünstig zu abonnieren und einfach zu implementieren.

CDNs wurden bereits angesprochen, da viele Anbieter auch die Möglichkeit zur automatisierten Minifizierung anbieten, diese aber hier noch einmal erwähnt werden sollten, da sie über die automatische Minifizierung hinaus zusätzliche Vorteile bieten.

CDNs mildern die negativen Auswirkungen der Datenübertragung über große geografische Entfernungen. Quelle

Die Idee hinter CDNs ist sehr clever. Ein CDN ist ein globales Netzwerk von Servern, das zwischengespeicherte Versionen Ihrer Website speichert. Dies bietet Besuchern an verschiedenen geografischen Standorten einen schnelleren Zugriff auf Ihre Website. Wenn ein Besucher über seinen Browser eine Anfrage an Ihre Site stellt, wird der nächstgelegene Server kontaktiert, der eine Kopie Ihrer Site speichert.

Die Verwendung eines CDN kann Ihnen auch dabei helfen, die Bandbreitenkosten (sofern Sie diese bezahlen) zu kontrollieren und Datenverkehrsspitzen zu bewältigen.

8. Optimieren Sie Ihre Serverantwortzeit

Kurzfassung: Während Sie einen schlechten Server nicht ändern können, können Sie einen optimieren, der gut funktioniert. Konzentrieren Sie sich darauf, Ihre Datenbank zu bereinigen, die richtigen Einstellungen für Ihr CMS auszuwählen und sich für einen schnellen DNS-Anbieter zu entscheiden.

Die Zeit bis zum ersten Byte (TTFB) ist ein Maß für die Zeit, die ein Browser benötigt, um das erste Informationsbyte von einem Server zu empfangen. Eine Serveranfrage besteht im Wesentlichen aus drei Teilen, die jeweils einen potenziellen Optimierungsbereich darstellen: die Zeit, die zum Senden einer Anfrage benötigt wird, die Zeit, die der Server benötigt, um eine Anfrage zu verarbeiten, und die Zeit, die benötigt wird, um die angeforderten Informationen an . zu senden der Browser.

Sie können Ihre Zeit bis zum ersten Byte mit WebPageTest überprüfen. Sie sollte unter 200 ms liegen.

Die Verwendung eines CDN ist eine der besten Möglichkeiten, die erste und dritte Phase zu verbessern, da das Netzwerk die Entfernung zwischen Servern und den Browsern Ihrer Besucher verringert.

Das ist der zweite Bereich, mit dem wir uns hier beschäftigen. Optimizing server speed is a massive topic that's well beyond the scope of this article, but there are a handful of optimization tweaks that can have a significant effect on server processing speed.

Here's a quick checklist for ensuring good server response time:

• Configure your CMS (content management system) for optimal speed – Your CMS is responsible for the management and handling of your content. Check if there are any settings specific to your CMS that can be disabled or enabled to boost response time. On WordPress, for example, you should ensure you have the latest PHP version installed and limit any processes that consume CPU (server resources).
• Clean up your database – Whenever a browser requests a dynamic page, your server needs to query a database to retrieve information and “build” that page. Poorly-optimized databases can cause this process to take longer than it should. Server-side caching, which stores a copy of your pages without the need to consult a database, can be a great way to overcome this problem.
• Consider a premium DNS (domain name system) lookup service – The DNS turns your domain name into an IP address. Your address is stored with your DNS provider, who needs to be consulted to provide the exact IP that maps to your domain. Opting for a DNS provider with faster lookup functionality can shave milliseconds off your load time. And every millisecond counts. Use this service to check your DNS speed.

Remember to evaluate all of these changes in the context of your TTFB. Generally speaking, server-side changes can be quite technical, so it's good practice to hire an experienced optimization developer to ensure that no mistakes are made. It's also usually easier to implement server changes with a dedicated hosting package, as access to certain functionality may be limited on shared and VPS hosting.

9. Use Compression Wherever Possible

Short Version: Gzip enables you to compress files before they're sent to a visitor's browser. It's an easy server-side function to turn on and can cut file sizes significantly (leading to faster transfer).

Along with images, you can also compress other files to increase transfer speed. You can use gzip functionality to compress CSS, HTML, and JavaScript files that are larger than 150 bytes.

So how exactly does it work?

Whenever your server sends files to a visitor's browser, the size of these files make a big difference to the amount of time it takes to process them. Gzip is a software application that compresses your files (by up to 70%) before they are sent. Because the files are smaller, they are delivered to the browser much more quickly.

To take advantage of gzip, you simply need to enable it on your server, either by adding a few lines of code to your .htaccess file or through the control panel (for IIS servers).

10. Load Files Asynchronously Wherever Possible

Short Version: Asynchronous loading is far faster than synchronous loading. Enable it through your CMS (content management system).

Synchronous loading occurs when files load consecutively, one after the other. Asynchronous loading is when files load together.

During an asynchronous load, multiple files are loaded at the same time. Quelle
Because browsers process files in a hierarchical fashion – loading the first page elements first – synchronous loading can significantly increase the amount of time it takes to achieve full page load. Asynchronous loading allows the browser to load multiple elements in conjunction without waiting for the previous load to complete.

It should be possible to change settings that determine synchronous vs asynchronous loading through your CMS software. If you are using WordPress, there are several plugins you can use.

11. Reduce Redirects

Short Version: By eliminating redirects, you can cut seconds off your site speed. Remember that each redirect requires a separate request to be sent to the server.

Redirects are enemy number one when it comes to site speed. Well, maybe not number one. But they should be pretty high on your kill list.

Whenever one of your pages redirects to another URL, your visitor has to wait for the server to respond all over again.

Often, numerous redirects occur in response to a single request, especially when desktop pages redirect to mobile pages. All of this adds up to make overall page load time much slower.

Use a tool like Screaming Frog to check for any redirects. Then go through all the flagged pages and see if you can get rid of any.

Don't worry too much about loss of search rankings (one of the main reasons webmasters keep redirects) as your page will likely replace the redirect link in the results sooner rather than later.

In particular, be very wary of “redirect chains”. These are sequences of redirects between more than two pages. If you have to keep redirects, break up the chain by ensuring that each individual redirect points to the main page.

Tools to Help Boost Your Site Speed

Here's a quick rundown of the tools you need to help with implementation:

Google PageSpeed Insights – Already covered in detail above, this tool is hands-down the best for testing and optimizing your site.

Pingdom and GTmetrix – Both of these page speed tools offer additional information to Google PageSpeed insights, in particular geographical response times. They are useful for building a complete picture of your site speed problems.

WebPageTest – A simple tool to test your TTFB.

DNSPerf – A good tool for testing the speed of your DNS provider.

Google Test My Site – You can also use Google Test My Site to generate a broader report about your mobile performance, which includes information about site speed. It's a good complementary tool for use in conjunction with PageSpeed Insights.

Google Analytics – At all stages of the optimization process, you should be linking changes to specific and measurable outcomes. Google Analytics will enable you to track how traffic, engagement and conversions are affected by speed optimization.

Image Compression Tools – For image editing, you should aim to keep as much control as possible. Photoshop and GIMP (which is free) are two feature-rich image-editing apps that will allow you to compress images exactly as you wish.

CSS Sprite Tools – There are many free tools for creating CSS sprites (compiled images) from Toptal, Spritegen, and Sprite Cow.

Content Delivery Networks (CDNs) – There are many fantastic CDNs that come with a range of additional features. Check out CloudFlare, Amazon AWS, and Google Cloud CDN.

Minify Tools – Minification is best done through a CDN, which automates the entire process. Remember, if you do decide to minify your code manually, you will need to maintain two separate development areas. Try out Minifier and JSCompress.

Ready to improve your ecommerce site speed?

Improving your site's speed is a big job. Aber das ist es wert. A fast-loading site provides your customers and potential customers with a positive experience that is likely to keep them returning to purchase again and again.

But remember one crucial point. It's vital to take a consistent approach. You should be monitoring and optimizing regularly. For optimal results, speed testing and optimization need to be conducted regularly (as with most things when it comes to ecommerce optimization).

Ideally, site speed testing should be built into your broader optimization strategy, conducted on all new and modified pages, and periodically reviewed across your site.

Now, time to head over to PageSpeed Insights.

Download Your Free Optimization Checklist

Site speed optimization is only one small part of ecommerce optimization. To ensure that all your optimization boxes are ticked, we've written the most comprehensive ecommerce optimization checklist on the web. Or probably anywhere, for that matter.

Oh, and it's free! Click here to download it now and gain a vital edge over your competitors.