array())); ?>>

Incompatibility Notice:

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.

 
  • This option is locked as optimize/minify stylesheets (CSS) is already enabled in the following plugins: . works together with the mentioned plugin(s).
  • Eliminate the bloat first via CSS & JAVASCRIPT LOAD MANAGER, then minify the remaining CSS with any plugin you prefer.
:
  • The stylesheets (.css) cached files will be re-generated once the file version changes (the value from ?ver=). In addition, the version number (value) from the source will be appended to the new cached .css file name (e.g. new-file-name-here-ver-1.2.css).
  • :
    • CSS WordPress core files that end up in .min.css (e.g. /wp-includes/css/dashicons.min.css, /wp-includes/css/admin-bar.min.css, etc.)
    • CSS files from /wp-content/uploads/elementor/ (if Elementor builder plugin is used) and /wp-content/uploads/oxygen/ (if Oxygen builder plugin is used)
    • Specific CSS files from WooCommerce (e.g. the ones located in /wp-content/plugins/woocommerce/assets/css/) if the plugin is used, etc.
: .    / 
Your website `` is delivered through the HTTP/2 network protocol, thus, the website will be as fast without using this feature which might require maintenance once in a while.

 * 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  
  • This option is locked as optimize/minify stylesheets (CSS) is already enabled in the following plugins:
  • works together with the mentioned plugin(s). Eliminate the bloat first via CSS & JAVASCRIPT LOAD MANAGER, then concatenate (if necessary) the remaining CSS with any plugin you prefer.
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 wp_add_inline_style()) associated with it, will also be added to the combined files. This reduces the number of DOM elements as well makes sure the CSS code will load in the right (set) order.


():

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
/wp-includes/css/admin-bar.min.css
/wp-content/plugins/plugin-title/css/(.*?).css

This scans the remaining CSS files (left after cleaning up the unnecessary ones) from the <head> and <body> locations and combines them into ~2 files (one in each location). To be 100% sure everything works fine after activation, consider enabling this feature only for logged-in administrator, so only you can see the updated page. If all looks good, you can later uncheck the option to apply the feature to everyone else.


This feature will not work IF:

  • "Test Mode" is enabled, this feature will not take effect for the guest users, and it will apply the changes only for you.
  • The URL has query strings (e.g. an URL such as //www.yourdomain.com/product/title-here/?param=1&param_two=value_here)

 . 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
/wp-content/themes/my-wp-theme-dir/css/small.css

Note: By default, any CSS you move from <HEAD> to <BODY> when changing its position (when managing assets via the "CSS & JAVASCRIPT LOAD MANAGER") is deferred. In most cases, CSS loaded in the BODY is not meant to be render-blocking and should start loading later after the HTML document has been completely loaded and parsed. For instance, it could be the styling for a modal box that is showing up later after the page loads or a content slider that is at the bottom of a page and doesn't need to be loaded very soon as it's not needed above the fold.

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. <link type="text/css" href="//yourwebsite.com/wp-content/plugins/plugin-name-here/css/generate-style.php?ver=" />

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.

×


:



test thoroughly the pages that have the assets combined (pay attention to any JavaScript errors in the browser\'s console which is accessed via right click & "Inspect") as, in rare cases, due to the order in which the scripts were loaded and the way their code was written, it could break some functionality.', 'wp-asset-clean-up'); ?>