Here’s a look at how JavaScript will be used in different ways in 2021

Test basis:

All metrics in this article are from the HTTP Archive dataset. HTTP Archive is a community-run project that has been tracking the way the web is built since 2010. Using WebPageTest and Lighthouse behind the scenes, the metadata of approximately 8.2 million websites is tested each month and included in a public BigQuery database for analysis.

Test sites: 8.2 million; Data processing: 39.5TB.

How much JavaScript is loaded?

Here is the size distribution of JavaScript scripts loaded per page:As you can see, at the 50th percentile (median), 427KB of JavaScript scripts are loaded per mobile page and 463KB per desktop page.

The following is on each mobile pageDon’t useSize distribution of JavaScript scripts:Here is the distribution of unused and total JavaScript script sizes per mobile page:Eventually, unused JavaScript accounts for the total load36.2%. You can use Lighthouse to examine unused JavaScript in a web page and selectively remove unused code to reduce the percentage of wasted JavaScript.

How many JavaScript requests are there?

A request to start on a page may be one of the reasons why the page loads slowly. Here is the distribution of JavaScript requests per page:Here is the distribution of JavaScript requests per mobile page in 2020 and 2021:As you can see, the number of JavaScript resources requested increased slightly in 2021 compared to last year, with the median loaded JavaScript resources being 20 for desktop pages and 19 for mobile pages.

How is JavaScript requested?

JavaScript can be loaded into a page over multiple lines, and the way it is requested affects the performance of the page.

1. The async and defer

Loading JavaScript can block rendering, which can be a performance problem. Asynchronous or lazy-loaded JavaScript can help improve the experience in some ways. Asynchronous load scripts can be implemented using both the Async and defer properties. Here are the percentages async and defer use on the page:

2. The preload and prefetch

When the page is rendered, the browser downloads the specified resource. When the preload attribute is used, the browser is told that the download of this and the script is of higher priority. When prefetch is used, the script is downloaded when the browser is free. Here is the ratio of these two attributes used on JavaScript scripts:Here’s how the preload attribute is used in JavaScript scripts on each page:Here’s how the prefetch property is used in JavaScript scripts on each page:

3. The first part and the third – part

Here is the number of first and third party JavaScript requests per mobile page:Here is the number of first and third party JavaScript requests per desktop page:As you can see, the number of third-party JavaScript scripts requested is always slightly higher than that of the first party. This effect may be due to the fact that third-party scripts provide useful interactive functionality for the network.

How is JavaScript delivered?

JavaScript scripts can be compressed and shrunk to load faster. Here’s a look at the extent to which both methods are used.

1. The compression

Compression is the process of reducing file sizes as resources are transferred over the network. This effectively reduces the download time of JavaScript resources, which are highly compressible. Here are some common ways to compress JavaScript resources and their usage rates:As you can see, most resources are either compressed using gzip, Brotli, or not compressed. 55.4% of JavaScript resources on mobile pages are compressed using Gzip and 30.8% of JavaScript resources are compressed using Brotli.

The following are common JavaScript resource compression methods for first-party and third-party resources and their usage ratios:Here are the sizes and usage ratios of first and third party uncompressed resources:As you can see, 90% of uncompressed third-party JavaScript resources are less than 5 KB.

2. To reduce the

Compression only changes the size of JavaScript resources transferred over the network, while shrinking makes the code itself smaller and more efficient. This not only helps reduce the load time of the script, but also reduces the amount of time the client spends parsing the script.

Here’s how unzoomed JavaScript scores on mobile pages in Lighthouse:Where 0.00 indicates the lowest score and 1.00 indicates the highest score. 67.1% of moving pressure surfaces were rated between 0.9 and 1.0. That said, there are still more than 30% of unreduced JavaScript scores below 0.9.

Here is the distribution of unshrunk JavaScript scripts per mobile page:According to Lighthouse’s audit report, 57.4% of mobile pages had 0KB of unshrunk JavaScript scripts. 17.9% of mobile pages contain 0-10KB of unreduced JavaScript.

