QuintoAndar konnte durch die Verbesserung der Seitenleistung die Conversion-Raten und die Anzahl der Seiten pro Sitzung steigern.

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 %.

Daniela Sayuri Yassuda
Daniela Sayuri Yassuda

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

%

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.

Eine Animation, die die Funktion „Mag ich“ zeigt. Es gibt eine Karte zu einer zur Vermietung stehenden Wohnung. Rechts unten auf der Karte befindet sich eine graue herzförmige Schaltfläche, die blau wird, wenn Sie darauf klicken.

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.

Die Seite der Wohnanlage Edifício Copan (São Paulo, Brasilien). Ein Foto, das auf Bodenhöhe aufgenommen wurde, zeigt die Kurven des Gebäudes.
Das Hero-Image einer Seite für ein Mehrfamilienhaus.

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.

Ein Bild, das ein Stadtgebiet in Google Maps mit einer roten Markierung in der Mitte zeigt.
Durch das Definieren von Abmessungen für Elemente wie das Kartenbild konnte der CLS gesenkt werden.

Ä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:

  1. 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.
  2. In der zweiten Phase wurde es für mehr Seiten veröffentlicht, was einigen tausend Nutzern pro Tag entsprach.
  3. 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%
Ergebnisse von Lab-Messwerten, die mit SpeedCurve erfasst wurden.

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.

Ein Liniendiagramm mit LCP-Werten, in dem die neue und die vorherige Version im aktuellen und im letzten Monat verglichen werden. Die Kurve für die neue Version liegt zwischen 2 und 4 Sekunden und bleibt die meiste Zeit unter der Kurve der vorherigen Version.
Ein Liniendiagramm mit FID-Werten, in dem die neue und die vorherige Version im aktuellen und im letzten Monat verglichen werden. Die Kurve für die neue Version bleibt die meiste Zeit unter 100 ms, während die Kurve für die vorherige Version einige Spitzen über 250 ms aufweist.
Mit Instana erfasste Ergebnisse für Feldmesswerte.

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“.

Screenshot des PageSpeed Insights-Berichts, der den Bereich „Felddaten“ zeigt Alle Core Web Vitals-Messwerte (FCP, FID, LCP, CLS) sind im Bereich „Gut“.
Die PageSpeed Insights-Daten zeigen, dass die Seite mit den meisten Zugriffen für mobile Nutzer gut funktioniert.

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).

Ein Screenshot einer Grafik aus Google Analytics. Hier werden die Absprungraten zwischen zwei verschiedenen Zeiträumen im März 2021 verglichen. Ab dem 17. März ist ein leichter Rückgang der Absprungrate zu verzeichnen. Am 24. März ist der Rückgang besonders stark.
In Google Analytics ist zu sehen, dass die Absprungrate gesunken ist, als wir die neue Version auf weiteren Seiten eingeführt haben.

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.

Zwei nebeneinander liegende Liniendiagramme, in denen die Conversions der aktuellen Woche mit denen der Vorwoche verglichen werden. Die linke Kurve bezieht sich auf die vorherige Version der Seite. Sie zeigt, dass die Conversion-Kurve für die aktuelle Woche etwas unter der der Vorwoche liegt. Die rechte Kurve bezieht sich auf die neue Version. Die Conversion-Kurve für die aktuelle Woche liegt etwas über der der Vorwoche.
In derselben Woche ist die Conversion für die neue Version gestiegen, während die vorherige Version leicht zurückgegangen ist.

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.