So konnte QuintoAndar die Anzahl der nicht erfolgreichen Zugriffe um 80 % senken und die Conversions um 36 % steigern

Mari Viana

Daniel Ericeira

Luciano Holanda

Veröffentlicht: 22. Januar 2025

QuintoAndar konnte seine Webleistung deutlich verbessern, indem es den Wert „Interaction to Next Paint“ (INP) um 80 % reduzierte. Dies führte zu einer Steigerung der Conversions um 36% im Jahresvergleich. Da wir die Bedeutung schneller, responsiver Websites für die Nutzerinteraktion erkannt haben, haben wir den Code Gelb eingeführt, um die Leistung in allen Teams zu priorisieren.

Mithilfe von Tools wie Real User Monitoring (RUM) und Techniken wie async/await zur Optimierung langer Aufgaben und React-Übergänge konnte QuintoAndar die Interaktionszeiten reduzieren und die Nutzerfreundlichkeit verbessern. Die Änderungen, darunter das Entfernen von Drittanbieter-Pixeln und Rendering-Optimierungen, haben zu besseren Leistungsmesswerten geführt: 42% der Seiten erfüllen jetzt den Grenzwert „gut“ von 200 Millisekunden oder weniger, während es zu Beginn nur 32% waren.Nur 6,9% der Seiten bieten jetzt eine schlechte Leistung, während es zu Beginn 32% waren.

Das Problem

QuintoAndar ist die größte Plattform für Wohnraum in Brasilien. Es gibt Einträge auch in mehreren lateinamerikanischen Ländern. Die Suche ist der größte Onlinekanal im Immobiliensektor. Das bedeutet, dass organische Zugriffe für das Unternehmen von entscheidender Bedeutung sind. Außerdem ist eine hervorragende Nutzererfahrung entscheidend, um Nutzer zu binden und ihnen dabei zu helfen, ihr Traumhaus zu finden.

Anfang 2024 erkannte QuintoAndar, dass es zwar wahrscheinlich die beste Plattform auf dem Markt hatte, aber die Nutzerfreundlichkeit verbessern und so die Conversion-Raten steigern könnte. Das wurde mit der Einführung von Interaction to Next Paint (INP) als Core Web Vital deutlich. Tatsächlich hatte QuintoAndar im Vergleich zu unseren Mitbewerbern den schlechtesten INP.

Da das SEO- und Web-Performance-Team von QuintoAndar sich der negativen Auswirkungen eines hohen INP auf die Nutzerfreundlichkeit bewusst war, beschloss es, Maßnahmen zu ergreifen. Mit einem klar definierten Aktionsplan begann das Team, an einer Reihe von technischen und inhaltlichen Verbesserungen zu arbeiten, die nicht nur die INP reduzieren, sondern auch das Nutzer-Engagement und die Klickraten steigern sollten.

QuintoAndar konnte die INP um 80%senken, was zu einer deutlichen Steigerung der Conversions und Verbesserungen der Nutzerfreundlichkeit führte. In dieser Fallstudie werden die implementierten Strategien, die anstehenden Herausforderungen und die erzielten Ergebnisse untersucht.

Code Gelb: Webleistung priorisieren

QuintoAndar war sich bewusst, dass die Webleistung nicht nur für die Nutzerfreundlichkeit, sondern auch für den Erfolg des Unternehmens insgesamt entscheidend ist. Außerdem wusste das Unternehmen, dass eine schnelle und responsive Website zu mehr Interaktionen und einer besseren Nutzerbindung führt. QuintoAndar erkannte, dass das Erreichen dieser Ergebnisse kontinuierliche und koordinierte Anstrengungen im gesamten Unternehmen erfordert. Dies führte dazu, dass QuintoAndar den Code Gelb ausrief.

Das Konzept „Code Yellow“ wurde bei Google entwickelt, um die Geschwindigkeit zu verbessern. Dabei erhält eine benannte Führungskraft die Befugnis, unabhängig von den aktuellen Projekten andere Mitarbeiter im Unternehmen für die Unterstützung zu rekrutieren.

Bei QuintoAndar diente „Code Yellow“ als internes Benachrichtigungssystem, mit dem Verbesserungen der Webleistung innerhalb des Unternehmens priorisiert werden sollten. Die Ausrufung von „Code Gelb“ löste sofortige und koordinierte Maßnahmen verschiedener Teams im Unternehmen aus, um leistungsbezogene Probleme zu beheben.

So hat QuintoAndar wichtige Optimierungsmöglichkeiten erkannt und umgesetzt

Verzögerungen von über 200 Millisekunden sind für Nutzer wahrnehmbar und jede weitere Verzögerung beeinträchtigt die Nutzerfreundlichkeit. Deshalb ist der INP-Messwert so wichtig: Er bewertet die Reaktionszeit einer Seite auf Nutzerinteraktionen insgesamt, indem die Latenz aller Klicks, Berührungen und Tastaturinteraktionen erfasst wird, die während des gesamten Seitenlebenszyklus auftreten.

