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 %
geringere Absprungrate
87 %
mehr Seiten pro Sitzung
5 %
Verbesserung der Conversion während der Validierungsphase
Herausforderungen
Unsere App verfügt über einen Content-Hub für Eigentumswohnungen mit über 40.000 Seiten. Hier können Nutzer Informationen zu ihren Immobilien erhalten, Fotos der Gemeinschaftsräume ansehen, sich über die Umgebung informieren und verfügbare Einträge für die Miete oder den Verkauf finden. 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.
In Bezug auf Leistung und Nutzererfahrung auf diesen 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.
- Das Update zur Nutzerfreundlichkeit von Seiten in der Google Suche, das damals noch nicht veröffentlicht wurde, würde Core Web Vitals in den Ranking-Algorithmus aufnehmen. Das bedeutete, dass sich die Seitenleistung auf die Anzeige der Suchergebnisse auswirken könnte.
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 Eigentumswohnungen, wurde intern erstellt und wurde zu komplex, um sie zu verwalten 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 mühsam, Updates für diese Anwendungen bereitzustellen und gemäß den Best Practices zu warten.
Vorgehensweise
Wir haben ein Projekt zur Leistungsoptimierung des Contenthubs für Eigentumswohnungen gestartet, um die Nutzerfreundlichkeit zu verbessern. Diese Verbesserungen könnten zu mehr Conversions, einer besseren SEO und einer besseren Nutzerfreundlichkeit führen. Diese Initiative war auch eine gute Gelegenheit, die Entwicklerfreundlichkeit zu verbessern.
Zu Next.js migrieren
Die neue Version der Eigentumswohnungsseite 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 schwierige Anforderung bestand darin, sicherzustellen, dass die Seiten weiterhin von Suchmaschinen gecrawlt werden konnten. Next.js erfüllt diese Anforderung, da das standardmäßige serverseitige Rendering unterstützt wird. Eine benutzerdefinierte Einrichtung ist überflüssig. Die Dokumentation erleichtert den Austausch von Informationen zu Aufgaben wie dem Datenabrufen auf dem Server und zur Einarbeitung neuer Entwickler. Durch das serverseitige Rendering werden auch Leistungsmesswerte verbessert, z. B. First Contentful Paint (FCP).
Das Framework bietet weitere leistungsfreundliche Funktionen wie die automatische Code-Spaltung und das Vorabladen. 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.
Es gab bereits andere JS-Optimierungen, wie die statische Komprimierung mit Brotli, die bei der Build-Erstellung mit BrotliWebpackPlugin durchgeführt wurde, und auch auf andere Typen statischer Ressourcen angewendet. 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 einer sehr hohen Pixeldichte, was bedeutet, dass der Browser 3- oder 4-fache Versionen des Bildes rendern würde, sofern verfügbar. 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 Begrenzung der maximalen Bildauflösung wurde die Bildgröße verbessert, ohne die Nutzererfahrung zu beeinträchtigen. Wir haben das Hero-Image auf maximal die 2-fache Version beschränkt, das etwa 35% kleiner als die 3-fache 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. Während dieses Projekts haben wir die vorhandenen Images nicht migriert, um diese Komponente zu verwenden, aber wir planen, sie in neuen Funktionen einzuführen.
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 sie für alle Seiten veröffentlicht und die Einführung für alle Nutzer abgeschlossen.
Während dieser Zeit misst das Engineering-Team kontinuierlich die Seitenleistung in der Produktion und arbeitete weiter an Verbesserungen. 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. Dies 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% |
| Gesamtblockierungszeit (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 tatsächlichen Nutzer prüfen. Anhand von Felddaten, die mit Instana Website Monitoring erhoben wurden, haben wir den einmonatigen Zeitraum vor und nach der Einführung betrachtet. Ein Vergleich des 75. Perzentils für mobile Nutzer zeigt, dass der LCP-Wert um 26 % und der FID-Wert 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. Seit November 2021 befinden sich alle Core Web Vitals in der Kategorie „Gut“.
Während der schrittweisen Einführung haben wir einen Rückgang der Absprungraten 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).
Bezüglich der Auswirkungen auf die Geschäftsmesswerte analysierten wir die Conversion-Raten für Transaktionen wie die Buchung einer Besichtigung und die Beantragung der Miete oder des Kaufs einer Immobilie. 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 der Seiten mit der neuen Version einen Anstieg der Conversions um 5 %, während die anderen Seiten einen leichten Rückgang bei demselben Messwert verzeichneten.
Fazit
Dieses Projekt ist der erste Teil einer langfristigen Migration von frameworklosem React zu Next.js. Die Teams, die seitdem an der Wohnungsseite gearbeitet haben, gaben positives Feedback über die verbesserte Entwicklerumgebung. 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.