CSS Optimizations

The Unused CSS Removal feature automatically optimizes your website's CSS by identifying and removing styles that aren't actually used on each page. This significantly reduces the amount of CSS that browsers need to download and process, resulting in faster page load times and improved Core Web Vitals scores.

Key Benefits:

- 🚀 50-85% faster initial page load - Critical CSS only for instant rendering

- 🎯 Zero risk to dynamic content - Full CSS restored on first user interaction

- ✅ Works with dropdowns, modals, AJAX - Smart lazy loading handles everything

- 📱 Device-specific optimization - Separate profiles for mobile and desktop

- 🔄 Fully automatic - No manual intervention after initial setup

How It Works

The plugin uses an intelligent multi-step process to optimize your CSS:

1. Analysis Phase: When a visitor first accesses a page, a lightweight JavaScript analyzer runs in the background to scan all CSS stylesheets and identify which selectors are actually used on the page.
2. Device-Specific Profiling: The analysis runs separately for mobile and desktop devices, ensuring that responsive styles are properly handled for each viewport.
3. Critical CSS Extraction: Once analysis is complete for all device types, the plugin extracts only the CSS that's actually needed and stores it as "critical CSS."
4. Cache Optimization: The page cache is automatically rebuilt with the critical CSS inlined in the `` section, while all original stylesheets are kept but marked for lazy loading.
5. Automatic Delivery: Subsequent visitors receive the optimized version with critical CSS loaded instantly. The full original CSS is automatically restored on first user interaction (mouseover, touch, keyboard input, or scrolling) to ensure perfect rendering of hidden elements, dropdowns, modals, and AJAX-loaded content.

Key Features

✅ Device-Specific Optimization

• Separate analysis for mobile and desktop viewports
• Respects responsive design breakpoints
• Merges profiles intelligently to cover all device types

✅ CSS Variables Support

• Automatically detects and includes CSS custom properties (--variable-name )
• Tracks variable usage across the entire stylesheet
• Ensures variable definitions are preserved when referenced

✅ Automatic Cache Management

• Rebuilds page cache automatically after analysis completion
• Purges affected URLs intelligently
• No manual intervention required

✅ Smart CSS Lazy Loading

• Critical CSS inlined for instant above-the-fold rendering
• Full original CSS preserved and restored on first user interaction
• Triggers on: mouseover, touchstart, touchmove, keydown, or wheel events
• Ensures perfect rendering of hidden elements, dropdowns, modals, and AJAX content
• Zero risk of styling issues with dynamic content

Getting Started

Enabling the Feature

1. Navigate to Super Page Cache → Settings → Files
2. Scroll to the CSS Optimizations section
3. Toggle "Remove Unused CSS" to ON

Configuration Options

Exclude Pages

You can exclude specific pages or URL patterns from unused CSS processing:

/about-us
/contact
/blog/special-page

When to use: Pages with dynamic content, JavaScript-rendered content, or third-party widgets that may not be properly detected during analysis.

Exclude CSS

You can exclude specific CSS files or inline styles from being processed:

example-1.min.css
example-2.min.css
my-custom-styles

When to use:

• Third-party CSS that causes issues when optimized
• Critical animation libraries
• CSS that's loaded conditionally via JavaScript

Note: The plugin automatically excludes common font services like Google Fonts, TypeKit, and Font Awesome.

HTML Attributes & Markers

Skip Unused CSS Processing

You can mark specific elements to skip unused CSS processing using the data-spc-skip-ucss  attribute:

<!-- Skip processing for a specific stylesheet -->
<link rel="stylesheet" href="important-styles.css" data-spc-skip-ucss>

<!-- Skip processing for an inline style block -->
<style id="custom-animations" data-spc-skip-ucss>
  @keyframes slide {
    from { transform: translateX(-100%); }
    to { transform: translateX(0); }
  }
</style>

Use cases:

• Animation libraries that need to be fully loaded
• Third-party widgets with dynamic styling
• CSS that's manipulated by JavaScript

Internal Markers (Generated by Plugin)

These attributes are added by the plugin during optimization:

<!-- Critical CSS injected in head -->
<style data-critical-css>
  /* Critical above-the-fold styles */
</style>

<!-- Lazy-loaded stylesheets -->
<link rel="lazy-stylesheet" href="...">
<link rel="lazy-preload" as="style" href="...">

<!-- Lazy-loaded inline styles -->
<style type="text/lazy-css">
  /* Non-critical styles */
</style>

WordPress Filters

Customize Storage Backend

Change where profile data is stored:

/**
 * Use custom storage class for page profiles
 * 
 * @param string $storage_class Default storage class
 * @return string Custom storage class
 */
add_filter( 'spc_page_profiler_storage', function( $storage_class ) {
    // Return your custom storage class (must extend Storage\Base)
    return 'My_Custom_Storage_Class';
} );

Available storage classes:

• Storage\ObjectCache  - Uses WordPress object cache (default if available)
• Storage\Transients  - Uses WordPress transients (default fallback)
• Custom class - Must extend SPC_Pro\Modules\PageProfiler\Storage\Base