Minify CSS files and Combine CSS files

Heads up! This article is aimed for WP Rocket versions before 3.15.

From the 3.15 version, the Combine CSS files feature is not available in WP Rocket!

What do "minify" and "combine" mean? 

Minify

Minification is the process of removing white space and comments from code. This makes the file size smaller, therefore faster to download. Minification alone does not reduce the number of HTTP requests on your site.

Combine

When Combine CSS is enabled, all the CSS files are combined into 1 single CSS file, therefore reducing the number of HTTP requests on your site. Combining is a best practice when your site uses HTTP/1 but not necessarily when using HTTP/2.

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 by both the minify and combine settings. This addresses browser caching warnings from speed testing tools and reduces the number of DNS resolutions needed.
• The files are processed and the optimized versions are stored in: cache/min/1
• 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

• Combined files use a random string in the filename each time it's regenerated, for cache busting purposes:

  https://example.com/wp-content/cache/min/1/fdc1a8722303a3e43f89c03f746fbfeb.css

• If only Minify is enabled, the order of the files on the page does not change, we just replace the existing CSS files with their optimized version.
• If Combine is enabled, the combined file is inserted into the page just after the closing </title> tag.
• This optimization is only applied on cached or optimized pages.
• Locally-hosted files loaded via @import will be processed and included in both the minified and combined files 

Some files are automatically excluded

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 .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)

Using Combine CSS files with Remove Unused CSS

When the Remove Unused CSS feature is enabled, Combine CSS files will be automatically disabled and will appear greyed out in WP Rocket's settings page.

This is because the resulting used CSS block will replace any existing CSS files, including the combined one.

In this case, you will see a message with the following text:

For compatibility and best results, this option is disabled when Remove unused CSS is enabled.

Improve font loading with font-display:swap

When either minify or minify/combine 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.