event-stories

The Page Speed Hackathon

Seeding a performance culture in a large organization by gamifying cross-discipline teamwork

 

from  Brian Louis Ramirez
22.12.2021

 

(Photo by Camylla Battani on Unsplash)

 

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

Indeed, you can’t rush product development by throwing more resources at it. But that’s not always the goal.

We at REWE digital have a complex tech stack for our website: dozens of teams work on hundreds of microservices that are included in various page templates, features and systems. In order to optimize the web performance – the experience of page loading and interaction – of a single page, you often have to work on several things at once with several teams. Also, not everyone knew about why performance matters, how to measure it or how to optimize it.

This Fall, we held an online hackathon in the Stationary Tribe to develop our product further by focussing on web performance. We called it Days of Performance (DOPE).

The goal of DOPE was not to create a single feature, but rather to seed performance culture within our organization. This is how it worked, what we learned from the process and how you can organize your own performance hackathon.

 

To get the ball rolling, you need sponsors and a team of organizers

Usually when we work to optimize performance, we create tickets, e.g. “remove lazy-loading from above-the-fold images” which a single team can work on for their domain. 

But oftentimes we need to work on aspects of the website that would involve multiple teams. We had an initiative to improve page loading times by including critical CSS and deferring non-critical CSS. And one team had already implemented those changes on our REWE homepage to make it one of our fastest pages. 

Comparison of www.rewe.de before and after including critical CSS and deferring non-critical CSS

Thankfully, one of our product owners recognized that we weren’t really going to make the biggest impact with the initiative, as it was only planned for one team (read: “1 woman to make 1 baby in 9 months”). He had the brilliant idea:

“Why don’t we have a performance hackathon for all teams in the tribe instead of just a single initiative for one team?”

I loved the idea and thought it would be a great way to increase awareness for perf, spread knowledge and tackle perf from multiple angles.

Tribe leadership was also convinced of the value of the performance hackathon and was able to “sell” the idea to management that: the value added by a grassroots event is measured by its potential for improving the quality of our product in the long run.

Two product owners, an engineering manager, our tribe master and I formed an organizational team to get the ball rolling and met regularly to discuss our progress:

  • create an agenda
  • develop a hackathon branding
  • identify key performance bottlenecks and list potential optimizations
  • prepare resources and platforms for the event
  • recruit members of management to select the winners
  • involve HR to sponsor goodies

 

Make performance optimization a game

We usually add ideas for performance optimizations as requirements to tickets for new features or as stand-alone tickets. The problem is: those tickets often don’t make it to the top of backlogs.

By using gamification (i.e. game mechanics in non-game environments), we hoped to stimulate interest in the topic while increasing productivity.

Ideally, performance optimization is a team effort: stakeholders should have performance on their minds and product teams should work to get and stay fast without someone having to tell them to.

 

The Challenge

Wile E. Coyote personifies web perf: the thrill of the chase, perfect speeds (i.e. the Roadrunner) always just slightly out of reach, never letting up even when ideas fall flat.

We invited front- and back-end engineers, product owners, SEO experts and platform experts to a “warm-up meeting” to introduce the event and present the challenge:

“Do what you can to improve performance over the course of three days - and measure your outcome.”

A big part of the warm-up involved setting the stage: providing examples of why performance is important, what aspects of our website need improvement, and an overview of ideas for how to measure and improve things.

Comparing performance metrics between pages and between our own and competitors’ pages not only reflected which team’s pages were the fastest, but also which ones had the most potential for improvement.

WebPageTest is useful to visualize who’s fast and who’s lagging

 


Helping others understand how we do real user monitoring (RUM)

 

Reward people for their work

Giving awards is a great way to recognize achievements. Even if they’re non-material, they formalize and codify social gratification.

We created several awards categories to help drive competition and exemplify the ways in which performance can improve our overall product:

  • Biggest Global Improvement (“The Hammer”): For improving performance across most numbers of pages or for the most users or affecting how we tackle performance in our organization for lasting change.
  • Biggest Metric Improvement (“Metric Tonic”): For the solution with the largest improvement to one or more metrics.
  • Most Code Removed (“The Cutter”): For the solution that resulted in the most bytes of code being removed.
  • Low-Hanging Fruit (“The Carrot”): Sometimes the simplest solutions are the most effective. For the quickest fix with the biggest impact.
  • Out-of-the-Box Thinking (“The MacGyver): For experimental, cutting-edge ideas.
  • Biggest Fail (“Egads!”): It’s OK to fail when it helps you to learn and improve. For the solution that wanted to work but didn’t.

 

Send people on a “journey”

We used Miro as a home base for ideas and progress throughout DOPE. 

An agenda at the top gave each “player” a starting point.

We collected optimization topics in one area. Once teams were formed, they could pick up a topic and move it along from Doing to Done as in a Kanban board.

Whoever needed some help on making an avatar, tips on measuring perf before and after changes, or additional info could find it in Miro.

We used Miro to organize ideas and move them along a simple Kanban board.

 

Surprises along the way help to keep things exciting

Just as in video games, we had several “bonuses” throughout DOPE, which gave participants a chance to unwind and have fun.

Our HR team sponsored lunch and different colleagues offered a yoga session, organized a film night and held a pub quiz.

We printed stickers of the awards.

And instead of spending money on event tees or hoodies, we donated to the German Red Cross which also added to our sense of purpose.

 

Real measurable results

Just how much did we improve performance because of DOPE? While we still haven’t reached “good” Core Web Vitals in the 75th percentile on all key page types, we did make a lot of progress.

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.

 

Sprouting the seeds of a performance culture: the next steps

In our “Days of Performance” event, we not only improved perf metrics around the site in a short amount of time, but perhaps more importantly, the event helped foster a performance culture by raising awareness for perf (also amongst management), encouraging knowledge-sharing, an understanding of other domains, problem-solving across teams, and motivating people to look for ways to improve perf in day-to-day work.

According to post-event feedback, participants overwhelmingly felt DOPE was a great way to learn about and improve performance. But more importantly, they agreed that optimizing must be a normal part of product development.

So how to nurture those seeds of change and let them sprout? We will:

  • Audit performance as part of continuous integration to avoid regressions
  • Establish performance budgets
  • Fast-track performance optimization tasks in our backlogs
  • Add perf-specific acceptance criteria to relevant tickets
  • Do other perf hackathons in other tribes or units

 

Checklist: Organize your own Performance Hackathon

Do you work in a large organization and have problems pushing through perf optimization? This is how you can start:

  1. Get management to sponsor the event
    Why should they do that? For immediate performance improvements, team-building, knowledge sharing and business development.
  2. Organize in a cross-functional team
    A lot of work goes into organizing an event. Divvy up tasks (branding/marketing, logistics, research, content) with others who share your passion and meet regularly to discuss progress.
  3. Share knowledge
    Try to get everyone on a level playing field by sharing insights and optimization techniques leading up to the main event. Get participants involved in sharing knowledge too.
  4. Make a game of it – and have fun!
    When participants have the freedom to contribute ideas, try out things, fail without regret and compete against others, amazing things are possible.
  5. Spread the seed
    Share your experiences and measurable results with the company to recognize achievements and spread the seed of a performance culture.
Next Story from  Brian Louis Ramirez

The Page Speed Hackathon

Brian Louis Ramirez
Next Story in : report-stories

SHIFT Think Tank

Melanie Pöplau

Search here for Stories, Jobs and Categories…

Back
No search results for available
Robot
Unfortunatly your search term didn't generate any hits.
Further down we have several terms for you or take a look at our job openings!
Suggestions: