It’s been almost a year since Dan Chilton gave our last performance update; our entire Product Team has been hard at work since then, and with the start of a new year, it’s a good time to recap and review our progress towards recovering from our performance bankruptcy, declared almost two years ago. Without further ado, let’s dive in.
Unison, continued
In our last update, we talked about the performance improvement we achieved with the relaunch of Curbed on the next generation of our Chorus platform, codenamed Unison, a complete refactor of our entire front-end architecture which is tightly budgeted and closely audited. Since then, we’ve gone on to serve all of our brands’ article pages on Unison, with around 25% improvement in start render times and speed index across the network immediately after launch:
Median start render time, article pages
Brand | Before (ms) | After (ms) | Variation |
---|---|---|---|
Brand | Before (ms) | After (ms) | Variation |
Eater | 7,688 | 4,346 | -43.47% |
Polygon | 6,681 | 4,134 | -38.12% |
Racked | 4,581 | 3,983 | -13.05% |
Recode | 4,735 | 3,986 | -15.82% |
SB Nation | 4,288 | 3,909 | -8.84% |
The Verge | 4,172 | 3,398 | -18.55% |
Vox | 7,583 | 6,538 | -13.78% |
Average | 5,675 | 4,328 | -23.75% |
Median speed index, article pages
Brand | Before (ms) | After (ms) | Variation |
---|---|---|---|
Brand | Before (ms) | After (ms) | Variation |
Eater | 16,531 | 10,727 | -35.11% |
Polygon | 10,996 | 7,455 | -32.20% |
Racked | 11,236 | 6,100 | -45.71% |
Recode | 8,752 | 8,462 | -3.31% |
SB Nation | 13,233 | 11,310 | -14.53% |
The Verge | 11,268 | 10,063 | -10.69% |
Vox | 12,796 | 9,421 | -26.38% |
Average | 12,116 | 9,077 | -25.08% |
In addition to migrating our article pages, over the past year we’ve also fully relaunched Recode, The Verge, and Racked on Unison, and so far we’re seeing similarly improved performance across our new home pages, as you can see in this gif comparing the old Verge home page with the new Unison-based one:
Over the following months, we’ll be migrating the rest of our brands to Unison, so expect more of these improvements across our network.
Automated gif-to-video conversion using Thumbor
Here at Vox Media we really love gifs, but sometimes we love them a little bit too much, so Jason Ormand, our resident image expert, engineered and released a big improvement to Chorus, which now uses Thumbor to seamlessly and automatically convert animated gifs in our articles and features to video elements. This means that features with 60 MB of gifs in them are now hopefully a thing of the past; we’ve seen a reduction of over 80% in page size on entries with multiple gifs.
To give an idea of the importance of this work, converting all the gifs in this SB Nation Super Bowl highlights article into video resulted in a cumulative bandwidth savings of approximately 23 TB across all visitors on Super Bowl Sunday. Not too shabby.
Video improvements
Last month our video team released a long-awaited upgrade to our Brightcove video player on all of our brands, which removes all Flash dependency in modern browsers, and uses approximately 50% less CPU than our previous player, which means that videos load faster and play smoother, even on modest hardware.
Ad improvements
Over the past few months, Ian Carrico, our Performance Engineer embedded in our Revenue Team, has completely rewritten how we load ads on our pages, removing all blocking scripts from our ad loading system, and moving completely to using Prebid.js for our header bidding. This work has allowed us to remove all third-party blocking scripts from our sites, resulting in a significant decrease in our start render times. We’ve also integrated Thumbor with Hymnal, our in-house ad authoring and publishing tool, to ensure we serve optimized image assets in our native ads. As always, we are continuously looking at multiple data points to improve the user experience and performance of ads.
HTTP/2
Last, but not least, with the help of our Ops team we’ve enabled HTTP/2 for all of our assets served from CDN for an additional performance boost in serving our stylesheets, scripts, and images.
The results
Of course, all of this work would be for naught if things aren’t getting faster. I’m pleased to say that the work our Performance Team, and our Product Team as whole has done is paying off, and we’ve seen some big improvements over the past year. let’s take a look at where our start render and speed index metrics stand today, versus a year ago:
Median start render time, article pages
Brand | January 2016 (ms) | January 2017 (ms) | Variation |
---|---|---|---|
Brand | January 2016 (ms) | January 2017 (ms) | Variation |
Curbed | 10,334 | 3,295 | -68.11% |
Eater | 9,390 | 3,507 | -62.65% |
Polygon | 10,037 | 3,386 | -66.26% |
Racked | 7,390 | 3,395 | -54.06% |
Recode | 6,434 | 3,284 | -48.96% |
SB Nation | 6,135 | 3,684 | -39.95% |
The Verge | 10,030 | 3,391 | -66.19% |
Vox | 8,981 | 3,484 | -61.21% |
Average | 8,342 | 3,447 | -58.68% |
Median speed index, article pages
Brand | January 2016 (ms) | January 2017 (ms) | Variation |
---|---|---|---|
Brand | January 2016 (ms) | January 2017 (ms) | Variation |
Curbed | 11,885 | 7,408 | -37.67% |
Eater | 18,426 | 16,128 | -12.47% |
Polygon | 21,461 | 9,423 | -56.09% |
Racked | 11,699 | 9,196 | -21.39% |
Recode | 9,080 | 8,751 | -3.62% |
SB Nation | 15,891 | 8,732 | -45.05% |
The Verge | 17,253 | 8,860 | -48.65% |
Vox | 10,323 | 9,901 | -4.09% |
Average | 14,876 | 10,142 | -31.83% |
Over the course of the past year, we’re seeing an average improvement of 59% in start render times across our sites’ article pages, and 32% in our speed index, in our synthetic tests, which are done on Chrome at 1280x800 screen resolution, over a simulated 3G connection. Of course, while the needle is moving, we’re still not satisfied with the speed of our products (nor will we ever be), so we must press on.
However, beyond the technical aspects of the work we’ve done and the resulting improvements in page metrics, our most important achievement has been a shift in our team culture to prioritize performance in our work. As Dan and I mentioned to Ethan Marcotte and Karen McGrane on their Responsive Web Design podcast, performance should be something that everyone on the team cares about, and not just the responsibility of a single person or team, and so we’ve gone from treating performance as an afterthought that we fix at the end, to something that’s baked in from the get-go in our processes, design, and code, across the entire Product Team.
One more thing… HTTPS
If you’ve read this far, a question that’s surely on your mind, and one that comes up frequently is: what about HTTPS?! Serving our content over HTTPS is an important initiative our team’s been working on for the past few months, with not only big implications for our sites’ performance, but also for the security and privacy of the people using them, from our editors to our readers. We’ve made good progress working with our engineering, support, editorial, and ad ops teams to make sure our entire infrastructure is ready for it without breaking anything across our 300+ brands, and I’m pleased to announce that Recode will soon be our first editorial brand to be served exclusively over HTTPS. In addition, we’ll start allowing HTTPS on our other verticals and ramp up HTTPS traffic over the following months until all our brands are HTTPS-only. Keep an eye on our Product Blog, we’ll have more details soon!