Faster Time-intensive Page Load

Some database work can take a while. If the work needs to be done before a web page can load, as is the case with PHP code, then there may be a problem.

People may lose patience and go elsewhere before your page has even loaded.

I'll describe how I solved a time-intensive page load. You may have a similar situation where it would be useful to you, too.

Before I jump in, let me mention there are other issues that can result in a slow page load. Two of them are addressed at the Willmaster Library:

1. Faster Loading Pages With Delayed Content describes how to load additional content for very long pages only when the user scrolls the page.

2. One Solution for Slow-Loading Pages describes how to circumvent the load time of some slow-loading JavaScript obtained from external sites.

This article describes how to load the page and then immediately run code to insert content that would otherwise have delayed the load.

The project where I ran into a time-intensive page load issue required the PHP software on the server to scan many directories looking for certain files. The directory names and the files they contained could change between page loads. Certain file names needed to be linked to on the web page being loaded, along with an indication when the file was created or updated.

While the entire process didn't take more than a couple seconds, a couple seconds were enough to double the page load time.

The solution was to load the rest of the page, then use Ajax to load the part that took so long. For this particular project, the additional content was in a div that could be revealed with a tap. If the person tapped before the content finished loading, they would find a "processing..." type of message or icon.

(See the Powerhouse JavaScript Function for Show/Hide article for a "reveal with a tap" implementation method.)

Implementing the Time-intensive Content Delay

This procedure is for letting the web page load without the time-intensive content — then use Ajax to load the time intensive part that wasn't initially loaded.

Step 1.

The first thing to do is remove the PHP code that is so time intensive from the source code of the web page. Put the removed PHP code into a separate script that will be called after the page has loaded.

When the separate PHP script is on the server and ready, make a note of its URL. (The URL will be needed for the JavaScript Ajax code.)

Step 2.

In the original web page that just had some PHP code removed, insert this div where the time-intensive content is to be inserted following the page load.

<div id="time-intensive-insert-spot">Processing...</div>

The div contains the word "Processing...". It may be replaced with an icon or animated image. Whatever content the div contains will be replaced after page load when Ajax delivers the time-intensive content.)

The time-intensive-insert-spot id value may be changed. If changed, the corresponding value in the JavaScript (see further below) must be changed accordingly.

Step 3.

Here is the JavaScript Ajax engine. Put it into your web page immediately above the cancel </body> tag. The JavaScript has two places to customize (notes follow the code).

<script type="text/javascript">
function InsertTimeIntensiveContent()
{
    var IdValueOfInsertionPoint = "time-intensive-insert-spot";
    var URLofTimeIntensiveContent = "https://example.com/content.php";
    http = new XMLHttpRequest();
    if( ! http ) { alert("Some content isn't being loaded."); return; }
    http.onreadystatechange = function()
    {
        if(http.readyState == 4)
        {
            if(http.status == 200) { document.getElementById(IdValueOfInsertionPoint).innerHTML = http.responseText; }
        }
    }
    http.open("GET",URLofTimeIntensiveContent,true);
    http.send();
}
InsertTimeIntensiveContent();
</script>

Customization:

1. If the id value of the div is not time-intensive-insert-spot, then change time-intensive-insert-spot with the id value of the div.

2. Replace https://example.com/content.php with the URL of the separate PHP script you created in Step 1.

That's it for implementation. Test the page to verify it works as it should.

When the page is loaded, it should load quicker than before. After the page is loaded, the time-intensive content is loaded, and depending on how much time it takes to get the content ready, may be quick or take a while.

(This article first appeared with an issue of the Possibilities newsletter.)

Will Bontrager