Performance tips for building responsive sites
The following article was originally published in the 2013 Performance Calendar. There's 31 great articles to explore in the calendar including Steve Souders's browser wishlist and Tim Kadlec's take on what it takes to create a performance culture.
----
Responsive Web Design (RWD) is now a well established technique yet it’s adoption is still surprisingly low. Guy Podjarny’s recent research shows that only one in eight websites is responsive. Often when responsive sites are designed the approach is primarily from a visual design perspective and teams struggle with the complexity of changing design and navigation patterns let alone any performance concerns, which become secondary. This can lead to serving the same sized assets to all browser widths resulting in a responsive site that is visually scaled but not performance optimised. On average responsive sites at 320 pixels wide are only 8% small than at 1600 pixels wide. Unsurprisingly these performance concerns and a lack of established techniques have made some hesitate when considering RWD adoption.
Responsive page sizes across different screen resolutions. Source: Guy Podjarny
New weekly emails
I've redesigned the weekly email reports to provide more trending information so you can compare week on week performance improvements. They're nice simple visualizations for forwarding around your whole team.
Share dashboards, basic auth and export HAR's
New features:
- Share your dashboard via a private url. Find the link on the "account" page.
- During site setup you can now add a user/pass for developments sites using basic authentication.
- On the individual test pages below the waterfall are links to the underlying WebPagetest waterfall and ability to export a HAR file.
SpeedCurve dashboard walkthrough
See how powerful the SpeedCurve dashboard is for digging into your website's front-end performance.
Live!
SpeedCurve is now live! To mark the occasion I took the day off work and Helena & Bruno helped send out the launch emails.
SpeedCurve elevator pitch
I've been having a blast over the last couple of weeks putting an intro video together for SpeedCurve.
Speed Matters talk at Auckland Web Dev Nights
Here's the slides from my presentation at the Auckland Web Dev Nights meetup. It's an overview of why front-end performance matter, how to monitor it and the challenges faced when building for an increasingly mobile world.
Sort browser waterfalls
Sort the items in a browser waterfall by Time, Savings and Slowest. Time is the default showing how assets loaded in the browser. Savings places assets at the top that have the greatest optimization potential and Slowest shows you which are the slowest overall requests.
Annotate your graphs
You can now annotate the main graph on SpeedCurve with notes about deployments or specific performance optimizations you may have put live. Just click on the "Annotate" link at the bottom right of the main graph to start adding them and comparing the before and after performance of your website. A vertical line will be placed on the graph where ever a note has been added.
Easily add WebP, SVG and Retina responsive images to your site
A lot of sites are now using responsive design techniques to create great user experiences across mobile, tablet and desktop. Unfortunately images are often just set to 100% width with the same large image being delivered to all browsers and platforms. Picturefill was an important step in delivering responsive images and David Newton's fork now extends that approach to include WebP and SVG images in the mix you send down the pipe.
