Things to take care to improve the speed of displaying web pages

One of the reasons why web page display is delayed is "loading JavaScript". The browser interprets and downloads the downloaded html document in order from the top, but if you encounter the "script" tag on the way, it temporarily stops interpretation at that place until JavaScript is read and executed . Fly.io summarizes how to load JavaScript without affecting the display speed of the page.

Lighthouse: how to reduce render-blocking scripts
https://fly.io/articles/lighthouse-how-to-reduce-render-blocking-scripts/

Whether the script tag reads external JavaScript or JavaScript written inline, in both cases the browser will stop interpreting html. When reading an external JavaScript file, interpretation of html will remain stopped during the communication time, so a particularly serious problem will occur. The figure below shows the behavior when script tag is inserted in the middle of html. When the browser reads the script tag, it stops interpreting html there and downloads the JavaScript file and does not restart until the complete execution is completed.

Settings to reduce this waiting time are "async", "defer", and so on.

For JavaScript which can be executed at any timing when displaying the page, it can be read asynchronously by specifying the "async" attribute in the script tag at the time of reading, and during the waiting time while reading The browser can proceed with the interpretation of html. The figure below shows the behavior when "async" is set. Even if the browser reads the script tag, it continues interpretation of html until the download of the JavaScript file is finished. When the JavaScript file is downloaded, it halts interpretation of html and executes JavaScript, but it has been able to shorten the time to stop html interpretation.

However, it is important to note that in asynchronous loading, execution order is not guaranteed, and there is a possibility that the JavaScript listed after it is executed first. Third-party JavaScript or other file independent JavaScript should have an "async" attribute. In addition, "async" is used as follows.

[code]

[/ code]

Also, if you specify the "defer" attribute in the script tag, that script will be executed after html has been completely interpreted. Unlike async, it does not stop html interpretation, it also has the advantage that script tags can be executed in the order they were written.

Therefore, in addition to wanting to execute after html's interpretation is completed, the "defer" attribute also works effectively when there is a dependency between scripts. In addition, "defer" is used as follows.

[code]

[/ code]

These two elements are appropriate when the script tag appears in the middle of an html document, but it is not very effective if the script tag is written at the end of an html document. Because browsers read html documents sequentially from the top, most of the content has already been interpreted by the time you read the last listed script.

There is also a lazy loading method using the API "Intersection Observer API". With this API, it becomes possible to read the JavaScript file at the timing when a specific element enters the screen, enabling JavaScript to be executed at a more appropriate timing. Be careful, however, that it only supports some browsers such as Chrome .

The performance of the website can be easily measured by using the tool called Lighthouse. It also creates a report that summarizes how you can improve page loading speed, so it is recommended for those who care about their page reading speed.

Chrome extension "Lighthouse" that automatically checks web page loading speed and accessibility - GIGAZINE