Ein Projekt, das sich auf die Optimierung der Core Web Vitals und die Migration zu Next.js konzentrierte, führte zu einer Steigerung der Conversion-Raten um 5% und der Seitenaufrufe pro Sitzung um 87 %.
QuintoAndar ist ein brasilianisches Proptech-Unternehmen, dessen Produkte digitale End-to-End-Lösungen für Immobilien bieten. In diesem Jahr haben wir ein Projekt zur Verbesserung der Leistung eines Inhaltshubs in unserer App durchgeführt. Die Ergebnisse waren ermutigend: Wir konnten die Anzahl der Nutzerzugriffe und die Conversion-Messwerte steigern.
46 %
Absprungrate senken
87 %
mehr Seiten pro Sitzung
5 %
Verbesserung der Conversion während der Validierungsphase
Herausforderungen
Unsere App bietet einen Contenthub für Eigentumswohnungen mit über 40.000 Seiten, auf denen Nutzer Informationen zu ihren Unterkünften erhalten, Fotos der Gemeinschaftsbereiche ansehen, sich über die Nachbarschaft informieren und verfügbare Einträge zur Miete oder zum Verkauf finden können. Diese Seiten sind für QuintoAndar sehr wichtig:
- Sie sind eine wichtige Quelle für organische Zugriffe. Die Zahl der Nutzer, die über Suchmaschinenergebnisse auf Ihre Website gelangen, steigt stetig an.
- Sie haben im Vergleich zu anderen Seiten mittel- bis langfristig hohe Conversion-Raten.
Bei der Leistung und Nutzerfreundlichkeit dieser Seiten gab es jedoch Herausforderungen:
- Die Leistung der Website, gemessen anhand der Core Web Vitals, war nicht optimiert. Außerdem gab es bekannte Probleme mit langsamen Seitenladezeiten, langsamer Reaktion auf Nutzereingaben und Layoutinstabilität.
- Die Absprungraten waren hoch, auch wenn wir sie höher als in anderen Teilen der App erwartet hatten.
- Die Aktualisierung der Nutzerfreundlichkeit von Seiten in der Google Suche, die zu diesem Zeitpunkt noch nicht veröffentlicht war, sollte Core Web Vitals in den Ranking-Algorithmus einbeziehen. Das bedeutete, dass sich die Seitenleistung auf die Darstellung der Suchergebnisse auswirken konnte.
Gleichzeitig haben wir einige Verbesserungsmöglichkeiten für die Entwicklererfahrung identifiziert, die in anderen Projekten im gesamten Unternehmen zu Vorteilen führen könnten:
- Unsere serverseitige Renderinglogik, mit der alle Seiten mit hohem Traffic gerendert werden, einschließlich der Seiten für Wohngemeinschaften, wurde intern erstellt und wurde zu komplex, um sie zu pflegen und neue Mitarbeiter einzuarbeiten.
- Für wichtige Funktionen zur Optimierung der App-Leistung, wie die Code-Spaltung, war außerdem eine benutzerdefinierte Einrichtung und manuelle Arbeit der Entwickler erforderlich.
- QuintoAndar hat über 30 React-Webanwendungen. Es ist eine mühsame Aufgabe, Updates für diese Anwendungen bereitzustellen und sie gemäß den Best Practices zu verwalten.
Vorgehensweise
Wir haben ein Projekt zur Leistungsoptimierung des Content-Hubs für Eigentumswohnungen gestartet, um die Nutzerfreundlichkeit zu verbessern. Diese Verbesserungen könnten zu mehr Conversions, besserer SEO und besserer Nutzerfreundlichkeit führen. Diese Initiative war auch eine gute Gelegenheit, die Entwicklerfreundlichkeit zu verbessern.
Zu Next.js migrieren
Die neue Version der Seite für das Mehrfamilienhaus wurde mit Next.js implementiert. Da der Content-Hub für Eigentumswohnungen weitgehend unabhängig von anderen Teilen der App ist, schien er ein guter Kandidat für das Testen eines neuen Frameworks zu sein. So können wir den Umfang der Migrationsarbeiten nachvollziehen und bewerten, wie die Funktionen von React helfen könnten, ohne die anderen React-Apps in QuintoAndar zu beeinträchtigen.
Eine wichtige Anforderung war es, dafür zu sorgen, dass Seiten von Suchmaschinen gecrawlt werden können. Next.js erfüllt diese Anforderung, da es standardmäßig serverseitiges Rendering unterstützt und keine benutzerdefinierte Einrichtung erforderlich ist. Die Dokumentation erleichtert es erheblich, Wissen zu Aufgaben wie dem Abrufen von Daten auf dem Server zu teilen und neue Entwickler einzuarbeiten. Außerdem wird durch das serverseitige Rendering die Leistung verbessert, was sich beispielsweise anhand des Messwerts First Contentful Paint (FCP) ablesen lässt.
Das Framework bietet weitere leistungsfreundliche Funktionen wie die automatische Code-Spaltung und das prefetching. Obwohl die vorhandene Struktur bereits solche Funktionen bot, verzögerte die zusätzliche Arbeit, die von den Entwicklern erforderlich war, ihre Einführung. Beispielsweise musste das Code-Splitting auf Seiten- oder Komponentenebene manuell erfolgen.
JavaScript-Ressourcen optimieren
Im ersten Schritt wurde nicht verwendeter Code entfernt. Wir haben uns die Berichte des Webpack Bundle Analyzers angesehen, in denen der Inhalt jedes JS-Bundles angezeigt wird, und alle Drittanbieter-Scripts sorgfältig geprüft. So konnten wir einige Tracking-Bibliotheken entfernen, die auf dieser Seite nicht verwendet wurden.
Unser Team hat auch die Leistungskosten der vorhandenen Funktionen bewertet. Für die Funktion der Schaltfläche „Mag ich“ war beispielsweise viel JS erforderlich. Auf der Seite für Wohngemeinschaften haben jedoch weniger als 0,5% der Nutzer mit der Schaltfläche interagiert, die in anderen Teilen unserer App verfügbar und häufiger verwendet wird. Nach einer Diskussion zwischen den Teams für Entwicklung und Produkt haben wir uns entschieden, diese Funktion zu entfernen.
Andere JS-Optimierungen waren bereits vorhanden, z. B. die statische Komprimierung mit Brotli, die bei der Build-Generierung mit BrotliWebpackPlugin
durchgeführt wurde und auch auf andere Arten von statischen Ressourcen angewendet wurde. Zuerst haben wir uns auf die Komprimierung durch das CDN verlassen. Mit Brotli konnte die JS-Größe im Vergleich zu gzip um 18% reduziert werden. Als wir dann aber zur Brotli-Komprimierung während der Buildzeit wechselten, konnten wir eine Reduzierung um 24% erzielen.
Bildressourcen optimieren
In der mobilen Version nimmt ein Hero-Image den größten Teil des Bereichs „above the fold“ ein. Es ist auch der Largest Contentful Paint (LCP) der Seite.
Bisher hatten alle Bilder bereits die Attribute srcset
und sizes
, um responsive Bilder auszuliefern. Außerdem haben wir Thumbor verwendet, um Bilder bei Bedarf zu verkleinern, und unser CDN so konfiguriert, dass sie effizient im Cache gespeichert werden.
Moderne Mobilgeräte haben Displays mit sehr hoher Pixeldichte. Das bedeutet, dass der Browser bei Verfügbarkeit drei- oder vierfache Versionen des Bilds rendert. Je höher die Auflösung ist, desto schwieriger ist es für das menschliche Auge, die Unterschiede wahrzunehmen. Die Dateigrößen nehmen jedoch trotzdem zu. Durch die Begrenzung der maximalen Bildauflösung wurde die Bildgröße verbessert, ohne die Nutzerfreundlichkeit zu beeinträchtigen. Wir haben die Auslieferung des Hero-Bilds auf die 2-fache Version beschränkt, die etwa 35% kleiner als die 3-fache Version und 50% kleiner als die 4-fache Version ist.
Zum Schluss haben wir eine Vorab-Ladestrategie verwendet, um das Bild so schnell wie möglich herunterzuladen und anzuzeigen. Wir freuen uns, den LCP-Messwert verbessern zu können.
<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">
Die in Next.js integrierte Bildkomponente umfasst viele dieser Optimierungen, z. B. responsives Ändern der Größe und priorisiertes Laden. Im Rahmen dieses Projekts haben wir die vorhandenen Bilder nicht migriert, um diese Komponente zu verwenden. Wir planen jedoch, sie in neuen Funktionen einzusetzen.
Layoutverschiebungen reduzieren
Auf der Seite für das Mehrfamilienhaus gab es einige Probleme mit dem Cumulative Layout Shift (CLS). Die für die Layoutänderungen verantwortlichen Elemente wurden nur auf dem Client gerendert, z. B. serverseitiges Markup mit clientseitig gerenderten Komponenten oder Bilder ohne definierte width
- und height
-Attribute.
Um diese Probleme zu beheben, legen wir nach Möglichkeit genaue Abmessungen für diese Elemente fest oder schätzen die Werte mit min-height
. Es gibt noch weitere Möglichkeiten, z. B. die Verwendung der CSS-Eigenschaft aspect-ratio
. Außerdem haben wir Platzhalter erstellt, um zu verhindern, dass dynamisch gerenderte Komponenten zu Layoutverschiebungen führen.
Änderungen schrittweise einführen
Unser Team wollte prüfen, ob die optimierte Version der Hub-Seite für Eigentumswohnungen die Nutzerfreundlichkeit verbessert. Dazu haben wir eine progressive Einführungsstrategie verfolgt:
- In der ersten Phase wurde die neue Version für einige ausgewählte URLs veröffentlicht, sodass sie nur von wenigen hundert Nutzern pro Tag gesehen wurde.
- In der zweiten Phase wurde es für mehr Seiten veröffentlicht, was einigen tausend Nutzern pro Tag entsprach.
- In der dritten und letzten Phase wurde es für alle Seiten veröffentlicht und das Roll-out für alle Nutzer abgeschlossen.
Während dieser Zeit hat das Entwicklerteam die Seitenleistung in der Produktion kontinuierlich gemessen und an Verbesserungen gearbeitet. Außerdem verglich das Team die Geschäftsmesswerte der neuen und der vorherigen Version. Die Ergebnisse in diesem Validierungszeitraum waren vielversprechend.
Ergebnisse
Das Team nutzte SpeedCurve, um kontinuierlich Lab-Tests auf der Seite des Wohnkomplexes auszuführen. Das sind die Ergebnisse für die mobile Version:
Lab-Messwert | Vorher | Nachher | Differenz |
---|---|---|---|
Largest Contentful Paint (LCP) | 2,41 Sekunden | 1,48 Sekunden | -39% |
Zeit bis Interaktivität (Time to Interactive, TTI) | 12,16 Sekunden | 7,48 Sekunden | -39% |
Gesamte Blockierzeit (Total Blocking Time, TBT) | 1.124 Millisekunden | 1.056 Millisekunden | -4 % |
Cumulative Layout Shift (CLS) | 0,0402 | 0.0093 | –77% |
Außerdem wollten wir die Auswirkungen auf unsere echten Nutzer prüfen. Anhand von Felddaten, die mit Instana Website Monitoring erfasst wurden, haben wir den Zeitraum von einem Monat vor und nach der Einführung untersucht. Beim Vergleich des 75. Prozentsatzes für mobile Nutzer haben wir festgestellt, dass der LCP um 26 % und die FID um 72 % gesunken ist.
PageSpeed Insights bietet einen Bericht zu Felddaten für die letzten 28 Tage. Allein für die am häufigsten aufgerufene Seite mit Informationen zu einem Mehrfamilienhaus gab es genügend Daten, um einen Bericht für Nutzer von Mobilgeräten zu erstellen. Stand November 2021 haben alle Core Web Vitals den Status „Gut“.
Während der schrittweisen Einführung haben wir einen Rückgang der Ausstiegsraten festgestellt. Als wir die Freigabe für alle Seiten abgeschlossen hatten, zeigte Google Analytics eine Abnahme der Absprungrate um 46 %, eine Steigerung der Seiten pro Sitzung um 87% und eine Erhöhung der durchschnittlichen Sitzungsdauer um 49 %. Bei bezahlten Suchanfragen war die Abnahme der Absprungrate noch größer und betrug 59 %. Das ist ein positives Zeichen für die Investitionen in Pay-per-Click-Anzeigen (PPC).
Was die Auswirkungen auf die Geschäftsmesswerte angeht, haben wir die Conversion-Raten für Transaktionen wie die Planung einer Besichtigung und die Bewerbung für die Anmietung oder den Kauf eines Anwesens analysiert. Während die Verbesserungen noch eingeführt wurden, hat unser Team die Conversion-Rate der vorherigen und der neuen Version verglichen. In derselben Woche verzeichnete die Gruppe von Seiten mit der neuen Version eine Conversion-Steigerung von 5 %, während bei den anderen Seiten derselbe Messwert leicht zurückging.
Fazit
Dieses Projekt ist der erste Teil einer langfristigen Migration von frameworklosem React zu Next.js. Die Teams, die seitdem an der Seite für Eigentumswohnungen gearbeitet haben, haben positives Feedback zur verbesserten Nutzerfreundlichkeit für Entwickler gegeben. Andere Teams, die neue Web-Apps erstellen mussten, haben dies bereits mit Next.js getan. Wir sind davon überzeugt, dass Next.js die Wartungsanforderungen vereinfachen und eine gemeinsame Basis für verschiedene Apps schaffen wird.
Insgesamt ist der Contenthub für Eigentumswohnungen in Bezug auf die absolute Anzahl der Nutzer und Transaktionen kontinuierlich gewachsen. Bei der langfristigen Analyse haben viele Faktoren dazu beigetragen, z. B. die Expansion von QuintoAndar und SEO-Initiativen wie die verbesserte Seitenindexierung. Bei diesem Projekt haben wir festgestellt, dass die Seitenleistung auch einer dieser Faktoren ist, der ein großes Potenzial für positive Conversion-Effekte hat.
Ein besonderer Dank geht an Pedro Carmo, den Produktmanager des SEO-Teams, der sich die Nutzerdaten genauer angesehen und alle Conversion-Analysen in dieser Fallstudie erstellt hat.