Header background

How we sped up our own website

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.

Our website has undergone numerous iterations since its initial launch, which is understandable considering our agile approach to development. One early iteration featured transitioning background colors upon scrolling, which required some JavaScript to work properly. Traces of this design approach persisted until just a few weeks ago. As the original JavaScript was one of the last page elements to load, it caused a major delay in basic content delivery. With recent changes, however, we’ve been able to deliver visible content much faster, eliminating the first 2-3 seconds of the original 8 seconds “time to glass.”

2. Deliver the critical CSS

Speaking of visible content, which part of a website do you usually see first when you access it for the first time? It’s usually the top of the homepage. With this in mind, we decided to make this part of our website as complete as possible. Usually, you place stylesheet links in the head element of a site. This causes a blocking request however and, depending on the size of your CSS file, likely longer delivery and render times. The idea is, instead of blocking page rendering with a request to a CSS file, asynchronously load the CSS files via JavaScript and insert the critical CSS for the above-the-fold content as inline styles directly in the document. With this approach, you have the necessary styles for the initial view ready at the first request. All other styles are loaded later without blocking initial content display.

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!

3. Images!

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.

Imageoptim is a wonderful tool to crunch every little unnecessary piece out of your images

The results

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.

A chart showing the progress of our PageSpeed over time
Our internal pagespeed chart

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!

A Webpagetest.org sample where our website gets a SpeedIndex lower than 1000
Webpage Test Results

Dynatrace Web checks tell us how good the window load time is from different regions around the world. We aim for all green smileys.

Sped up performance
Dynatrace Web checks from all across the globe

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!