At this time, "Combine loaded CSS (Stylesheets) into fewer files" & "Defer CSS Loaded in the <BODY> (Footer)" options do not take any effect as "Minify HTML" is active in "WP Rocket" -> "File Optimization" Settings. If you wish to keep WP Rocket's Minify HTML on, consider optimizing CSS with WP Rocket while cleaning the useless CSS with .
's "Combine loaded CSS (Stylesheets) into fewer files" & "Defer CSS Loaded in the <BODY> (Footer)" options do not take any effect as "Optimize CSS Delivery" is active in "WP Rocket" -> "File Optimization" Settings. The feature is changing the way CSS is delivered by adding critical CSS to the HEAD section of the website as well as preloading the rest of the CSS files before applying their syntax on page loading. This doesn't affect the performance of your website as you can eliminate the bloat with and use WP Rocket for CSS Optimization/Delivery if that's what works best for your website.
|
:
|
---|---|
|
* if directory is not writable for some reason, this feature will not work; requires the DOMDocument XML DOM Parser to be enabled in PHP (which it is by default) for maximum performance
style="opacity: 1;" style="opacity: 0.4;">
Note: When a stylesheet is added to a combined group of files, any other inline content (e.g. added via ():
Pattern Examples (you don't have to add the full URL, as it's recommended to use relative paths): /wp-includes/css/dashicons.min.css
This scans the remaining CSS files (left after cleaning up the unnecessary ones) from the This feature will not work IF:
|
|
. You can choose automatic inlining for CSS files smaller than a specific size (in KB) or manually place the relative paths to the files (e.g. in case there is an exception for a larger file you wish to inline or just don't want to use the automatic inlining).
():
Note: Please input the sources to the original CSS files (one per line) like in the examples below, not to the cached/optimized ones (which are usually located in ). RegExes are accepted. Note that the hash (#) is automatically used as delimiter so you don't need to add it below. Examples (you don't have to add the full URL, as it's recommended to use relative paths, especially if you use dev/staging environments or change the domain name of your website): /wp-content/plugins/plugin-title/styles/small-file.css
|
Note: By default, any CSS you move from This helps improve "Eliminate render-blocking resources" score in PageSpeed Insights and the browser is rendering the first content of the page sooner (as the CSS is not render-blocking) offering a better user experience. |
|
. |
/?custom-css=value_here, or /wp-content/plugins/plugin-name-here/css/generate-style.php?ver=1 ', 'wp-asset-clean-up'); ?>.
e.g. Some plugins and themes have options to create your own CSS/layout and save it within the Dashboard. Instead of creating static CSS files from the saved settings, the changes you made are retrieved from the database and the CSS content is created "on the fly", thus using more resources by loading the whole WP environment and make MySQL (or whatever database type if used) requests in order to print the CSS content. detects such requests and caches the output for faster retrieval. This very important especially if your website has lots of visits (imagine WordPress loading several times only from one visitor) and you're on a shared environment with limited resources. This will also make the user experience better by decreasing the page rendering time. |