Die beste Konfiguration für Cloudflare, um Top-Werte bei LCP, TBT und Web Vital für Ihren Shop zu erzielen

Die Web-Performance ist ein entscheidender Faktor für eine nahtlose Einkaufserfahrung für Ihre Kunden. In diesem Artikel zeige ich Ihnen, wie Sie mit Cloudflare Top-Werte in Web Vitals wie Largest Contentful Paint [LCP] und Total Blocking Time [TBT] erreichen können. Diese Konfigurationen reichen von einfachen Anpassungen bis hin zu fortgeschrittenen Optimierungen.
Bevor wir in die Details eintauchen, nehmen Sie sich einen Moment Zeit, um die aktuelle Leistung Ihrer Website mit einem Tool wie Google PageSpeed Insights zu bewerten. Dies hilft Ihnen, die Verbesserungen nach der Anwendung dieser Einstellungen nachzuvollziehen.
Warum Web Vitals wichtig sind
Web Vitals messen wichtige Aspekte der Benutzererfahrung. Hier ist eine kurze Übersicht über die kritischsten Metriken, auf die wir uns konzentrieren werden:

Metrik	Was sie misst	Warum es wichtig ist
LCP	Die Zeit, die benötigt wird, um das größte sichtbare Element zu laden	Beeinflusst die Wahrnehmung der Nutzer über die Geschwindigkeit der Website
TBT	Zeit, die durch lange JavaScript-Aufgaben blockiert wird	Beeinflusst die Interaktivität und die Reaktionsfähigkeit
CLS	Layoutverschiebung während des Seitenladens	Gewährleistet visuelle Stabilität und Benutzerfreundlichkeit

Durch die Optimierung Ihrer Cloudflare-Einstellungen können Sie diese Werte erheblich steigern, was zu einer schnelleren und ansprechenderen Erfahrung für Ihre Besucher führt.

Schritt 1: Ihre Domain auf Cloudflare einrichten und CDN aktivieren

Um die Leistung Ihrer Website mit Cloudflare zu optimieren, müssen Sie zunächst sicherstellen, dass Ihre Domain ordnungsgemäß auf ihrer Plattform eingerichtet ist und dass die CDN (Content Delivery Network)-Funktion aktiviert ist.

So aktivieren Sie das Cloudflare CDN

1. Loggen Sie sich in Ihr Cloudflare-Konto ein und wählen Sie Ihre Domain aus.
2. Gehen Sie zum Abschnitt DNS.
3. Unter den DNS-Einträgen finden Sie den A- oder CNAME-Eintrag Ihrer Domain.
4. Klicken Sie auf das orangefarbene Wolkensymbol neben dem Eintrag, um die Proxy Cloud-Funktion zu aktivieren. Wenn sie aktiviert ist, wird das Symbol hellorange, was anzeigt, dass Ihre Domain jetzt über das CDN von Cloudflare geleitet wird.

Besondere Hinweise für Selldone-Nutzer

Wenn Sie Selldone verwenden, müssen Sie Ihre Domain korrekt konfigurieren, um sich nahtlos mit dem CDN von Cloudflare zu integrieren. Dadurch wird sichergestellt, dass das externe CDN von Selldone effizient mit Ihrer Website arbeitet und zwischengespeicherte Inhalte bereitstellt, während die Kompatibilität mit der Plattform von Selldone gewährleistet bleibt.
Schritte zur Konfiguration für Selldone:

1. Richten Sie Ihre benutzerdefinierte Domain im Dashboard von Selldone ein.
2. Stellen Sie sicher, dass das externe CDN auf Cloudflare zeigt, indem Sie Ihre DNS-Einträge richtig konfigurieren.
3. Bestätigen Sie, dass die Einstellungen von Cloudflare vollständig aktiviert sind, einschließlich des Proxy-Cloud-Status. Diese Schritte sorgen dafür, dass Ihre mit Selldone betriebenen Website die leistungssteigernden Funktionen von Cloudflare voll ausnutzt.

Schritt 2: Cloudflares Geschwindigkeits-Testfunktion

