DE{CODE}: 6 WooCommerce-Entwicklertricks zum Erstellen schneller E-Commerce-Websites

Neben dem Umsatz ist die Geschwindigkeit der Website vielleicht die wichtigste Kennzahl für Ihre E-Commerce-Websites. Warum? Schnelle E-Commerce-Websites erzielen mehr Traffic, haben höhere Konversionsraten, niedrigere Absprungraten und generieren mehr wiederkehrende Besucher. In dieser Sitzung erkunden Jeremy Benoit, Senior Product Manager für WP Engine, und Catherine Kelly, Engineering Manager, Entwicklertricks, WP Engine-Funktionen und andere Tools, um Ihren WooCommerce-Shop noch schneller zu machen.

Sitzungsfolien

Vollständige Textabschrift

JEREMY BENOIT : Hallo zusammen und willkommen zur DE{CODE} 2022. Das ist der E-Commerce-Track. Ich bin Jeremy Benoit, Senior Product Manager bei WP Engine, und wir sind hier, um über sechs Tipps zur Verbesserung der Leistung von WooCommerce zu sprechen. Zu mir gesellt sich heute meine Kollegin Catherine Kelly, und los geht's.

Ich beginne also mit einem Zitat von einem unserer Software-Ingenieure, Chris Weigman. Und wie er es ausdrückte: Laut Google verlassen 53 % der Nutzer eine Website, wenn die Ladegeschwindigkeit einer Seite länger als drei Sekunden dauert. Das bedeutet, dass Sie genau drei Sekunden Zeit haben, um ihnen alle Daten auf dieser Produktseite zu liefern, alle Bilder, die Sie ihnen gesendet haben, alle Informationen darüber, all die kleinen Widgets und Anzeigen, und es zeigt Ihnen ein bisschen, warum wir sprechen wir heute über Geschwindigkeit, denn die Geschwindigkeit eines Einkaufserlebnisses ist entscheidend.

Die Seitengeschwindigkeit ist die Ladezeit einer einzelnen Seite und kann auf verschiedene Weise gemessen werden. Zwei kritische Methoden sind Time To First Byte, das von Google PageSpeed ​​Insights verwendet wird, oder Time To Full Page Load oder Last Byte, was oft die Erfahrung der Käufer widerspiegelt. Die Seitengeschwindigkeit wirkt sich auch auf die Konversionsraten auf Ihrer Einkaufsseite aus und wirkt sich auch auf die SEO Ihrer E-Commerce-Seite aus.

Ein entscheidendes Stück Geschwindigkeit ist hervorragendes Hosting für die Qualität Ihres Einkaufserlebnisses. Auf der rechenoptimierten Plattform von WP Engine bieten wir ein verbessertes E-Commerce-Erlebnis für eine verbesserte Leistung aller Ihrer Einkaufsinhalte, statisch oder dynamisch. Und wir werden hier gleich über diese beiden unterschiedlichen Inhaltstypen sprechen, während wir uns mit den 6 Tipps und Tricks befassen. Jetzt übergebe ich es an meine Kollegin Catherine.

CATHERINE KELLY : Prost. Danke dafür, Jeremy. Heute werden wir sechs Tipps in Bezug auf WooCommerce, seine Konfiguration und die Einrichtung eines E-Commerce-Shops abdecken. Einigen von Ihnen erfahrenen Entwicklern werden Ihnen diese Tipps und Ratschläge ziemlich bekannt vorkommen, aber für einige der neueren Entwickler könnten Sie einige nützliche Erkenntnisse gewinnen.

Heute werden wir uns mit WooCommerce und Caching, Medienoptimierung, Suchoptimierung, Ajax-Warenkorbfragmenten, benutzerdefinierten Bestelltabellen und der Geschwindigkeit von Headless befassen. Als erstes werden wir also WooCommerce und Caching behandeln. Bevor wir darauf eingehen, möchten wir verstehen, welche verschiedenen Optionen Sie in Bezug auf Caching haben, was es ist, und dann können wir angehen, wie wir Verbesserungen daran vornehmen werden.

