Leistungsanforderungen und 10 Best Practices für Hochgeschwindigkeits-E-Commerce-Websites

Willst du deine E-Commerce-Website relaunchen oder eine brandneue Website erstellen? Das ist eine spannende Herausforderung, denn E-Commerce eröffnet Einzelhandelsunternehmen enorme Wachstumschancen. Eine Online-Präsenz kann der Schlüssel zum Erfolg sein oder eine notwendige Entscheidung, um im internationalen Wettbewerb zu bestehen.

E-Commerce kann es dir ermöglichen, exzellente lokale Produkte ohne Zwischenhändler weltweit zu vermarkten, fortschrittliche Marketingstrategien wie gezielte Werbung und Social-Media-Kampagnen einzusetzen und die Vorteile von KI-Tools zu nutzen, um die betriebliche Effizienz, das Kundenerlebnis und die Marketingstrategien zu verbessern.

Der Start einer E-Commerce-Website erfordert jedoch eine sorgfältige strategische und organisatorische Planung sowie eine gründliche Analyse von Kosten und Nutzen, Stärken und Schwächen, Bedrohungen und Chancen.

Und das ist noch nicht alles. Um mit deinem E-Commerce erfolgreich zu sein, brauchst du eine moderne, schnelle und sichere Website, die dein Geschäft unterstützt. Eine erfolgreiche E-Commerce-Website sollte ein reibungsloses Einkaufserlebnis bieten, internationale Datenschutzbestimmungen wie die GDPR einhalten, sichere Transaktionen garantieren und deine Kunden durch den Verkaufstrichter bis zum Kauf begleiten.

Sie sollte SEO-optimiert, bei Bedarf skalierbar, flexibel und leicht zu verwalten sein, damit du dich auf dein Geschäft konzentrieren kannst, ohne Zeit und Ressourcen für technische Fragen zu verschwenden.

Das ist keine leichte Aufgabe, aber eine E-Commerce-Website kann dir großartige Möglichkeiten bieten, dein Geschäft auszubauen.

Zusammenfassend lässt sich sagen, dass du bei der Planung einer E-Commerce-Website drei Bereiche berücksichtigen solltest: Leistung, Sicherheit und Funktionalität.

Deshalb haben wir unsere besten Empfehlungen zur E-Commerce-Optimierung in drei Artikeln zusammengefasst, die sich jeweils auf einen dieser drei Bereiche konzentrieren.

In diesem ersten Artikel geht es um die Leistung. Wir stellen dir eine Checkliste mit 10 Best Practices vor, mit denen du deine E-Commerce-Website auf Geschwindigkeit und Leistung optimieren kannst.

In den beiden folgenden Artikeln werden wir uns auf die Sicherheit der Website und die Funktionalität des Hosting-Dienstes konzentrieren und auf die Vorteile eingehen, die ein für den E-Commerce optimiertes Hosting bieten kann.

Bist du bereit zu erfahren, was du brauchst, um eine erfolgreiche E-Commerce-Website zu starten und die internationalen Märkte zu erobern? Lies weiter!

Wo du mit dem Aufbau einer modernen E-Commerce-Website beginnen solltest

Eine moderne E-Commerce-Website benötigt mehrere technische und funktionale Funktionen, um die Interaktion der Nutzer/innen mit der Website zu verbessern und ein reichhaltiges und angenehmes Browsing- und Einkaufserlebnis zu gewährleisten.

Aus technischer Sicht muss eine E-Commerce-Website für Leistung und Sicherheit optimiert sein. Sie muss für dein Team einfach zu verwalten und leicht skalierbar sein.

Der Aufbau einer Website mit diesen Eigenschaften erfordert eine hochmoderne Infrastruktur, ein Content Delivery Network der Enterprise-Klasse, fortschrittliche Funktionen für Entwickler, ein effizientes und einfach zu bedienendes Backup-System und einen schnellen und kompetenten Support-Service.

Der erste Schritt, bevor du eine E-Commerce-Website starten kannst, besteht also darin, herauszufinden, wo du die benötigten Dienste und Tools bekommst. Bei dieser Entscheidung geht es um die Wahl des Anbieters der Hosting-Infrastruktur. Die Möglichkeiten sind fast endlos. Du kannst deine Server selbst verwalten, indem du einen Systemadministrator einstellst, oder du entscheidest dich für eine vollständig verwaltete Lösung, wie z. B. Wix oder Shopify.

