Is It Possible To Direct Which Elements Of A Page Are Painted First By The Browser?

I wanted to know if there was any way to control browser painting, for example I'd like to load elements at the top of the page first so users can see content straightaway. The ele

Solution 1:

its not that difficult. all you need is ajax. load the inital markup and then load the rest of the page via ajax.

just load the page with little markup which you initally want to show to the user. then as user scrolls down you can make ajax calls and get xml or json or also html files and render them on you page, for example:

$(window).on( "scroll" , function() {

 var $document = $(document);
 var $window = $(this);

 if( $document.scrollTop() >= $document.height() - $window.height() - 400 ) {
    //make ajax call here and load the data
 }

 });

Also read this

Solution 2:

After looking into this further I found this article

http://www.feedthebot.com/pagespeed/prioritize-visible-content.html

which provides a good way of directing which parts of the page are rendered first. By separating your content in to above and below the fold content you can decide what needs to be delivered first i.e. your main content rather than sidebar ads. Using inline style to display your above-the-fold content will make it appear very quickly since it won't need to wait for for an external request.

But this is only good for simple CSS, if pages require complex CSS then it's better to use an external file because:

"When you use external CSS files the entire file is cached (remembered) by the browser so it doesn't have to take the same steps over and over when a user goes to another page on your website. When you inline your CSS, this does not occur and the CSS is read and acted upon again when a visitor goes to another page of your website. This does not matter if your CSS is small and simple. If your CSS is large and complex, as they often tend to be, then you may want to consider that the caching of your CSS is a better choice."

http://www.feedthebot.com/pagespeed/inline-small-css.html