Skip to content
Article

“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

Insights

Atlantic BT's Insights

We’re sharing the latest concepts in tech, design, and software development. Learn more about our findings.

Questions & Answers

Are there differences in application architecture that are important for the cloud?
It is important to build applications and workloads specifically for the cloud. You will want to carefully consider what services the cloud provider of your choice has to offer and how your application leverages those services.
Learn More about Are there differences in application architecture that are important for the cloud?
Are there any drawbacks to cloud hosting?
Yes, there will always be some risks associated with any hosting option. You are relying on the resiliency and engineering of infrastructure that has scaled at an astounding rate.
Learn More about Are there any drawbacks to cloud hosting?
What’s the benefit of hosting in the cloud vs. traditional options?
Reasons not to host in the cloud are few and far between. If you don't host in the cloud, you will spend more in both CapEx and OpEx to manage your applications or websites in a traditional environment.
Learn More about What’s the benefit of hosting in the cloud vs. traditional options?
How can I improve the performance of my application?
There are several primary reasons that applications perform poorly, and in some cases it’s a combination of several. 1) Data latency: If your application is making calls to a data source (whether it’s an API or a direct call) and there is latency at the data provider, your application performance will suffer.
Learn More about How can I improve the performance of my application?
Should I move my application to the cloud?
The answer is ‘probably yes’. There aren’t many reasons for an application to be hosted elsewhere, aside from occasional compliance standards, or requirements to integrate with local services that would require large amounts of data to move from on-premise to cloud.
Learn More about Should I move my application to the cloud?
Where should my application be hosted?

There are many different options for hosting, but most applications would do well with one of the cloud providers -- Amazon Web Services, Google Cloud Platform, Microsoft Azure.

Learn More about Where should my application be hosted?