Wie ich einen 100 Google PageSpeed ​​Mobile Score auf WooCommerce mit WP Rocket geschlagen habe

Möchten Sie mit Ihrem WooCommerce -Store eine perfekte 100 auf Google PageSpeed ​​-Erkenntnissen für Mobilgeräte erhalten?

In diesem Artikel werde ich Ihnen genau zeigen, wie wir es mit femme-fatale.gr, einem Schönheits-E-Shop, der ursprünglich auf Magento lief, erreicht haben. Zu diesem Zeitpunkt dauerte mobile Seitenladungen zwischen 5 und 15 Sekunden, und der Standort war trotz eines Katalogs von 35.000 Produkten mit 500 Produktkategorien und 450 Produktattributen um den Umsatz.

Ich bin Dimitris Vayenas, Gründer von Oxford Metadata. In den letzten drei Jahrzehnten war ich besessen von jeder Millisekunde der Webleistung. Anfang 2022 bat mich mein Freund Nikos Orfanos, bei seinem Online -Shop zu helfen, und wir machten uns an die Arbeit.

Nachdem wir zu WooCommerce migriert und sich ganz auf Geschwindigkeit konzentriert haben - wp Rocket als geheime Waffe -, haben wir mobile PageSpeed ​​-Scores mit einer konsistenten Punktzahl zwischen 99 und 100/100 geschlagen. Noch wichtiger ist, dass der Standort von stagnieren zu Revenue Machine wechselte.

Lesen Sie weiter und Sie werden erfahren, wie wir es geschafft haben, solche Ergebnisse zu erzielen, und wie WP Rocket uns geholfen hat, eine Punktzahl von 95+ zu erreichen, sowie das letzte Verbesserung, das uns zu einer perfekten 100 -jährigen Tore gedrängt hat. Noch wichtiger ist, dass Sie die geschäftlichen Auswirkungen ermitteln, nach der die Website begann, in nur 300 Millisekunden zu geladen.

Warum sich auf die Leistung konzentrieren, insbesondere auf Mobilgeräte?

Bei Femme -fatale.gr werden mehr als 90% der Einkäufe auf Mobilgeräten stattfinden. Das machte mobile Leistung vom ersten Tag an zu unserer obersten Priorität.

Mobile Geräte sind der ultimative Stresstest für jede Website. Begrenzte CPU, Speicher und instabile Verbindungen können sogar die schlanksten Seiten bis zu 10 -mal langsamer beladen als auf dem Desktop. Deshalb ist jede Optimierung wichtig.

Geschwindigkeit bedeutet Effizienz. Cleaner -Code, kleinere Vermögenswerte und ein schlankeres DOM werden für jeden Besucher, insbesondere auf Mobilgeräten, eine glattere Erfahrung übertragen.

Wie ich gerne sage: "Wenn Ihre mobile Erfahrung nicht sofort ist, verlieren Sie mit jeder zusätzlichen Millisekunde echtes Geld."

Der Wendepunkt: Migrieren von Magento nach WooCommerce

Im Dezember 2021 erreichte Nikos eine klare Herausforderung. "Mein Geschäft erreichte während der Lockdown mit 0,81 € pro Sitzung ihren Höhepunkt. Dann fielen der Umsatz auf 0,15 € pro Sitzung zurück. Können wir wieder zu Lockdown Highs kommen?"

Wir wussten, dass der erste Schritt die Plattformen veränderte.

Zunächst einmal haben wir Woocommerce für seinen agilen, modernen Stack gewählt. Es bot ein Ökosystem von Plugins und Themenschöpfer, die alle erdenklichen Funktionen zusammen mit der größten Community von leistungsorientierten Webingenieuren abdecken.

Wir sind im März 2022 live gegangen, ohne Produktdaten zu ändern oder die Marketingausgaben zu erhöhen. Der einzige Unterschied war die Geschwindigkeit. Wir schneiden die Seite von 5 bis 10 Sekunden auf nur 1 bis 2 Sekunden.

