Avoid document.write()

After running a website speed test, one of the Lighthouse warnings may indicate the use of the document.write() method. This message indicates that there is a script (native or third-party), or a string of text, that needs to be written to the document. While having the ability to bring in third-party scripts to add to the user experience, they also tend to directly impact page performance. In the case where it is calling a script, this can cause huge performance delays, especially for users on mobile devices with subpar network connectivity.

Browsers use speculative parsing, which looks ahead at what is next in the DOM, but when and if they encounter scripts in the document.write() message, the entire downloading process stops. Again, scripts are a core part of the web page, so they are considered a render-blocking resource. The browser must render, parse, and execute the script before continuing, which delays the page load time.

In fact, after version 55, Chrome browsers stopped executing any script if certain conditions were not met, such as slow network conditions, if the script was render-blocking, if it was a third-party script, if the script was cached, if the document.write() method was included in a top-level document, and lastly, if the page request was not page load request. If all these conditions were present, scripts would not be executed, however, if any of those conditions were not met, the browser would execute the script, which would add latency and delays, significantly slowing down the overall page load time. So, from a web development perspective it is important to ensure that you do everything possible to avoid this if you can.

The best way to avoid using the document.write() is to not use it at all. The best way to avoid this is to avoid using this in the development of web pages so that this optimization does not need to be done later. Having to go back and make all the necessary changes is time-consuming and costly. However, if it cannot be avoided, like with the CSS @import rule, you set scripts to load asynchronously, to avoid having it holding up the DOM tree for the rest of the page components and elements. And always run regular speed tests to ensure page code changes are not negatively impacting the user experience.