Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

Lighthouse: Avoid document.write()

Overview

Google's Chrome Browser (versions 55 and higher) automatically intervenes on behalf of the user if it detects document.write().

Specifically, it will not execute <scripts> that are injected via document.write() when all of the following conditions are met:

  • If the user is on a relatively slow network (like 2G/3G or slow wifi)
  • If the <script> is render-blocking
  • If the <script> is a third-party script
  • If the <script> isn't already cached by the browser
  • If document.write() is in a top-level document
  • If the request for the page is not a reload

However, if all of the conditions aren't met, then it is possible for the browser to execute document.write(), which can significantly increase page load times, particularly when it concerns third-party scripts.

How does your site score on this audit?

How does using document.write() affect page performance?

Modern browsers use speculative parsing, i.e., the browser starts looking ahead to load scripts, stylesheets and images it finds in the parsing stream.

This allows the DOM construction algorithm to execute a predictive run in the interest of page load performance.

Whenever scripts, stylesheets, or other render-blocking resources injected via document.write() are encountered, DOM construction must be halted because the browser has to wait for such resources to download, parse, and execute.

If the script then dynamically injects another script, the browser is forced to wait even longer for the resource to download.

Using document.write() can drastically increase blocking time, latency, and overall page loading times (especially, on slower internet connections).

Chrome will only intervene and block the document.write() call in extreme scenarios that fulfill all the aforementioned criteria.

Optimizing this audit can drive significant performance gains for your website and improve your visitors' page experience.

How does GTmetrix trigger this audit?

GTmetrix flags any call to document.write() that wasn't blocked by the Chrome browser, including any warning flags raised by Chrome. The audit triggers if one or more such calls exist.

How to fix this audit?

You can fix this audit by preferably eliminating document.write() altogether, wherever possible.

Avoiding the use of document.write() should ideally be built into your development workflow so that your production website is optimized for web performance from the beginning.

If you cannot avoid using document.write() for whatever reason, add async tags to its <scripts> to enable asynchronous loading of scripts and eliminate render-blocking behaviour.

Note: This is an advanced-level optimization

Developer support is strongly recommended.

Summary

6.0.0
 ****