Dies ist der GTMetrix -Screenshot, der die Ladezeitergebnisse vor der Migration von Magento zeigt: 5,8 Sekunden für die Homepage und 7,9 Sekunden für die Kategorie, die erfasst, während wir die neue Website noch entwickelten.

Andererseits ist dies die aktuelle Leistung, mit allen Kern -Web -Vitalen in Grün:

Was ist der wahre Wert der Geschwindigkeit für einen WooCommerce?

Die Auswirkungen auf die Leistung auf die Leistung waren unmöglich zu ignorieren, und die Zahlen machten es kristallklar.

Vor der Migration war Femme -fatale.gr in einer Leistungsstrecke festgefahren. Bei Magento lag der monatliche Umsatz zwischen 7.000 und 10.000 Euro mit rund 40.000 Sitzungen, was einem Durchschnittswert von nur 0,15 bis 0,20 € pro Sitzung betrug. Selbst während des Lockdown -Peaks im Jahr 2020, als der Verkehr auf 62.500 Sitzungen stieg, stieg die beste Leistung bei 0,81 € pro Sitzung an.

Bis Februar 2022, kurz bevor wir nach WooCommerce ausgewandert waren, hatte sich die Website leicht auf 0,29 € pro Sitzung verbessert, aber es war immer noch weit vom Potenzial entfernt.

Der Einfluss einer schnelleren Leistung war unmittelbar. Im März 2022, im ersten vollen Monat nach der Migration, verdoppelte sich der Umsatz pro Sitzung auf 0,58 €, trotz eines vorübergehenden Rückgangs der Sitzungen, während Bots Caches aufwärmten.

Die Gewinne hörten hier nicht auf. Bis Dezember 2023 haben wir den Lockdown -Peak von 0,81 € pro Sitzung erreicht. Heute ist diese Zahl noch höher gestiegen: Die Website verdient jetzt 1,11 € pro Sitzung mit 40.000 monatlichen Besuchen.

Nikos, der Eigentümer von Femme -fatale.gr, das Beste:

Indem wir unseren Covid Peak übereinstimmen und jetzt übertreffen, haben wir nachgewiesen, dass Geschwindigkeit der größte Einzelhebel in unserem Geschäft ist.

Die Performance Foundation jeder WooCommerce -Website benötigt

Bevor WP Rocket sein volles Leistungspotenzial liefern könnte, muss eine solide Grundlage vorhanden sein. Diese frühen Entscheidungen hatten einen großen Einfluss auf unsere Ergebnisse, und das kann ich auch jedem empfehlen, der einen WooCommerce -Store betreibt:

1. Wählen Sie ein Leistungsthema: Wir haben Dutzende von Themen getestet, bevor wir uns für die besten Optionen entscheiden. BOTIGA (Gutenberg-basierte) von Atemes and Ray-Themen (Elementor-basiert) haben beide bei Anbieter-Demos 90+ erzielt. Etwas unter 70? Wir haben es vermieden.

2. Wählen Sie einen wirklich schnellen Host aus: Wir verwenden Cloudways , die von Linode, Vultr und Digitalocean in wichtigen europäischen Regionen wie London, Frankfurt, Amsterdam, Mailand und Stockholm unterstützt werden. Es gibt uns ein Klick-PHP- und Datenbank-Upgrades, eingebauter Lack und Redis sowie eine nahtlose Erkennung mobiler Geräte. Dies stellt sicher, dass ungekochte API -Anrufe immer optimierten Inhalte treffen. Wir hatten in drei Jahren keine Ausfallzeiten und ihr Support -Team ist hervorragend.
   
   Im E -Commerce ist die Nähe zu Ihren Kunden nicht verhandelbar: Jede Produktabfrage, CART -Update und Inventarprüfung berühren Ihren Ursprung. Mit Käufern in Athen oder den griechischen Inseln und Cloudways, die keinen lokalen Knoten haben, müssen wir FastPath bereitstellen. Es kaut sich direkt mit allen großen griechischen Mobilfunkbetreibern und Cloudflare an und liefert unter 50 MS TTFBS und eine wirklich lokale Erfahrung.

