Jan 252021
 

WordPress Speed Booster Pack CSS Optimizations post provides a list of features that manages the css optimizations in the site.

Last Updated: January 31, 2021

Latest News: Updated the documentation.

Optimizing the css, critical css, inline and more allows you to further improve the speed of your site. However this can be very tricky and you need to make sure you do some testing before you finalize these optimizations.

Some of these features will not work well in your site. It is up to you to find out which ones will and which ones won’t work well in your site. Make sure you test thoroughly each feature you enable before finalizing your settings and going live.

Note: These steps require thorough testing.

What you need:

Speed Booster Pack Tutorials

Note: Most of the notes are copied from the plugin’s settings documentation.

WordPress Speed Booster Pack CSS Optimizations

Step 1 ) The following image CSS Optimizations allows you to enable the following features.

CSS Optimizations

  • Enable/Disable CSS Optimizations = Enables or disables the whole module without resetting its settings.

Critical CSS

  • Enable Critical CSS = Critical CSS is a method to optimize CSS delivery, recommended by Google. It allows you to defer all your CSS files and inline the styles of your content above the fold. You can generate critical CSS needed for your website using a tool like this and paste them below.

wordpress-speed-booster-pack-css-optimizations

Default Critical CSS

Step 2 ) The following image Default Critical CSS allows you to enable the following features.

Default Critical CSS

wordpress-speed-booster-pack-default-critical-css

Remove critical CSS after onload

Step 3 ) The following image Remove critical CSS after onload allows you to enable the following features.

Remove critical CSS after onload

  • Remove critical CSS after onload = Remove critical CSS when the onload event fires on browser. Enable this only if you’re having styling issues when the pages finish loading.

wordpress-speed-booster-pack-removet-critical-css-after-onload

Inline & Minify CSS

Step 4 ) The following image Inline & Minify CSS allows you to enable the following features.

Inline & Minify CSS

  • Inline all CSS = Inlines all CSS files into the HTML output. Useful for lightweight designs but might be harmful for websites with over 500KB of total CSS.
  • Minify all inlined CSS = Minifies the already inlined CSS.
  • CSS exclusions = If your design breaks after enabling the CSS options above, you can exclude CSS file URLs here. One rule per line.

wordpress-speed-booster-pack-inline-minify-css

=======================================

I will be updating this tutorial from time to time. Make sure you come back for the latest updates.

If you have any questions please let me know.

Enjoy.

I have been working in IT since 1999 and I enjoy the challenges it brings me. I love developing websites with WordPress. I spend a lot of time helping out in wordpress.org forums. I have been writing tutorials since 2011. Now I am learning how to manage my own VPS "Virtual Private Server.

 Leave a Reply

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

(required)

(required)

six + nineteen =