Lighthouse: Avoid document.write()
Google's Chrome Browser (versions 55 and higher) automatically intervenes on behalf of the user if it detects
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
- If the
<script>is a third-party script
- If the
<script>isn't already cached by the browser
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.
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.