How to make the 1st part of the site loads first? (Like in Google PageSpeed)

Question

I have a very large site and it takes pretty long time to load. It takes around 120 seconds. What I\'m trying to do is loads 1st half of the site loads 1st. Then user can surf w

Answer 1

You can manipulate the output buffer such that it flushes early thus achieving what your after in the screenshot you posted in your question. http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/

You can lazyload all your images. Here's a jquery plugin that does it easily http://www.appelsiini.net/projects/lazyload

You can combine all your js in one file. Same with your css files. This will help the speed.

You can incorporate caching, expires headers and gzip/deflate compression https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess

I would suggest you load your 3rd party javascript widget garbage (Google+ buttons, fabebook like buttons, social, twitter stuff) in a non blocking asynchronous way so it does not slow down the page in the beginning. http://css-tricks.com/thinking-async/

Optimize your images as much as possible. http://kraken.io/

Use a CDN http://www.maxcdn.com/

Finally test your site and see where is the big bottleneck and where you can improve the site for speed optimization. Use the waterfall chart feature http://www.webpagetest.org/