One Solution for Slow-Loading Pages
|
... more
[Written by Will Bontrager]
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.
To implement the technique, follow these steps.
Step 1
At the bottom of the page, put this code.
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
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.
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.
Posted: August 2, 2010
|
... more