Die erste Option, die Verwaltung des Servers im eigenen Haus, bietet maximale Flexibilität und Anpassungsmöglichkeiten. Sie erfordert jedoch erhebliche Ressourcen und qualifizierte Systemadministratoren. In der Regel entscheiden sich große Unternehmen für diese Lösung.

Die zweite Option, vollständig verwaltete Plattformen, hat den Vorteil einer hohen Benutzerfreundlichkeit, garantiert aber nicht die technische und betriebliche Flexibilität, die dein Unternehmen möglicherweise benötigt. Wenn das Unternehmen wächst, können außerdem unvorhergesehene Kosten entstehen.

Irgendwo zwischen diesen beiden Extremen gibt es Lösungen, die auf einer Open-Source-Plattform basieren und mit einem Hosting-Service kombiniert werden, der die für den E-Commerce erforderlichen Funktionen bietet .

In unseren Vergleichsartikeln kannst du tief in die Unterschiede zwischen einigen der verfügbaren Optionen eintauchen:

• WooCommerce vs. Shopify
• WooCommerce vs. PrestaShop
• WooCommerce vs. Magento

Bei Kinsta bieten wir Premium-Hosting für E-Commerce-Websites. Unsere Infrastruktur ist auf Leistung, Sicherheit und Benutzerfreundlichkeit für WordPress-Websites optimiert und mit den beliebtesten E-Commerce-Plugins, WooCommerce und Easy Digital Downloads, gekoppelt. Unsere isolierte Container-Technologie basiert auf der Google Cloud Platform und nutzt die Leistungsfähigkeit des Cloudflare-Netzwerks, um maximale Leistung und Sicherheit zu gewährleisten.

Dies ist die technische Lösung, die wir jedem empfehlen, der sich die Frage stellt: Was ist die beste Hosting-Infrastruktur für eine moderne E-Commerce-Website?

Los geht’s mit der E-Commerce-Leistung!

10 Best Practices zur Optimierung der Leistung deiner E-Commerce-Website

Jüngsten Untersuchungen über die Konversionsraten im E-Commerce zufolge liegt der wichtigste Erfolgsfaktor einer E-Commerce-Website in der Ladegeschwindigkeit der Seite. Eine E-Commerce-Website, die in 1 Sekunde lädt, hat eine 2,5-mal höhere Konversionsrate als eine Seite, die in 5 Sekunden lädt.

Außerdem haben Seiten, die in 1 Sekunde laden, eine durchschnittliche Konversionsrate von etwa 40%. Wenn die Ladezeit auf 2 Sekunden ansteigt, sinkt die Konversionsrate auf 34%. Bei 3 Sekunden liegt die Konversionsrate bei 29% und erreicht bei 6 Sekunden ihr Minimum.

Die Analyse empfiehlt, deinen E-Commerce für eine Ladegeschwindigkeit zwischen einer und zwei Sekunden zu optimieren.

Wie kann dieses Leistungsniveau erreicht werden? Leistungsoptimierung ist ein Prozess der kontinuierlichen Verbesserung, der mehrere Bereiche einer Website betrifft. Ihr strategischer Wert wird besonders beim E-Commerce deutlich, der in der Regel größere Mengen an Ressourcen verbraucht.

Um E-Commerce-Betreibern bei der Leistungsoptimierung ihrer Websites zu helfen, haben wir eine Checkliste mit den wichtigsten Optimierungen erstellt, die zur Verbesserung der Leistung und der Seitengeschwindigkeit erforderlich sind.

Kurz gesagt: Was sind die wichtigsten Faktoren, die du bei der Leistungsoptimierung deiner E-Commerce-Website beachten musst? Lass uns eintauchen!

1. Wähle eine hochmoderne Hosting-Infrastruktur und einen technischen Stack

Wenn du einen Hosting-Dienst für deine E-Commerce-Website auswählst, ist es wichtig, dass du dir über den Technologie-Stack im Klaren bist, den er bietet.

Die erste Entscheidung betrifft die Art des Hostingdienstes. Es gibt verschiedene Arten von Webhosting, die sich in Bezug auf die Infrastruktur und die Dienstleistungen erheblich unterscheiden:

• Shared Hosting
• Dediziertes Hosting
• VPS-Hosting
• Cloud-Hosting
• Verwaltetes WordPress-Hosting

Da es unerlässlich ist, eine maximale Leistung für deinen E-Commerce zu garantieren, muss die Infrastruktur Hochgeschwindigkeit bieten. Das schließt Shared Hosting aus, das zwar kostengünstig (oder sogar kostenlos) sein mag, aber nicht die Mindeststandards für Leistung und Sicherheit garantiert, auf die eine E-Commerce-Seite nicht verzichten kann, um auf dem Markt erfolgreich zu sein.

