SOLVED: How to fix Document.write()

What’s up guys. I found a solution for the document.write() errors in Lighthouse/Gtmetrix site audits. I’ve done basic cross-platform testing [Firefox, Chrome, Microsoft Edge] and it cuts the mustard. For HEADLINE’s index (which optimizes through Td Composer, WP Rocket, Rank Math, and Asset CleanUp–I double-set the code:

1. At the top of HEADLINE’s head tag [sitewide] in the plugin “Headers and Footers Scripts” [Position 1].
2. At the top of the HTML tag in TagDiv’s theme panel [custom code][custom HTML].

I chose to double-set the {code-fix} because the Document.write() call is originating from Newspaper scripts and I don’t manage HEADLINE’s custom HTML there. I prefetch Google DNS Requests with WP Rocket and save custom HTML in “Headers and Footers Scripts.” The latter being hands-down the absolute best plugin to organize tags/add custom scripts and overwrite other plugins. I tested a number of {code-fix} arrangements and found that when I only set the {code-fix} in “Headers and Footers Scripts” that some of the Document.write(s) can slip through the cracks. Alternatively, if I only set the {code-fix} in the TagDiv theme panel, Wp Rocket’s Google DNS Requests override the custom HTML. So hierarchically, “Headers and Footers Scripts” can reposition the TagDiv custom HTML to take first-bite at the Document.write(s) while still allowing WP Rocket to prefetch the Google DNS.

I re-audited HEADLINE (with Lighthouse and GTMetrix) after optimizing the {code-fix} placement and HEADLINE’s speed/optimization scores shot way up–which actually makes sense if you think about what document.write() is really doing. Code calls for document.write() are telling the parser to rewrite the page mid-read, which can lead to bottlenecks and pose security concerns, especially when compared to security-heavy iframes or other delayable embeds.

Also, it’s worth noting that the document.write() code fix I’m using on HEADLINE is not exactly best-practices. In a perfect world, digital ads would natively load asynchronously. But until Newspaper and other themes drop support for document.write() altogether, AdjacentHTML will have to do.

If you guys want to check out a heavily-customized Newspaper site, head over to HEADLINE.dev. I’ve built a fully-responsive 4-screen Newspaper page, as well as a totally custom Amp site for mobile and desktop. Every single desktop page has a custom Amp version. I even built a one-of-a-kind Bootstrap form (Amp-compatible, Formidable Forms-based) called Funder by HEADLINE. I’ll be writing a series of articles, like this one, about how to optimize/extend the Newspaper theme.

I’d also like to mention that I am not a professional WordPress developer. There are all kinds of kinks I’m still working out with HEADLINE, but I feel so fortunate to be a part of the Newspaper community, and the TagDiv team is absolutely world-class! Take care guys.

Aaron Martinez
headline.dev

(script-tag)
document.write=function(s){
var scripts = document.getElementsByTagName(‘script’);
var lastScript = scripts[scripts.length-1];
lastScript.insertAdjacentHTML(“beforebegin”, s);
}
(script-tag-close)