Vox Media: One Year from Performance Bankruptcy

Exactly one year ago, Vox Media declared “Performance bankruptcy”, realizing their sites were “friggin’ slow”. They were way behind most of their competitors.

Vox promised an overhaul on all of their performance debts. They set out to reduce their render start times by 58% and their page complete times by 65%.

Goals:

Render Start Times: From 4.85s to 2s

Document Complete: From 23.33s to 8s

It’s been a fascinating learning experience for performance engineers, tracking the progress Vox has been making, chipping away each second from their load times.

Performance update #2: Electric Boogaloo

Performance Update #3: Line Rider Edition

Now, 365 days later, we’re analyzing Vox Media’s “The Verge” and “Vox” sites to see if they are holding up their end of the promise and we also see how they are doing against the competition.

The Analysis:

They achieved an incredible response time (time taken to download the HTML), clocking in at 106ms and 114ms for Vox and The Verge respectively. A notable 13% improvement since February 2016, and an incredible 80% improvement from February 2015 topping the charts amongst their peers. (Find bottom of blog for competitive analysis)

Response Time: check.

The Performance Team has the render start metric nailed down. The Verge clocking in at 880ms and Vox at a 1023ms. This is 50% improvement over their set target, and 79% improvement from one year ago.

A part of this could be attributed to having a fewer number of critical resources. Following web performance best practices of loading the stylesheets at the top and loading non-critical scripts asynchronously.

Render Start: check.

Clocking in document complete (also known as webpage load) at 4829ms and 6089ms for The Verge and Vox respectively, the Performance Engineers at Vox Media have achieved an astonishing 79% improvement from a year ago; bettering their target by almost 40% for The Verge.

Document Complete: check.

A snapshot of the amazing turnaround:

Contributing to these incredible changes have been several significant tweaks:

Contributing to these incredible changes have been several significant tweaks,

1. The usage of WebP type for large images. (Apart from the other very specific image optimizations mentioned in their blog)
2. Trimming the critical rendering path for faster render start times.
3. Following Web Performance best practices of loading critical stylesheets right after the html download and asynchronously requesting other scripts.
4. Using CDNs for serving most of their static content through sharded domains (vox-cdn.com).

Having said that, there’s still much room for improvements including:

1. Over half of the contents loaded before render start are 3rd party contents. Impact of 3rd party services has been documented substantially.
2. Certain campaigns using un-optimized images, some almost 1Mb in size.
3. Loading of resource intensive gifs before Document Complete.

The Competition

While Vox Media has been chiseling away at their numbers, so have their competitors. In spite of Vox Media’s heroic improvement, they are still playing catch up (except for response times).

Below are the comparison charts for some important metrics.

Having said that, the performance engineers at Vox have done an incredible job in making up ground and getting in striking distance for the top spot in web performance.