Prioritizing contents and loading specific element before the other

Question

I tried to optimize my pages today with Google Speed https://developers.google.com/speed/docs/insights/

And it says, here

If your site uses a two-column design with a navigation sidebar and an article, but your HTML loads the sidebar before the article, consider loading the article first.

Until today, I didn't think loading specific div element was ever possible. The documentation does not show any tutorials too, so I am confused how this is done. If it done with Javascript/CSS

Any help would be much appreciated.

Answer 1

There are methods of loading content separately but to optimize page speed I think what you are after is just the order of requests from the page. Aside from JavaScript tricks, an HTML page loads content and resources in the order listed from top to bottom. Often HTML tends to match the visual flow but this isn't necessary. If user experience is improved by loading page content first then page content can be moved higher in the HTML page or template. Then CSS is used to position the content visually on the page where it is expected.

Alternately, content or data can be loaded with JavaScript and inserted within an element of a page (like a specific div). HTML can be parsed with this method but legacy support isn't good for this. iFrames work but they show everything. Best bet is to order content within the HTML document as it should load (CSS on top so browser has instructions on where things need to render) and use the CSS to position stuff where it needs to appear.

<style>
#navigation{
position:absolute;
top:0px;
height:200px;
}
#content{
position:absolute;
top:200px;
}
</style>

<div id=content>
Stuff I want to load first...
</div>
<div id=navigation>
Navigation to load later...
</div>

https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Tips_for_authoring_fast-loading_HTML_pages https://developer.mozilla.org/en-US/docs/HTML_in_XMLHttpRequest