Caching kann also in Bezug auf Performance-Probleme den Eindruck eines heiligen Grals erwecken. Tatsächlich wurde Caching ursprünglich nicht in Bezug auf die Leistung entwickelt, sondern es war wirklich so, dass Computer immer wieder eine automatisierte Antwort auf dieselbe Anfrage haben, anstatt sie jedes Mal neu berechnen zu müssen. Caching ist eine Technik, die verwendet wird, um eine Antwort auf eine Anfrage vorübergehend zu speichern und dann dieselbe Antwort auf genau dieselbe Anfrage an dieselbe Ressource zu einem späteren Zeitpunkt zu liefern.

Es ist also ein bisschen wie eines dieser nervigen Kinder – Ihr nerviges Kind, das Ihnen jeden Tag immer wieder dieselbe Frage stellt, wie warum, warum, warum, und Sie einfach eine automatische Antwort darauf geben möchten. Und das kann wirklich gut funktionieren, und wenn Sie statische Informationen für statische Websites bereitstellen, geben Sie immer die gleiche Antwort. Dieser Ansatz funktioniert jedoch nicht so gut im Hinblick auf E-Commerce, da er einen Strich durch die Rechnung macht, da die Anfragen, die jedes Mal an den Server gesendet werden, nicht immer gleich sein werden und Sie müssen Handhabung und Kontrolle in Bezug auf Warenkörbe, verschiedene Anfragen von verschiedenen Benutzern zur gleichen Zeit.

Sie möchten sich auch an frühere Transaktionen erinnern, die Sie in Bezug auf Ihre Kunden haben, was sich in ihrem Einkaufswagen befindet, Sie möchten sich daran erinnern, was in Ihrem Geschäft nicht mehr verfügbar ist, damit der Einkaufswagen genau widerspiegeln kann, was diesem Benutzer serviert wird. Sie möchten in Bezug auf das Caching auch sicherstellen, dass Sie Kunden B keinen Warenkorb geben, der sich auf Kunde A bezieht, und dieser tatsächlich sehen kann, was jemand anderes tatsächlich bestellt, im Grunde genommen Informationen preisgibt, die Sie nicht möchten . Es gibt ein begrenztes Gleichgewicht, das Sie in Bezug auf das Caching haben können, das Sie haben – was ziemlich schwierig zu erreichen ist, wenn Sie versuchen, Ihren Kunden eine persönliche Note zu bieten, damit sie auf Ihrer Website aktiv bleiben. Also die verschiedenen Ebenen und Arten von Caches, die wir haben – einen Server-Cache.

Und der Server-Cache ist im Allgemeinen wie jeder andere Cache. Es ist im Grunde der Cache, der sich auf Ihrem Server befindet, wenn Sie die Seite erstellen, und Sie stellen ihn einer bestimmten Anfrage zur Verfügung. Wenn Sie direkt neben diesem Server stehen und eine Anfrage stellen, kann Ihre Antwort sofort erfolgen. Wenn Sie jedoch etwa 1.000 Kilometer entfernt sind, wie Ihre E-Commerce-Person oder Ihr Benutzer, kann es viel Zeit in Anspruch nehmen, bis diese Antwort sie erreicht.

Sie haben dann einen Anwendungscache. Und Anwendungscache in WordPress und WooCommerce, Sie können Plug-Ins verwenden, um ihn zu verwalten. Plug-Ins wie W3 Total Cache, WP Rocket haben alle Optionen zum Verwalten des In-Application-Cache und diese Plug-Ins speichern im Grunde eine temporäre Version einer angeforderten Seite und eine Datei auf ihren Servern. Dies kann jedoch eine sehr ineffiziente Art des Cachings sein und sollte nicht verwendet werden, wenn Sie die Möglichkeit haben, entweder auf dem Server selbst oder in einem Dienst wie beschleunigten Domänen oder Cloudflare, der den Cache global verteilt, zwischenzuspeichern.

Sie haben dann den Browser-Cache. Und der Browser-Cache ist im Grunde der Cache des Endbenutzers. Haben Sie zum Beispiel schon einmal etwas auf einer Website erlebt, das Sie aktualisiert haben, und Sie sehen das nicht automatisch im Frontend, wenn Sie Ihre Website entwickeln und überprüfen? Dies liegt daran, dass es in diesem tatsächlichen Browser zwischengespeichert wurde. Es ist im Grunde eine temporäre Version dieser Seite oder dieses Assets, die im Browser Ihres Benutzers auf Ihrem Computer oder Telefon gespeichert ist.

