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

Prefetching Resources the web page require large files for loading can often benefited from changing the order that those files are requested from the server. Sometimes, it makes sense to download files before they are necessary, so that they are instantly available once requested. When the resources required for a page can be loaded in advance, the user-perceived network latency for that page can be significantly reduced or even eliminated. When you run Google pagespeed insights and see the result, you will see how the fix the problems in your website.

Some tips to load site faster:

• Make fewer HTTP requests
• Add a far-future expires header
• Gzip your page's components
• Minify your JavaScript, CSS and HTML

One more thing when loading a webpage and if you are using php with smarty you can use this plugin which reduces the number of http requests to you server and makes the site load faster by combining all the js and css resource's request into one single HTTP request.

Alternatively you might be looking for these plugins.

http://masonry.desandro.com/

http://isotope.metafizzy.co/

http://www.wookmark.com/jquery-plugin

Answer 2

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.