Latest Register Log In

+ Advanced Search

Asynchronous Javascript

Asynchronous Javascript
By
03/13/14 (Edited 07/22/16)

On a modern web page, JavaScript can be the biggest speed bottleneck. One solution to this is to load javascript asynchronously -- that is, let the html page render first and then load all the needed javascripts in parallel in the background and finally let them run once they've all loaded. WSN's asynchronousjavascript tweak can help you with this.

When the asynchronousjavascript tweak is enabled at Admin Panel -> Settings -> Tweaks Editor, most of WSN's internal javascript calls will automatically be made asynchronously. The WYSIWYG editor and bulk uploader aren't compatible with asynchronous loading, so all loading is done synchronously on pages where those appear (the submit and edit pages, plus comment thread pages).

If you don't have any custom jquery-dependent javascript you've added to your site, you're done. If you do have any custom javascript which depends on jquery, you will need to modify how it's loaded so that it doesn't attempt to use jquery before jquery is loaded and thus break the page. You have presumably placed your javascripts in Admin Panel -> Themes -> Manage Templates -> Additional Javascript Inclusions. You'll need to remove them all from there, and instead load their URLs in the Additional Document Ready Function Content template like this:

jQl.loadjQdep('http://yoursite.com/yourjavascript.js');

Important Note: URLs from a different domain can only be loaded asynchronously if the access control origin headers on the remote domain allow the local domain to do that. In the event that the origin headers are non-permissive and you don't have the ability to change them, you'll need to copy that remote jquery-dependent javascript into a directory on your site.





Description Speeding up your website by loading javascript asynchronously after the rest of the page renders.
Rating
Views 210 views. Averaging 0 views per day.