Lazy loading content | Responsive Web Design

You may not want to load all of your page content immediately for mobile devices and instead load it when the user requires the content. This technique is referred to as lazy loading and falls within the progressive enhancement school of responsive web design thought.

While the technique is rare for editorial based sites you will be sure to have seen it in action on image based websites where as you scroll down the page the images are loaded in dynamically.

While this technique is similar there are some subtle differences;

  • Lazy loading images within the <article> is for initial performance load
  • Lazy loading content blocks for responsive design is also for performance load, but it’s focused outside of the <article> content and onto the <aside> and other <section> elements

Please note that although I’m referring to HTML5 elements here the same goes for <div id="related-content"> or <div id="side-bar">.

Before you go down the lazy loading path you should trim as much fat from your pages as possible to ensure that the page weight is as low as you can go before you start looking into additional JS required techniques.

Disadvantages

Unless you are using some kind of device detection on the server side you will need to enable lazy loading across for every visitor. You are then faced with the issue that screen readers, search bots and users with JS disabled are unable to view the additional content.

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.