Search code examples
phphtmlperformanceoptimizationpagespeed

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

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.

enter image description here

  • 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.

Solution

  • 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.