Pages with Render-blocking Resources
Priority: Critical
Impact: Neutral
What issues it may cause
Render-blocking resources delay the rendering of page content, causing slower page load times. When the browser encounters render-blocking CSS or JavaScript files, it must wait for them to download and process before displaying the visible parts of the page. This can make the page appear unresponsive, leading to a frustrating experience for users.
How do you fix it
Optimize the delivery of CSS and JavaScript files to minimize render-blocking behavior. Techniques include:
- Defer or Asynchronously Load JavaScript files that are not critical for initial page rendering. This allows the browser to continue parsing the HTML while downloading the scripts.
- Inline critical CSS for above-the-fold content to speed up initial rendering and defer non-critical styles.
- Minify and compress CSS and JavaScript files to reduce their size and speed up download times.
- Combine CSS and JavaScript files where possible to reduce the number of requests the browser needs to make.
What is the positive impact
Improved page loading speed and rendering performance, leading to a smoother user experience and faster display of page elements.
Enhanced user satisfaction, potentially resulting in higher retention rates, longer session durations, and higher conversion rates.
- Easier maintenance and debugging by minimizing the complexity of resource loading and dependencies.
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
savingsSecs
pageviews
productOfSavingsSecsAndPageviews
itemsCount
auditResult
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"render_blocking_resources_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 savingsSecs pageviews productOfSavingsSecsAndPageviews itemsCount auditResult } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"render_blocking_resources_failed_audits"}}' https://api.lumar.io/graphql