And now more notes from An Event Apart Austin… Lara Hogan, Senior Engineering Manager of Performance at Etsy (my fav!), presented “Designing for Performance,” and she’s just plain great. (I mean, she celebrates career achievements with donuts.)
She got big laughs for her “four and horse stars” story of the time Etsy accidentally replaced their half-star with little horse head emojis (because it wasn’t document properly) and users starting writing in to ask what was going on. (As someone who works in support, I can very easily imagine how ridiculous/hilarious this would be.)
On designing for performance:
“Perception of how fast your page loads is more important than how fast it actually loads.”
“Make performance part of everyone’s workflow.”
Don’t have performance cops or janitors. Make performance a part of everyone’s job throughout the project.
“Performance is everyone’s job, or you’ll be fighting an endless, uphill battle. You need to create a performance culture.”
Tips on designing for performance:
- Consider image edits to improve performance: Blurring background a bit & cropping out busy areas in a jpeg reduces size.
- An audience member tested out in-camera bokeh to make an image smaller and confirmed that it worked.
- gfycat – optimizes gifs for web use.
- WebP – introduced by google in 2011; image format that provides lossless and lossy compression for images on the web.
- ImageOptim — app that makes images take up less disk space and load faster, without sacrificing quality.
- Use srcset — give the browser a choice of which image to load (smaller image = smaller screen, etc).
- Test page speed at webpagetest.org.
Note: The Twitter bird icons link to the corresponding tweet for each piece. Thanks to @mor10, @sbeatty, & @cek_io for live-tweeting the talk along with me on #aeaaus. 🙂
Notes from sessions are being compiled on this page.