3. Partnerin mit unterstützenden Anbietern: Wir haben Anbieter ausgewählt, die zuverlässige und schnelle Unterstützung anbieten, um Fragen zu beantworten und an Ihrer Seite zu beheben, von Ateme und Fibosarch -Forschung bis hin zu Begrüßungen , Pixeln Ihrer Website , der Schwerkraftformulare , Aioseo und WP Rocket selbst.

4. Optimieren Sie Ihren Inhalt: Wir haben alle Bilder in WebP konvertiert und in datebasierte Ordner organisiert, um sicherzustellen, dass jeder Ordner weniger als 10.000 Dateien enthält. Für Schriftarten haben wir WOFF2-Dateien selbst gehostet und sie nur die Charaktere, die unser Publikum benötigte, einbezogen. Diese Reduzierung der Schriftdateigrößen um 70 bis 80 Prozent. Das Dienst vor Ort und frühes Vorladung trug dazu bei, externe Lookups zu beseitigen und Layout -Verschiebungen zu vermeiden.

5. Verwenden Sie das Laden und verwalten Sie die Datenbankhygiene für das chirurgische Plugin: Wir haben Plugin -Organizer und manuelle Filter verwendet, um nur die pro Seite benötigten Plugins zu laden. Wir haben auch wöchentliche Transienten für große WP_Options -Einträge eingeräumt und deaktiviert.

Die WP -Raketenfunktionen, die uns auf PageSpeed ​​auf 99/100 gebracht haben

Sobald die Stiftung vorhanden war, half uns WP Rocket, die Geschwindigkeit zu steigern und schnell herausragende Leistungsergebnisse zu erzielen. Diese Funktionen spielten eine Schlüsselrolle, um uns auf Google PageSpeed ​​auf einem Mobiltelefon zu einem Wert von 95+ zu bringen:

• Mobile Cache und Sitemap -Vorspannung: WP Rocket erkennt automatisch mobile Geräte und erstellt dafür einen speziellen Cache. Das bedeutet, dass Smartphone -Benutzer immer einen vorinstallierten HTML -Snapshot erhalten. Der vorliegende Sitemap-basierte Preloader krabbelt auch Ihre Seiten direkt nach einer Cache-Säuberung, wodurch die Verzögerung, die bei den ersten Besuchen häufig auftritt, beseitigt.
  
• CSS und JS Minification : WP Rocket Strips Out Whitespace und Kommentare, um die Dateigrößen zu verkleinern. Es kann auch JavaScript -Dateien in einem kombinieren und die Anzahl der HTTP -Anforderungen reduzieren. Dies ist besonders wichtig für mobile Benutzer in langsameren Netzwerken.  
  
• Entfernen Sie ungenutzte CSS (RUCSS): Im Gegensatz zur einfachen Minifikation analysiert RUCSS die HTML der Seiten und streift jede CSS -Regel aus, die nie am vorderen Ende verwendet wird. Diese Stylesheets für Styles schneiden oft Zehn Kilobyte ab, sodass der Browser schneller mit weniger Bytes wird. Wir sahen aus erster Hand, dass die Ermöglichung von RucSs allein 200 KB von unserer Homepage -Nutzlast rasiert und zu schnelleren Ladungsseiten führte.
  
• JavaScript-Ausführung verzögern : Skripte wie Analytics, Chat-Tools oder Widgets von Drittanbietern müssen normalerweise nicht sofort ausgeführt werden. WP Rocket verzögert sie, bis der Benutzer scrolliert, tippt oder klickt. Dies macht die Seiten schneller interaktiv und verbessert die Interaktion auf die allgemeine Reaktion auf die Nutzungsinteraktionen der nächsten Farbe und die allgemeine Reaktionsfähigkeit der Seite.