Es ist da, damit Sie dieselbe Seite oder dasselbe Asset nicht mehrmals herunterladen müssen, um die Anzeige dieser Seite zu beschleunigen, was wiederum ziemlich gut funktioniert, wenn Sie eine statische Website haben. Aber wenn Sie eine dynamische Website wie eine E-Commerce-Website haben, versuchen wir immer, Produkte, Beschreibungen und Informationen anzubieten. Es kann sein – es ist nicht so effektiv, wie Sie möchten.

Sie haben dann einen sogenannten Proxy-CDN-Cache. Ein Proxy-CDN-Cache ist ein Cache, der sich zwischen Ihrem Ursprungsserver – also dem Server, der die erste Originalseite entwickelt und präsentiert – und dem eigentlichen Browser des Benutzers selbst befindet. Es sind beschleunigte Domänen und Cloudflare ist eine Art Proxy-CDN. Und alle Anfragen und Antworten durchlaufen ihre Domänen, bevor sie den ursprünglichen Server erreichen.

Es handelt sich im Wesentlichen um eine Gruppe von Servern, die strategisch auf der ganzen Welt platziert sind, um die Bereitstellung statischer Inhalte für Ihre Benutzer zu beschleunigen. Es ist also fast so, als stünden sie direkt neben dem ursprünglichen Serving-Server, wenn sie 1.000 Meilen entfernt sind. So wird die Bereitstellung dieser Seite beschleunigt. Und sobald Ihre statischen Assets auf allen Edge-Servern an einem bestimmten Standort zwischengespeichert sind, werden alle nachfolgenden Besucher und Anfragen nach statischen Informationen von Ihren sogenannten Edge-Servern statt vom ursprünglichen Server geliefert, wodurch die Last reduziert und die Leistung beschleunigt wird , und Verbesserung der Skalierbarkeit.

Das alles funktioniert im Allgemeinen sehr gut in Bezug auf statische Websites, wie erwähnt. Aber E-Commerce-Caches machen einen Strich durch die Rechnung. Und der E-Commerce – der Grund dafür, dass ein Schraubenschlüssel in Arbeit ist, liegt in Bezug auf Ihre eingeloggten Seiten, Ihre Warenkörbe, Ihre Kassen, Ihre Wunschlisten, die ständig dynamisch aktualisiert werden. Sie sind also nicht statisch, wie Sie es beispielsweise auf einer normalen Blogging-Site benötigen würden.

Im Allgemeinen können Sie die GET-Anfrage zwischenspeichern. Und mit GET-Anfragen, oder wie der Name schon sagt, eine Anfrage, um eine Ressource zu bekommen. Auch wenn die GET-Anfragen wie erwähnt oft sicher zwischengespeichert werden können, möchten Sie die angemeldete Seite, die Warenkörbe und die Kassen nicht erneut zwischenspeichern. Sie möchten sie dem Kunden immer so frisch und neu wie möglich servieren, damit sie aktuell und genau sind.

Sie möchten also nichts aus dem Warenkorb liefern und nicht schreiben – schreiben Sie es nicht mit Cache. Wenn Sie etwas im Warenkorb haben, umgehen die meisten Server den Cache im Allgemeinen vollständig. Sie sind also wieder bei dem Problem, dass Sie es von Ihrem ursprünglichen Server und nicht von Ihrem CDN aus bereitstellen. Sie müssen also schlau sein und herausfinden, OK, wie kann ich statische Elemente von meinem CDN-Anbieter bereitstellen, aber immer die dynamischen Elemente von meinem eigentlichen Originalserver anwenden, damit alles aktuell und genau ist?

Also die Dinge, auf die Sie achten sollten – für den Server-Cache, da der Server die Webseite generiert, ermöglicht das Server-Caching ihm, sich Teile der Seite auf der ganzen Seite zu merken, die nicht jedes Mal von Grund auf neu generiert wird. Und mit dem Browser-Caching hilft dies dem Browser, sich zu merken, wie eine Webseite aussieht, sodass er keine Zeit damit verbringen muss, Daten mit dem Server auszutauschen. Und das ist, wie erwähnt, nützlich für Besucher, die auf mehrere Seiten zugreifen, da statische Dateien vorhanden sein können. Beispielsweise können StyleSheets, JavaScript-Dateien alle im Browser gespeichert werden.

