event-stories

Der Page Speed Hackathon

Wenn Performancekultur auf Gamifying und cross-diszipline Teamwork trifft

von  Brian Louis Ramirez
03.01.2022

(Foto von Camylla Battani on Unsplash)

 

“Nine women can’t make a baby in one month.” – Brooke’s law

In der Tat kann man die Produktentwicklung nicht beschleunigen, indem man sie mit mehr Ressourcen ausstattet. Aber das ist auch nicht immer das Ziel.

Wir bei REWE digital haben einen komplexen Tech-Stack für unsere Webseite: Dutzende Teams arbeiten an Hunderten von Microservices, die in verschiedenen Seitenvorlagen, Funktionen und Systemen enthalten sind. Um die Web-Performance - also das Lade- und Interaktionserlebnis - einer einzelnen Seite zu optimieren, muss man oft mit mehreren Teams an mehreren Dingen gleichzeitig arbeiten. Außerdem weiß nicht jeder, warum Leistung wichtig ist, wie man sie misst und wie man sie optimiert.

In diesem Herbst haben wir im Stationary Tribe einen Online-Hackathon veranstaltet, um unser Produkt weiterzuentwickeln und uns dabei auf die Web-Performance zu konzentrieren. Wir nannten ihn Days of Performance (DOPE).

Das Ziel von DOPE war es nicht, eine einzelne Funktion zu entwickeln, sondern vielmehr eine Leistungskultur in unserer Organisation zu schaffen. In meinem Blogbeitrag erfährst du, wie es funktionierte, was wir aus dem Prozess gelernt haben und wie du eigenen Performance-Hackathon organisieren kannst.

Um den Ball ins Rollen zu bringen, braucht man Sponsoren und ein Team von Organisatoren

Wenn wir an der Optimierung der Leistung arbeiten, erstellen wir in der Regel Tickets, z. B. "Entferne lazy-loading von above-the-fold-Bildern", an denen ein einzelnes Team für seinen Bereich arbeiten kann. 

Aber oft müssen wir an Aspekten der Website arbeiten, an denen mehrere Teams beteiligt sind. Wir hatten eine Initiative zur Verbesserung der Ladezeiten von Seiten, indem wir kritische CSS einfügten und unkritische CSS zurückstellten. Und ein Team hatte diese Änderungen bereits auf unserer REWE-Homepage umgesetzt, um sie zu einer unserer schnellsten Seiten zu machen. 

Vergleich von www.rewe.de vor und nach der Einbeziehung von kritischem CSS und der Verschiebung von unkritischem CSS

 

Glücklicherweise erkannte einer unserer Produktverantwortlichen, dass wir mit dieser Initiative nicht wirklich etwas bewirken würden, da sie nur für ein Team geplant war (lies gerne: "1 Frau, die in 9 Monaten 1 Baby macht"). Er hatte die brillante Idee:

"Warum machen wir nicht einen Performance-Hackathon für alle Teams im Tribe, anstatt nur eine einzige Initiative für ein Team?"

Ich war von der Idee begeistert und dachte, dass dies ein großartiger Weg wäre, um das Bewusstsein für Performance zu erhöhen, Wissen zu verbreiten und Performance aus verschiedenen Blickwinkeln zu betrachten.

Die Tribe-Führungsebene war ebenfalls vom Wert des Performance-Hackathons überzeugt und konnte dem Management die Idee so "verkaufen",dass der Mehrwert einer Basisveranstaltung an ihrem Potenzial zur langfristigen Verbesserung der Qualität unseres Produkts gemessen wird.

Zwei Product Owner, ein Engineering Manager, unser Tribe Master und ich bildeten ein Organisationsteam, um den Ball ins Rollen zu bringen, und trafen uns regelmäßig, um unsere Fortschritte zu besprechen:

  • eine Agenda zu erstellen
  • ein Hackathon-Branding entwickeln
  • Identifizierung der wichtigsten Leistungsengpässe und Auflistung möglicher Optimierungen
  • Vorbereitung von Ressourcen und Plattformen für die Veranstaltung
  • Rekrutierung von Mitgliedern der Geschäftsleitung zur Auswahl der Gewinner
  • HR einbeziehen, um Goodies zu sponsern

 

Mach’ die Leistungsoptimierung zu einem Spiel

Normalerweise fügen wir Ideen für Leistungsoptimierungen als Anforderungen zu Tickets für neue Funktionen oder als eigenständige Tickets hinzu. Das Problem ist nur, dass diese Tickets oft nicht an die Spitze der Backlogs gelangen.

Durch Gamification (d. h. Spielmechanik in einer Nicht-Spielumgebung) wollten wir das Interesse an dem Thema wecken und gleichzeitig die Produktivität steigern.

Im Idealfall ist die Leistungsoptimierung eine Teamleistung: Die Stakeholder sollten die Leistung im Blick haben, und die Produktteams sollten daran arbeiten, schnell zu werden und zu bleiben, ohne dass jemand es ihnen vorschreiben muss.

 