Nachdem wir diese Funktionen aktiviert haben, haben wir einen 99 Mobile PageSpeed ​​Performance Score erhalten:

Bonus: WP -Raketen -Add -Eins für Sonderfälle

Manchmal benötigen Out -the -Box -Einstellungen einen kleinen Schub. Für ausgewählte Setups wie unsere - mit komplexen Schedulern, benutzerdefinierten Schriftregeln oder ungewöhnlichen Geräteerkennung - haben wir fünf kostenlose WP -Raketen -Add -Obed installiert, nachdem Sie WP Rocket Senior Engineers konsultiert haben:

• Ändern Sie die RUCSS -Parameter: Wir haben angepasst, wie oft und wie tief WP -Raketen läuft, ungenutzte CSS entfernen. Dies war für die Kompatibilität mit Plugins wie Automatewoo unerlässlich, die den Aufgabenplaner überlasten können.
• Deaktivieren Sie WooCommerce-Karren-Fragmente: Da unsere Datenbank bereits optimiert war, haben wir den Cart-Fragment-Cache von WP Rocket deaktiviert, um die Checkout-Anrufe noch weiter zu beschleunigen.
• Deaktivieren Sie gebrauchte CSS-Schriftarten Vorspannung: Wir haben benutzerdefinierte selbst gehostete WOFF2-Schriftarten mit manuellen Vorspannungsregeln verwendet. Dieses Add-On stellte sicher, dass diese Regeln von der automatischen Schriftvorspannung von WP Rocket nicht außer Kraft gesetzt wurden.
• Entfernen Sie HTML -Regeln ab.
• Setzen Sie Tablets als Mobile: Wir haben Tablets wie Mobilgeräte behandelt, um sicherzustellen, dass sie von mobilen Caching und reaktionsschnellen Optimierungen profitierten. Dies war wichtig für die benutzerdefinierte Funktionalität, die sich auf der Prüfung wp_is_mobile () stützt.

Abgesehen vom Tablet-Plugin werden die meisten dieser Add-Ons nur in Geschäften mit hoher Komplexität benötigt. Für typische E -Commerce -Setups funktioniert WP Rocket direkt außerhalb der Box.

Das 100/100 Geheimnis: Perfektionieren von Lazyloading und dieses LCP -Bild

Das Erreichen von 99 auf Googles PageSpeed ​​Insights war ein großer Meilenstein, aber wir waren nicht zufrieden. Ein Punkt stand zwischen uns und Perfektion.

Zuerst haben wir Element Bloat angepasst, was bedeutet, die Anzahl der HTML -Elemente auf der Seite zu verringern. Google bestraft Seiten mit mehr als 810 DOM -Elementen, und unsere Menüs, Schieberegler und Fußzeile allein haben uns weit über 1.000 überschritten.

Folgendes haben wir getan:

• Lazy beladener statischer Inhalt : Wir haben nicht kritische Elemente wie Headermenüs, Produktkategorien-Schieberegler, Markenkarusselle und die Fußzeile bis nach der ersten Farbe aufgeschoben.

• Unnötige Elemente entfernt : Wir haben tiefe Menüstufen beschnitten und inaktive Widget -Bereiche auf Mobilgeräten deaktiviert. Das hat uns geholfen, die gesamte DOM -Anzahl unter Googles Strafschwelle von Google zu erhalten.

Selbst mit einer saubereren Seite konnten wir immer noch nicht 100 knacken. Das letzte Problem war das Heldenbild.

Ursprünglich war es ein 350 × 622 PX -Bild mit Überlagerungen, Schatten und Text - zu komplex, um schnell zu laden. Wir haben es auf ein 350 × 350 PX -Webp -Webpaie vereinfacht und es mit hoher Priorität mit dem folgenden Code vorinstalliert:

 add_action('wp_head','ff_preload_mobile_image',1); function ff_preload_mobile_image(){ if(!is_front_page()||!wp_is_mobile()) return; echo '<link rel="preload" as="image" href="/uploads/lcp-simple.webp" importance="high">'; }

