SEO or search engine optimization in an important factor in the success of your website. One of the major factor that impacts SEO is the page load speed. There are several different ways to speed up your web page, all of which should work together and in tandem to get the optimum results.
There is no single thing that would speed up the page load times to the optimum, but several different things that needs to be done in together. Using asynchronous resources is just one of the recommended techniques that should be implemented to improve the load times.
What are Resources?
Resources or Web Resources as usually referred to in this context, is any content or file that can be accessed using a specific URL. This is probably the simplest of definitions. This definition may not be entirely correct nor all encompassing, but will work in the context of this post.
So, an HTML page, a cascading style sheet (CSS) file, a javascript (js) file, an image (JPG, PNG etc.) file are all examples of a web resource. All of these resources will have to be downloaded separately from the server for the web page to be rendered and displayed correctly in the web browser.
The amount of resources will vary depending on the design and implementation of the web page itself. The more resources that are used in a page, such as images, CSS files etc., the heavier the web page and slower the page load because of all the time it takes to download these resources.
When the web browser loads a web page, it will request any resources that it encounters and wait till it is downloaded before continuing to parse and render the rest of the page. This worked well in the early days of the internet when the pages were mostly text, and there was little to no use of scripts and cascading stylesheets and seldom any images.
When the resources are loaded sequentially or one after another then it is said to be loaded synchronously. When loading resources synchronously, it can severely delay the rendition of the web page, especially when there are several resources which can be large.
One of the easiest ways to make this process work faster is to request these resources in parallel or asynchronously. As the pages have gotten more complex and resource intensive, the web browsers have implemented several heuristics to speed up page loading and now has the ability to continue parsing the page and make simultaneous resource requests as they are encountered. This works well for resource files such as images, videos and stylesheets.
When it comes to scripts that needs to be executed, such as the JavaScript files, it still needs to be downloaded first which blocks the page load. By using the asynchronous resource loading feature, you can prevent this blocking and load your script files in parallel.
Many JavaScript files such as the ones that are not important in the loading of the web page or the web content can be made to load asynchronously. These include scripts that do web analytics, web tracking, social media buttons or even content that is not really essential or important. Asynchronous script loading is a still a work in progress on the browser side, and requires some extra coding to get it working. These works mostly only in modern browsers and the latest versions of it.
There are mainly two different ways to implement asynchronous script loading: Using the dom node and using the script tag.
Using Script Tag
Using the script tag is the easiest way, but it is not widely supported yet. The attributes of the script tag that needs to be set is async. It is a boolean attribute that specifies that the script should be run as soon as it is available. It is relevant and works only for external scripts, which means there should be a valid src attribute in the tag as well.
<script src="myjsscript.js" async></script>
The async attribute allows the script to be downloaded asynchronously while the page is parsed. The script is executed as soon as it is downloaded and is available, along with the rest of the page. If you are using xhtml then you can use the following syntax.
<script src="script.js" async="async"></script>
There is another attribute called defer which works by deferring the execution of the script till the entire page is parsed. If neither the async nor the defer attribute is specified, the page parsing is blocked while the script is downloaded and executed.
Although this works with latest versions of most modern browsers, it is not supported in many of the previous versions. If you like to support a wide range of versions then you can implement the same functionality using javascript as detailed below.
Using Dom Node
You can use the script code to create a script tag. You can then set the attributes of the tag using the script and attach the created node to the DOM to fetch it. A sample implementation looks like this:<script>
// Create a new element
var node = document.createElement('script');
// the new script element is of type javascript
node.type = 'text/javascript';
// the element should load asynchronously
node.async = true;
// the URL of the external script
node.src = 'myscript.js';
// Get a reference to the element, before which we want to insert the element (eg: mydiv_id)
var myDivNode = document.getElementById("mydiv_id");
// Get a reference to the parent element of the node
var parentDiv = sp2.parentNode;
// Insert the new element that we created into the DOM before the node mydiv_id
parentDiv.insertBefore(node, myDivNode);
</script>
As more and more browsers are getting compliant with the new tags, it’s probably best to use the script tag. Which of these two methods you want to use will depend very much on your coding skills as well as the your requirements on browser coverage.
Remember that asynchronous resource loading is intended to speed up the web page load times and to assist you with the SEO. Even with out this feature, the web page will still render correctly in all browsers. And regardless of this implementation or the method of implementation, it will still download and render, albeit a little slowly.
