Minify CSS files

Feature overview

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:

enabling minify css files

How WP Rocket does it

  • WP Rocket searches the HTML of the page and discovers CSS files in <link> tags. Files must have the .css extension.
  • 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 cache/min/1 folder.
  • 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: https://example.com/wp-content/themes/twentytwenty/style.css?ver=1.5
    • Minified file: https://example.com/wp-content/cache/min/1/wp-content/themes/twentytwenty/style.css?ver=1614629992
  • 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 @import will be processed by this optimization.

Automatically excluded files

These files will not be processed:

  • Files hosted on a 3rd party domain and loaded via @import will not be processed.
  • Filenames containing .min - they are already minified. Note that 3rd party files with .min in the filename will still be hosted locally, but not further minified.
  • Files with .min in their filenames that also contain any @font-face rule 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 data-no-minify tag.
  • Files with a media type specified as only screen and.
  • Files with a media type of anything except screen and all.
  • 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 font-display: swap;.

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.

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.