Loading Content on Demand with Mootools

In my last post I explained some changes I've made to the Radio New Zealand website to improve page rendering times and reduce bandwidth.

In this post I'll explain another change that loads some page content on-demand with an AJAX call, saving even more bandwidth.

One of the fun features of the site is that the content layout changes slightly depending on the width of the browser port. When the browser is less than 800px wide the listener image in the header reduces in size, and the menu moves to the left. When it expands beyond 1200px an extra content column is added to the layout. At the moment this extra column duplicates the features content from the home page, but in the future we could customise it for each section of the site.

The content is shown (or hidden) by dynamically changing the available CSS rules for the page, based on the viewport size.

There is one disadvantage to this approach though - all the required content has to be served for every page request, regardless of whether the end user ever sees it. Based on site stats, the cost of this is non-trivial.

According to Google Analytics:

• 44% of RNZ visitors have 1024px as their screen width, with most of the rest being higher.
  
• We had 700,000 page impressions in June (excluding the home page).
  

The average size of the features section is 30k, so at least 300,000 delivered pages had content hidden on them that could never be seen by the visitor. That is 20% per page - a lot of waste.

As from today, no more. If you care to look at the source code for this page with your browser set to 1024 wide you'll see an empty div with id = features.

When the page width extends beyond 1200 px, a javascript call is made to fetch the div's content from the server and insert it into the page.

A simple and effective way to save 8.5 gigabytes of traffic a month. Combined with yesterday's effort that's 30 gigabytes of saving a month.