Published on April 23, 2025
Last Updated on July 1, 2025
Written by
Morgan Frank - Specialist in Page Speed
Cascading Style Sheets CSS are essential for styling your website, but like JavaScript, unoptimized CSS can negatively impact page speed. Large CSS files, unused styles, and inefficient selectors can all contribute to slower rendering and a poorer user experience.
This guide covers three key CSS optimization techniques: extracting critical CSS, removing unused CSS, and optimizing selectors.
Key Takeaways
<head> to enable immediate rendering without waiting for external CSS downloads. This dramatically improves initial page load metrics.Common Themes:
As we learned in the section on render-blocking resources, CSS is, by default, render blocking. The browser needs to download and process all of your CSS before it can render anything on the page. However, not all of your CSS is needed to render the initial view of the page (the “above-the-fold” content – what’s visible without scrolling).
Critical CSS is the minimal set of CSS rules required to style the above-the-fold content. By inlining this critical CSS directly into the <head> of your HTML, you allow the browser to render the initial view immediately, without waiting for external CSS files to download.
Benefits of Critical CSS:
How to Extract Critical CSS:
1. Manual Extraction: You can manually identify the above-the-fold content and copy the relevant CSS rules into a separate file (or directly into your HTML). This is feasible for small, simple websites, but it’s not scalable.
2. Automated Tools: Several tools can automatically extract critical CSS:
How to Inline Critical CSS:
Once you’ve extracted the critical CSS, you inline it directly into the <head> of your HTML, within <style> tags:
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<style>
/* Your critical CSS here */
body {
font-family: sans-serif;
background-color: #f0f0f0;
}
h1
color: #333;
}
/* ... */
</style>
<!--Load the rest of your CSS asynchronously or deferred ⟶
<link rel="preload" href="non-critical.css" as="style"
onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="non-critical.css"></noscript>
</head>
<body>
<!--... ⟶
</body>
`</html>`
Important Considerations:
Over time, websites often accumulate unused CSS rules. These are styles that were defined but are no longer applied to any elements on the page. Unused CSS adds unnecessary weight to your CSS files, slowing down download times and making your code harder to maintain.
Benefits of Removing Unused CSS:
Tools for Removing Unused CSS:
Workflow for Removing Unused CSS:
The way you write your CSS selectors can also impact performance. Complex, inefficient selectors can force the browser to do more work to match styles to elements.
General Principles for Optimizing Selectors:
Example (Less Efficient):
ul#navigation li a {
color: blue;
}Example (More Efficient):
#navigation a { /* If the 'a' elements are unique within #navigation */
color: blue;
}
/* Or, even better, use a class: */
.nav-link {
color: blue;
}Keyhole Selectors:
Keyhole selectors are CSS selectors that unnecessarily traverse a large portion of the DOM tree before reaching the intended target element. For Example:
.container .content .article .title{
color: #f0f0f0
}If the .title is not nested so deeply.
Use CSS analyzer: Use tools to understand the selector performance.
Optimizing your CSS is a crucial part of improving website performance. By extracting critical CSS, removing unused styles, and writing efficient selectors, you can significantly reduce the size and complexity of your CSS files, leading to faster rendering, a better user experience, and improved search engine rankings. These techniques work together to ensure that your CSS is as lean and efficient as possible.