Als Best Practices in Bezug auf das Caching sollten Sie daher HTML immer selektiv zwischenspeichern. Im Grunde sollte als erste Ebene alles zwischengespeichert werden, um wie ein statischer anonymer Inhalt zu fungieren – für einen statischen anonymen Inhalt. Versuchen Sie dann, den Cache für Cookies zu umgehen und alles, was sich in Ihrem Einkaufswagen befindet, in Ihrer Wunschliste zwischenzuspeichern, indem Sie ein Cookie verwenden, um bestimmte Elemente des Caches zu umgehen. Und stellen Sie dann immer Ihren Alterscache, Ihre Lebenszeit, damit in Bezug auf Ihre Cloudflare-Konfiguration ein. Das sollte sicherstellen, dass Ihr Cache immer auf dem neuesten Stand ist und dem ursprünglichen Ursprung entspricht.

Eines der Dinge, die wir aus Gesprächen mit unseren E-Commerce-Kunden verstehen, ist, dass dies ein Problem ist, das Entwickler im Allgemeinen selbst lösen müssen. Als Teil unserer Entwicklung in WP Engine arbeiten wir also tatsächlich an einer E-Commerce-spezifischen Lösung, die standardmäßig die Bereitstellung und Installation von WooCommerce mit all diesen standardmäßig festgelegten Caching-Regeln ermöglicht. Wir cachen also all das statische Zeug und dann nicht das ganze dynamische Zeug, damit es immer frisch ist. Es wird immer kontinuierlich für Sie aktualisiert. Und somit haben Sie keine Konflikte wie Warenkorbfragmentierung für Ihre Benutzer.

Medienoptimierung – eine weitere wichtige Sache in Bezug auf die Bereitstellung von Inhalten von Ihrem Server an Ihren Endbenutzer, der sich auf Ihrer E-Commerce-Site befindet, ist die Medienoptimierung. Das erste, worüber Sie nachdenken sollten, ist, was ist Medienoptimierung? Was können wir dagegen tun? Und wie können wir sicherstellen, dass Kunden ein schnelles, effektives und dynamisches Erlebnis beim Surfen und Nutzen ihrer Website haben?

Auch in Bezug auf Bilder und Videos sind unterschiedliche Arten der Optimierung erforderlich, um Ihren Kunden ein optimales Erlebnis basierend auf dem Gerät zu bieten, das sie tatsächlich verwenden. Die Medienoptimierung ist also ein Prozess, bei dem die besten Tools, fortschrittlichen Strategien und Experimente verwendet werden, da Sie immer experimentieren möchten, um die Leistung einer E-Commerce-Website zu erzielen. Sie wollen Asset-Optimierung. Es versucht, die Balance zwischen Effizienz und Zuverlässigkeit zu finden.

Daher möchten Sie Ihren Kunden die Inhalte immer auf dem schnellstmöglichen Weg liefern, ohne die Leistung Ihrer Website zu beeinträchtigen. Sie möchten die am besten aussehenden Inhalte in kürzester Zeit bereitstellen, indem Sie die verschiedenen Plattformen und Ressourcen berücksichtigen, auf denen die Medien konsumiert werden können, z. B. einen Laptop oder PC oder ein mobiles Gerät, und wie wir Bewegen Sie sich in die Welt der kopflosen, mehreren verschiedenen Arten von Geräten wie Fernsehbildschirmen, iPads und dergleichen, wo Inhalte auch von einem E-Commerce-Shop geliefert und konsumiert werden können.

Sie sollten also daran denken, die Bildoptimierung zu verbessern, um das Web zu verbessern – die Leistung Ihrer Website, um mehr Traffic zu generieren, diese Conversions zu steigern, den Umsatz Ihres Ladenbesitzers, Ihrer Marke oder Ihres Händlers zu steigern. Und einer der kritischsten Aspekte der Website-Optimierung wirkt sich auf die Suche und Optimierung aus. Wenn Ihre Bilder und Ihr Video also schnell und schnell sind, erhalten Sie tatsächlich eine bessere Bewertung in Bezug auf die Suchmaschinenoptimierung.

Assets optimieren macht nicht nur Ihre Produkte attraktiver und sichtbarer für potenzielle Kunden, es lässt sie auch häufiger in der Suche erscheinen, wiederum die Suchmaschinenoptimierung. Die wichtigsten Dinge, an die Sie sich erinnern sollten, sind das Lazy Loading für Bilder und Videos. Lazy Loading ist im Grunde eine Strategie, um nicht blockierende oder nicht kritische Ressourcen zu identifizieren und diese nur bei Bedarf zu laden. Also wird der Inhalt, im Grunde "above the fold", geladen und dem Benutzer als Priorität angezeigt, und dann verzögern wir den Rest des Renderings für alles unterhalb dieses Bildschirms, damit sie nach unten scrollen können.