Cloudflare bietet ein integriertes Speed-Test-Tool, das wertvolle Einblicke in die Leistung Ihrer Website bietet. Diese Funktion misst wichtige Metriken wie Ladezeit, Reaktionsfähigkeit und allgemeine Geschwindigkeitsverbesserungen nach der Implementierung der Dienste von Cloudflare.

Schritt 3: Echtzeit-Benutzerinformationen in Cloudflare aktivieren

Das Verständnis des Verhaltens Ihrer Benutzer in Echtzeit ist entscheidend für die Optimierung ihrer Erfahrung auf Ihrer Website. Die Echtzeit-Benutzerinformationen (RUN)-Funktion von Cloudflare ermöglicht es Ihnen, Live-Daten darüber zu verfolgen, wie Besucher mit Ihrer Seite interagieren, und bietet umsetzbare Metriken zur Verbesserung der Leistung und Benutzerfreundlichkeit.

Schritt 4: Alle Optimierungsfunktionen in Cloudflare aktivieren

Um die Leistung Ihrer Website zu maximieren, aktivieren Sie die Optimierungsfunktionen, die in Cloudflare unter dem Tab Speed verfügbar sind. Diese Funktionen sind darauf ausgelegt, die Ladezeiten zu verbessern, den Bandbreitenverbrauch zu reduzieren und die gesamte Benutzererfahrung mühelos zu verbessern.
  Einige der wichtigsten Funktionen zur Beschleunigung der Website erfordern eine PRO-Lizenz.
Stellen Sie sicher, dass Sie „Cloudflare Fonts“ und „Rocket Loader“ aktivieren.

Schritt 5: Sofortige Ergebnisse mit dem Cloudflare kostenlosen Plan

Selbst im Cloudflare Free Plan können Sie signifikante Leistungsverbesserungen sehen, indem Sie die richtigen Funktionen aktivieren. Ich habe diese Optimierungen auf marketplace.hanscristy.com angewendet, und die Ergebnisse waren sofort sichtbar. Die Änderungen verbesserten nicht nur Metriken wie LCP und TBT, sondern verbesserten auch das allgemeine Benutzererlebnis.
 

Schritt 6: Wie Cloudflare und Selldone-Optimierungen die tatsächliche Leistung beeinflussen

Lassen Sie mich Ihnen erklären, wie die Optimierungen von Cloudflare und die speziellen Technologien von Selldone kombiniert werden, um eine unübertroffene Leistung zu erzielen, selbst in herausfordernden Testszenarien.

Die Herausforderungen bei Leistungstests verstehen

Tools wie Lighthouse, GTmetrix und ähnliche Plattformen sind hauptsächlich für statische Seiten oder Websites konzipiert, die Inhalte auf der Serverseite rendern. Selldone hingegen funktioniert anders:

• 100% PWA: Jeder Aspekt von Selldones Plattform – von der Hauptwebsite über das Dashboard bis hin zum Shop – ist als Progressive Web App (PWA) gebaut. Das bedeutet, dass das gesamte Rendering auf der Client-Seite erfolgt, was den Nutzern enorme Flexibilität bei der Gestaltung benutzerdefinierter Dashboards und Shops bietet.
• Dynamic Domain Loading: Nutzer können Selldone auf jeder Domain laden, ohne sich um die Implementierung eines komplexen Backends kümmern zu müssen. Das System verwaltet alles dynamisch und wird als einzelne JavaScript-Datei bereitgestellt.

Dieser einzigartige Ansatz bietet Flexibilität und Geschwindigkeit, bringt jedoch spezifische Herausforderungen mit sich, wenn Tests mit Tools durchgeführt werden, die für servergerenderte Seiten konzipiert sind.

Warum Selldone in der Realität 10–100x schneller ist

Während statische Seiten auf den Server angewiesen sind, um für jede Benutzeranfrage HTML zu rendern, ist die PWA-Nutzererfahrung von Selldone grundlegend anders:
Effizientes Abrufen von Daten:

• Statt gesamte Seiten auf dem Server zu rendern, sendet Selldone eine schlanke JSON-Struktur, die die erforderlichen Daten enthält.
• Wenn ein Benutzer auf ein Produkt klickt, ruft die Plattform nur die erforderlichen Daten (wie Produktdetails) ab, anstatt die gesamte Seite neu zu laden oder zu rendern.

