Question

I would like my webpage to render faster. Based on this article, I understand that the page renders when the ‘load’ event is fired.
When I look at the Network Tab of my Chrome browser, I see that the ‘load’ event is fired after an ajax call to a PHP script returns.

Webpage is live at http://www.99like.com/index.php

=> Is there any way to get the page to render before the PHP script is called?

Following is the extract of the code which I think is relevant for the question:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="highcharts.js"></script>
<script type="text/javascript">
    var ajax_load = "<img class='loading' src='images/load.gif' alt='loading...' />";
    var inputForm = "<div class='shadow'><form type='submit' onsubmit='displayChart(); return false'><input id='searchBox' type='text' size='30' value='search keyword' /></form></div>";
    var chart = "<div id='chart' class='shadow'></div>";
    var chartPage = inputForm + chart;

    $(function ()
    {
        exampleChart();
    });

    function exampleChart() {
        $('#searchBox').val("hotel"); // nice example
        displayChart ();
    }

    function displayChart () {
        var keyword = $('#searchBox').val();

        var chart = new Highcharts.Chart({  ...  });

        chart.showLoading();

        var phpFunctionURL = "getChartData.php";
        var DataSeries; 
        $.ajax( {
            url: phpFunctionURL,
            dataType: 'json',
            async: false,
            data: { ... },  
            success: function(json) { DataSeries = json; }
        } ); 
    }
</script>

Answer 1

A few remarks:

1. Make sure all your JavaScript are at the bottom of the page, including JQuery and Google Analytics code
2. Your web-page is missing the end tag
3. If needed, you could wait for the onLoad event to launch your AJAX request instead of the DomReady event, this will speed up the page rendering.