How our team improved the page load time?
Recently our team came across a situation where one page of our site was taking a lot of time to load thereby delaying the user interaction. Therefore we decided to diagnose the problem and increase the performance.
On the page which was taking a long wait time, our first step was to record how much time it is actually taking to load. To check this we went to developer tools -> Network tab and refreshed the page. On the bottom of the network tab you can see how long it took to load the page.
For our page Dom content loaded Time was 24 seconds and Load Time was: 25 seconds. What it means is that time taken for document to load and DOM tree to be fully constructed is 24 seconds and time taken to download and execute all subframes, images, stylesheets, scripts was 25 seconds.
Looking at the Load time we knew that it was the scripts which consisted of CDN’s and various third party scripts which were taking a long time to download and execute.
Our HTML Structure was:-
....html tree</div><script> // 10-15 such script tags
As we knew that according to our html structure it would first parse the dom tree and then download all the CDN’s and then after downloading execute those scripts, therefore after googling we found a way to handle this problem.
After searching through the web we found there is a way to download the scripts before the DOM is parsed and this is what we needed and we can do it with the help of two keywords async and defer. But one should use these keywords only after properly understanding what problem they are trying to solve.
As we can see from the above diagram, without async and defer, first html is parsed, then when scripts are found, DOM parsing is stopped and scripts are downloaded and then the scripts are executed and then it continues parsing the DOM.
With async keyword, html is parsed and when scripts are found, html is still being passed while scripts are downloaded asynchronously and when the downloading is finished DOM parsing is stopped for scripts to execute. After execution of scripts DOM parsing is resumed.
With defer keyword, html is parsed and when scripts are found, html is still being passed while scripts are downloaded asynchronously and when the downloading is finished DOM parsing is not stopped for scripts to execute. Whole html DOM tree is parsed and only then the scripts are executed.
We went with the defer keyword and now the html structure looked like this-
....html tree</div><script defer> // 10-15 such script tags
But it was not long enough until we found out why this had no impact on the Load Time. To use the power of defer keyword, the scripts should be downloaded while the DOM is loading. And if the scripts are at the end of the html it doesn’t make any difference as the html has already been parsed. Therefore we pasted our scripts before the html. And Voila the results were as follows:
Dom content loaded Time: 4.37 seconds
Load Time: 20.43 seconds
This was because the scripts were now getting downloaded asynchronously with the parsing of html and therefore the time taken for the scripts to download and html to parse was 4 seconds and total time taken including execution of scripts was 20.43 seconds.
This improves the user experience and the user now doesn’t have to wait for the page to get loaded to start using the site. Previously the users had to wait for 24 seconds to start using the site and now they will have to wait only for 4 seconds. But this doesn’t mean they will be able to use all the functionalities on the site as the scripts are still getting executed. That’s where you have to be careful where you have to use the defer keyword and where you have to not.
Its better to start using async or defer for third party scripts in your site unless the script is dependent on some other critical rendering.
Hope this article helps your team in improving the page load performance.