Keine Verzögerungen durch serverseitiges Rendering:

• Im Gegensatz zu Plattformen wie WooCommerce, bei denen jeder Klick serverseitiges Rendering auslösen kann, beseitigt Selldone dieses Flaschenhalsproblem vollständig. Alles wird clientseitig gehandhabt, was die Latenz erheblich reduziert.

Echtzeitgeschwindigkeitsvorteil:

• Benutzer erleben fast sofortige Seitenübergänge. Diese Geschwindigkeit in der Realität lässt die Plattform deutlich schneller erscheinen im Vergleich zu servergerenderten Websites, auch wenn traditionelle Testergebnisse den Vorteil nicht vollständig widerspiegeln.

Durchbrechen des technischen Flaschenhalses

Hohe Testergebnisse für clientseitig gerenderte PWAs zu erzielen, war historisch eine Herausforderung aufgrund von:

• JS-Ausführungsverzögerungen: Clientseitiges Rendering hängt stark von JavaScript ab, was von Testwerkzeugen oft bestraft wird.
• Dynamischer Inhalt: Im Gegensatz zu statischem HTML kann das Laden dynamischer Inhalte in synthetischen Tests langsamer erscheinen.

Doch Selldone hat diese Einschränkungen erstmals im Internet überwunden, indem es:

• Cloudflares Optimierungen (wie Rocket Loader™ und Brotli-Kompression) kombiniert, um die Bereitstellung von Assets zu optimieren.
• Fortgeschrittene PWA-Architektur für das Echtzeit-Abrufen und Rendering von Daten.

Leistung in der realen Welt im Vergleich zu synthetischen Bewertungen

Während synthetische Tests möglicherweise niedrigere Ergebnisse für client-renderte Plattformen wie Selldone zeigen, erzählt die Leistung in der realen Welt eine andere Geschichte. Das Dashboard und der Shop von Selldone bieten ein 10–100x schnelleres Erlebnis im Vergleich zu servergerenderten Plattformen und sind damit die ideale Lösung für moderne E-Commerce-Bedürfnisse.
  Wenn Sie die Cloudflare-Einstellungen, die wir zur optimalen Leistung verwenden, spiegeln möchten, finden Sie hier eine Liste der aktivierten Funktionen:

Begriffe der Web-Performance

Hier ist eine freundliche und leicht verständliche Erklärung der Begriffe zur Web-Performance in Web Vitals:

LCP (Largest Contentful Paint)

LCP misst, wie lange es dauert, bis der größte sichtbare Teil einer Webseite (wie ein großes Bild oder eine Überschrift) geladen und von den Benutzern gesehen wird. Denken Sie daran, dass dies die Zeit ist, die benötigt wird, damit Ihre Seite sich „bereit“ anfühlt, um gelesen oder mit ihr interagiert zu werden.

CLS (Cumulative Layout Shift)

CLS verfolgt, wie sehr sich Dinge beim Laden einer Webseite unerwartet bewegen. Wenn sich beispielsweise ein Button genau dann verschiebt, wenn Sie daraufklicken möchten - das ist eine Layoutverschiebung. Ein niedriger CLS-Wert bedeutet, dass Ihre Seite stabil und flüssig ist.

INP (Interaction to Next Paint)

INP misst, wie schnell Ihre Webseite auf Benutzerinteraktionen reagiert, zum Beispiel beim Klicken auf einen Button oder beim Eingeben in ein Suchfeld. Ein schneller INP bedeutet, dass Ihre Seite reaktionsschnell ist und die Benutzer nicht frustriert warten müssen, bis Aktionen stattfinden.

TBT (Total Blocking Time)

TBT berechnet die Zeit, in der Ihre Seite beim Laden unresponsive ist, zum Beispiel wenn ein Benutzer versucht zu scrollen oder zu klicken, aber nichts passiert. Ein niedriger TBT bedeutet, dass Ihre Seite besser im Multitasking ist und den Benutzern ein reibungsloses Interagieren ermöglicht, während sie lädt.