# Unused CSS Files

**Priority**: Critical

**Impact**: Negative

## What issues it may cause

<ul>
  <li>
    <strong>Increased Page Render Times:</strong> Unused CSS rules add unnecessary overhead to the rendering process,
    slowing down the time it takes for the browser to render the page.
  </li>
  <li>
    <strong>Larger File Sizes:</strong> Including unused CSS increases the size of CSS files, leading to longer download
    times and increased bandwidth usage.
  </li>
  <li>
    <strong>Maintenance Challenges:</strong> Unnecessary CSS complicates code maintenance and debugging efforts, making
    it harder for developers to identify and fix styling issues.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Identify and Remove Unused CSS:</strong> Use tools or manual inspection to identify CSS rules that are not
    being utilized and remove them from the codebase.
  </li>
  <li>
    <strong>Optimize CSS Delivery:</strong> Minify and concatenate CSS files to reduce file sizes and minimize the
    number of HTTP requests required to load stylesheets.
  </li>
  <li>
    <strong>Utilize CSS Frameworks Wisely:</strong> Only include CSS from frameworks or libraries that are necessary for
    the current page's styling requirements, avoiding unnecessary bloat.
  </li>
</ul>
[Learn how to reduce unused CSS.](https://developer.chrome.com/docs/lighthouse/performance/unused-css-rules/)

## What is the positive impact

<ul>
  <li>
    <strong>Improved Page Load Performance:</strong> Removing unused CSS reduces the amount of styling information that
    needs to be processed by the browser, leading to faster page render times.
  </li>
  <li>
    <strong>Reduced Bandwidth Usage:</strong> By eliminating unnecessary CSS, you can decrease the amount of data
    transferred over the network, improving site performance for users with limited bandwidth.
  </li>
  <li>
    <strong>Streamlined Development Workflow:</strong> Cleaning up unused CSS simplifies the codebase, making it easier
    for developers to maintain and update stylesheets over time.
  </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
              wastedKibAvg
              urlCount
              wastedKibSum
              gaPageviewsSum
              savingsScoreSum
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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