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

What you want is what Facebook does Bigpipe and here is a relevant SO post: Facebook Bigpipe Technique Algorithm

There are other solutions involving all sorts of Javascript but since you want PHP and Facebook uses PHP you should read up on Bigpipe. Juho even has an example written in PHP so that should meet your PHP requirements (but yes it still requires js but not AJAX).

Answer 2

You need to determine why the site is loading slow. What is the size of the data you are sending? Google and Firefox have web developer tools to help you determine which elements are taking the longest too load. Once you've determined the culprit, try to load the worst offenders asynchronously.

Check out this article on aync requests: https://segment.io/blog/how-to-make-async-requests-in-php/

Answer 3

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 4

in my opinion you need an endless scrolling solution. That is, have a fixed amount of content per "page" (could be an estimated 1500px worth of height). Use jQuery to load another "page" when user scrolls down by a set amount.

If you really want to unconditionally load all the content, just use the same approach, and on document ready trigger the next page to load. The loop the page loader until the whole thing is loaded. That way, you load the first "page", and defer the content "below the fold" to subsequent requests.

Answer 5

Having in mind all that was mentioned above you may think of caching parts of your data/html code with memcache or in any other way possible so you skip its generation every time. Of course this depends pretty much on how often the data changes.

Answer 6

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.