Lazy loading below the fold

26 October 2013   2 comments   Web development, Javascript

Mind That Age!

This blog post is 4 years old! Most likely, it's content is outdated. Especially if it's technical.

Powered by Fusion×

I've started experimenting with my home page to make it load even faster.

Amazon famously does this too which you can read more about in this Steve Souders post. They make sure everything that needs to be visible above the fold is loaded first, then, it starts loading all the other "stuff" below the fold. The assumption is that the user requests the page, watches it render and some time after it has rendered reaches for the mouse and starts scrolling down for more content. Or perhaps, never bothers to scroll down at all. Either way, everyhing below the fold can wait. We have more time, to load that in, later.

What we want to avoid is a load graph like this:

big html document delays loading other stuff

The graph is deliberately zoomed out so that we don't get stuck on the details of that particular graph. But basically, you have a very heavy document to load which needs to be fully loaded (and partially rendered) before it can load all other stuff that that page entails. As you can see, the first load (the HTML document) is taking up a majority of the load time. Once that's downloaded the browser can start parsing it an start rendering it. Simultanously it can start downloading all the mentioned resources such as images, javascript and CSS.

On WebPagetest they call this Speed Index; "The Speed Index is the average time at which visible parts of the page are displayed."
So basically, you want to display as much as you possibly can and then load in other things that are necessary but can wait in the background.

So, how did I accomplish this on my site?

Basically, the home page uses as piece of Django code that picks up the 10 most recent blog posts and includes them into the template. Instead, I made it only pick up the first 2 and then after window.onload a piece if AJAX code loads the HTML for the remaining 8 blog posts.
That means that much less is required to load the home page. The page is smaller and references less images. The AJAX code is very crude and simple but works enough:

onload = function() {
  microAjax("/rest/2/10/", function (res) {
    document.getElementById('rest').innerHTML = res;

The user probably won't notice a huge difference if she avoids looking at the loading spinner of her browser. Only if she is really really fast at scrolling down will she notice that the rest of the page (about 80% of its vertical space) comes in a little bit later.

So, did it work?

I hope so! The theory is sound. However, my home page is, unlike an product page, very sparse. The page weighs a total of 77Kb (excluding external resources) but now only the first 25Kb is loaded and the rest later.

Here's a measurement before and one after. It's kinda hard to compare because "fluctuations" on network I/O make measurements like this quite unpredictable. Also, there's various odd requests like New Relic and Google Analytics which clouds the waterfall view. However, what really matters is in the "First View" of the after measurement. If you look closely you'll see that now a bunch of images aren't loaded until after the "Document Complete" event has fired. That, to me, is a big win.

Below the fold

If you're interested in how it was done, check out this changeset.


Šime Vidas
But this means that only 2 of 10 most recent blog posts are crawled by search engines. I'm not sure that it's worth it. I think it would be better to put the text of all 10 posts in the HTML page but then lazy load only the images that appear below the fold.
Peter Bengtsson
I think most of the search engines bots can render the page with AJAX.
Either way, the home page is just is just duplicates of the content on their individual permalink pages.
Thank you for posting a comment

Your email will never ever be published

Related posts

Fastest database for Tornado 09 October 2013
All my apps are now running on one EC2 server 03 November 2013
More CSS load performance experiments (of a React app) 25 March 2017
CSS Bloat Comparison 03 June 2016
Web performance optimization's dark side 16 March 2016
Screenshot-sharing performance comparison 13 November 2015
Using Lovefield as an AJAX proxy maybe 30 September 2015
News sites suck in terms of performance 08 August 2015
Worst performing website of the year 07 August 2015
AJAX or not 22 December 2014
Optimizing MozTrap 04 June 2014
XML header and childNodes 26 July 2007