Here is the unminiaturized JavaScript distribution for mobile pages:As you can see, on average 82.0% of unminified JavaScript on mobile pages actually comes from first-party scripts.

3. The source map

SourceMap is information sent with JavaScript resources that allows the browser to map the miniaturized resource back to its source code. This is useful for developers debugging in a production environment. However, only 0.1% of mobile pages use SourceMap.

Libraries and frameworks

1. Use of libraries

Used hereWappalyzerTo detect the techniques used on the page, here’s how JavaScript libraries and frameworks are used:As you can see, jQuery is still the most used library, with 84% of mobile pages using jQuery. React usage has jumped from 4% to 8% since last year, which is a significant increase.

So why are there still so many websites using jQuery in 2021? There are two main reasons:

  • Most WordPress sites use jQuery, and nearly one-third of all WordPress sites use WordPress.
  • Several other commonly used JavaScript libraries still rely on jQuery, which helps to use jQuery indirectly.

​

The most popular jQuery version is 3.5.1. This version is used by 21.3% of all mobile pages.

2. Combination of frameworks and libraries

Here’s a look at how popular frameworks and libraries are used together on the same page:As you can see, the top ten library and framework combinations all include jQuery.

3. Security vulnerabilities

There are advantages and disadvantages to using JavaScript libraries. One drawback when using these libraries is that older versions may contain security risks such as cross-site scripting (XSS). When Lighthouse detects a JavaScript library used on the page, it fails to audit if its version has any known vulnerabilities in the open source Snyk vulnerability database.

63.9% of mobile pages use JavaScript libraries or frameworks with known security vulnerabilities. Here is the percentage of mobile pages that have been found to contain vulnerable JavaScript libraries and frameworks:As you can see, JavaScript vulnerabilities were found in 57.6% of jQuery pages compared to 80.9% in 2020.

How to use JavaScript?

Now that you know how to get JavaScript, what can you do with it?

1. AJAX

One way to use JavaScript is to communicate with the server. Here is the distribution of asynchronous requests per page:The maximum number of asynchronous requests on a desktop page is 623, and the maximum number of asynchronous requests on a mobile page is 867.

Here are the percentages of synchronous and asynchronous AJAX requests:2.5% of mobile pages use deprecated synchronous AJAX requests. Here are the percentages of synchronous and asynchronous AJAX requests on mobile pages over the last three years:You can see a significant increase in the use of asynchronous AJAX requests. However, the use of synchronous AJAX requests has not declined significantly.

We can roughly divide these AJAX requests into three different apis: the core API XMLHttpRequest(XHR), Fetch, and Beacon.

Here is the distribution of XMLHttpRequest requests per page:Here is the distribution of the number of Fetch requests per page:The following is the distribution of Beacon requests on each page:Here’s how XHR and Fetch have been used in the last three years:

2. Web Components and Shadow DOM

As Web componentization grows, developers building single-page applications may view user views as a set of components, not only to allow developers to build specialized components for each function, but also to maximize component reusability. It can be in a different view of the same application, or in a completely different application. Such use cases lead to the use of custom elements and Web Components in your application.

It can be said that as many JavaScript frameworks have become more popular, the idea of reusability and building dedicated function-based components has become more widely adopted.

A custom element is a custom element built on top of the HTMLElement API. The browser provides a customElements API that allows developers to define elements and register them with the browser as customElements. Custom elements are used in 3.0% of mobile pages.

Shadow DOM allows developers to create specialized subtrees in the DOM for custom elements introduced into the browser. It ensures that styles and nodes inside the element are not accessible outside the element. 0.4% of mobile pages use Web Components’ Shadow DOM specification to ensure element scoped subtrees.

About this article:

Original text: almanac.httparchive.org/en/2021/jav…

By Nishu Goel

Translator: CUGGZ