Minify CSS files
Minification is the process of removing white space and comments from the stylesheets. This makes the file size smaller, therefore faster to download.
You can enable Minify CSS files from the File Optimization tab, like this:
How WP Rocket does it
- WP Rocket searches the HTML of the page and discovers CSS files in
<link>tags. Files must have the
- Inline CSS
<style>tags will not be processed, only CSS files.
- 3rd party CSS (i.e. CSS hosted on a different domain) is hosted on your domain and processed. This addresses browser caching warnings from speed testing tools and reduces the number of DNS resolutions needed.
- The optimized versions of the files are stored in the
- If you use WordPress multisite, the folder named
/1/will change to reflect the site number.
- Minified files contain a query string (
?ver=) with the last modified timestamp, for cache busting purposes:
- Original file:
- Minified file:
- The order of the files on the page does not change, the existing CSS files are replaced with their optimized version.
- This optimization is only applied on cached or optimized pages.
- Locally-hosted files loaded via
@importwill be processed by this optimization.
Automatically excluded files
These files will not be processed:
- Files hosted on a 3rd party domain and loaded via
@importwill not be processed.
- Filenames containing
.min- they are already minified. Note that 3rd party files with
.minin the filename will still be hosted locally, but not further minified.
- Files with
.minin their filenames that also contain any
@font-facerule will be optimized. WP Rocket will process any non-minified CSS rules and will apply the
font-display: swap;descriptor to the fonts, see more here.
- Files with the
- Files with a media type specified as
only screen and.
- Files with a media type of anything except
- Files with media types reserved for specific screen sizes. Examples:
screen AND (max-width: 900px),
all AND (min-width: 500px),
all not (min-width: 500px).
- Elementor post CSS files (these are already minified, and excluding them helps to avoid a situation where the cache would be cleared too frequently).
Improve font loading with font-display:swap
When the Minify CSS files feature is active, WP Rocket will automatically apply
font-display: swap; to any fonts referred to within CSS files. If those fonts have a different
font-display rule defined, they will be updated to use
This will help improve the PageSpeed recommendation: Ensure text remains visible during webfont load.
Combine CSS files in WP Rocket versions before 3.15
In versions before 3.15, WP Rocket has a Combine CSS files feature, please refer to this article for more information about it.