Ein dedizierter VPS-basierter Hosting-Service kann stark angepasst und auf Leistung optimiert werden. Allerdings sind dafür SysAdmin-Kenntnisse erforderlich, die für ein kleines oder mittleres Unternehmen zu teuer sein können. Ein Cloud-Hosting-Service kann Leistung und Sicherheit für eine moderne E-Commerce-Website bieten und erfordert keine fortgeschrittenen technischen Kenntnisse.

Wenn du mit WordPress arbeitest, ist es einfach, Anbieter von Managed WordPress- und WooCommerce-Hostingdiensten zu finden. Das bedeutet, dass du dich nicht um die Serverkonfiguration und -optimierung kümmern musst und einen spezialisierten Supportservice sowie eine vereinfachte Installation und Wartung der Website erhältst.

Außerdem muss deine Website mit einem modernen technischen Stack ausgestattet sein. Die meisten Webhoster bieten einen Stack an, der auf dem Apache Webserver und MySQL basiert. Du solltest jedoch einen moderneren, leistungsfähigeren Technologie-Stack wie Nginx und MariaDB in Betracht ziehen.

Kinsta-Hosting-Infrastruktur und technischer Stack

Wir bei Kinsta sind davon überzeugt, dass wir die beste und schnellste verwaltete WordPress-Hosting-Lösung geschaffen haben, die derzeit auf der Google Cloud Platform verfügbar ist.

Wir bieten C3D- und C2-Compute-optimierte VMs in allen Tarifen, von Starter bis Enterprise und darüber hinaus, in den Regionen an, in denen sie verfügbar sind. Außerdem nutzen wir das Premium Tier-Netzwerk von Google mit niedriger Latenz, das allen unseren Kunden ohne zusätzliche Kosten zur Verfügung steht.

Darüber hinaus haben wir einen schnellen und soliden technischen Stack aufgebaut, der auf Nginx, MariaDB, PHP 8.3, LXD-Containern und unserer Integration von Cloudflare Enterprise basiert. Dieser Stack ist für alle unsere Kunden verfügbar, unabhängig von ihren Plänen.

In diesem Beitrag erfährst du, warum Kinsta der schnellste verwaltete WordPress-Hoster ist.

2. Verwende unterstützte PHP-Versionen

Laut W3Techs, Stand August 2024,

PHP wird von 76,1% aller Websites verwendet, deren serverseitige Programmiersprache wir kennen.

Version 7 wird von 52,6% aller Websites genutzt, die PHP verwenden, Version 8 von 33,0% und Version 5 von 14,2%.

Wenn du eine E-Commerce-Website betreibst, musst du wissen, welche PHP-Version deine Website verwendet und warum du eine unterstützte Version vorziehen solltest.

Kurz gesagt: PHP hat einen Versionszyklus, und jede Hauptversion wird normalerweise zwei Jahre lang unterstützt. Die unterstützten Versionen sind die einzigen, die Leistungs- und Sicherheitsupdates erhalten. Wenn du also eine nicht unterstützte PHP-Version verwendest, bedeutet das im Vergleich zu den unterstützten Versionen eine geringere Leistung und mehr Sicherheitslücken.

Ab August 2024 sind die offiziell unterstützten PHP-Versionen PHP 8.1, 8.2 und 8.3.

Wir haben unsere eigenen Geschwindigkeitstests mit PHP 8.1, 8.2 und 8.3 und verschiedenen CMS und Frameworks durchgeführt und festgestellt , dass PHP 8.3 nachweislich die schnellste PHP-Version ist und den getesteten CMS und Frameworks einen Leistungsschub von bis zu 52,20% verschafft.

PHP-Versionen auf Kinsta

Bei Kinsta bieten wir nur unterstützte PHP-Versionen an. Derzeit unterstützen wir PHP 7.4, 8.0, 8.1, 8.2, 8.3.

Du kannst die PHP-Version deiner WordPress-Website schnell und einfach in MyKinsta wechseln. Gehe in den Konfigurationsbereich deiner WordPress-Website und wähle im linken Menü Tools. Hier findest du verschiedene Tools, die für unsere Kunden zur Verfügung stehen. Scrolle auf der Seite nach unten und finde die PHP-Engine. Klicke auf die Schaltfläche Ändern und wähle die PHP-Version aus, die du für deine Website benötigst.

3. Nutze den Cache für bessere Leistung

