Dave Olsen from West Virginia University presented AIM 4-Measuring Web Performance with several tips to help optimize web loading. He started out with some startling statistics about how the average weight of a homepage today is 1.5MB. And that 77% of that weight is due to images and javascript. Making a website responsive doesn’t solve that issue because the load is the same on mobile devices due to “hiding” images and not optimizing for the platform.
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.
From a programming perspective, avoid JavaScript libraries and consider using microjs.com or vanilla JS. From a deployment part, check that the site works in the real world (perhaps get real devices for testing) and then be prepared to monitor and tweak as part of regular review.
Photo Credit: redjar via Compfight cc
Photo Credit: songallery via Compfight cc