Building a funky, performant home page with Drupal

So we set out to build a modern, sleek, well performing home page with Drupal. The design team had a specific vision in mind, and the dev team have responded with vigour. It turned out to be quite a series of challenges!

Challenge the first: Markup

Drupal 7 (we’re not diving into the 8-beta releases for production sites just yet), was conceived and built in a different time. The default markup provided by core modules and themes is, at least in some cases, obsolete and overly verbose. No complaint from us, it was built to serve a specific purpose and has done that fantastically over the years. But it did present us with a challenge: undo all of that to get the cleanest site possible.

In real terms this meant overriding a bunch of templates in the usual manner, deciding on the leanest possible markup that would still allow us to theme individual components sensibly and semantically, and then implementing them. We could have gone with a base theme like Mothership, but we wanted more control over the final output, and to not have to wrestle with other developers’ best practices.

Stripped down views-view.tpl.php
Wow, view-view.tpl.php has lost a bit of weight...

We also employed the Fences module to clear out unnecessary markup from field renders, and HTML5 tools for some HTML5 sugar on form elements.

Because of the nature of some of the markup produced by Views and fields, we were able to shave literally kilobytes off the page size using these methods.

Challenge the second: Asset aggregation/optimisation

We have two stages of aggregation/optimisation, one at build time, and one at run time.

The build time optimisation is handled by Gulp (http://gulpjs.com/), which we use to:

  • Combine, optimise and (where possible) auto-remove unused CSS, all generated from our in-house Sass framework
  • Same thing with javascript, to a degree; it makes sense for some of the files to be aggregated at build time, so Drupal’s aggregation has less work to do on-the-fly.
  • Inject inline CSS/Javascript into page templates. We keep some mission critical JS/CSS inline, especially on the home page, and no one wants to be manually copy/pasting code into templates files, or maintaining monolithic blocks of un-minified code
  • Other secret things

Drupal aggregation is handled by the one and only Advagg module. The Advanced Aggregation module is like the core css/javascript aggregator on steroids. I think it’s fair to say one shouldn’t even think about building a well optimised website without installing this module. If you haven’t come across it, stick it on a test site immediately and see the difference in can make to your page load. Quite incredible.

More specifically, it helps to combine your site’s assets into configurably-sized chunks, offers various different methods and levels of compression, help with best practices for speed/performance, and generally gives you the options you need to fine-tune asset inclusion and optimisation throughout the site. I won’t go through all of the settings we used here (that’s a job for another day), but suffice to say we didn’t stick with many of the defaults. It’s so configurable you really can dictate your ideal environment, and it’ll cheerfully obey.

Advanced Aggregation
AdvAgg has a plethora of useful options

As our site is mainly “brochure” (very few whacky moving parts in the back end, but there are a few!), we decided to aggregate all CSS into a single file, and all JS into a single file. There are advantages and disadvantages of this; the main advantage is the client only needs to download a copy of each file once for their entire visit. The main disadvantage is these single JS/CSS files contain scripts and styles that don’t apply to every page, so there’s wastage happening.

We spent time testing various combinations and came to the conclusion that single files for each was going to work best for our site, this time round. This won’t be the case for everyone every time, as close to real-world benchmarking as possible is the only way to make a proper decision. The level of compression and optimisation we’re applying, both at build time and on the web server, means we can get away with it and still render a good looking and functional page for 99%+ of our visitors.

Challenge the third: Asset loading

This part had less to do with Drupal and more to do with clever arrangement and execution order of code within the final markup. In order to achieve the effect we wanted for the initial page load, which consists of an animated, sketched drawing of our logo, a progress indicator, and sliding window effect, we had to do the following:

  • Convert our logo to SVG, and embed the XML directly into the web page (no embeds/external loads)
  • Inline some critical javascript and css to handle the SVG animation, progress and close effects.
  • Use the HTML5 video tag, with suitable fallbacks for older browsers, and use the loading of either the poster image of the video, or the first chunk of the video itself, to be the catalyst that drives the sliding window effect. The reason we used the effect in the first place is to avoid the dreaded “flash of un-styled content” while users are waiting for the video to download.
  • Carefully control the order scripts are executed in, to ensure the quickest possible load time for the visitor, while still maintaining the strong visual effects
  • Defer loading of any non-overlay script until after the document is ready; as we’re waiting for this event anyway, it’s the perfect solution.

Part way through a load
Part way through a load

Next on the list is moving assets to CDN, and inlining critical, above-the-fold CSS, if our post-launch testing and warrants it.


So there we have it. Our home page is by no means perfect from a technical stand point; we could spend another month full time optimising every last bit to the minutest detail, and probably still not be done. Such is the world we live in.

What we do have, though, is a good looking front page that has all of the clear, dynamic and modern elements you’ll increasingly find in premium websites these days, without the long page load and awkward layout problems that go along with it. As devices get better and network speeds increase, so will the user experience for our visitors.

We’re very happy with it, let us know what you think!

;