Skip to content

“Wait for it…” — Loading Content Progressively

Progressive Loading is a technique whereby you automatically load content in a webpage after set intervals or triggers, such as when the user scrolls in the vertical direction.  With the advent of easier AJAX, and probably helped by some popular examples, progressive loading is gaining traction as another shiny bauble in the modern web development toolkit.

But why is it useful?  For a more definitive answer, I plan to nag my UX teammates to follow up with their perspective, but I can still tell you a couple things:

  • + It keeps users on the same page, and so browsing may be perceived as “easier.”  It literally requires less effort from the viewer, as you just scroll instead of hunting for and clicking a “next page” link, or bypasses the unsightly flash of reloading of the entire page.
    ex) Google’s recent changes to their image search (props to James Costello for pointing out how awesome it feels)
  • + less server intensive — while this may be a non-issue with our super deluxe hardware, you’re still only serving up “essential” content in the initial visit.  This can help reduce overall page load time, since you’re not trying to download and render a million images/comments/posts at the bottom of an article.  This is especially important for bandwidth-limited mobile browsing.
    ex) The Disqus commenting system, as used on the jQuery API documentation watch for the spinner at the bottom of the page as it loads comments when you scroll there really quickly

However, there are two potentially important caveats to consider:

  • ‑ Progressively loaded content may not be indexed by crawlers and search engines.  Since it only appears after user interaction with the webpage, it probably won’t happen with the robots.  Although, this may depend on implementation — if you programmatically trigger the regular-old “next” or “more” link that’s been included for graceful degradation, a spider might also be able to follow that link to index the rest of the content.
  • ‑ Similarly, progressively loaded content isn’t available to in-page searches (i.e. CTRL+F “Find Text”).  So, depending on the implementation (like a really long article with comments) there’d be no way for a reader to jump to content of interest without scanning the whole page first.

So where’s the beef?  Stay tuned for a quick intro on a really slick implementation of progressive loading using jQuery Waypoints (credit for the find goes to fellow dogbone castaway Chad Quigley).

The Atlantic BT Manifesto

The Ultimate Guide To Planning A Complex Web Project