# Render-blocking Resources

**Priority**: Critical

**Impact**: Negative

## 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.<ul><li>[Defer](https://web.dev/articles/efficiently-load-third-party-javascript#defer) or [Asynchronously Load](https://web.dev/articles/efficiently-load-third-party-javascript#async) JavaScript files that are not critical for initial page rendering. This allows the browser to continue parsing the HTML while downloading the scripts.</li><li>Inline critical CSS for above-the-fold content to speed up initial rendering and defer non-critical styles.</li><li>Minify and compress CSS and JavaScript files to reduce their size and speed up download times.</li><li>Combine CSS and JavaScript files where possible to reduce the number of requests the browser needs to make.</li></ul>[Learn more about how to eliminate render-blocking resources.](https://developer.chrome.com/docs/lighthouse/performance/render-blocking-resources/)

## What is the positive impact

<ul>
  <li>
    Improved page loading speed and rendering performance, leading to a smoother user experience and faster display of
    page elements.
  </li>
  <li>
    Enhanced user satisfaction, potentially resulting in higher retention rates, longer session durations, and higher
    conversion rates.
  </li>
  <li>Easier maintenance and debugging by minimizing the complexity of resource loading and dependencies.</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
              auditId
              exampleUrl
              wastedSecsAvg
              urlCount
              wastedSecsSum
              gaPageviewsSum
              savingsScoreSum
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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