One of the many things we worked on during this cycle was to improve our frontpage, where we worked together with the amazing folks from Canonical’s Design Team to deliver a revamped look with consistent messaging that better reflects where Landscape is positioned within the Ubuntu ecosystem. I consider this to be the “cherry on top” of our updated look-and-feel, which we’ve started rolling in back in November.

While we don’t have specific roles within the Landscape team (everyone is encouraged to work on all areas), my personal focus has for a while been on frontend performance, in addition to end-user experience, so I took up this challenge: can we deliver an updated frontpage with more content in less time?

Turns out that we’ve been incrementally improving our frontend infrastructure, applying best-practices recommended by frontend gurus like Souders and Zakas and some of our own, so after the new design was put in place we looked for more things that could be improved to reduce even further our page load time, which was already pretty good.

Our Javascript framework of choice is the excellent YUI 3, and we’ve structured our usage of YUI in such a way that modules are loaded and combined on-demand, so that we only load what’s needed and keep requests to a minimum. While looking at the requests being performed I noticed that we were unconditionally loading some things that are only used on internal pages (more on that in a later post), so getting rid of those was easy: restrict the loading of those additional modules so that they are only loaded if a specific DOM element (which we apply Progressive Enhancement to) is present in the page instead of always loading the module, but only using it if the element is there.

With that out of the way, the next thing to look for was how images were being loaded. Our new design, like the old one, contains 3 medium-sized images highlighting specific features of Landscape. The main difference, though, is that those images are placed much lower in the page, so that for the great majority of users out there they will not be above the fold anymore. A nifty YUI 3 module immediately sprung to mind: the ImageLoader. Even better, the documentation for it had two nifty examples that could be combined to deliver the improvement we were looking for.

The end result? Check for yourself. We’ve managed to deliver a slicker, faster and better frontpage by a) reducing the number of requests by 2 for a fully loaded page, b) reducing the number of bytes transfered before ‘document complete’ by 96Kb (a 47.4% improvement) and c) reducing the time to a fully loaded page by 525ms (a 12.8% improvement).

Improving frontend performance is a neverending task, and we still have lots of things to work on. We are doing a pretty good job so far — with a load time of under 4 seconds now, even though we’re forcing SSL, we’re doing better than 80% of the websites out there according to Yottaa — but we are not resting on our laurels.

As scheduled, our new frontpage will be going live next Tuesday, April 26th, along with many other improvements. Stay tuned!