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.
