Javascript Asyncronous Loading

I feel like I should let my discoveries be known and promote bloggers that provided me with a solution to the problems I face day to day during development. I was working on fixing page speed issues with the last company that I worked for called EmpowHER. This company, which is a health social media site, uses Drupal as the tool of choice to do rapid development and provide the necessary content management system for the writers to post on. The issue with using Drupal is that it tends to shy away from optimizing JavaScript to its full potential and just deals with backend development. Though this may be the case JavaScript helped solve the issue on slow page speed by utilizing something called a lazy loading technique.

So when I was presented with the problem I investigated on why the slowness was occurring on several pages. The issue was with the downloading of various scripts and images in the background before the onload of a page. I was really stumped on how would I improve this issue since we needed to use those scripts and images on several pages and removing them wouldn’t be a solution to the problem. Though through researching there are several ways to optimize these issues and here are some steps that I believe we as a team at EmpowHER improved on our site:

  1. Using CSS Sprites instead of individual images.
  2. Changing some JavaScript from Header to Footer.
  3. Using fonts instead of images for links and text on the site.
  4. Using Varnish to cache the site, or using other forms of caching techniques.
  5. SQL query optimization.
  6. Lastly what I contributed was the implementation of the lazy loading technique.

So now to talk about what I implemented and where I retrieved this information. When I started searching for the solution I found the technique and how to implement it. The guide that I used was written by Emil Stentstrom, and if you want to find out all the details go to his website, but I will briefly summarize what I used and how much I improved on site load time.

Using the following code:

(function() {
function async_load(){
var s = document.createElement('script');
s.type = 'text/javascript';
s.async = true;
s.src = 'http://yourdomain.com/script.js';
var x = document.getElementsByTagName('script')[0];
x.parentNode.insertBefore(s, x);
}
if (window.attachEvent)
window.attachEvent('onload', async_load);
else
window.addEventListener('load', async_load, false);
})();

I was able to reduce the load time of pages by an average of 3 seconds according to the tools we used. We used to have pages loading an average of 11 seconds, so just taking a 27% chunk of that load time was a great improvement overall. To be clear though this technique helps in the loading of external and internal JavaScript files after the onload, and also would load any images that were loaded after that JavaScript was fired. This  vastly helped in the improvement and new direction of  better page performance for EmpowHER. The site currently runs very smoothly with all the fixes and techniques we used, that’s why its always good to perform best practices when developing to improve user interaction on any site.

Leave a comment

Your email address will not be published. Required fields are marked *