Der Cache ist ein Teil des Arbeitsspeichers, in dem Kopien von Ressourcen gespeichert werden, die bei zukünftigen Anfragen ausgeliefert werden können, ohne dass die gesamte Seite erneut heruntergeladen werden muss. Es gibt verschiedene Arten von Caches, von denen jeder einen bestimmten Zweck erfüllt. Die Caches, die uns hier interessieren, sind der Browser-Cache und der WordPress-Cache.

Jede Serverantwort muss die richtigen HTTP-Header enthalten, damit der Browser weiß, wie lange er eine Kopie der angeforderten Ressource zwischenspeichern soll. Dies geschieht durch das Setzen von ETag- und Expires-Headern in der HTTP-Anfrage.

WordPress hat ein eigenes Caching-System. Das Objekt WP_Object_Cache ermöglicht es, die Anzahl der Anfragen an die Datenbank zu reduzieren: „Der Objekt-Cache speichert alle Cache-Daten im Speicher und macht die Cache-Inhalte über einen Schlüssel verfügbar, der zum Benennen und späteren Abrufen der Cache-Inhalte verwendet wird.“

WordPress-Nutzer können ein Caching-Plugin eines Drittanbieters für WordPress installieren. Mit Tools wie W3 Total Cache und WP Super Cache kannst du den WordPress-Cache detailliert verwalten. Sie können sehr nützlich sein, wenn du dich für eine Shared-Hosting-Lösung entscheidest oder wenn der Webhoster keine effizienteren Cache-Management-Lösungen anbietet.

Diese Tools sind kompliziert zu konfigurieren und erfordern möglicherweise Kenntnisse, über die nicht alle Website-Betreiber verfügen. Kurz gesagt: Du brauchst eine einfache Möglichkeit, deinen Cache zu verwalten.

Im Bereich E-Commerce möchtest du vielleicht auch bestimmte Seiten wie „Mein Konto“ und „Kasse“ vom Caching ausschließen. Das ist wichtig, um ein einwandfreies Einkaufserlebnis für die Kunden deiner Website zu gewährleisten. Aber wie kannst du das tun?

Cache-Verwaltung auf Kinsta

Die Cache-Verwaltung kann entmutigend sein, vor allem wenn du keine technischen Kenntnisse hast. Bei Kinsta ist die Cache-Verwaltung jedoch ganz einfach, und alle Einstellungen sind bequem in einem einzigen Bereich deines MyKinsta-Dashboards zusammengefasst.

Der Hauptunterschied zwischen dem Kinsta-Cache und WordPress-Plugins von Drittanbietern besteht darin, dass der Kinsta-Cache auf Serverebene funktioniert.

Navigiere in MyKinsta zu WordPress-Websites und wähle deine Website aus. Auf der Seite mit den Website-Einstellungen klickst du links auf den Menüpunkt Caching und wählst die Registerkarte Server-Caching. Hier kannst du den Cache löschen und den Ablauf des Caches ändern.

Caching-Plugins sind auf Kinsta nicht erlaubt. Das klingt wie ein Widerspruch zu dem, was wir im vorherigen Abschnitt gesagt haben. Der Grund dafür ist, dass Kinsta den Cache auf dem Server für dich verwaltet und dir so eine bessere Leistung und eine einfachere Verwaltung bietet.

Speziell für WooCommerce- und EDD-Websites umgeht Kinsta automatisch den Cache, wenn woocommerce_items_in_cart oder edd_items_in_cart Cookies entdeckt werden. Dies ermöglicht ein reibungsloses Einkaufserlebnis für alle deine Kunden.

Kinsta-Benutzer können den Cache auch direkt von ihrem WordPress-Dashboard aus verwalten – dank des Kinsta MU-Plugins, das automatisch auf allen neuen WordPress-Websites installiert wird, die von Kinsta gehostet werden.

Auf dem Kinsta-Cache-Bildschirm kannst du die folgenden Aktionen durchführen:

• Alle Caches löschen
• Website-Cache löschen
• Objekt-Cache löschen
• CDN-Cache löschen
• Benutzerdefinierte URLs zur Bereinigung hinzufügen
• Autopurge aktivieren/deaktivieren

Das Kinsta-Cache-Plugin bietet auch eine Schaltfläche in der Admin-Leiste, mit der du den Cache löschen kannst:

• Alle Caches
• Server-Cache (auch bekannt als Full-Page-Cache)
• Objekt-Cache
• CDN-Cache

Eine andere Art von Cache ist der CDN-Cache. Lies weiter, um mehr darüber zu erfahren.

4. Verwende ein Content Delivery Network

