If you’re a frequent visitor, you’ve likely noticed the sped up performance of our website over the past few weeks. Assuming you haven’t just switched to a faster Internet service provider, the performance increase is likely due to the tireless efforts of our web experience team.
The biggest challenge for our guys was to provide a faster experience while delivering the same amount of content. With no cuts in content size, how did we manage to improve the “time to glass” by more than 80% over a 3G connection? Because we knew from Scott Jehl that More weight doesn’t mean more wait, we focused on three simple principles:
1. Embrace progressive enhancement
Progressive enhancement (i.e., providing basic web functionality for all browsers while offering enhanced functionality for advanced browsers and connections) is more important than ever if you want to provide fast and reliable web experiences. By embracing progressive enhancement, we retraced our steps and focused first on delivering the content and baseline functionality for all browsers. Only afterward did we address the style considerations required for an enhanced web experience.
2. Deliver the critical CSS
If you have a build process running, maybe with Gulp or Grunt or Slurp or Burp, you can easily use Addy Osmani’s Critical CSS tool for Node.js. This boots up a headless browser rendering of your site and extracts the necessary styles for a given window size. We chose a window size that’s as big as our main visitor group’s standard window size (yes, we sometimes do monitor things). We now use some Node.js voodoo to safely perform this procedure for every page we create, since the color schemes change from page to page. And we want to make sure that our visitors have a fast experience no matter which page they access. Believe it or not, the “time to glass” for the initial text contents on our website is roughly 800 milliseconds on a 3G connection!
Next, we focused on optimization of the images on our site. Images make up more than 60% of the average website (according to the HTTP Archive). We made three crucial optimizations for our image assets:
First, we integrated Jamie Mason’s wonderful ImageOptim-CLI (with its accompanying plugins) into our build process. This ensures that we have the best-compressed images possible, removing unnecessary metadata and converting images into more easily digestible formats where necessary.
Second, we used Andi Smith’s Responsive Images Grunt plugin to create images between 200px to 1600px in size. These images, combined with Scott Jehl’s Picturefill (and responsive image design principles), ensures that we deliver the best and most optimized image for your screen size. The result is less download size, and therefore, faster delivery.
Third, to speed up content delivery even further, we deliver our images through the Cloudfront CDN. By relying on a CDN host near you, we have decreased latency and increased delivery speed.
You can view the results in the video below. First, you’ll see the original version. We throttled down the connection to “slow 3G” and colored the screen red so you can see the difference.
Now here’s the optimized version. The images speak for themselves.
Note that the full site still needs the exact same load time; we’ve just brought it to your screen sooner.
Tracking your page speed
It doesn’t take a lot to optimize your site if you have a good baseline and can easily add a few optimization steps to your build pipeline. However, you need to ensure that the optimizations you make pay off. For this, we use an internal script to fetch Google PageSpeed scores on a daily basis for all our websites. We use a mean average of all our pages’ PageSpeed scores to see if any changes have had an impact on the general performance of our site.
Since PageSpeed is unreliable when it comes to actual size and delivery time (I will expand on this in a future post, in the meantime look at Stefan Hofbauer’s opinion on PageSpeed scores), we make frequent calls to WebpageTest to determine the SpeedIndex of our site. The SpeedIndex is a metric that illustrates how good the visual progression of your website is. The lower it is, the better!
Dynatrace Web checks tell us how good the window load time is from different regions around the world. We aim for all green smileys.
We hope to give you the best experience possible when visiting our website. Huge thanks to our main web guy, Tom Heller, who performed the majority of these optimizations. Thomas keeps an eye on the site’s general performance. Also big thanks to Sascha Zarhuber, who implemented the PageSpeed tracker for our asset library.
Next stop: Revamping the blog. Stay tuned!