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
- Variables
- cURL
query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
getCrawl(id: $crawlId) {
reportsByCode(
input: {
reportTypeCodes: Basic
reportTemplateCodes: [$reportTemplateCode]
}
) {
rows {
nodes {
... on CrawlSiteSpeedAuditOpportunities {
opportunityDigest
element
title
auditId
exampleUrl
wastedKibAvg
urlCount
wastedKibSum
gaPageviewsSum
savingsScoreSum
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"unused_css_rules_failed_items"}
curl -X POST -H "Content-Type: application/json" -H "apollographql-client-name: docs-example-client" -H "apollographql-client-version: 1.0.0" -H "x-auth-token: YOUR_API_SESSION_TOKEN" --data '{"query":"query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) { getCrawl(id: $crawlId) { reportsByCode( input: { reportTypeCodes: Basic reportTemplateCodes: [$reportTemplateCode] } ) { rows { nodes { ... on CrawlSiteSpeedAuditOpportunities { opportunityDigest element title auditId exampleUrl wastedKibAvg urlCount wastedKibSum gaPageviewsSum savingsScoreSum } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"unused_css_rules_failed_items"}}' https://api.lumar.io/graphql