Pages using document.write()
Priority: Critical
Impact: Neutral
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
- Variables
- cURL
query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
getCrawl(id: $crawlId) {
reportsByCode(
input: {
reportTypeCodes: Basic
reportTemplateCodes: [$reportTemplateCode]
}
) {
rows {
nodes {
... on CrawlSiteSpeedAudits {
url
auditId
title
displayValue
score
itemsCount
auditResult
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"no_document_write_failed_audits"}
curl -X POST -H "Content-Type: application/json" -H "apollographql-client-name: docs-example-client" -H "apollographql-client-version: 1.0.0" -H "x-auth-token: YOUR_API_SESSION_TOKEN" --data '{"query":"query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) { getCrawl(id: $crawlId) { reportsByCode( input: { reportTypeCodes: Basic reportTemplateCodes: [$reportTemplateCode] } ) { rows { nodes { ... on CrawlSiteSpeedAudits { url auditId title displayValue score itemsCount auditResult } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"no_document_write_failed_audits"}}' https://api.lumar.io/graphql