Ein CDN ist ein Netzwerk von Servern, die statische Ressourcen wie Bilder, Skripte und Stylesheets speichern, damit sie den Besuchern der Website vom nächstgelegenen geografischen Standort aus zugestellt werden können.

Ein CDN bietet in der Regel Dienste und Funktionen, die die Leistung und Sicherheit einer Website erheblich verbessern können. Wenn es um die Leistung geht, kann ein CDN dir bei Folgendem helfen:

• Verringerung der Netzwerklatenz und der allgemeinen Ladezeit einer Website
• Die Zeit bis zum ersten Byte (TTFB) zu verkürzen
• Nutzung modernster Caching-Technologien
• Verringerung der Seitengröße mit einem Datenkomprimierungsdienst wie GZIP oder Brotli und automatischer Bildoptimierung
• Senkung der Bandbreitenkosten
• Verbessere die Skalierbarkeit
• Verbessere deine SEO

Kinsta CDN

Kinsta bietet eine kostenlose Cloudflare CDN-Integration für alle unsere Hosting-Angebote. Das bedeutet, dass du die Cloudflare-Funktionen für Unternehmen völlig kostenlos nutzen kannst, unabhängig davon, für welchen Tarif du dich entschieden hast.

Cloudflare bietet einen Caching-Service für statische Ressourcen, der die Leistung von E-Commerce-Websites erheblich steigern kann. Das ist besonders nützlich, wenn dein Zielpublikum über ein großes geografisches Gebiet verteilt ist.

Dank unserer Cloudflare-Integration können wir allen unseren Kunden, unabhängig von ihrem Tarif, die folgenden Unternehmensfunktionen zur Verfügung stellen:

• Cloudflare CDN
• Edge-Caching
• Automatische Bildoptimierung

Mit Kinsta kannst du all diese Funktionen nutzen, indem du das CDN von Cloudflare im Caching-Bereich deines MyKinsta-Dashboards aktivierst. Dort kannst du Edge Caching und CDN-Caching verwalten.

Auf der Registerkarte Edge Caching kannst du den mobilen Cache, den Cache löschen und den URL-Cache löschen .

Auf der Registerkarte CDN kannst du den CDN-Cache löschen, Bilder optimieren und bestimmte Dateien vom CDN-Caching ausschließen.

5. Bilder optimieren

Die Optimierung von Bildern ist wichtig für die Geschwindigkeit deiner Seite. Die Optimierung von Bildern ist für Anfänger nicht kompliziert, aber du brauchst trotzdem einige Grundkenntnisse.

Du kannst Bilder auf verschiedene Arten optimieren. Zunächst solltest du das Bildformat bestimmen, das am besten zu den Eigenschaften des Bildes passt. Neben den herkömmlichen Formaten JPEG, PNG und GIF bieten weboptimierte Bildformate wie WebP und Avif eine hohe Komprimierung bei besserer Qualität. WordPress unterstützt beide Formate von Haus aus, du kannst sie also auf deiner E-Commerce-Website verwenden.

Wenn du dich für das richtige Bildformat entschieden hast, kannst du mit der Komprimierung fortfahren. Es gibt zwei Arten der Bildkomprimierung: verlustbehaftet und verlustfrei. Die verlustbehaftete Komprimierung ist effektiver bei der Reduzierung der Dateigröße. Allerdings solltest du den Verlust von Informationen und damit eine geringere Bildqualität in Kauf nehmen.

Wenn die Bildqualität für deine Website entscheidend ist, kann eine verlustfreie Komprimierung die richtige Wahl sein, auch wenn die Einsparungen bei der Dateigröße unbedeutend sein können. Um Bilder ohne Informationsverlust zu komprimieren, brauchst du Tools wie FileOptimizer oder ImageOptim für WordPress oder eine Bildbearbeitungssoftware wie Photoshop. Eine weitere Möglichkeit ist die Gzip-Komprimierung.

Optimiere Bilder mit Kinsta

Dank unserer Cloudflare-Integration bietet Kinsta eine kostenlose Bildoptimierung. Das bedeutet, dass deine PNG-, GIF- und JPEG-Bilder automatisch in das WebP-Format umgewandelt werden, um die Geschwindigkeit und Leistung deiner Website zu verbessern, ohne dass du ein Plugin eines Drittanbieters benötigst.

Du kannst die automatische Bildoptimierung in MyKinsta unter Caching > CDN > Bildoptimierung aktivieren.

Klicke auf die Schaltfläche Einstellungen im Feld Bildoptimierung und wähle die Art der Optimierung, die du benötigst.

