# 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 <code>document.write()</code> is executed while the page is being parsed, it causes the HTML parsing to pause until the content written by <code>document.write()</code> 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 <code>document.write()</code> in your code. If it's being used to inject third-party scripts, try using [asynchronous loading](https://web.dev/articles/efficiently-load-third-party-javascript#async) 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 <code>document.write()</code>, ask the provider to support asynchronous loading.

## What is the positive impact

<ul>
  <li>
    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.
  </li>
  <li>Improved compatibility with newer web standards and technologies, making the website more future-proof.</li>
  <li>Easier maintenance and debugging by eliminating a potential source of rendering and scripting issues.</li>
  <li>
    Improved accessibility by ensuring <code>document.write()</code> is not interfering with screen readers and other
    assistive technologies.
  </li>
</ul>

## 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:


```graphql
query GetReportStatForCrawl(
      $crawlId: ObjectID!
      $reportTemplateCode: String!
      $after: String
     ) {
        getReportStat(
          input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
        ) {
          crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
            nodes {
              opportunityDigest
              element
              title
              exampleUrl
              urlCount
              sourceLine
              sourceColumn
              failedAuditsCount
              warningAuditsCount
              infoAuditsCount
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"no_document_write_failed_items"}
```