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.
Wow, view-view.tpl.php has lost a bit of weight...
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
- Other secret things
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.
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)
- 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
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!
Subscribe to our News
Want to stay ahead of what's happening in the ever-changing world of digital business solutions?
Our team is made up of talented individuals and as a company we love digital tech, so if you have a passion for keeping up to date with the latest tech/design/development trends, subscribe to the best of our latest news monthly email.