Skip to main content

Document.write() Calls

Priority: Critical

Impact: Negative

What issues it may cause​

When a browser encounters JavaScript code while loading a webpage, it typically stops building the webpage's structure until it finishes running that code. This pausing is called "parser blocking." So, when document.write() is executed while the page is being parsed, it causes the HTML parsing to pause until the content written by document.write() is loaded. This can delay the rendering of the page and make it appear slower to the user.

If the JavaScript code is in a separate file (like an external script) that the webpage needs to fetch, the browser has to wait even longer, depending on various factors like network speed and server response time.

How do you fix it​

Remove all uses of document.write() in your code. If it's being used to inject third-party scripts, try using asynchronous loading instead.

Asynchronous loading essentially tells the browser that it doesn't need to wait for the JavaScript to finish loading before continuing to build the webpage. The browser can keep constructing the webpage while the JavaScript is still loading or running, which can improve performance significantly.

If third-party code is using document.write(), ask the provider to support asynchronous loading.

What is the positive impact​

  • Improved page loading speed and rendering performance resulting in a smoother experience and faster display of page elements, potentially resulting in higher retention rates, longer session durations, and higher conversion rates.

  • Improved compatibility with newer web standards and technologies, making the website more future-proof.
  • Easier maintenance and debugging by eliminating a potential source of rendering and scripting issues.

  • Improved accessibility by ensuring document.write() is not interfering with screen readers and other assistive technologies.

How to fetch the data for this report template​

You will need to run a crawl for report template to generate report. When report has been generated and you have crawl id you can fetch data for the report using the following query:

query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
  getCrawl(id: $crawlId) {
    reportsByCode(
      input: {
        reportTypeCodes: Basic
        reportTemplateCodes: [$reportTemplateCode]
      }
    ) {
      rows {
        nodes {
          ... on CrawlSiteSpeedAuditOpportunities {
            opportunityDigest
            element
            title
            exampleUrl
            urlCount
            sourceLine
            sourceColumn
            failedAuditsCount
            warningAuditsCount
            infoAuditsCount
          }
        }
      }
    }
  }
}

Try in explorer