One Solution for Slow-Loading Pages

JavaScript imported from other domains' slow servers can seriously slow down your page loads.

When the browser sees JavaScript to be imported, it pauses the page load at that point in the source code to fetch the JavaScript.

The browser pauses page display for a JavaScript import because the JavaScript may apply to content or other JavaScript below that point in the source code. So it must be imported and parsed before the page load can continue.

When the JavaScript to be imported is on another domain's server, and the server is slow in responding, your page suffers. Your site visitor may become impatient and go off elsewhere.

Even domains that are generally thought to be highly responsive can have periods of slow response.

For example, some days ago, I noticed Google was slowing down our page loads.

JavaScript Causing Slow Page Load

We use Google's search box on many of our pages. The JavaScript coming from their server took longer than expected.

The page started to load. When it came to the point where JavaScript was imported from Google's server, the page load paused. When the JavaScript was finally obtained from Google, the page resumed loading.

Because the search box is near the top of the page, the pause during loading was unacceptable.

Speeding Up the Page Load

My solution was to load the search box and the JavaScript from Google near the end of the page. Once loaded, copy it into a div near the top of the page.

It allows the page, except for the search box, to load quickly. People can start reading the article right away.

When the Google search JavaScript has finished loading, the complete search box code is copied into the location where it belongs.

If Google's servers are slow, the person may be reading the article when the search box appears in its correct spot on the page. Otherwise, there is little or no noticeable delay.

The page load speed gain is apparent. A quicker page load is perceived because the delay is moved to the end of the page load.

Because the majority of the page loads so quickly, the site visitor has less or no wait before consuming the content. The page load can appear quite speedy.

Speeding Up Other Page Load Slowing JavaScript

The same technique can be applied to other JavaScript imported from slow servers.

Not to all JavaScript. But to some. Perhaps to most.

The technique can not be used if the JavaScript must run immediately because it affects other JavaScript below the imported code.

There may be other JavaScript that will not work with this speeding up page load technique. For example, JavaScript that must be in a div with a certain id value may fail this technique.

If unsure about your imported JavaScript, try it on a test page. Do a thorough testing.

Implementing the Page Load Improvement Technique

JavaScript imported from other domains generally publishes content on the web page. The technique I show you here puts the importing JavaScript code to the bottom of the page, yet publishes the JavaScript-generated content in the correct location.

If the JavaScript is the same with every page load and there is permission to do so, putting it on your own server can help a lot.

However, JavaScript imported from remote servers tends to change either occasionally or with every page load.

This would apply to most services that provide content, like latest blog or tweet, quote of the day, and ad rotation services. Some services require a unique value be delivered via JavaScript with each page load. Others need to have page load count as part of their service.

For those, this page load improvement technique may speed things up considerably.

To implement the technique, follow these steps.

Step 1 —

At the bottom of the page, put this code.

<!-- The temporary holding div -->
<div id="tempholder" style="display:none;">

<!-- The importing JavaScript -->
<script 
   type="text/javascript" 
   src="https://otherdomain.com/file.js">
</script>

</div><!-- End of temporary holding div -->

<!-- The content moving JavaScript -->
<script type="text/javascript">
var copyfrom = "tempholder";
var copyto = "inserthere";
var fromdiv = document.getElementById(copyfrom);
document.getElementById(copyto).innerHTML = fromdiv.innerHTML;
fromdiv.innerHTML = "";
</script>

The temporary holding div contains the importing JavaScript. In the JavaScript, replace "http://otherdomain.com/file.js" with the URL of the JavaScript to import. (It may have a file name extension other than .js)

Other content may be inserted into the temporary holding div. Put here anything that should not be published until after the JavaScript has been imported. A form that requires the JavaScript, for example.

After the JavaScript is imported, the content moving JavaScript will move everything in the temporary holding div to the div you create in Step 2.

Note that the content moving JavaScript contains the line

var copyto = "inserthere";

The "inserthere" needs to be the id value of the div you create in Step 2. If the id value is different, replace "inserthere" with the correct id value.

Step 2 —

In Step 1, you moved importing JavaScript and perhaps other content into a div near the bottom of the page.

Now, insert this div in the location of the page source code where that JavaScript and content was moved from.

<div id="inserthere" style="width:200px; height:100px;"></div>

Adjust the width and height in the style tag to fit the content the JavaScript will publish. Other definitions may be added to the style.

The width and height definitions may be removed. Doing so can cause a shift of page contents when the JavaScript is copied into the div.

If the id value "inserthere" is changed, change the corresponding value in the content moving JavaScript of Step 1.

Step 3 —

Thoroughly test the modified page to ensure it works as expected.

Faster Page Load

With importing JavaScript located at the bottom of the page source code, the majority of the page can load faster. It can appear quite speedy.

The technique mentioned in this article can not be used on all JavaScript, for the reasons stated. If in doubt, test it. It's a quick implementation once you're familiar with it.

For pages with many calls to external JavaScript files, considerable apparent page load speed may be gained by moving the calls to the bottom of the page.

Will Bontrager