Die Herausforderung

Wile E. Coyote verkörpert die Web-Performance: der Nervenkitzel der Jagd, perfekte Geschwindigkeiten (z. B. der Roadrunner), die immer nur knapp außerhalb der Reichweite liegen, und nie aufgeben, selbst wenn Ideen scheitern.

Wir luden Front- und Backend Engineers, Product Owner, SEO-Expert:innen und Plattformexpert:innen zu einem "Warm-up-Meeting" ein, um die Veranstaltung vorzustellen und die Herausforderung zu präsentieren:

"Tu was du kannst, um die Leistung im Laufe von drei Tagen zu verbessern - und messe dein Ergebnis."

Ein großer Teil des Warm-ups bestand darin, die Bühne zu bereiten: Beispiele dafür zu liefern, warum Performance wichtig ist, welche Aspekte unserer Website verbessert werden müssen, und einen Überblick über Ideen zu geben, wie man Dinge messen und verbessern kann.

Der Vergleich der Performancekennzahlen zwischen den einzelnen Seiten und zwischen unseren eigenen Seiten und denen der Wettbewerber zeigte nicht nur, welche Seiten des Teams am schnellsten waren, sondern auch, welche das größte Verbesserungspotenzial hatten.

 

WebPageTest ist nützlich, um zu visualisieren, wer schnell ist und wer hinterherhinkt

 


Anderen zu helfen, zu verstehen, wie wir echtes “real user monitoring” (RUM) durchführen

 

Belohnungen für hervorragende Arbeit

Die Verleihung von Auszeichnungen ist eine gute Möglichkeit, Leistungen anzuerkennen. Selbst wenn sie nicht materiell sind, formalisieren und kodifizieren sie die soziale Anerkennung.

Wir haben mehrere Award-Kategorien geschaffen, um den Wettbewerb zu fördern und zu verdeutlichen, wie Performance unser Gesamtprodukt verbessern kann:

  • Biggest Global Improvement (“The Hammer”): Für die Verbesserung der Performance auf den meisten Seiten oder für die meisten Nutzer:innen oder für die Beeinflussung der Art und Weise, wie wir die Performance in unserer Organisation angehen, um dauerhafte Veränderungen zu erreichen.
  • Biggest Metric Improvement (“Metric Tonic”): Für die Lösung mit der größten Verbesserung bei einer oder mehreren Metriken.
  • Most Code Removed (“The Cutter”): Für die Lösung, bei der die meisten Bytes of Code entfernt wurden.
  • Low-Hanging Fruit (“The Carrot”): Manchmal sind die einfachsten Lösungen die effektivsten. Für die schnellste Lösung mit der größten Wirkung.
  • Out-of-the-Box Thinking (“The MacGyver): Für experimentelle, bahnbrechende Ideen.
  • Biggest Fail (“Egads!”): Es ist in Ordnung, zu scheitern, wenn wir dadurch lernen und uns verbessern können. Für die Lösung, die funktionieren sollte, aber nicht funktioniert hat.

 

Schick’ Menschen auf eine "Reise"

Wir haben Miro als Ausgangspunkt für Ideen und Fortschritte während DOPE genutzt. 

Eine Agenda am Anfang gab jedem "User" einen Startpunkt.

Wir sammelten Optimierungsthemen in einem Bereich. Sobald sich Teams gebildet hatten, konnten sie ein Thema aufgreifen und es wie bei einer Kanban-Tafel von "Doing" zu "Done" weiterführen.

Wer Hilfe bei der Erstellung eines Avatars, Tipps zur Messung der Performance vor und nach Änderungen oder zusätzliche Informationen benötigte, konnte sie in Miro finden.

Wir haben Miro verwendet, um Ideen zu organisieren und sie auf einer einfachen Kanban-Tafel zu verschieben.

 

Überraschungen auf dem Weg helfen, die Dinge spannend zu halten

Wie bei Videospielen gab es auch bei DOPE mehrere "Boni", die den Teilnehmer:innen die Möglichkeit gaben, sich zu entspannen und Spaß zu haben. Unser HR-Team sponserte das Mittagessen, verschiedene Kolleg:innen boten eine Yoga-Sitzung an, organisierten einen Filmabend und veranstalteten ein Pub-Quiz. Und anstatt Geld für Event-T-Shirts oder Kapuzenpullis auszugeben, haben wir an das Deutsche Rote Kreuz gespendet, was ebenfalls zu unserem Sinn und Zweck beitrug.

Wir haben Aufkleber mit den Auszeichnungen gedruckt.

 

Wirklich messbare Ergebnisse

Wie sehr haben wir unsere Performance durch DOPE verbessert? Wir haben zwar immer noch nicht bei allen wichtigen Seitentypen einen "guten" Core Web Vitals-Wert von 75 Prozent erreicht, aber wir haben große Fortschritte gemacht.

