Ein Projekt zur Optimierung von Core Web Vitals und der Migration zu Next.js führte zu einer Steigerung der Conversion-Raten um 5% und einer Steigerung der Seiten pro Sitzung um 87 %.
QuintoAndar ist ein brasilianisches Proptech-Unternehmen, dessen Produkte digitale End-to-End-Lösungen für Immobilien anbieten. In diesem Jahr haben wir ein Projekt durchgeführt, das darauf abzielt, die Leistung eines Content Hubs in unserer App zu verbessern, und erzielten ermutigende Ergebnisse bei der Steigerung der Nutzerzugriffe und der Conversion-Messwerte.
46%
niedrigere Absprungrate
87%
mehr Seiten pro Sitzung
5 %
höhere Conversion-Raten während der Validierungsphase
Herausforderungen
Unsere App verfügt über einen Content Hub für Eigentumswohnungen mit über 40.000 Seiten, auf dem Nutzer Informationen zu ihren Immobilien abrufen, Fotos der Gemeinschaftsräume ansehen, sich über das Viertel informieren und Immobilien zur Miete oder zum Verkauf finden können. Diese Seiten sind für QuintoAndar sehr wichtig:
- Sie sind eine wichtige Quelle organischen Traffics, da immer mehr Nutzer über Suchergebnisse auf sie gelangen.
- Im Vergleich zu anderen Seiten weisen sie mittel- und langfristig hohe Conversion-Raten auf.
Es gab jedoch auch Herausforderungen hinsichtlich der Leistung und Nutzererfahrung auf diesen Seiten:
- Die mit den Core Web Vitals gemessene Leistung war nicht optimiert und es gab bekannte Probleme in Bezug auf langsames Laden von Seiten, langsame Reaktionsfähigkeit auf Nutzereingaben und Layout-Instabilität.
- Die Absprungraten waren hoch, auch wenn wir erwartet hatten, dass sie höher ausfallen als in anderen Bereichen der App.
- Das Update zur Nutzerfreundlichkeit von Seiten in der Google Suche, das zu diesem Zeitpunkt noch nicht veröffentlicht wurde, würde Core Web Vitals in den Ranking-Algorithmus aufnehmen. Dadurch könnte sich die Seitenleistung auf die Darstellung der Suchergebnisse auswirken.
Gleichzeitig haben wir einige Möglichkeiten der Entwicklererfahrung identifiziert, die in anderen Projekten des gesamten Unternehmens zu Gewinnen führen könnten:
- Unsere serverseitige Rendering-Logik, die alle Seiten mit hohen Zugriffszahlen rendert, einschließlich der Seiten mit Eigentumswohnungen, wurde intern erstellt und war zu komplex, um Neueinstellungen zu verwalten und einzustellen.
- Wesentliche Funktionen zur Erzielung einer guten App-Leistung, z. B. Code-Aufteilung, erforderten außerdem eine benutzerdefinierte Einrichtung sowie manuelle Arbeit von den Entwicklern.
- QuintoAndar verfügt über mehr als 30 React-Webanwendungen. Es ist eine mühsame Aufgabe, diese Anwendungen zu aktualisieren und gemäß den Best Practices zu warten.
Vorgehensweise
Wir haben ein Projekt zur Leistungsoptimierung für den Content Hub für Eigentumswohnungen gestartet, um die Nutzererfahrung zu verbessern, da diese Verbesserungen zu mehr Conversions, einer besseren SEO und einer besseren Nutzerfreundlichkeit führen können. Diese Initiative war auch eine gute Gelegenheit, die Entwicklererfahrung zu verbessern.
Zu Next.js migrieren
Die neue Version der Seite mit Eigentumswohnungen wurde mit Next.js implementiert. Der Content Hub für Eigentumswohnungen ist weitgehend unabhängig von anderen Teilen der App und schien ein guter Kandidat, um ein neues Framework auszuprobieren. Wir könnten das Ausmaß der Migrationsmaßnahmen besser nachvollziehen und bewerten, wie die Funktionen dieser App helfen könnten, ohne die anderen React-Apps in QuintoAndar zu beeinträchtigen.
Eine harte Anforderung bestand darin, sicherzustellen, dass die Seiten von Suchmaschinen gecrawlt werden können. Next.js erfüllt diese Anforderung durch die standardmäßige Unterstützung des serverseitigen Renderings und macht eine benutzerdefinierte Einrichtung überflüssig. Die Dokumentation macht es einfacher, Wissen über Aufgaben wie das Datenabruf auf dem Server zu teilen und neue Entwickler zu gewinnen. Durch serverseitiges Rendering werden auch Leistungsmesswerte wie First Contentful Paint (FCP) verbessert.
Das Framework bietet weitere leistungsfreundliche Funktionen wie die automatische Codeaufteilung und den Prefetch. Obwohl die bestehende Struktur diese Funktionen bereits bot, wurde die Akzeptanz durch den zusätzlichen Arbeitsaufwand der Entwickler erschwert. Beispielsweise musste die Codeaufteilung auf Seiten- oder Komponentenebene manuell erfolgen.
JavaScript-Ressourcen optimieren
Zuerst wurde nicht verwendeter Code entfernt. Wir haben uns die Webpack Bundle Analyzer-Berichte angesehen, in denen der Inhalt jedes JS-Bundles angezeigt wird, und alle Drittanbieter-Skripts sorgfältig geprüft. Daher konnten wir einige Tracking-Bibliotheken entfernen, die auf dieser Seite nicht verwendet wurden.
Unser Team ging noch einen Schritt weiter und bewertete die Leistungskosten vorhandener Funktionen. Die Schaltfläche „Gefällt mir“ beispielsweise erforderte recht viel JS-Code, um zu funktionieren. Auf der Seite mit den Eigentumswohnungen haben jedoch weniger als 0,5% der Nutzer mit der Schaltfläche interagiert, die verfügbar und häufiger in anderen Teilen unserer App verwendet wird. Nach einer Diskussion sowohl über die Technik als auch für das Produkt haben wir uns entschieden, diese Funktion zu entfernen.
Andere JS-Optimierungen wurden bereits implementiert, z. B. die statische Komprimierung mit Brotli, die bei der Build-Erstellung mit BrotliWebpackPlugin durchgeführt wurde und auch auf andere Arten statischer Ressourcen angewendet wurde. Zuerst verwendeten wir die vom CDN bereitgestellte Komprimierung, woraufhin Brotli die Größe von JS im Vergleich zu gzip um 18% reduzierte. Doch wir stellten bei der Build-Erstellung auf die Brotli-Komprimierung um und konnten damit eine Reduzierung um 24% erreichen.
Bildressourcen optimieren
In der mobilen Version nimmt ein Hero-Image den Großteil des Bereichs „above the fold“ ein. Außerdem ist es 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 die Größe von Bildern bei Bedarf anzupassen, und unser CDN so konfiguriert, dass sie effizient im Cache gespeichert werden.
Moderne Mobilgeräte haben Displays mit einer sehr hohen Pixeldichte, d. h. der Browser rendert 3- oder 4-fache Versionen des Bildes, sofern verfügbar. Je höher die Auflösung, desto schwieriger wird es für das menschliche Auge, die Unterschiede wahrzunehmen, aber die Dateigrößen werden trotzdem zunehmen. 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, die etwa 35% kleiner als die 3-fache und 50% kleiner als die 4-fach-Version ist.
Zum Abschluss haben wir eine Strategie für das Vorabladen verwendet, um die Daten so schnell wie möglich herunterzuladen und anzuzeigen, und freuen uns darauf, den LCP-Messwert zu verbessern.
<link rel="preload" href="/img/450x450/892847321-143.0038687080606IMG20180420WA0037.jpg" as="image">
Die integrierte Bildkomponente von Next.js umfasst viele dieser Optimierungen, z. B. responsive Größenanpassung und priorisiertes Laden. Während dieses Projekts haben wir die vorhandenen Bilder nicht zur Verwendung dieser Komponente migriert, aber wir planen, sie in neue Funktionen einzuführen.
Layout Shift wird reduziert
Auf der Seite mit den Wohnungen gab es einige Probleme mit Cumulative Layout Shift (CLS). Die für die Layoutverschiebungen verantwortlichen Elemente wurden nur im Client gerendert, z. B. das serverseitige Markup mit clientseitig gerenderten Komponenten oder Bilder ohne definierte width- und height-Attribute.
Um diese Probleme zu lösen, legen wir nach Möglichkeit genaue Abmessungen für diese Elemente oder geschätzte Werte mit min-height fest. Es gibt weitere Optionen, z. B. die Verwendung der CSS-Property aspect-ratio. Außerdem haben wir Platzhalter erstellt, um zu verhindern, dass dynamisch gerenderte Komponenten Layoutverschiebungen verursachen.
Änderungen schrittweise einführen
Unser Team wollte überprüfen, ob die optimierte Version der Condominium-Hub-Seite die Nutzerfreundlichkeit verbessern würde. Um dies zu erreichen, haben wir eine gestaffelte Rollout-Strategie gewählt:
- In der ersten Phase wurde die neue Version für ein paar ausgewählte URLs veröffentlicht, sodass sie täglich nur von wenigen Hundert Nutzern gesehen wurde.
- In der zweiten Phase wurden mehrere tausend Nutzer pro Tag veröffentlicht.
- 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 dieses Zeitraums hat das Entwicklerteam kontinuierlich die Seitenleistung in der Produktion gemessen und kontinuierlich an Verbesserungen gearbeitet. Außerdem verglich das Team die Geschäftsmetriken der neuen und der vorherigen Version. Die Ergebnisse in diesem Überprüfungszeitraum waren vielversprechend.
Ergebnisse
Das Team führte mithilfe von SpeedCurve kontinuierlich Lab-Tests an der Seite mit den Eigentumswohnungen durch. 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% |
| Total Blocking Time (TBT) | 1.124 Millisekunden | 1.056 Millisekunden | -4 % |
| Cumulative Layout Shift (CLS) | 0,0402 | 0.0093 | -77% |
Wir wollten auch die Auswirkungen auf unsere echten Nutzer prüfen. Mit Felddaten, die mit dem Instana Website Monitoring erhoben wurden, haben wir uns den einmonatigen Zeitraum vor und nach der Einführung angesehen. Beim Vergleich des 75. Perzentils für mobile Nutzer hat sich gezeigt, dass der LCP um 26 % und der FID-Wert um 72 % gesunken sind.
PageSpeed Insights bietet einen Bericht mit Felddaten für die letzten 28 Tage. Allein die Seite mit den meisten Aufrufen hatte genügend Daten, um einen Bericht für mobile Nutzer zu erstellen. Seit November 2021 wurden alle Core Web Vitals der Kategorie „Gut“ zugeordnet.
Bei der schrittweisen Einführung sind die Absprungraten zurückgegangen. Als wir die Einführung für alle Seiten abgeschlossen hatten, verzeichneten wir in Google Analytics einen Rückgang der Absprungrate um 46 %, einen Anstieg der Seiten pro Sitzung um 87% und eine Steigerung der durchschnittlichen Sitzungsdauer um 49 %. Bei der bezahlten Suche sank die Absprungrate sogar um 59 % – ein positives Zeichen für Investitionen in Pay-per-Click-Anzeigen (PPC).
Im Hinblick auf die Auswirkungen der Geschäftsmesswerte haben wir die Conversion-Raten für Transaktionen wie das Planen einer Besichtigung und die Beantragung der Miete oder den Kauf einer Immobilie analysiert. Während die Verbesserungen noch durchgeführt wurden, hat unser Team die Konvertierung zwischen 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 auf den anderen Seiten bei demselben Messwert ein leichter Rückgang zu verzeichnen war.
Fazit
Dieses Projekt ist der erste Teil einer langfristigen Migration von React ohne Framework zu Next.js. Die Teams, die seitdem an der Seite mit Eigentumswohnungen gearbeitet haben, gaben positives Feedback zur verbesserten Entwicklererfahrung. Andere Teams, die für neue Webanwendungen Bootstrapping durchführen mussten, haben dies bereits mit Next.js getan. Wir sind davon überzeugt, dass Next.js die Wartung vereinfachen und eine Gemeinsamkeit zwischen verschiedenen Apps schaffen wird.
Insgesamt wächst der Content Hub für Eigentumswohnungen in Bezug auf die absolute Zahl der Nutzer und Transaktionen kontinuierlich. Laut Langzeitanalyse tragen viele Faktoren dazu bei, wie die Ausweitung der Geschäftstätigkeit von QuintoAndar und SEO-Initiativen wie eine verbesserte Seitenindexierung. Bei diesem Projekt haben wir festgestellt, dass auch die Seitenleistung einer dieser Faktoren mit großem Potenzial für eine positive Auswirkung auf Conversions ist.
Unser besonderer Dank gilt Pedro Carmo, Product Manager des SEO-Teams, der sich die Nutzerdaten genau angesehen und die Conversion-Analyse aus dieser Fallstudie erstellt hat.