PageSpeed: Avoid document.write


Using document.write() to fetch external resources, especially early in the document, can significantly increase the time it takes to display a web page.

How does your site score on this recommendation?

Details from Google

Modern browsers use speculative parsers to more efficiently discover external resources referenced in HTML markup. These speculative parsers help to reduce the time it takes to load a web page. Since speculative parsers are fast and lightweight, they do not execute JavaScript. Thus, using JavaScript's document.write() to fetch external resources makes it impossible for the speculative parser to discover those resources, which can delay the download, parsing, and rendering of those resources.

Using document.write() from external JavaScript resources is especially expensive, since it serializes the downloads of the external resources. The browser must download, parse, and execute the first external JavaScript resource before it executes the document.write() that fetches the additional external resources. For instance, if external JavaScript resource first.js contains the following content:

document.write('<script src="second.js"><\/script>');

The download of first.js and second.js will be serialized in all browsers. Using one of the recommended techniques described in the sidebar can reduce blocking and serialization of these resources, which in turn reduces the time it takes to display the page.



PageSpeed recommends:

Declare resources directly in HTML markup

Declaring resources in HTML markup allows the speculative parser to discover those resources.

Prefer asynchronous resources

In some cases, it may not be possible to declare resources directly in HTML. For instance, if the URL of the resource is determined dynamically on the client, JavaScript must be used to construct that URL. In these cases, try to use asynchronous loading techniques.

Use "friendly iframes"

In some cases, such as optimization of legacy code that cannot be loaded using other recommended techniques, it may not be possible to avoid document.write. In these cases, friendly iframes can be used to avoid blocking the main page.

A friendly iframe is an iframe on the same origin as its parent document. Resources referenced in friendly iframes load in parallel with resources referenced on the main page. Thus, calling document.write in a friendly iframe does not block the parent page from loading. Despite not blocking the parent page, using document.write in a friendly iframe can still slow down the loading of the content in that iframe, so other recommended techniques should be preferred over the "friendly iframe" technique.

Read More