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 while others parts are being loaded.

What I'm trying to do is below.

• 1st of all is this possible ?

According to my knowledge Yes since Google PageSpeed does that. But the problem is if I use PageSpeed I would have to change my DNS server settings and etc. I would like to do this myself.

• How can I get it done ?
• What type of technology should I use ?

Given that pages have the .php extension and written in PHP language.

Answer 1

You can use the concept of lazy loading.

You can load only content that is necessary during the load then using jquery and ajax you can load the remaining content.

In this way user can surf and interact easily with the the part already loaded while the other part will be loading asynchronously.

jQuery ajax or post method can help you on this.

A simple example could be,

If There are 5 parts of contents in your page, 2 needs to be loaded immediately

1. The page will be loaded with 2 parts loaded, so it will take quite less time than 5 parts loading

2. After document is loaded you will use ajax to load the remaining 3 parts. Ajax will send request to the specific page of your website(can be possibly named AjaxRequestHandler.php) with some parameters, and this page will process your request and generate html for this and will send it back to your main page which will just show this returned html and this all be happening asynchronously, so the user will be able to communicate with the initially loaded 2 parts

And even if you are new to web technologies, I suppose you have to have the knowledge of atleast ajax and asynchronous calls etc. to achieve lazy loading.

Edit :

For your this question

Except AJAX Is there way around for this?

I think you can try iframes if they can help.

Loading the main content in the page load without iframe while loading other contents in the iframes after pages is loaded.

This jsFiddle

jsfiddle.net/cGDuV/

can help you understand lazy loading with iframe, mentioned in this post of stackoverflow.

You can use javascript for the same if you want to avoid jquery.

Answer 2

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/

Answer 3

One of the things you can do is to load all the essential (top half) of the page normally, then use javascript/ajax to load the second half of the page. This is a very common technique (and is often used to load images).

Here is an excellent tutorial from jQuery for Designers, walking through how to use jQuery to load images asynchronously after the page loads. http://jqueryfordesigners.com/image-loading/

Having said that, a two minute load time seems very excessive. Maybe you should check if there is anything that could be slowing down your server.