CSS: Site Booster Module

The Ocean Site Booster's CSS module enables you to optimize, compress, and reorder your website's stylesheets to achieve faster loading speeds and higher performance scores. By shrinking file sizes, combining requests, and addressing render-blocking styles, you can deliver a much smoother visual experience to your visitors.

The CSS feature is available as of Site Booster 1.5.0 version.

To enable CSS optimization features, toggle to enable the module.

Enable (or disable) any option you would like to use, then save changes at the bottom of the module page.

Available CSS options include:

Enable Combine CSS Files,
- Enable Minify CSS,
- Excluded CSS Items,
- Inline CSS:
  - Inline Small CSS,
  - Inline CSS Threshold (bytes),
- Async CSS Loading:
Best Practices & General Recommendation.

Enable Combine CSS Files

The Enable Combine CSS Files option allows you to combine all enqueued CSS files into one to reduce HTTP requests and improve performance.

Important: his feature is not recommended as a default setting for all sites. If you choose to enable it, make sure to test your mobile layout and results thoroughly to ensure styles render exactly as expected.

Enable Minify CSS

The Enable Minify CSS option allows you to minify CSS by removing unnecessary whitespace and comments to reduce file size and improve loading times. It safely strips out clutter without changing the actual styling properties of your site.

Excluded CSS Items

The Excluded CSS Items field lets you enter style handles or URLs to exclude from CSS combination and minification. Enter one entry per line.

This is incredibly helpful if a specific plugin's stylesheet breaks or loses its formatting when combined or minified.

Inline Small CSS

The Inline Small CSS option lets you inline CSS files smaller than the threshold directly into the <head> to eliminate extra HTTP requests.

Instead of making the browser download a separate tiny file, the styles are loaded directly inside the initial HTML document.

Inline CSS Threshold (bytes)

This option allows you to set the cutoff limit for what qualifies as a "small" stylesheet. Files smaller than this size will be inlined. The default value is 2048 (2 KB). The recommended optimal range is between 1024 and 4096 bytes.

Async CSS Loading

The Async CSS Loading feature allows you to load non-combined stylesheets asynchronously to eliminate render-blocking CSS. This stops stylesheets from delaying your page's structural rendering.

To ensure a seamless experience, make sure to add critical styles below to prevent an unstyled content flash (FOUC).

Excluded Handles (Async CSS)

This section allows you to provide stylesheet handles to always load normally (not async). Enter one per line.

Note that the WordPress admin-bar stylesheet is excluded automatically to keep your top panel functional.

Critical CSS

The Critical CSS text area lets you provide CSS that will be inlined directly into the <head> to prevent a Flash of Unstyled Content (FOUC) when async loading is active.

Paste your layout's above-the-fold styles directly here. Do not include <style> tags in this field.

Best Practices & General Recommendation

To maximize the benefits of the CSS module without disrupting your site's layout, adhere to these guidelines:

1. The HTTP/2 vs. Combining CSS Tradeoff

Modern Servers: If your hosting provider utilizes HTTP/2 or HTTP/3, combining all your CSS files into a single huge file might not yield performance gains and could even slow down caching behavior.
Testing Priority: If you activate Enable Combine CSS Files, thoroughly inspect your site's visual elements using an Incognito window on both a desktop view and a real mobile device to verify that no style rules were broken during compilation.

2. Preventing the "Flash of Unstyled Content" (FOUC)

What is FOUC? When you turn on Async CSS Loading, the browser loads the structural page content before it finishes processing the styling sheets. This can briefly cause the site to appear as raw unformatted text or an awkward layout for a fraction of a second.
The Solution: Use an online critical CSS generator to extract the exact styling for what a user sees immediately upon landing (the header, primary typography, hero section layouts) and drop that code right into the Critical CSS box.

3. Resolving Display Layout Bugs

Isolate Conflicts: If certain features (like navigation drop-downs, sliders, or popup modals) stop displaying properly after turning on this module, turn off Combine CSS Files first to see if that resolves it.
Leverage the Exclusion Box: If minification breaks a specific plugin, find that plugin's styling handle (eg., contact-form-7 or woocommerce-layout ) and add it to the Excluded CSS Items text area to let it load independently.

Enjoy speeding up your website's performance with Site Booster.

Found an error in this doc or believe it needs improvement?

Send us a prepurchase ticket, include the URL of the page, and add suggestions and more details about how we can make things better for you.

That's it!

Boost your WordPress website on all levels with OceanWP and Ocean Site Booster.