Um diesen Messwert zu verbessern, müssen Sie jedoch die Details genau unter die Lupe nehmen. Für QuintoAndar bestand der erste Schritt darin, zu ermitteln, welche Phasen und Elemente der User Experience für langsame Interaktionen verantwortlich waren. Dazu können Real User Monitoring (RUM)-Methoden verwendet werden, mit denen sich langsame Interaktionen detailliert erfassen lassen. Dazu gehört die Aufschlüsselung der INP in Unterteile wie Eingabeverzögerung, Verarbeitungszeit und Präsentationsverzögerung sowie die Analyse von Long Animation Frames (LoAF).

So konnte beispielsweise festgestellt werden, dass bestimmte Elemente der Hotelsuche beim 75. Perzentil eine Interaktionszeit von 4 Sekunden verursachten (betroffen waren 25% der Nutzer). Durch die Optimierung langer Aufgaben konnten viele langsame Interaktionen, die sich auf die INP auswirken, erheblich verbessert werden. Dazu wurde async/await verwendet, um im JavaScript-Code von QuintoAndar Yield-Punkte zu erstellen:

function yieldToMain () {
  return new Promise(resolve => {
    setTimeout(resolve, 0);
  });
}

So kann nützliches visuelles Feedback für den Nutzer schneller erfolgen. Im Fall von QuintoAndar wurde ein Ladesymbol gerendert, der Hauptthread wurde für andere Aufgaben mit möglicherweise höherer Priorität freigegeben und der Rest der ursprünglich zu erledigenden Arbeit konnte nach dem Übergeben fortgesetzt werden:

async function handleFilterClick () {
  showLoadingSpinner();
  await yieldToMain(); // Yield point
  await loadFilterData();
  showModal();
}

Hinweis:QuintoAndar wird bald auf geeignetere Ansätze umstellen, die für diese Art von Effekt entwickelt wurden, z. B. die Verwendung von scheduler.yield.

Ein weiteres weit verbreitetes Verfahren, das für die Entwicklung von Anwendungen mit React unerlässlich ist, ist die Verwendung von Übergängen. Da React jetzt Übergänge unterstützt, konnte QuintoAndar den useTransition-Hook verwenden, um den Anwendungsstatus zu aktualisieren, ohne die Benutzeroberfläche zu blockieren.

import React, { useState, useTransition } from 'react';

function App() {
    const [isPending, startTransition] = useTransition();
    const [value, setValue] = useState('');

    const onInputChange = event => {
      setValue(event.target.value) // high-priority

      startTransition(() => {
          // Time-consuming task—for example, filter and update the list...
      });
    }

    return (
      <div className="App">
        <input
          value={value}
          onChange={onInputChange}
          placeholder='Start typing...'
        />
      </div>
    );
}

export default App;

Neben den genannten Techniken implementierte QuintoAndar weitere Verbesserungen wie Memoisierung, Entprellung, Abbruchsteuerungen und Suspense, was zu Verbesserungen bei der INP führte.

Im vorherigen Codebeispiel könnte beispielsweise ein Anti-Rutsch-Mechanismus angewendet werden. Dabei wird die Ausführung einer Funktion verzögert, bis eine bestimmte Zeit der Inaktivität verstrichen ist. So werden unnötige Aktualisierungen vermieden, wenn der Nutzer schnell tippt.

useEffect(() => {
  const handler = setTimeout(() => {
    setDebouncedValue(value);
  }, 300); // Adjust debounce delay as needed

  return () => clearTimeout(handler);
}, [value]);

Außerdem konnte QuintoAndar durch die Verwendung der Gesamtblockierungszeit (Total Blocking Time, TBT) als Proxy für INP die Auswirkungen großer struktureller Änderungen schätzen, z. B.:

• Drittanbieter-Pixel vom Client entfernen
• CSS-in-JS wurde entfernt.
• Rendering-Optimierungen.

Initiativen wie diese sind wichtig, da sie sich direkt auf die Eingabeverzögerung beziehen, also die Zeitspanne zwischen dem Beginn einer Nutzerinteraktion und dem Start der dafür registrierten Ereignishandler. Eingabeverzögerungen nehmen oft zu, wenn andere Aufgaben ausgeführt werden, während der Nutzer mit der Seite interagiert. Bei QuintoAndar war die Eingabeverzögerung aufgrund der großen Anzahl von Aufgaben, die beim ersten Laden der Seite im Hauptthread ausgeführt wurden, einer der Hauptfaktoren für die INP.

Web-Leistungsverwaltung, um Leistungsrückgänge zu vermeiden

Es reicht nicht aus, Leistungsprobleme zu priorisieren und zu beheben, wenn Leistungsabfälle nicht verhindert werden können. Als QuintoAndar in der Vergangenheit Rückschläge erlitt, erkannte das Unternehmen, wie wichtig es ist, einen robusten Governance-Mechanismus zu schaffen, um zu verhindern, dass die Bemühungen zur Leistungssteigerung wieder ins Stocken geraten.

