Skip to main content

Pages with Unminified CSS

Priority: Critical

Impact: Neutral

What issues it may cause​

  • Increased Load Times: Larger file sizes result in longer download times, especially on slower internet connections, negatively impacting the page load speed.

  • Higher Data Usage: Users on limited data plans may incur higher charges due to the larger file sizes.

  • Slower Rendering: Browsers take longer to parse and apply larger CSS files, delaying the rendering of the page and impacting user experience.

How do you fix it​

  • Minify CSS Files: 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.

  • Automate Minification: Integrate minification into your build process using task runners like Gulp or Webpack. This ensures that your CSS files are always minified before deployment.

  • Use a CDN: 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.

Learn more about minifying CSS

What is the positive impact​

  • Faster Page Load Times: Minified CSS files are smaller, leading to quicker downloads and faster rendering of the web page, enhancing the user experience.

  • Improved Performance: Reduced file sizes mean less data needs to be transferred, improving load times and performance, particularly on mobile devices and slower networks.

  • Better SEO Rankings: Faster pages are favored by search engines, potentially improving your site's ranking in search results.

  • Enhanced User Engagement: Improved performance and faster load times can lead to higher user retention rates, longer session durations, and better conversion rates.

  • Optimized Resource Usage: Minification reduces the amount of data that needs to be processed, saving bandwidth and making better use of server and client resources.

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