Measuring Web Performance
So, where to start? With the small screen first. If the site is designed to work on mobile, it will work on a desktop. “Mobile first means performance first”
For the purposes of the #heweb13 presentation, Olsen broke his team’s web development process into six steps: starting, design & production, programming, testing, deployment and monitoring.
The first step is where the client asks for all the pizzazz and Olsen promotes performance. He sets a performance budget to limit what will and should be done, with some room for changes based on real needs. How to determine that budget? Look at your competitors and peers. “You want to be better than your competitor in serving the brand content.”
Now for the tools, Olsen offered several tips to work through web performance issues:
- Learn to love the Chrome Inspector
- Disable your cache when testing so you always see the site how a new user does
- Reduce and remove images where possible (they are the devil)
- Use CSS, sprites, symbol fonts to offer same experience with more speed
- NEVER use display: none;
- Serve content when the user asks for it by scrolling or clicking to it.
Olsen then shared The Waterfall from Chrome Developer Tools that shows a list of files downloaded for your website. Can reorder and determine which assets take the longest to download. The goal is to use this data to focus speed on the content above the fold and to improve the performance of the site.