1200 % schnellere Ladezeit für PMG Search erreicht

Der Produce Market Guide (PMG) ist eine Ressource für Informationen, Trends und Datenanalysen zu Agrarrohstoffen. PMG ist ein Produkt von Farm Journal, das Informationen über frisches Obst und Gemüse bereitstellt und die branchenführende Quelle für Nachrichten, Informationen und Analysen ist.

Die erweiterte Suchfunktion auf der Website war langsam, was das gesamte Nutzererlebnis beeinträchtigte und zu einer steigenden Absprungrate führte. Die vorherige Version benötigte 17-25 Sekunden für die Durchführung einer Suche, einschließlich der Seitenladezeit, und weitere 15-20 Sekunden, bis die Ergebnisse angezeigt wurden.

Darüber hinaus wollte das Produktteam das Nutzerverhalten bei der Suche überwachen und ihnen die bestmögliche personalisierte Erfahrung bieten. Das Fehlen jeglicher technischer Unterstützung und einer fehlenden Integration mit einer Suchfunktion führte dazu, dass der Administrator das Nutzerverhalten nur erraten konnte.

Die Organisation war mit Drupal vertraut, da die Website bereits darauf basierte, jedoch ohne die gewünschten Funktionen.

Da nur wenige Änderungen an der Architektur erforderlich waren, entschied sich das gemeinsame Kunden-Anbieter-Team, die Suchfunktion schrittweise zu entkoppeln. Die neue Suchfunktion der Website wurde mit React & Elastic entwickelt, während die Gesamtarchitektur unverändert blieb.

• Suchanwendungen mit Facetten erstellen und Benutzeraktivitäten verfolgen, um ein besseres und personalisiertes Nutzererlebnis zu ermöglichen.
• Das Nutzererlebnis der Website durch die Bereitstellung schnellerer Ergebnisse verbessern.

• Die Architektur entwickeln, um die Daten auf dem Elastic-Server von Drupal aus zu indizieren und zuzuordnen, um ein effizientes, modernes Suchsystem zu erstellen
• Einen Backend-Dienst für die Zuordnung und Indizierung der Daten bei CRUD-Operationen (Create, Read, Update, Delete) auf der Website entwickeln
• Eine Logstash-Pipeline entwickeln, um Abfragen (hilft, das Nutzerverhalten zu verfolgen) auf dem Elastic-Server zu protokollieren und Kibana zur Datenvisualisierung einzurichten
• Verschiedene Testfälle für die Backend-Dienste und die React-App schreiben
• Die Benutzeroberfläche der Anwendung gemäß den Anforderungen verbessern
• Die Startzeit innerhalb eines Monats halten

Ein neues Design zur Integration der Facettensuche wurde geplant. Dies erforderte drei gleichzeitige Implementierungen.

Gemäß den Anforderungen des Kunden wurde ein Mapping auf dem ElasticSearch-Server erstellt und die Daten dort indexiert. Um den Anforderungen der von Kibana und Search Kit verwendeten Indexierungsmuster gerecht zu werden, wurden viele benutzerdefinierte Vorverarbeitungsschritte für die Search API geschrieben.

Nachdem die Elastic-Backend-Architektur entwickelt war, bestand eine der größten Herausforderungen beim Aufbau der Facettensuche darin, Searchkit und React in derselben Suchanwendung zu integrieren.

Dafür wurden das Frontend, die Logik und die Projektstruktur für die Suche in der Sandbox mit modernen Tools wie Babel und Webpack sowie Drittanbieter-Bibliotheken wie Searchkit entworfen und entwickelt.

Sowohl Logstash als auch Kibana basieren auf Elasticsearch. Während Logstash ein Open-Source-Tool zum Sammeln und Speichern von Logs für die zukünftige Verwendung ist, ist Kibana eine Weboberfläche, die eine kostenlose Open-Source-Analyse- und Visualisierungsplattform darstellt, um ein besseres Verständnis der Daten zu ermöglichen.

Die neue PMG-Website ist wesentlich benutzerfreundlicher mit Suchfunktion und lädt die Ergebnisse schneller als zuvor. Da der bereits bestehenden Website nicht viel hinzugefügt wurde, ist die neue Version nicht schwer zu warten.

Dank Logstash und Kibana kann der Administrator nun das Nutzerverhalten in der Suchanwendung verfolgen und das Nutzererlebnis personalisieren.

Das Projekt wurde innerhalb eines Monats nach den Prinzipien von SCRUM und AGILE abgeschlossen, wobei sich die Teams flexibel nach den Bedürfnissen organisierten.

Zuvor dauerte es 17-25 Sekunden, bis die Suche geladen war (einschließlich der Seitenladezeit) und weitere 15-20 Sekunden nach dem Laden der Seite, bis die Ergebnisse angezeigt wurden.