Diese Optimierungstechnik ermöglicht es, zuerst die ersten Bilder und Inhalte anzuzeigen, die der Benutzer sieht. Und dann verschwenden wir keine Ressourcen, indem wir Dinge herunterladen, die sie noch nicht sehen und sehen werden. Google selbst empfiehlt Lazy Loading und bezeichnet es im Grunde als Zurückstellen von Off-Screen-Bildern. Und dann würde ich sagen, mach dir nicht die Mühe, es zu laden.

Sie können als Entwickler jedes Ihrer Bilder manuell markieren, wenn Sie möchten, oder Ihr Video als verzögert geladen. Aber wie Sie sich für eine E-Commerce-Website vorstellen können, wäre dies ein ziemlich großer Aufwand. Und wenn Sie sich nicht wohl fühlen, jedes dieser Bilder manuell zu markieren, können Sie ein Plug-In verwenden, um dies zu tun. Wenn Sie in Google nach den am besten ladenden Plug-Ins für WordPress suchen, finden Sie dort einige Empfehlungen für die besten zu verwendenden Plug-Ins.

Aber für uns und im E-Commerce würden wir empfehlen, sie zum Beispiel in WP Rocket einzukleben. Es bietet Adobe Lazy Loading-Optimierung. Die Dinge, die Sie auch berücksichtigen sollten, sind, sich immer an Ihre mobilen Benutzer zu erinnern. Ihre Bildschirme und ihre Leistung sind kleiner, sodass Sie keine riesigen Bilder laden müssen. Sie wollen das verkleinern.

Sie möchten die Komprimierung für alle Ihre Bilder verwenden, da dies enorme Bandbreiteneinsparungen von 40% bedeutet, und außerdem ist das Laden dieses bestimmten Bildschirms und Dateiformats der Schlüssel für Bilder. Da beispielsweise 600 x 600 Bilder in JPEG 100 Kilobyte groß sind, hat PNG 216 Kilobyte, während ein WebP nur 56 Kilobyte groß ist. Sie sollten also sehr vorsichtig sein, wenn Sie überlegen, was das Dateiformat ist, das ich für all diese Bilder verwenden werde, die bereitgestellt werden? Insbesondere von einer E-Commerce-Website könnte ich potenziell Tausende von Produkten, Tausende von Bildern und Hunderte von Videos haben, um diese Bilder und auch diese Inhalte zu sichern.

Sie möchten Ihre Bilder immer irgendwie skalieren. Sie können sich Online-Tools wie Imagify, Youoptimizer, TinyJPG und diese zur Optimierung Ihrer Bilder in WordPress ansehen. Imagify wird von demselben Team wie WP Rocket erstellt und ist ein sehr intuitives Plug-in, das Bilder automatisch mit drei verschiedenen Ebenen komprimiert – normal, aggressiv und ultra. Außerdem können Sie die Bildgröße anpassen, die für Ihre Endbenutzer geeignet ist.

Achten Sie auch auf Ihre Thumbnail-Größen. Halten Sie sie klein, weil sie sowieso klein sind. Halten Sie Hintergründe einfach. Verwenden Sie Tools wie remove.bg und Slazenger, um Hintergründe zu entfernen und Hintergründe zu aktualisieren, um sie zu vereinfachen. Und verwenden Sie dann auch ein CDN für eine schnellere globale Lieferung. Fügen Sie Ihren Bildern auch immer alternative hilfreiche Labels hinzu.

Dies hilft bei SEO, Suchmaschinenoptimierung. Und achte immer darauf, dass deine Labels auch wirklich den Inhalt deines Bildes oder deines Videos widerspiegeln. Als Entwickler können wir manchmal Abkürzungen wie RDHD verwenden oder einfach ein Y-Band verwenden. Wir wissen, dass das ein roter Hut mit einem gelben Band ist. Aber SEO würde das nicht wissen, also versuchen Sie, in Bezug auf die Bildpräsentation realistischer oder sprachlicher zu sein.

