Skip to main content

Unused CSS Files

Priority: Critical

Impact: Negative

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 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
          }
        }
     }
   }

Try in explorer