Bigger, faster, leaner: The Verge 1.8 brings many improvements to its front page

Written by Brent Laverty, Steve McKinney, and Guillermo Esteves

Our recent front page redesign can trace many of its roots to the CES 2013 hub we launched in January to cover all the developments out of the show. We used the hub, more or less, as a testbed to experiment with some new front-page functionality which we would eventually roll into a refresh of the homepage proper. These new features included video integration for archived and live feeds, new interstitial hero slots for pinning big news and longform pieces, and new ways to present and contrast multiple StoryStreams. The additions yielded some great usage statistics, the most significant of which was a large spike in video views. Refreshing The Verge front page would prove to be a bigger challenge than creating a one-off hub for an event. The general look is really iconic, so it was vital that we avoid disrupting the lively newspaper spirit of it all.

Starting with the top hero – we added some warm new gradient treatments to the slots to liven things up without fundamentally rethinking the piece above.

The video hero was completely redesigned, however. Since the original module was rolled out, we designed and launched our responsive video site Verge Video, so it was important to update the design to show a visual relationship between the two. In addition, we had to find a solution to the problematic programmable headline ribbon on the old module. Long headlines occasionally stretched too far across the page and covered up so much of the video player that it often required rewrites to reign it back in. Designers and editors alike are happy it’s gone. Hooray for iteration!

This refresh project gave us an exciting opportunity to breathe some new life into the news flow. We decided to break up the grid and splash some extra color down the page with bold site-width interstitial heroes, which were inspired by Polygon and first introduced on the aforementioned CES hub. Because of the intertwined arrangement of the existing news slots and modules, we had to redesign the news flow to accommodate the new interstitial heroes. Additional story slots were required to give some padding around the larger modules, bringing our story slot count up from 32 to 49.

The two-slot hero in particular is one of our favorites. During CES it was used to feature two polarizing articles about the nVidia Shield, side by side, in a point/counterpoint sort of fashion. This kind of completely unforeseen juxtaposition was so cool to see and we can’t wait to see more creative uses of these modules in the future.

The stackable Storystream sliders we introduced on the hub make an appearance in the refresh, as well. Originally conceived to follow product announcements at CES within specific categories (like "Home Theatre" or "Ultrabooks"), it’s awesome to see them being used to chronicle developing stories.

However, adding all these brand new units to our home page came with its own set of challenges. While we were very excited to bring all this new stuff to the home page, we were also concerned that adding so many new units would considerably increase page size and load times, so we had to take measures both on the front and back end of Chorus to prevent this.

For starters, we reduced the number of stories displayed by our carousels lower down the page, such as the "Quick Reads" module, which went from 20 stories to just 9. Other carousels, which our analytics showed weren’t heavily used, were removed altogether to make room for the new units.

Second, we expanded our practice of lazy-loading story images and thumbnails to further reduce the number of images that need to be downloaded on page load. We’re also improving our use of image sprites to reduce the number of HTTP requests made by the front page (and also shave off a few kilobytes) thanks to Compass’s sprite generator, which has greatly simplified our workflow and made it much easier to rely on image sprites (and which we’ll cover in more detail in a future post).

Example of one of our sprite sheets.

Last, but not least, on the back-end we overhauled our Ruby on Rails code to reduce server-side response time. Particular attention was paid to our data and view caching for the front-page and our controller structure across The Verge. Reusable and long-lived view components were turned into Cells and cached in Memcached. Controllers were mapped to page types rather than the traditional one-to-one mapping to a Model which reduced conditional logic in our controllers and views. We’re continuing to roll out these improvements across The Verge’s other pages to further reduce our server response times for the entire site.

The result of all these measures is that, even though we significantly increased the number of stories we display on the front page of The Verge, our page weight and server response time decreased, so we actually ended up with a lighter, faster-loading page than before! Huzzah!

YSlow weight graph, before.

YSlow weight graph, after.

This is only the first step in many design and implementation improvements we’re bringing to The Verge. We have much more in store we can’t wait to show you, but for now we hope you enjoy The Verge’s incredible writing in our newly-refreshed front page.