Avoid Using Document.Write: What Is It and Why You Should Avoid

Did you get a warning about document.write in one of the Google Lighthouse audits?

Well, especially if you are in a page speed optimization process, it is possible to get this type of warning.

So what is the Document.write error? Why does using this type of file on your web pages negatively affect page speed? Does Chrome execute this file? What are the effects of these types of files while improving the performance of your web page?

Before starting, let us note that: You can easily analyze different pages on your site through Screpy, and completely eliminate shortcomings thanks to simple and easy-to-follow guidelines. For this, we carefully create the tasks you need to follow!

We will examine all details about document write in today’s content and specify the solution methods mentioned in our task content named Uses document.write (). Let’s get started right away if you wish, folks!

Do you want to increase your website traffic?

Try for free to boost your website traffic!

Register Now

What is Document.Write?

Basically what document.write, which is a code snippet, does is to write a string text to the document stream file to be opened by the document.open () command.

Nowadays, Google Chrome is no longer running the script named document.write. 2016 Chrome updates have led it to decide that this type of file should not be available on websites as it increases the page load time. If you are doing the technical optimization of your website according to Chrome 54, it is possible to encounter this type of error during the performance audit.

What Exactly is the Problem with the Document.Write File?

In short, we can say this: We know that Chrome version 54 doesn’t execute document.write commands. Paul Kinlan, who first announced this through Developers.google.com, made it clear:

The reason why such commands, which gave various error notifications in the 53rd version of Chrome, were not executed as soon as the update took place (he talk about Chrome 54 Update here), mainly because they cause poor network connection and negatively affect the user experience due to the slow loading process.

In short, what happens is that the document.write command causes various shortcomings in the process of loading your page for the user. These can be listed as follows:

1. Pages that are delayed to load or do not load due to an extremely poor network connection
2. The script that is not in the browser cache may have activities that prevent the parser from running.
3. Command is added to the highest level document.

Experiencing the above situations may cause the script not to be loaded. Having Chrome go through this type of update can make certain areas of your web page unavailable to some of your visitors.

Test Your Website Issues

You can quickly analyze your site

Analyze!

Why Did Chrome Make This Kind Of Update?

In fact, the main reason for this update is that Chrome (with version 54) wants to eliminate malicious apps by blocking Document Write. The most important feature of the document.write command is that it adversely affects the performance of your web page.

For Google, which prioritizes performance in web page ranking factors, loading time, working process and user experience are very important. The factors that cause the experience to give a low score are therefore should be eliminated.

Let’s See Same Field Data About Using Document.Write

Here are two results driven from studies conducted about document.write’s effect on page performance:

1. Accelerated web pages: Research by Chrome underlines how harmful Document.Write can be to the performance of websites. A test by Chrome revealed that certain website owners speeded up loading speed by 38 percent by avoiding the use of document.write. This meant an acceleration of approximately six seconds for users. In a situation where even a single second of loading is extremely valuable for reducing bounce rates, the result by avoiding document.write is truly excellent.
2. Reloaded DOM Tree: This is not all! Again, using this command is a big hassle if the creation process of the DOM tree on your web page has been completed. Because every time this command is run, it forces the browser to repeat the DOM Tree loading. This will reduce the loading speed and increase the time users have to wait.

So why is this happening? Because if a file is completely loaded and closed, using this command means reseting the document in question. This means time wasted by reloading.

What Do Data Say?

The statements made by Google through Developers on the subject reveal some very clear data.

If external files on your web page were injected using the document.write () command, the actual content on your page had to wait for a longer time. This means much lower performance scores.

Especially your visitors using slower connections, ie. 2G feel this delay much more intensely during their web page experience. Chrome explained the data it obtained after a regular 28-day data collection process as follows:

This data collection study was conducted on people using only 2G connections and data was collected stably for 28 days.

According to the studies, 7.6 percent of the websites that are visited using 2G connections and that encounter at least one or more parser-blocking scripts and offer low UX host the document.write () command. This command is usually injected into the highest level document of the page.

In the continuation of the study, avoiding document.write was done on the websites that fall within this 7.6 percent. After this improvement, the following was provided:

• 10 percent of the web pages achieved a strong speed that could create a powerful first contentful paint score.
• Web pages seen in a fully parsed manner went up to one-fourth of the total pages.
• 10 percent of websites had to have very slow loading speeds that caused users to bounce improved.
• 21 percent of the websites managed to shorten the mean time by at least one second until the first contentful paint.
• 38 percent of the websites achieved a loading time improvement of about six seconds.

How To Pass the Uses Document.Write Audit in Google Lighthouse

So how can you avoid the use of document.write so that your website performs better? What are your alternatives in this process?

We can say this: If you prefer to build a DOM tree instead of using document.write as a command while adding any content to your web page, the results you will get will be much stronger.

In short, if you are adding a third-part service to your page, do not use the document.write command.

For example, you see an example below. Here is a command added as a DOM tree:

var sNew = document.createElement("script");

sNew.async = true;

sNew.src = "https://example.com/script.min.js";

var s0 = document.getElementsByTagName('script')[0];

s0.parentNode.insertBefore(sNew, s0);

Do not block Javascript: There is another issue we recommend you pay attention to in this regard. It is very important that the commands you use do not block the running of Javascript.

Related to this, Defer and async attributes provide exactly that: External scripts are invoked asynchronously when you use these attributes. In that sense, if you have a third-party service available on your website, you need to make sure that this service offers an asynchronous alternative for loading. If there is no such alternative, your Javascript may be blocked from working. In this case, in order to solve this problem, you may prefer to use another command instead of the command in question.

Since when has this been the case?

The first time Google changed its attitude towards the document.write () command is Google 54 Update, 2016. With the Chrome update, the beta of which was published in July 2016, attention was paid to improving the experience of users with 2G connections. Since then, Google has been trying to solve the slow connection problem with various updates.

User Experience, Page Load Speed and Document Write

In order for the user to have a better experience, navigate easily, and not bounce when they are trying to reach a page, a strong loading speed is required first.

Research shows that websites should be loaded within the first two seconds -if they want to create higher UX and reduce bounce rate. If the load does not occur within this time, users are more likely to bounce from the third second. With 4. and 5. second, the rates of bounce can increase dramatically.

Well, you know what it means:

1. Conversion potential falling to zero
2. SEO score drops
3. You may lose your ranking position
4. Decreased website traffic

In order to be protected from all these, you need to avoid all parameters that negatively affect your website performance. And of course, document write is one of them. Do not forget to check out our related taxis so that you can pass the Document Write audit.

FAQ

Test Your Website Performance!

You can quickly analyze your site in a minute

Analyze!

You May Also Like

• What is Page Experience? – Google 2021 Update
• Reduce Excessive DOM Size
• How to Write SEO Friendly Content?
• The Font Size in the Document is not Legible
• A Do Nots Guide for SEO: Explore Your Mistakes