Speeding Up Page Loading for JavaScript Heavy Sites
JavaScript libraries help enhance our websites. Unfortunately they also slow down the page loading process. Here is a little tip to help speed up your page loads, while keeping those fantastic libraries you love so much.
Positioning
The problem with loading JavaScript files is when they’re being downloaded the browser doesn’t download anything else. So JavaScript affectively blocks your browsers from downloading other assets like CSS, or images. Giving the illusion that your page takes longer to load simply because the users notice the CSS and images not being loaded. A simple trick is to place all of your JavaScript just before the end body tag. This way it insures everything else has already started loading before it hits your JavaScript. Really you’re not speeding up anything, just re-arranging how things load.
Load it When You Need it
JavaScript should only be used as an enhancement. Your website should work perfectly fine when JavaScript is shut off. If it doesn’t you should consider looking into Progressive Enhancement. It’s a method that make sure your HTML is laid out first, then you add the bells and whistles. That aside, because JavaScript shouldn’t be completely necessary, you should be able to load the script as you need them…not on page load. This will speed up your initial page load, and get people into your site quicker.
So how do you do this you ask? With JavaScript of course. Here is some code:
1 2 3 4 5 6 | function importFile(src){ var scriptElement = document.createElement('script'); scriptElement.setAttribute('src',src); scriptElement.setAttribute('type','text/javascript'); document.getElementsByTagName('head')[0].appendChild(scriptElement); } |
The function importFile() will add an element to the head of your document, just like you would normally.
To use these function you might do something like this:
1 2 3 4 5 6 | if (FunctionInFile){ // javascript is loaded } else{ // not loaded yet importFile('javascriptFile.js'); } |
It checks to see if a function you have in your JavaScript file exists, if it doesn’t then load the JavaScript file.
Delaying
The problem with loading your JavaScript on demand is there can be a pause while the script loads. To prevent this we can just put a delay on loading the JavaScript. This way it won’t load on page load, and it will be ready for whenever you need it. This might look something like this:
1 2 | //Called on page load setTimeout("loadFiles();", 5000); |
Other Methods
Besides that you should consider combining all your JavaScript into one file, this way there are less requests for your browser to make.
Also consider caching you’re JavaScript files. If the browser already has the file on hand it won’t download it, saving precious load time.
Lastly consider compressing your files, the smaller the files, the less the user has to download.
Conclusion
Hopefully these methods will help speed up your load times a bit. You’re users will thank you for it…or rather they won’t complain as much…which is sort of like a thank you 