# Pages with Unminified CSS

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>
    <strong>Increased Load Times:</strong> Larger file sizes result in longer download times, especially on slower
    internet connections, negatively impacting the page load speed.
  </li>
  <li>
    <strong>Higher Data Usage:</strong> Users on limited data plans may incur higher charges due to the larger file
    sizes.
  </li>
  <li>
    <strong>Slower Rendering:</strong> Browsers take longer to parse and apply larger CSS files, delaying the rendering
    of the page and impacting user experience.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Minify CSS Files:</strong> Use tools like CSSNano, UglifyCSS, or online services such as CSSMinifier to
    minify your CSS files. These tools automatically remove unnecessary characters without altering the functionality of
    the code.
  </li>
  <li>
    <strong>Automate Minification:</strong> Integrate minification into your build process using task runners like Gulp
    or Webpack. This ensures that your CSS files are always minified before deployment.
  </li>
  <li>
    <strong>Use a CDN:</strong> Content Delivery Networks (CDNs) often provide automatic minification of CSS files as
    part of their services. Utilizing a CDN can also improve load times through distributed content delivery.
  </li>
</ul>
[Learn more about minifying CSS](https://developer.chrome.com/docs/lighthouse/performance/unminified-css/)

## What is the positive impact

<ul>
  <li>
    <strong>Faster Page Load Times:</strong> Minified CSS files are smaller, leading to quicker downloads and faster
    rendering of the web page, enhancing the user experience.
  </li>
  <li>
    <strong>Improved Performance:</strong> Reduced file sizes mean less data needs to be transferred, improving load
    times and performance, particularly on mobile devices and slower networks.
  </li>
  <li>
    <strong>Better SEO Rankings:</strong> Faster pages are favored by search engines, potentially improving your site's
    ranking in search results.
  </li>
  <li>
    <strong>Enhanced User Engagement:</strong> Improved performance and faster load times can lead to higher user
    retention rates, longer session durations, and better conversion rates.
  </li>
  <li>
    <strong>Optimized Resource Usage:</strong> Minification reduces the amount of data that needs to be processed,
    saving bandwidth and making better use of server and client resources.
  </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}
        ) {
          crawlSiteSpeedAudits(after: $after, reportType: Basic) {
            nodes {
              url
              auditId
              title
              displayValue
              savingsKib
              pageviews
              productOfSavingsKibAndPageviews
              itemsCount
              auditResult
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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