Verwenden Sie also auch für die Videooptimierung Datenkomprimierungstools. Denken Sie auch hier an Ihre mobilen Benutzer. Konvertieren Sie möglichst alles in HTML5-Formate. Entfernen Sie bei jedem Video ohne Ton den Ton vollständig. Es macht keinen Sinn, es zu haben, weil es nur Bandbreite verbraucht. Verwenden Sie erneut Content-Delivery-Netzwerke. Geben Sie Ihre Videoseiten an und verschieben Sie das Laden dieser Bilder immer, auch im Hinblick auf Lazy Loading, bis Ihre Seite vollständig heruntergeladen ist.

Suchmaschinenoptimierung – Wie wir vielleicht wissen, ist die Suchoptimierung im Grunde eine Methode, bei der wir Ihre Suche an einen bestimmten Dienstleister auslagern, der darin Experten ist, weil er die Effektivität Ihrer Suche und damit Ihren Umsatz für Ihren Händler steigern kann und Benutzer. Wie wir wissen, verfügt WooCommerce standardmäßig über eine eingebaute Suchfunktion. Aber es lässt viel zu wünschen übrig in Bezug auf die Funktionalität rund um Matches für Produktattribute, benutzerdefinierte Felder und Beschreibungen. Es ist sehr langsam. Es bietet keine gute Benutzererfahrung. Und am Ende des Tages ist es sehr ineffektiv.

Wenn Sie eine Suche nach – einer Produktsuche in Bezug auf WooCommerce durchführen, funktioniert dies häufig nicht so gut, wie Sie es möchten. Was Sie wirklich tun möchten, ist eine Suchfunktion mit einer starken Fehlertoleranz, damit die Customer Journey nicht unterbrochen wird. Sie möchten, dass sie in der Lage sind, eine starke automatische Vervollständigung der Abfrage zu haben und sie in einer natürlichen Sprachverarbeitung für bessere Ergebnisse zu haben, was alles bei der WooCommerce-Suche fehlt.

Sie möchten dann auch eine Funktion für umfassende Analysen zur einfachen Verbesserung der Berichterstellung haben, damit Sie die Effektivität Ihrer Suche, die Sie in Bezug auf die Antworten darauf aufgebaut haben, tatsächlich sehen und sehen können, wonach Ihre Kunden suchen, wie gut Stimmt das mit den Produkten überein, und welche Änderungen können Sie dann an der Konfiguration vornehmen, um das tatsächlich zu unterstützen? Helfen Sie Ihren Kunden im Grunde, schneller zu finden, wonach sie suchen.

Und was können wir tun? Wie ich bereits erwähnt habe, verwenden wir die Auslagerung der Suche, um die Reibung bei der Suche zu verringern und Kunden dabei zu helfen, das zu finden, was sie suchen. Es handelt sich also um einen Prozess, der im Wesentlichen von einem Dritten durchgeführt wird. Es verbessert die Suchfunktion von WooCommerce, da es in Woo integriert ist. Es hat im Grunde Widgets zum Filtern nach Bedarf. Es liefert den Benutzern Ergebnisse, die dazu beitragen können, das Markenvertrauen zu verbessern.

Es hat Autosuggest, und Sie können die Gewichtung konfigurieren und anpassen. Sie können Kundenergebnisse liefern – benutzerdefinierte Ergebnisse. Sie können, wie ich bereits erwähnt habe, eine sofortige automatische Suche und Suchanalysen haben, was von entscheidender Bedeutung ist. Es hat keinen Sinn, eine Suche durchzuführen, wenn Sie die Suche nicht analysieren können, um zu sehen, wie effektiv sie ist. Und es hilft auch bei der Feinabstimmung Ihrer SEO-Integration, um sicherzustellen, dass Kunden finden, was sie wollen. Wenn sie auf Google suchen, gehen sie auf diese bestimmte Website, je nachdem, wonach Sie suchen.

Es hilft auch, die Absichten der Kunden aufzudecken und Daten zu den Interessen der Kunden offenzulegen. Was suchen sie? Was wollen sie kaufen? Was zieht sie auf Ihre Website? Wonach suchen sie?

Unsere Empfehlung für die Suche ist die Suche nach Autocomplete. Machen Sie also diesbezüglich Vorschläge. Und immer die Fehlerkorrektur aktiviert haben. Wenn also jemand in Bezug auf ein Produkt etwas Falsches eingegeben hat, versuchen Sie, sich das nicht zu merken. Versuchen Sie, sich immer die richtige Schreibweise oder Beschreibung in Bezug auf ein Produkt zu merken. Wenn Sie die Suche auf Ihrer Website aktiviert haben, lassen Sie niemals zu, dass ein Benutzer in eine Sackgasse gerät.