6. Reduziere die Größe von HTML-, CSS- und JavaScript-Ressourcen

Du kannst die Datenmenge, die der Browser herunterlädt, um eine Seite auf dem Bildschirm darzustellen, durch Minifizierung, Komprimierung und Zwischenspeicherung von HTML-, CSS- und JavaScript-Ressourcen reduzieren.

Bei der Code-Minifizierung werden unnötige Zeichen aus dem Quellcode entfernt. Kommentare und Leerzeichen sind bei der Entwicklung nützlich, aber der Browser braucht sie nicht, um die Seite darzustellen. Mit der Code-Minifizierung kannst du die Größe von HTML-, CSS- und JS-Ressourcen um bis zu 50% oder mehr reduzieren.

Es ist jedoch erwähnenswert, dass Cloudflare vor kurzem angekündigt hat, die Funktion „Auto Minify“ abzuschaffen:

Die Gründe, warum wir die Funktion abschaffen wollen, sind vielfältig, laufen aber darauf hinaus, dass es sich um eine Leistungsfunktion handelt, die dazu dient, das Gewicht der Seite zu reduzieren, und dass sie dabei nicht so effizient ist wie andere Projekte, an denen Cloudflare arbeitet, z. B. die Verbesserung der Komprimierung.

Durch Komprimierung kannst du die Größe der übertragenen Dateien reduzieren, um die Seitengeschwindigkeit zu erhöhen und weniger Bandbreite zu verbrauchen. Die GZIP-Komprimierung ermöglicht es dir, einen Rohdatensatz ohne Informationsverlust zu komprimieren. Jeder Dateityp kann komprimiert werden, aber GZIP funktioniert am besten bei textbasierten Ressourcen wie HTML, CSS und JS. Eine andere Art der Komprimierung ist Brotli, die neuer und effektiver als GZIP ist und von allen wichtigen Browsern unterstützt wird.

Ressourcenkomprimierung auf Kinsta

Während es mehrere Schritte gibt, um die Brotly-Komprimierung in WordPress zu aktivieren, müssen Kinsta-Kunden absolut nichts tun, um die Leistung dieses Komprimierungsalgorithmus zu nutzen. Dank unserer Cloudflare-Integration nutzt jede von Kinsta gehostete Website standardmäßig Brotli.

Du kannst den Kompressionstyp im Inspektor deines Browsers überprüfen. Wähle ein Asset im Bildschirm Netzwerk > Alle aus und suche nach der Kopfzeile content-encoding. Daraus geht hervor, welche Art der Komprimierung auf deiner Website aktiviert ist. br steht für Brotli.

7. Beseitige Rendering-blockierende Ressourcen

Du kannst Render-Blocking-JavaScript eliminieren, indem du die Attribute async und defer zu den <script> Tags hinzufügst. Dadurch kann das sogenannte First Contentful Paint verbessert werden. Genauer gesagt:

• Skripte mit dem async Attribut werden asynchron ausgeführt, sobald sie geladen sind. Sobald das Skript geladen ist, hält der Browser inne, parst den HTML-Code und führt das Skript aus.
• Skripte mit dem Attribut defer werden erst ausgeführt, wenn das Parsen der Seite abgeschlossen ist.

Du kannst Render-Blocking-CSS auch vermeiden, indem du above-the-fold-Ressourcen priorisierst, CSS inline einfügst, das media -Attribut verwendest und JavaScript zum asynchronen Laden oder zum Aufschieben des Ladens von CSS einsetzt.

All das könnte etwas schwierig sein, wenn du kein Frontend-Entwickler bist, aber du kannst ein WordPress-Plugin verwenden, das dir die ganze Arbeit abnimmt.

Außerdem kannst du ab WordPress 6.3 bei der Skriptregistrierung die Attribute async und defer hinzufügen und ab WordPress 6.4 wurden diese Attribute für Frontend-Skripte in WordPress Core und gebündelten Themes implementiert.

8. CSS optimieren

Ein besonderes Augenmerk sollte auf die Stylesheets gelegt werden, die eine Webseite erheblich schwerfälliger machen können.

Wenn der Browser auf ein <link> Tag stößt, unterbricht er das Herunterladen anderer Ressourcen und das Parsen der Seite, um die CSS-Datei herunterzuladen und zu parsen. Außerdem musst du auf einige Besonderheiten von Stylesheets achten:

