If you want to improve web performance at your company, creating a Performance Culture is the best way to maintain it. This video explains how to do this in the best way I’ve seen yet. Check it out! (My Summary notes below)
- Paul Lewis (Google dev advocate)
- Lara Swanson (Etsy perf)
- Gather Data
- Get VIP Buy-In
- Educate your team
- Surface the data daily
- Celebrate your victories
- Percentage of total global internet traffic on mobile: ~40% in 2014 % in US: ~30% in 2013
- mobile networks add ~600ms of extra connection latency people leave when your site is slow
- 40% abandon site when it takes more than 3s to load (find our bounce-rate stats on this)
- Ignore it
- Assign performance cops (burnout, not sustainable)
- Build a performance culture
- A way of identifying yourself and others.
- A way of thinking, social cueues.
- A way of doing
- A way of celebrating
Performance cultures are a team sport, everyone has to play. culture change is scary and hard
Real things said to Lara:
- “I don’t want to think about mobile”
- “Building for desktop and mobile takes twice as long”
- “Responsive web design is bad for performance”
- “Everything changes too fast”
- “But the important bit is above the fold!”
Determine spectrum of high-view screen sizes and shapes to determine policy
CHANGE IS CONSTANT AND IT IS GOOD
So how do we create performance cultures?
- Gather data Know your traffic stats: devices, geography, user journeys. You can’t bring people onboard without understanding this story
- Know your load stats total load time and perceived load time (start render, speed index) use webpagetest
- Know your render stats memory usage, fps and jank
Get the VIPs invested
- Share the data to enlist the help of your VIPs there are few things more powerful than getting important people invested in your subject send VIPs perf conversion stats regularly
- “200ms delay = 0.3% engagement loss, etc” know what kind of metrics the vip cares about
- “at etsy, +160kb pageweight = increased mobile bounce rate 12%” (prefer positive stats)
- “When eliminated jank on activity feed, people favorited more often and more items (engagement metric)”
- Make an improvement, show video of difference to convert VIP to cause compare site load locally to globally
- Get VIP to FEEL it, so they can empower others
Performance is a team sport
- Equip team with what they need
- Team sport, get everyone involved educated start documenting your best practices in a public place
- “Doing things this way works because of this:”
- Invest in a device lab
- Devicelab sandbox code is on github, pushes to all devices at same time
- MAKE TIME FOR REAL TESTING
- EMBRACE RESPONSIVE
- Teaching your team about their performance impact will empower them.
Surface performance in people’s daily workflows
- ADD PERF TO BUILD TOOLS
- Automate image compression
- Get a command line tool running that runs performance tests and compares your new work to your performance budget
- (Have a performance budget). Build this into your continuous integration environment
- Use these tools to report back to dashboards
- Show start render and speed index on graphs over time (3 months)
- Use median times for load time stats
- Teams can release a feature, and then watch dashboard to see how it affected things
Etsy’s Perf toolbar
- Etsy has a perf toolbar at top of every page if you are logged in as an etsy employee.
- It is a narrow strip, shows backend render time, start render, and something else to equal total load time.
- If one of the items fails the perf budget, it lets them know right there, with a link to the SLA that it violated .
- It provided a clear baseline for what’s acceptable.
- This is visible in dev, testing, and production environments
- SURFACING YOUR TEAM’S PERFORMANCE DATA WILL IMPROVE THEIR WORK (during their workflow)
Celebrate your performance successes
- Celebrate everything that improves
- Seth Walker published Etsy’s performance on etsy’s business blog, super-public homepage was a huge outlier, very slow
- As soon as that was published, people got excited about it, and the developers teamed up to fix it.
- By the next time they published a report, they had made a huge improvement, they dropped time from 1610ms to 480ms for home page
SHARE YOUR FINDINGS
- Make sure you are celebrating externally the things that help you improve things along the way.
- Its important to do this internally as well. (they made a key person a performance hero for affecting the biggest change (“Baumgartner” load time drop on graph))
- Celebrate engineers and designers who make huge improvements to the products’ perf without being on perf team
- They celebrated with lots of high-5s, donuts and cake
REWARD YOUR INNOVATORS
- Its not about coming down with a hammer, its not about being a cop or a janitor
- Its really about celebrating improvement and getting people excited and invested in performance
- CELEBRATING WINS WILL MOTIVATE YOUR TEAM TO BE PERFORMANCE CHAMPIONS
This is a journey, will have to refresh the cycle constantly, it is continual
WE ARE IN A PERIOD OF DRAMATIC CHANGE
Mobile traffic is going way up
- Performance-constrained devices becoming more popular
- Building for tomorrow/today means catering for “performance-constrained” devices
- You can only get there if EVERYONE in your organization CARES about PERFORMANCE