Habe immer eine Seite. Auch wenn sie nach etwas suchen, das sich nicht auf Ihrer Website befindet, leiten Sie sie auf eine Seite weiter, auf der steht, dass wir dieses bestimmte Produkt derzeit nicht finden können. Bitte wenden Sie sich an unsere Verkaufsabteilung usw., und wir können Ihnen dabei helfen. Dies ist eine bessere Erfahrung für diesen bestimmten Benutzer und würde auch Vertrauen bei diesem Kunden schaffen.

Immer optimieren. Wenn Sie analytische Recherchen auf der Grundlage dessen durchführen, wonach Kunden suchen, optimieren Sie in Bezug auf diese Begriffe, damit andere Kunden, die dann wieder nach ihnen suchen, sie tatsächlich entdecken können. Verwenden Sie Tags, Titel und Beschreibungen für alle Ihre Produkte. Sie sind das Brot und die Butter Ihrer Suche.

Stellen Sie also sicher, dass alle Ihre Daten korrekt sind, dass sie das Produkt widerspiegeln, und beschreiben Sie immer so viele einzelne Produkte wie möglich, die sich auf einer bestimmten Händlerseite befinden. Konfigurieren Sie Ihre Suche für Mobilgeräte. Und die mobile Suche unterscheidet sich ein wenig von der Laptop-Suche in Bezug auf die Website, sagen wir mal. Stellen Sie einfach sicher, dass Sie dies in Ihrer Suche konfiguriert und aktiviert haben. Und beziehen Sie sich immer auf Ihre Analysen.

In Bezug auf WP Engine haben wir uns mit ElasticPress zusammengetan, um im Grunde genommen ein Premium-Such-Plug-in anzubieten, das automatisch als Standard dient und als Teil unseres E-Commerce-Angebots installiert wird. Es bietet alles von Autosuggest, Gewichtung, Kundenergebnissen und vielem mehr.

Und jetzt bin ich mit meinen drei Tipps in Bezug auf Ratschläge und Anleitungen für WooCommerce so gut wie fertig und ich werde es wieder an Jeremy weitergeben. Also los, Jeremy. Danke schön.

JEREMY BENOIT: Ein weiterer Bereich, den man sich ansehen sollte, ist das AJAX-Wagenfragment. Das AJAX-Cart-Fragment ist ein gesuchter Code. Es ist dafür bekannt, dass es Verzögerungen verursacht, Serverspitzen verursacht und unnötig läuft. Aber ist das AJAX-Cart-Fragment wirklich so schlimm?

Nun, sein Zweck ist es, den Warenkorb mit neuen Produkten, neuen Produktpreisen, neuen Produktmengen zu aktualisieren und Preise zu berechnen, ohne ein Neuladen der Seite zu erzwingen. Das Warenkorbfragment-Agentenskript wird jedoch auf jeder Seite ausgeführt – der Startseite, der Produktseite und sogar Seiten, auf denen es keine Aktionen zum Hinzufügen zum Warenkorb gibt. Das könnte Ihre „Über uns“-Seite oder sogar Ihre „Kontakt“-Seite sein.

Nun, dieses Laufen oder diese Ausführung ist oft der Schuldige dafür, dass manchmal Serverspitzen oder unnötige Ressourcen verwendet werden, was die Leistung Ihrer Website und das Erlebnis Ihrer Käufer unterbricht. Im Idealfall sollte das Warenkorbfragment AJAX nur dort ausgeführt werden, wo Sie eine Aktion zum Hinzufügen zum Warenkorb haben oder wenn Sie einen dynamischen Warenkorb auf Ihrer Website haben, wo eine Aktion verwendet werden kann, um den Warenkorb zu öffnen oder dynamisch mit ihm zu interagieren. Was kann man also gegen das AJAX-Cart-Fragment tun?

