Skip to main content

Pages with Unused CSS

Priority: Critical

Impact: Neutral

What issues it may cause​

  • Increased Page Render Times: Unused CSS rules add unnecessary overhead to the rendering process, slowing down the time it takes for the browser to render the page.

  • Larger File Sizes: Including unused CSS increases the size of CSS files, leading to longer download times and increased bandwidth usage.

  • Maintenance Challenges: Unnecessary CSS complicates code maintenance and debugging efforts, making it harder for developers to identify and fix styling issues.

How do you fix it​

  • Identify and Remove Unused CSS: Use tools or manual inspection to identify CSS rules that are not being utilized and remove them from the codebase.

  • Optimize CSS Delivery: Minify and concatenate CSS files to reduce file sizes and minimize the number of HTTP requests required to load stylesheets.

  • Utilize CSS Frameworks Wisely: Only include CSS from frameworks or libraries that are necessary for the current page's styling requirements, avoiding unnecessary bloat.

Learn how to reduce unused CSS.

What is the positive impact​

  • Improved Page Load Performance: Removing unused CSS reduces the amount of styling information that needs to be processed by the browser, leading to faster page render times.

  • Reduced Bandwidth Usage: By eliminating unnecessary CSS, you can decrease the amount of data transferred over the network, improving site performance for users with limited bandwidth.

  • Streamlined Development Workflow: Cleaning up unused CSS simplifies the codebase, making it easier for developers to maintain and update stylesheets over time.

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 GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
  getCrawl(id: $crawlId) {
    reportsByCode(
      input: {
        reportTypeCodes: Basic
        reportTemplateCodes: [$reportTemplateCode]
      }
    ) {
      rows {
        nodes {
          ... on CrawlSiteSpeedAudits {
            url
            auditId
            title
            displayValue
            savingsKib
            pageviews
            productOfSavingsKibAndPageviews
            itemsCount
            auditResult
          }
        }
      }
    }
  }
}

Try in explorer