• Mehrere externe Stylesheets können mit der gleichen Seite verlinkt sein.
• Der Link zu anderen Stylesheets kann von einem anderen Stylesheet kommen, so dass er im HTML-Code möglicherweise nicht sichtbar ist.
• Ein Stylesheet, das nicht gut gestaltet ist, kann Anweisungen enthalten, die nicht auf allen Seiten der Website benötigt werden. Das kann zu einem Anstieg der Dateigröße und längeren Bearbeitungszeiten führen.
• Es stimmt zwar, dass Stylesheets im Cache gespeichert werden, aber sie blockieren das Rendering noch eine Weile.

Deshalb ist es wichtig, Stylesheets zu optimieren und eine gründliche Analyse mit Browser-Entwicklungstools wie Chrome’s Lighthouse und Pagespeed Insights durchzuführen .

Nach der Analyse musst du die besten Lösungen finden, um die Auswirkungen der Stylesheets auf die Leistung zu reduzieren. Mining und Komprimierung sind nur zwei der verfügbaren Optionen. Weitere Maßnahmen sind das Zwischenspeichern von Dateien durch das Setzen von Expires- und ETag-Headern, die optimale Auswahl von Themes und Website-Plugins, das Entfernen von unnötigem CSS-Code, die Optimierung von Webfonts und andere Maßnahmen zur Leistungsoptimierung.

Die beste Option für Entwickler/innen ist jedoch immer, ihre Stile von Anfang an nach den CSS-Best Practices zu gestalten.

9. Reduziere die Anzahl der HTTP-Anfragen

Bilder, Skripte und Stylesheets sind allesamt wichtige Ressourcen für eine Website. Es gibt jedoch auch andere, weniger wichtige, aber manchmal für den Zweck der Website entscheidende Ressourcen, wie z. B. Videos, Multimedia-Inhalte und Webschriften. Jede Ressource erzeugt eine HTTP-Anfrage an den Webserver, auf dem sie gehostet wird, und jede Anfrage erfordert Verarbeitungs- und Antwortzeiten, die sich gegenseitig aufaddieren und die Ladezeit der Seite insgesamt erhöhen.

Deshalb ist es wichtig, die Anzahl der HTTP-Anfragen an den Server zu minimieren.

Auch hier können dir verschiedene Tools zur Leistungsanalyse helfen, die Anzahl der HTTP-Anfragen zu ermitteln. Browser-Entwicklungstools und Online-Tools wie Pingdom und GTMetrix können wertvolle Helfer sein, wenn es um Leistungsprobleme geht.

Unter den vielen Lösungen, die ein Entwickler umsetzen kann, um die Anzahl der HTTP-Anfragen zu reduzieren, ist die effektivste die Entfernung unnötiger Ressourcen von der Seite.

WordPress-Nutzer/innen sollten alle nicht unbedingt notwendigen Plugins entfernen oder zumindest selektiv Plugins laden, die auf der gesamten Website nicht benötigt werden. Außerdem sollten sie sich für die zuverlässigsten und leichtgewichtigsten Plugins entscheiden und die sogenannten Nulled Plugins vermeiden.

Eine andere Möglichkeit ist, alle CSS-Dateien in einem einzigen Stylesheet zusammenzufassen.

Andere Maßnahmen, die du ergreifen kannst, um die Anzahl der HTTP-Anfragen zu reduzieren, sind das träge Laden von Ressourcen, die Verwendung von Systemschriften, wann immer es möglich ist, die Minimierung von HTTP-Anfragen von Drittanbietern, wie z. B. YouTube-Videos, und die Verwendung von CSS-Sprites für Icons und Logos.

10. Überwache die Leistung deiner E-Commerce-Website mit einem APM-Tool

Hast du schon einmal ein Leistungsüberwachungs-Tool für deine E-Commerce-Website verwendet? Wenn nicht, solltest du es tun. Mit einem Leistungsüberwachungs-Tool (APM) kannst du die Ausführungszeit jedes einzelnen Prozesses auf deiner Website messen, z. B. PHP-Prozesse, Datenbankabfragen, AJAX-Aufrufe und vieles mehr.

Zu wissen, welcher Prozess oder welches Plugin deine E-Commerce-Website verlangsamt oder kaputt macht, ist entscheidend, denn jede Sekunde Verzögerung beim Laden der Seite bedeutet Umsatzeinbußen, ganz zu schweigen davon, dass dies dein Markenimage ruinieren könnte.

Niemand möchte seine Kreditkartendaten einer Website anvertrauen, die nicht wie erwartet funktioniert. Aus diesem Grund ist der Einsatz eines APM-Tools unerlässlich.