What we did

Result

Integrated an optimized navigation header allowed us to remove blocking legacy stylesheets and scripts

3.6s faster LCP2 on Search Results pages, 9.6s faster LCP2 on Recipe pages, 5.5s less blocking time2 on the Recipe Overview page

Changed the order of tags in the head

140ms faster head completion1

Added width and height attributes to product images on the Market Offers page

13% improvement on “good” CLS scores3

Added width and height attributes to images in the footer

Reduced layout shift to zero for the footer

Optimize images, lazy-load below-the-fold images and inline critical CSS on the landing page “What should I cook today?

1.05 MB (95%) fewer image bytes transferred on initial load, 0.5 (92%) less Cumulative Layout Shift

Created a Lighthouse-CI Github Shared Action

Enabling all teams to optimize perf and avoid regressions in continuous integration

Experiment with Priority Hints

500ms (10%) faster LCP on Recipe Detail Page1

Experiment with various RUM tools

Identified a tool with much potential for monitoring applications on the front- and back-end

Remove legacy code on Market pages

4500 lines of code removed (about 16% of the codebase) from one of our services

In-lined critical CSS, deferred non-critical JS and optimized caching

Search bar rendered immediately at start render

1 In a 3GFast network on an emulated mobile device in Chrome. 2 In Lighthouse audits (mobile). 3 Real User Monitoring at the 75th percentile.

 

Die Saat einer Performancekultur säen: die nächsten Schritte

Mit unserer Veranstaltung "Days of Performance" konnten wir nicht nur die Performancekennzahlen am Standort in kurzer Zeit verbessern, sondern - was vielleicht noch wichtiger ist - die Veranstaltung trug dazu bei, eine Performancekultur zu fördern, indem sie das Bewusstsein für Performance (auch bei den Führungskräften) schärfte, den Wissensaustausch, das Verständnis für andere Bereiche und die Problemlösung in den Teams förderte und die Mitarbeiter:innen motivierte, nach Möglichkeiten zur Verbesserung der Performance bei der täglichen Arbeit zu suchen.

Dem Feedback nach der Veranstaltung zufolge waren die Teilnehmer:innen überwiegend der Meinung, dass DOPE eine großartige Möglichkeit war, etwas über Leistung zu lernen und diese zu verbessern. Vor allem aber waren sie sich einig, dass die Optimierung ein normaler Bestandteil der Produktentwicklung sein muss.

Wie also kann man die Saat der Veränderung nähren und zum Keimen bringen? Wir werden:

  • Die Performance als Teil der kontinuierlichen Integration zur Vermeidung von Rückschritten prüfen
  • Performancebudgets einrichten
  • Aufgaben zur Performanceoptimierung in unseren Backlogs beschleunigen
  • Performance-spezifische Akzeptanzkriterien zu relevanten Tickets hinzufügen
  • Andere Perf-Hackathons in anderen Tribes oder Einheiten durchführen

 

Checkliste: Organisiere deinen eigenen Performance-Hackathon

Du arbeitest in einer großen Organisation und ihr habt Probleme, die Performance-Optimierung durchzusetzen? So könntest du beginnen:

  1. Bringen das Management dazu, die Veranstaltung zu sponsern
    Warum sollten sie das tun? Für unmittelbare Leistungsverbesserungen, Teambildung, Wissensaustausch und Geschäftsentwicklung.
  2. Organisieren den Hackathon in einem funktionsübergreifenden Team
    Die Organisation einer Veranstaltung ist mit viel Arbeit verbunden. Teilt euch die Aufgaben (Branding/Marketing, Logistik, Forschung, Inhalte) mit anderen auf, die eure Leidenschaft teilen, und trefft euch regelmäßig, um die Fortschritte zu besprechen.
  3. Wissen teilen
    Versucht alle auf den gleichen Stand zu bringen, indem ihr im Vorfeld der Veranstaltung Erkenntnisse und Optimierungstechniken austauscht. Bezieht auch die Teilnehmer:innen in den Wissensaustausch ein.
  4. Macht ein Spiel daraus - und habt Spaß!
    Wenn die Teilnehmer:innen die Freiheit haben Ideen einzubringen, Dinge auszuprobieren, ohne Reue zu scheitern und sich mit anderen zu messen, sind erstaunliche Dinge möglich.
  5. Verbreitet die Saat
    Teilt eure Erfahrungen und messbaren Ergebnisse mit dem Unternehmen, um Leistungen anzuerkennen und die Saat einer Performancekultur zu verbreiten.

Suche hier nach Stories, Jobs und Themen…

Zurück
Keine Suchergebnisse für verfügbar
Robot
Leider gibt es unter Deinem Suchbegriff keine Ergebnisse.
Further down we have several terms for you or take a look at our job openings!
Suchvorschläge: