Speed
Optimising WordPress CSS: critical CSS and minification
18 February 2025 · 6 min read
CSS is essential for the design of your website, but can also be a performance killer. Large CSS files, render-blocking stylesheets and unused rules slow down the loading of pages considerably. Fortunately there are proven techniques to optimise CSS.
At WP Maintainer we install CSS optimisation as standard with all our maintenance plans. In this article we share our approach.
The problem: render-blocking CSS
Browsers load CSS in the <head> of the page. This is necessary to prevent the page being displayed without styles (FOUC — Flash of Unstyled Content). But it also means the browser must wait until all CSS is downloaded before rendering begins.
Solution 1: Critical CSS
Critical CSS is the minimum amount of CSS needed to correctly display the top half of the page. This CSS is placed inline in the <head>. The full CSS is loaded asynchronously. Benefits: - The page renders immediately with correct styles - No FOUC - Full CSS loads in the background
Solution 2: CSS minification
Minification removes superfluous characters from CSS: - Whitespace, newlines and tabs - Comments - Superfluous semicolons This saves 15-30% file size. All caching plugins (WP Rocket, LiteSpeed Cache) offer automatic minification.
Solution 3: Combining CSS
Each CSS file requires a separate HTTP request. By combining CSS files you reduce the number of requests. Note: With HTTP/2 this is less important than before. HTTP/2 can send multiple files in parallel.
Solution 4: Remove unused CSS
Large CSS frameworks such as Bootstrap contain a lot of code you do not use. Tools such as PurgeCSS analyse which classes are actually used on your website and remove the rest. This can reduce the CSS file size by 70-90%.
Solution 5: Use media queries
Only load stylesheets for the relevant media: <link rel="stylesheet" href="print.css" media="print"> The browser only loads this stylesheet when applicable, which speeds up the initial rendering.
Implementation in WordPress
The simplest way is a caching plugin: **WP Rocket:** Critical CSS generation, CSS minify, CSS combine, remove unused CSS **LiteSpeed Cache:** CSS minify, Critical CSS, Load CSS asynchronously **Autoptimize:** CSS optimize, Critical CSS, Inline CSS
Testing and troubleshooting
Always test after optimisation: 1. Check whether the layout is correct 2. Test on different screen sizes 3. Check whether all elements are correctly styled 4. Measure with PageSpeed Insights before and after
WP Maintainer CSS optimisation
We implement critical CSS, minification and unused-CSS removal as a standard part of our maintenance plan. We test thoroughly and monitor performance continuously. This keeps your website fast AND beautiful.