Improving Page Loading Speed on Mobile with JavaScripts

As a web developer, you must have been familiar with JavaScript. By using JavaScipt, you can improve your mobile web performance in two areas. First, it is the second largest contributor to webpage weight, behind images, thereby increasing download time. Second, once downloaded, the browser then needs to run the script, which can delay the downloading/rendering of other assets on the page.

In fact, JavaScript is one of the triumvirates of technologies that make web pages work. The HTML (Hypertext Markup Language) controls the structure and content of the webpage; CSS (Cascade Styling Sheets) controls how the site looks on different devices; and JavaScript makes the page more interactive and dynamic.

Testing for Blocking JavaScript

If you have tested your webpages using Google PageSpeed Insights, you will have to test your mobile webpages regularly using tools such as WebPageTest and PageSpeed Insights. You will have seen the following warning:

The above image and text is from a Mobile PageSpeed Insights test on BBC.com conducted in February 2017. Note “above the fold” which is visible only on a mobile device refers only to the part of the webpage, without the need of scrolling. Google is not analyzing scripts on the rest of the page.

4x Growth in JavaScript Use in Five Years

Over the last five years the amount of JavaScript used on the average mobile page has almost quadrupled from 101KB in February 2012 to 387KB in February 2017. The number of requests for different Javascript files has increased from 8 to 21. You can see the illustration from the graph below from HTTP Archive. Using data from WebPageTest, HTTP Archieve tests the top 1 million sites several times every month. Then, it publishes trends and stats that are essential benchmarking for the performance of your site.

The above image shows that JavaScipt accounts for 17.4% of page weight for the top 1 million sites monitored by HTTP archive. JavaScript also accounts for 21 out of 93 total requests (22.6%). However, on some sites, JavaScript has a considerably larger share of page weight than the norm, especially in the news space.

What is the Effect on Mobile Page speed?

We try to compare how this JavaScript impacts on some big sites:

1. com: 18.3 seconds
2. com: 27.4 seconds
3. com: 8.8 seconds
4. com: 31.5 seconds

But, the reasons why one sites can load faster and the other cannot can be caused by many things, such as server response times, use of content delivery networks (CDN), the impact of ad networks, inclusion of third-party data (common on new sites), or the time and place of the test (in this case California, USA). However, all other things being equal, it is possible that JavaScript could be a contributing factor. In the above information, BBC.com did receive more warnings for blocking scripts above the fold than the other news sites.

Reducing Reliance on JavaScript

Task that cannot be accomplished with HTML or CSS is often performed with JavaScript. However, these features to the HTML or CSS standards and they are implemented by browsers, the JavaScript patch is no longer needed, as HTML/CSS is likely to be more efficient. In fact, there are several ways that JavaScript can be implemented on a webpage, such as, blocking scripts, inline scripts, asynchronous scripts, and deferred JavaScript.