In this article we are going to discuss how to avoid document.write() on a WordPress Website, what failing the audit means for you, and actionable tips on how to fix it. As part of your Google Lighthouse Or Google PageSpeed audit, you may find that your website uses document.write(). When generating these reports, if the website uses document.write(), it will fail the respective audit.

First, we're going to discuss what these audit failures look like, then we're going to discuss what document.write() actually is, and finally we're going to figure out how to make your WordPress website pass the audit. Use the table of contents on the left of this screen to easily navigate through the document

Google PageSpeed Audit: Avoid document.write()

Google PageSpeed (Lighthouse) will state that the website “uses document.write()”, causing that audit to fail.

You may also be notified that your WordPress website fails this audit via a Lighthouse report, for the Firefox and Chrome Dev tool consoles. These are the main avenues that will alert you if your website is using document.write().

Chrome DevTools:

[Violation] Avoid using document.write().

Or,

Firefox DevTools:

An unbalanced tree was written using document.write() causing data from the network to be reparsed.

Also, keep in mind that this article is specifically tailored for WordPress websites, but you can fail this audit with anything that includes the JavaScript function.

What is document.write()?

Before we figure out how to fix this audit, let's figure out what document.write() actually is, and why Google wants us to replace it.

It’s a JavaScript function inserts HTML into the page wherever it appears. Executed after page load, it replaces the entire header and body tag with whatever it contains. Basically, it will overwrite every piece of usable code in the website if used by itself. Here's an example of that on The Economist:

document.write("<h3>Yeah,nah,yeah... You have been replaced</h3>");Code language: HTML, XML (xml)

Obviously, if your WordPress website is failing the avoid document.write() audit, it's probably not being completely overwritten by it. The complete overwriting property of this function only happens if loaded after the page itself was loaded. If you run it before the document is loaded, it inserts HTML directly where it appears.

This is where the use cases become more commonplace. Typically, it can be used to insert an advertisement into your website. This is the most common use case of document.write() in 2020: the injection of advertisements into website content.

TLDR; document.write is usually used to inject scripts:

document.write('<script src="https://makingadrevenue.con/ad-inject.js"></script>');Code language: HTML, XML (xml)

How Does document.write() Impact Performance?

This little function actually impacts performance so much that modern versions of the Chrome browser will actually block it from running, if specific cases are met.

Those specific cases need to include the fact that the user is experiencing a weak Internet connection, the script does not contain async or defer attributes, and it is loaded in the top level document (In English, this means the main web page, and not any iframes that are contained inside).

This blocking is mainly used to protect visitors using a very slow network connection on a mobile device (think 2G or even 3G).

As per Chrome's testing, blocking document right for their 2G users resulted in a page parsing time that was 38% faster on average. This 38% translates into six entire seconds. (Source)

Another major issue when using document.write() on your WordPress website is another property of the function. This property refreshes and reloads the Dom tree. If the Dom tree was already built, using document.write() will force it to be Built again. This results in excessive data transfer, as well as a slower loading webpage. This may not be the issue on a small web page, and would probably only add a couple of milliseconds to the loading time, but on a larger webpage (which is extremely common when using WordPress and a heavy theme/page builder), this could have a big impact.

So by now, you should know that the audit “Avoid document.write()” aka “▲ Uses document.write()” Is one that you should be worried about if triggering on your WordPress website. Next, let's review the common causes of the usage of document.write() in your website, and what you can do to remedy the issue.

What causes document.write() in a WordPress website?

The base installation of WordPress does not use document.write(), nor do most plugins nowadays. As you should have got from the above section, this practice has fallen out of favor in the past couple of years.

Let's go over a couple of common Web assets that will use document.write() (and why they include this function in their code):

Ads:

The most major instance of document.write() in 2020 is in Display ads.

Third Party JS:

Third party JavaScript can use document.write(). This will trigger a warning, but in most cases Chrome won't block the function from running as it is not coming from the same domain.

Plugins:

By extension, sometimes plugins will have this tag in their own code, but the most common Instance of this being included is in 3rd party scripts. If a plugin is calling a third party script on to your website, this may trigger the audit to fail.

CDN Fallback:

As pointed out in this comment in a GitHub discussion, document.write() can be used as a fall back to a local script if a CDN fails.

It's definitely worth noting that the usage of document.write() is definitely being phased out. It was in 2016 that Google began blocking this with their Chrome browser, and most ad networks (if not all) have fixed this issue.

How to identify what’s behind document.write()

In this subsection, we're going to show you how to identify where the document.write() function is being called in your WordPress website. After you find it, you can easily remove it.

This is actually fairly easy because all you need to do is run the Google PageSpeed report. If you fail this audit, it will identify the URL or script where document.write() is being used in your WordPress website. From there, you can remove, replace, or otherwise fix the issue.

How to remove document.write() from a WordPress website

The simplest answer is to not inject scripts using this function. In this case, the simplest answer may be the easiest one to implement. As long as you have identified what is using document.write() to inject a script into your website, you can address it.

Ads:

In 2020, most advertising networks do not use this function . If they do, you can request for a script that doesn't use document.write(). If they don't have that option, you can add an async tag to the script element (while researching other ad networks to switch to).

WordPress Plugins:

In some cases, you can even contact the plugin developer and ask them to replace this function with something that does the same thing. It's in the developer's best interest to improve their plugin, as using this script does not comply with best practices, and result in Chrome blocking users websites that use the plugin. You can suggest that they use one of these two JavaScript functions that fulfill the same purpose: document.appendChild() or parentNode.insertBefore() (This is how Google Analytics inserts their scripts).

If all else fails:

Finally, if you absolutely must use this script on your website (sometimes the plugin will include it, yet you still need to use it) you can simply load it asynchronously, or defer it. If you can access the actual code that inserts this JavaScript into your website, you can easily add a tag like this:

<script async src="script.js"></script>Code language: HTML, XML (xml)

it depends on the usage of the JavaScript in your WordPress website, but asynchronously loading is typically better than deferring.

If you can't access the code, and this is probably the most common Road block, there's an awesome tool that allows you to load things as well as defer them without needing to access the code. You can easily use a plugin called asset cleanup to identify which scripts are causing your WordPress page to load slowly and then load them asynchronously or defer them with a click of a checkbox.

You can do this on a page by page basis, or for the entire website. The good thing about this tool is that you don't need to edit the actual code. Especially if this is with a plugin, any edits in the code will be overwritten when the plugin updates itself. Using this tool allows you to drastically speed up the loading time of your website. You can also do tons of other things that positively impact your website performance.

Conclusion

We hope that this article teaches you how to avoid document.write() In WordPress.

Avoid document.write() is an audit that you can fail in Google PageSpeed, Lighthouse, Chrome, and more. It can seriously impact the loading time of your website, sometimes even up to 10 seconds, but Luckily the issue can be resolved fairly easily.

If you have any questions about how to avoid document.write() in WordPress, feel free to leave them in the comments section below.