Text JavaScript async src loaded. Asynchronous download JavaScript - accelerate page loading. Adding Attributes Defer or Async in WordPress
29.06.2020
Greetings, friends! Do you know that downloading JavaScript is one of the most narrow places in the performance of the site? Today, my main task is to explain what the script is and how it affects the speed and performance of the site.
The browser loading the Script tag stops the rendering of the page until the script is downloaded and not fulfilled. The page is blocked and the browser is not responding to the user's actions. Delay time depends on several factors:
configurations
internet connection speeds
file size and other ...
For this reason, the Google PageSpeed \u200b\u200bInsights Site Downloads Speed \u200b\u200bAnalyzer recommends removing the JavaScript code from the top of the page blocking its display. Good practice is the placement of scripts at the bottom of the site, for example, in front of the closing tag
or setting asynchronous loading.
If the script code affects the display of the top of the site - do not take it into a separate file, but embed directly into HTML.
JS can change the contents of the site and even redirect to another URL. In this case, the script connection at the end of the document will lead to the "twitching" effect of the page, loading new or changing the existing elements at the top.
Apply ASYNC and DEFER attributes for Script tag
Let's figure it out that it is an asynchronous and deferred JavaScript job and which is the principal difference between Async and Defer attributes. But first consider the document processing sequence in the usual connection of the Script tag.
< src \u003d "example.js"\u003e
In a visual example, I will use the following conditional notation:
- Page Processing - Download script - Execution of the script
Thus, the processing sequence occurs according to the following scheme:
The HTML-code analysis is interrupted at the time of loading and executing the script, after which it continues. The webpage display occurs with the delay.
Attribute Defer.
The Defer attribute allows the browser to start loading JS files in parallel without stopping further page processing. Their execution occurs after a complete parsing of the object model of the document (from the English Document Object Model, abbreviated by the DOM), while the browser guarantees a sequence based on the order of connecting files.
< defer SRC \u003d "example.js"\u003e
Attribute async.
The support of the ASYNC attribute appeared in HTML5, it allows the browser to download JS files in parallel and perform immediately after loading, without waiting for the processing of the rest of the page.
< aSYNC SRC \u003d "example.js"\u003e
Processing sequence diagram:
This is an asynchronous loading. The attribute is recommended for such scripts that do not have a significant impact on the display of the document. These include statistics collection counters (Google Analytics, Yandex Metric), advertising network codes (Yandex Advertising Network, Google Adsense), Social Network Buttons, and so on.
Site downloading speed is one of Google ranking factors.
Asynchronous connection of JavaScript reduces page loading time due to lack of delay. Along with this, I recommend compressing and combining JS files into one, for example, using the library. Users like quick sites 😎
ASYNC and DEFER - JavaScript download strategies
JavaScript is an integral part of any modern web application, and strategies that we decide to use to download directly affect the performance of this application itself. In this article, we will try to understand important differences between each approach, pros and cons. Along with the effects of performance and ways to optimize the interaction with the page and download time.
To demonstrate, I will create a website consisting of the following external dependencies. Pay special attention to the appropriate sizes of files, since the download time of files is directly proportional to this.
HTML - page ~ 1 MB. Contains actual marking / content to show some dynamic output from JavaScript.
Image - image1.png ~ 5 MB
JavaScript - file1.js ~ 3 MB is a kernel (main file) JavaScript and depends on HTML syntactic analysis. It is needed to show some dynamic contents or mount a react / angular component on the page.
JavaScript - File2.js ~ 460b is a small, independent JavaScript file that interacts with DOM.
JavaScript - File3.js ~ 1.5 MB is a secondary JS secondary file and depends on file1.js to perform some with a lower priority code. This code is not required immediately for the rendering of the page and interact with the user; It shows icons of social networks, comments, online help, launch some analytics tasks, etc.
Now it's time to analyze various approaches
Approach-1 [scripts in the Head section]
In the first case, we will download all the scripts tags in the HEAD section of our HTML. Below is a screenshot of the CHROME page network tab, ready to interact with the user.
Pros:
The sequence of the code of various JS files will be saved in the order in which the files were included in HTML. In the current example, even if File2 and File3 were downloaded to File1, the execution order will be correct.
Minuses:
In this scenario, the HTML syntax analysis will be suspended until all 3 scripts are loaded in the HEAD section, analyzed and executed. An empty white screen will be shown to the user, even if the HTML file has already been loaded [but not analyzed]. This is definitely not good for usability.
None of the above scripts can access / manipulate the HTML page, as DOM is not ready yet. One of the possible solutions for processing this problem is the listening of the DomContentLoaded event, and then the execution of the code after that. DomContentLoadedDigital is triggered when the source HTML document was fully loaded and analyzed, without waiting for the upload to download style tables, images.
Approach-2 [scripts at the end]
To overcome 2 problems with which we face in the first approach, let's drive all 3 scripts at the bottom of the Body tag.
Pros: HTML is analyzed before downloading scripts, so the user will be able to see actual content immediately instead of waiting for scripts.
Since all scripts are performed after parsing HTML, then they can all access DOM for any manipulations. The sequence of scripts is saved.
Minuses:
There is no productivity growth as such.
Approach-3 [Using the ASYNC attribute]
HTML5 introduced the Async attribute Script, which helps in downloading the relevant script files in parallel to another stream without affecting the HTML syntax analysis.
However, the corresponding script will be analyzed and executed as soon as it completes the download, regardless of whether the HTML syntax analysis is completed, and will have a reference to the DOM element to this particular point.
Here you can clearly see that file2.js was loaded to the HTML file. However, while the browser loads File2, it did not suspend the syntactic HTML analysis and because of this, by the time of its execution, he had a reference to the HTML placeholder to enter dynamic content.
Pros: Since scripts are loaded in another stream, the HTML syntax analysis will not be suspended, and the user will be able to see the immediate content instead of a white empty screen. The main increase in performance, i.e. domcontentloaded time decreased from 47.68 seconds to only 21.12 seconds and is ~ 55% increase.
Minuses:
The JS execution sequence is not saved. It is performed in the appropriate boot order, and not enabled sequence of scripts inside HTML. Browser support is not supported on old web browsers, that is, IE 9 and below.
What happens if JS is loaded before the DOM element will be available? An error will be thrown out.
Note: Placing scripts with the async attribute at the bottom of the Body section will be useless and equivalent approach-2.
Approach-4 [Using the defer attribute]
Defer Attribute will make the script execute only after the HTML parsing has been completed. One very important point to take into account here is that Chrome does not yet support delay and does not affect the duration of domcontentloaded. However, it performs scripts at the end of the HTML syntax analysis.
Pros:
The sequence of import scripts is saved. So, file3.js is performed only after the download and execution of the File1 is completed, even if the file3 was loaded earlier.
Browser support - it has better support for browsers compared to the ASYNS attribute, i.e. partially supported in IE V6-9
Scripts can access the DOM, as it is performed only after the full HTML parsing.
Minuses:
Initially, I thought that the delay would be the best choice than asynchrony, but later found that Chrome still does not support it [version 71.0.3578.98] and does not affect the duration of domcontentloaded.
Nevertheless, it works as expected, in Firefox with a significant improvement in performance.
conclusions
It is preferable to place script tags in the Head section with the ASYNC attribute for third-party libraries that depend on Google Analytics, Google Recaptcha or something else that does not require DOM access, since the corresponding scripts are loaded in parallel, but are performed immediately.
Use Defer for all other scripts downloaded in the Head section, as they will also be downloaded in parallel, but will be executed only after the HTML and DOM syntax analysis is completed ready for access / manipulation.
You can also use a combination of DomContentLoaded Listener inside asynchronous scripts to perform functionality later. Please leave your opinions and conclusions in the comments, and I will be glad to discuss them with you.
The author of this material is me - Pahwanks Yuri. I provide services for writing programs in Java languages, C ++, C # (as well as advising on them) and creating sites. I work with sites on CMS OpenCart, Wordpress, MODX and self-written. In addition, I work directly with JavaScript, PHP, CSS, HTML - that is, I can modify your website or help with web programming.
Connected scripts (JavaScript) blocks the loading of the HTML code. When the browser (parser) comes to the tag
And The Following Examples Show How to Put (An Inline) Script Inside The
Module Fallback
Browsers That Support The Module Value for the Type Attribute Ignore Any Script with a nomodule attribute. That Enables You to Use Module Scripts While Also Providing Nomodule -marked Fallback Scripts for non-Supporting Browsers.
Where iTunes store downloaded firmware
Connecting Apple Keyboard, Magic TrackPad and Magic Mouse to Windows PC
Hissing, noise, crackling and other extraneous sound in columns and headphones - how to find and eliminate the cause?
Laptop turns off after cleaning from dust
The processor is heated, what is the reason