Nun, meistens schlagen die Leute vor, wie wir es tun, dieses Warenkorbfragment zu deaktivieren, und es gibt zwei Möglichkeiten, das AJAX-Warenkorbfragment zu deaktivieren. A, Sie möchten ein Plug-in hinzufügen, das eine Warenkorbfragment-Deaktivierungsfunktion hat. Es gibt einige Plug-Ins, die Ihr Warenkorbfragment deaktivieren können. Aber die andere Möglichkeit ist, wenn Sie mit der Bearbeitung von PHP vertraut sind, können Sie die Warenkorbfragmentierung deaktivieren, indem Sie die Datei functions.php Ihres Themas bearbeiten.

Es gibt einige Risiken. Bei einigen Einkaufswagen-Widgets können Probleme auftreten, wenn Sie das Einkaufswagenfragment deaktiviert haben. Sie möchten also Ihre Einkaufswagen-Widgets testen, nachdem Sie sie deaktiviert haben, um sicherzustellen, dass sie wie gewünscht funktionieren.

Der nächste Trick oder Tipp besteht nun darin, die benutzerdefinierte Bestelltabelle zu verwenden, sobald sie veröffentlicht wurde. Sie fragen sich vielleicht, was meinst du? Später, in diesem – in DE{CODE}, hören Sie von WooCommerce über die neue benutzerdefinierte Bestelltabelle, die später in diesem Jahr veröffentlicht wird. Und die WooCommerce-Tabelle ist – die Auftragstabelle hat ein Strukturdilemma. Viele von Ihnen wissen, dass dies oft als Grund für schlechte Skalierung genannt wird. Aber es kann auch ein Problem für die Geschwindigkeit sein, wenn es um Interaktionen geht, die sich mit Produkten oder Interaktionen befassen, die sich mit Bestellungen und manchmal sogar Plug-in-Daten befassen.

Im Moment verwendet WooCommerce die Post-Meta-Tabelle, in der eine Vielzahl von Dateneinheiten gespeichert sind, darunter Bestellungen und Produkte sowie einige hinzugefügte Plug-in-Daten, und jedes Mal, wenn eine dieser Einheiten aufgerufen wird, treffen sie alle gleiche Quelle. Sie können sich also vorstellen, diesen Stau zu entlasten, indem Sie benutzerdefinierte Bestelltabellen erstellen, um WooCommerce eine strukturelle Integrität einer echten E-Commerce-Engine hinzuzufügen und die Geschwindigkeit jeder Art von Bestellaktivität zu verbessern. Dies ist eine großartige Unterstützung, insbesondere für Websites mit hohem Datenverkehr und hohem Bestellvolumen oder sogar Websites mit einem sehr großen Produktkatalog.

Durch diese drei verschiedenen Arten von Tabellen, neue Kerntabellen für die Kernreihenfolgeinformationen, neue Plug-in-Tabellen speziell für Plug-in-Daten und neue Metatabellen für jede Art von benutzerdefinierten Metadaten, die ein Entwickler speichern muss, wird das entlastet der Engpass, den die Post-Meta-Tabelle zuvor und derzeit für die Interaktionen Ihrer Bestellungen hat. Es wird auch dedizierte Indizes für diese Tabellen geben, die das Abrufen dieser spezifischen Entitäten in jeder dieser Tabellen beschleunigen werden. Und Sie werden später in DE{CODE} mehr über benutzerdefinierte Bestelltabellen erfahren.

Werfen wir also einen Blick auf die dritte Verbesserung, die Geschwindigkeit von Headless. Dieser Tipp lautet also Headless, denn Headless, der Headless Stack, erhöht die Geschwindigkeit um Größenordnungen. Der JavaScript-Code im Frontend Ihrer Headless-Infrastruktur ist viel schneller und in einigen Fällen 10-mal schneller als die herkömmliche WordPress-Infrastruktur. Wir haben sogar Kunden in unserer Atlas-Infrastruktur, die bei allen Lighthouse-Metriken einen 6-fachen Anstieg verzeichnen.

Und bei WP Engine haben wir eine Headless-Infrastruktur namens Atlas. Diese Infrastruktur ermöglicht es – hat auch eine Komponente namens Content Engine, die die Geschwindigkeit des Abrufs aller Arten von statischen und dynamischen Inhalten in Ihrer WooCommerce-Instanz erheblich erhöht. Headless-Infrastrukturen ermöglichen es Ihnen auch, Back-End-Integrationen anzupassen und schaffen Möglichkeiten für blitzschnelle Optimierungen mit den Anwendungen von Drittanbietern, mit denen Ihre WooCommerce-Site integriert werden muss. Und das ist mein letzter Tipp für heute.