Der erste Schritt bestand darin, Benachrichtigungsmechanismen für jeden Messwert einzurichten, die nach Anwendungstyp oder Erfahrung segmentiert waren – oder nach beiden. Anhand von Messdaten, die von echten Nutzern erfasst werden, kann QuintoAndar die Leistung überwachen und diese Daten an eine Zeitreihendatenbank senden, in der mithilfe von Tools Dashboards und segmentierte Benachrichtigungen generiert werden können.

Zusätzlich zu festen Benachrichtigungen implementierte QuintoAndar auch Benachrichtigungen mit variablen Grenzwerten, die ungewöhnliche Ergebnisse erkennen, um das Entwicklungsteam zu benachrichtigen, wenn die Bedingungen außer Kontrolle geraten, noch bevor der feste Grenzwert erreicht wird. QuintoAndar hat außerdem ein zweiwöchiges Komitee eingerichtet, das die Grenzwerte für diese Benachrichtigungen anpasst.

Für den Umgang mit Vorfällen wurde ein Prozess erstellt, der mithilfe von Runbooks strikt eingehalten wurde. In diesen Runbooks wird das Verfahren für jede Art von Problem beschrieben, das auftreten kann. Diese Runbooks können von allen Entwicklern verwendet werden.

Um zu verhindern, dass INP-Probleme in die Produktion gelangen, implementierte QuintoAndar ein Canary-Release-System, mit dem ein neuer Release in mehreren Phasen für Nutzer bereitgestellt wird (z. B. schrittweise von 1%, 10%, 65 % und schließlich 100%). In jeder Phase des Neuausgleichs wird geprüft, ob die Canary-Version zu einer schlechteren Leistung für den Nutzer führt. In diesem Fall wird automatisch ein Rollback ausgeführt, um zu verhindern, dass nicht optimierte Funktionen vollständig in die Produktion übernommen werden.

Hier eine Zusammenfassung der wichtigsten Maßnahmen:

• Ausgeprägte Benachrichtigungen (fest und variabel) mit zweiwöchentlichen Ausschüssen zur Grenzwertoptimierung.
• Vorfallverfahren mit detaillierten Runbooks
• Canary-Releases mit Leistungsvalidierungen, um die Auswirkungen potenzieller Leistungseinbrüche zu begrenzen.

Ergebnisse

Durch die richtige Priorisierung der Leistung innerhalb der Organisation, ein spezielles Leistungsteam und die Verwendung von Optimierungstechniken konnten wir die INP um 80% reduzieren, wie aus unseren RUM-Daten hervorgeht. Im Diagramm unten sind die INP speziell für Mobilgeräte zu sehen. Dort ist ein anfänglicher schneller Rückgang zu erkennen. Diese Verbesserung wurde durch Fehlerkorrekturen für Interaktionen erzielt, die besonders problematisch waren. Außerdem ist ein kontinuierlicher Rückgang zu sehen, der sich über das gesamte Jahr hinweg fortsetzte. Das zeigt, wie wichtig der Governance-Prozess ist, um Rückfälle zu verhindern.

Diese Verbesserungen spiegelten sich auch im CrUX-Dashboard wider, in dem QuintoAndar jetzt eine INP von unter 200 Millisekunden im 75. Perzentil hat. 78% der Seiten haben eine Leistung unter diesem Grenzwert und nur 6, 9% der Seiten bieten eine schlechte Nutzererfahrung – eine Zahl, die Monat für Monat stetig gesunken ist.

Dieses Ergebnis war entscheidend, um einen direkten Einfluss auf das Geschäft von QuintoAndar zu haben. QuintoAndar verzeichnete einen Anstieg des Conversion-Volumens um 36% im Vergleich zum Vorjahr (neue potenzielle Kunden, im Fall von QuintoAndar also Nutzer, die einen Besichtigungstermin vereinbart haben). Dieses Ergebnis ist stark, aber nicht ausschließlich mit der verbesserten Interaktion verbunden, die durch eine bessere Nutzerfreundlichkeit erzielt wurde.

Fazit

Die Webleistung zu verbessern, ist eine Herausforderung. Manchmal kann es sogar überwältigend wirken. Als QuintoAndar gegründet wurde, wusste das Team nicht alles. Indem sie das Problem jedoch in einzelne Teile aufteilten, sich auf die wichtigsten Probleme konzentrierten und die Zusammenarbeit zwischen den Teams förderten, konnten sie echte Fortschritte erzielen. Nicht alles muss auf einmal behoben werden. Auch kleine, inkrementelle Änderungen können zu spürbaren Verbesserungen führen. Wenn Sie den ersten Schritt machen, sei es, die größten Engpässe zu identifizieren, mit Optimierungen zu experimentieren oder das Bewusstsein in Ihrem Team zu stärken, sind Sie auf dem Weg zu einer besseren Leistung und einer besseren Nutzererfahrung.