Und so haben wir durch die Vereinfachung und Vorladung des Heldenbildes eine perfekte 100/100 psi -Punktzahl von Mobile erzielt.

Die geschäftliche Auswirkungen: Geschwindigkeit als Wachstumsmotor

Wie ich erklärte, verbesserte die Geschwindigkeit nicht nur unseren PageSpeed ​​-Score. Es hat unser Endergebnis direkt gesteigert.

Nach der Optimierung der Leistung und der Nutzung von WP -Raketenfunktionen sahen wir messbare Ergebnisse in den Ergebnissen:

• Die Conversion -Raten stiegen um 33%.

• Der Umsatz pro Sitzung stieg mehr als fünfmal von 0,20 € auf 1,11 €.

Diese Ergebnisse führten in den ersten 18 Monaten nach der Migration in zusätzlichen Einnahmen in Höhe von 384.000 € .

Diese waren keine geringfügigen Verbesserungen. Sie stimmten und übertrafen schließlich unsere Spitzenleistung, was beweist, dass die Site -Geschwindigkeit der Schlüsselhebel für das Wachstum war .

Wie ich gerne sage: "Jede Millisekunde rasiert zu echten Euro zum Endergebnis."

3 Praktische Tipps für Geschäftsinhaber

Wenn Sie einen E -Commerce -Geschäft betreiben, möchte ich einige zusätzliche praktische Tipps teilen, um Ihre Leistungsbemühungen optimal zu nutzen - ob Sie technisch sind oder nicht.

1. Verfolgen Sie echte Benutzer: Verwenden Sie die echte Benutzerüberwachung (RUM), um Felddaten im Auge zu behalten. Laborwerte sind nützlich, aber was wirklich zählt, ist, wie Ihre Website für tatsächliche Besucher funktioniert. Stellen Sie einfach sicher, dass Sie es beim Ausführen von PageSpeed ​​-Insights -Tests deaktivieren, um verzerrte Ergebnisse zu vermeiden.
2. Geolocode Your Origin: Hosten Sie Ihre Website in der Nähe Ihrer Kunden. Wenn Ihr Ursprungsserver in der Nähe Ihres Publikums liegt, wird alles von Produktsuche bis hin zu Checkout schneller und zuverlässiger.
3. Lehnen Sie sich auf WP Rocket: Beginnen Sie mit den Standardeinstellungen. Sie behandeln die meisten Leistungsprobleme automatisch sofort. Sobald Ihre Grundlinie solide ist, können Sie einige zusätzliche Funktionen gut abschneiden, um CSS- und JS-Dateien zu optimieren. Und wenn Sie nicht technisch versiert sind, denken Sie daran: „Schnellere Websites bedeuten weniger Frustration, mehr Verkäufe und glücklichere Kunden.“

Einpacken

Wir wechselten von Magento nach WooCommerce, sammelten unseren mobilen PageSpeed ​​-Score von 55 auf perfekte 100 und erhöhten den Umsatz pro Sitzung von 0,20 € auf 1,11 €. Diese Reise hat eine deutlich gezeigt: Geschwindigkeit ist mehr als ein technischer Meilenstein. Es ist ein echter Treiber des Geschäftswachstums.

Wir haben uns auf die Leistung konzentriert, eine starke technische Grundlage gebaut und WP Rocket verwendet, um die Ergebnisse schnell freizuschalten. Wenn sich Ihr WooCommerce -Geschäft langsam oder unterdurchschnittlich anfühlt, ist es jetzt an der Zeit, Maßnahmen zu ergreifen. Eine schnellere Website bedeutet eine glattere Erfahrung für Ihre Besucher und echte Gewinne für Ihr Unternehmen.