3

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 elements at the bottom of the page can load last as the user will not see them until they scroll down.

I'm looking to optimize my site which currently has a 6 second load time and I'd like to get it down to 1 second. This is mostly being caused by JS and images. I know that reducing both these will mean I wont need to worry about directing the painting but out of interest I just wanted to know if it was possible?

Apologies if my understanding of browser painting is very basic

Pixelomo
  • 6,373
  • 4
  • 47
  • 57
  • 1
    6 seconds... seems you have more problems then painting order. Do you make any heavy animations or effects with the javascript ? – d.raev Jan 22 '15 at 11:59
  • 1
    This well help a lot. https://developers.google.com/web/fundamentals/performance/ – joews Jan 22 '15 at 12:01
  • hehe yep the site needs slimming down, running a speed test on it 50% of content being loaded is js and 30% is images – Pixelomo Jan 22 '15 at 12:04

2 Answers2

3

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

Naeem Shaikh
  • 15,331
  • 6
  • 50
  • 88
0

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

Pixelomo
  • 6,373
  • 4
  • 47
  • 57