Es gibt mehrere APM-Tools auf dem Markt, darunter New Relic, LogRocket, Dynatrace und viele andere. Schau dir die beliebtesten an und wähle das Tool, das in Bezug auf Kosten und Funktionen am besten für dein Unternehmen geeignet ist.

Kinsta APM ist für alle WordPress-Tarife kostenlos

Das Kinsta APM-Tool hilft dir, PHP-Performance-Engpässe auf deiner WordPress-Website zu identifizieren, ohne dass du einen Überwachungsdienst eines Drittanbieters wie New Relic abonnieren musst. Es ist kostenlos für alle WordPress-Tarife und ist nativ in MyKinsta integriert.

Um auf das Performance-Monitoring-Tool von Kinsta zuzugreifen, wähle deine WordPress-Website in MyKinsta aus und suche den Punkt APM im linken Menü.

Aktiviere APM und wähle die Überwachungszeit. Das APM-Tool verbraucht Server-Ressourcen und kann die Leistung deiner Website beeinträchtigen, daher solltest du es nur für eine begrenzte Zeit aktivieren.

Sobald es aktiviert ist, überwacht das APM-Tool die Prozesse auf deiner Website und liefert eine große Menge an Daten, die in vier Registerkarten unterteilt sind:

Transaktionen: Dieser Bildschirm zeigt ein Diagramm mit der gesamten Transaktionszeit für PHP-, MySQL-, Redis- und externe Prozesse sowie eine Tabelle mit den langsamsten Transaktionen auf deiner Website. Du kannst einen bestimmten Eintrag auswählen, um Transaktionsdetails anzuzeigen.

WordPress: Dieser Bildschirm zeigt zwei Tabellen an: Die langsamsten WordPress-Plugins und die langsamsten WordPress-Hooks. Auch hier gilt: Wenn du auf einen bestimmten Eintrag klickst, wirst du zu einer Tabelle mit Transaktionsdetails weitergeleitet.

Datenbank: In diesem Bildschirm findest du die langsamsten Datenbankabfragen, sortiert nach Dauer. Wenn du das Kinsta Redis Add-on verwendest, findest du hier eine Liste der langsamsten aufgezeichneten Redis-Caches.

Extern: Dieser Bildschirm zeigt eine Liste der langsamsten externen Abfragen an.

Du kannst jede Anfrage mit Span-Details und Stack-Trace genauer untersuchen.

Das sind eine ganze Menge Daten, mit denen du jedes Leistungsproblem beheben und deine E-Commerce-Website für Geschwindigkeit und Leistung optimieren kannst.

Wenn du tiefer in das Kinsta APM-Tool eintauchen willst, schau dir die folgenden Ressourcen an:

• Unkomplizierte Leistungsüberwachung für WordPress
• Wie du mit Kinsta APM Performance-Probleme bei WooCommerce behebst
• Das APM-Tool von Kinsta
• Fehlersuche bei der Leistung

Zusammenfassung

Dieser Artikel enthält eine Checkliste mit den wichtigsten Optimierungen, die du vornehmen kannst, um die Leistung deiner E-Commerce-Website zu verbessern. Als verwalteter WordPress-Hoster, der auf der Google Cloud Platform aufbaut, richten sich unsere Empfehlungen vor allem an Betreiber von E-Commerce-Websites, die auf WordPress und WooCommerce basieren. Sie können aber auch unabhängig von der Plattform, die hinter deiner E-Commerce-Website steht, hilfreich sein.

Einige Optimierungen beziehen sich direkt auf den Hosting-Service, andere können durch WordPress-Plugins oder Dienste von Drittanbietern umgesetzt werden.

Kinsta bietet Konfigurationsoptionen für die Cache-Verwaltung, die Bildoptimierung, die Ressourcenkomprimierung, die Leistungsüberwachung und vieles mehr, mit denen du deine WordPress + WooCommerce Website für die beste Leistung optimieren kannst.

Wenn du tiefer eintauchen willst, schau dir die folgenden Anleitungen und Tutorials an:

• Wie du deine WordPress-Website beschleunigst
• Wie du TTFB reduzierst, um die Seitenladezeiten zu verbessern
• Wie du den kritischen Rendering-Pfad in WordPress optimierst
• 18 wirkungsvolle Methoden, um deinen WooCommerce-Shop zu beschleunigen

Jetzt bist du dran. Haben wir etwas übersehen? Hast du noch mehr Tipps, die du mit unseren Lesern teilen möchtest, um die Leistung einer E-Commerce-Website zu verbessern? Hinterlasse einen Kommentar und beteilige dich an der Diskussion.