ZiziCache

RC Beta

Join the Beta β

How to Configure CSS Optimization in ZiziCache?

Updated on 12. 6. 2025

CSS Optimization Overview

ZiziCache provides comprehensive CSS optimization features designed to reduce file sizes, eliminate unused styles, and improve loading performance. These optimizations directly impact Core Web Vitals scores and overall page rendering speed.

CSS Minification

Enable CSS Minification

CSS minification removes unnecessary whitespace, comments, and redundant code:

  1. Navigate to ZiziCache � Optimization
  2. Find the CSS Optimization section
  3. Check “Minify CSS”
  4. Click “Save CSS Settings”

Minification Process

ZiziCache CSS minification includes:

  • Whitespace removal: Eliminates spaces, tabs, and line breaks
  • Comment stripping: Removes CSS comments (preserves license comments)
  • Redundant rule removal: Eliminates duplicate declarations
  • Property optimization: Shortens property values where possible
  • Selector optimization: Simplifies complex selectors

Minification Benefits

  • Reduces CSS file sizes by 20-40% on average
  • Faster download times for visitors
  • Reduced bandwidth usage
  • Improved caching efficiency
  • Better compression ratios when combined with gzip

Remove Unused CSS (RUCSS)

Understanding RUCSS

Remove Unused CSS analyzes your pages and eliminates CSS rules that aren’t used, creating smaller, more efficient stylesheets:

How RUCSS Works

  1. Analyzes HTML content of each page
  2. Identifies which CSS selectors are actually used
  3. Creates a customized stylesheet with only necessary rules
  4. Loads unused CSS asynchronously or conditionally

RUCSS Configuration

Enable RUCSS

  1. In the CSS Optimization section
  2. Check “Remove Unused CSS”
  3. Choose your preferred loading method
  4. Configure exclusions and inclusions as needed

Loading Methods

Asynchronous Loading (Recommended)
  • Loads critical CSS immediately
  • Loads remaining CSS asynchronously after page render
  • Provides fastest initial page rendering
  • Best for most websites
Conditional Loading
  • Loads unused CSS based on user interaction
  • Further reduces initial payload
  • Suitable for sites with distinct page sections
  • Requires careful testing

RUCSS Exclusions and Inclusions

Exclude Stylesheets

Specify stylesheets that should not be processed by RUCSS:

wp-admin
customize-preview
login
editor-style
admin-bar

Use partial names or full filenames to exclude specific CSS files.

Include Selectors

Force inclusion of specific CSS selectors even if not detected:

.hidden-mobile
.dropdown-menu
.modal
.accordion-content
.lazy-loaded
.ajax-content

These selectors will always be included in the critical CSS.

RUCSS Best Practices

What to Include

  • Dynamic content selectors: Elements shown/hidden by JavaScript
  • Responsive design rules: Mobile-specific CSS
  • State-dependent styles: Hover, focus, active states
  • Third-party plugin styles: Contact forms, sliders, galleries

What to Exclude

  • Admin stylesheets: WordPress backend styles
  • Editor styles: Block editor and customizer CSS
  • Plugin admin CSS: Backend plugin interfaces
  • Critical inline styles: Styles already inlined

Critical CSS Generation

Understanding Critical CSS

Critical CSS contains styles needed for above-the-fold content, allowing immediate page rendering while non-critical CSS loads in the background.

Automatic Critical CSS Detection

ZiziCache automatically identifies critical CSS based on:

  • Viewport height analysis (typically 1200px)
  • Above-the-fold element detection
  • Font and layout critical styles
  • Navigation and header elements

Manual Critical CSS Configuration

Fine-tune critical CSS generation by:

  • Adjusting viewport height for above-the-fold detection
  • Including essential selectors manually
  • Excluding non-critical decorative styles
  • Testing on different device sizes

Self-Hosting External CSS

Local CSS Hosting Benefits

Self-hosting external CSS files provides:

  • Reduced external requests: Faster loading times
  • Better privacy: No external connections required
  • Improved reliability: No dependency on external servers
  • Enhanced caching: Better cache control

Automatic CSS Download

ZiziCache automatically:

  1. Detects external CSS files
  2. Downloads them to your server
  3. Updates references in your HTML
  4. Serves files from local cache
  5. Maintains automatic updates when needed

Font CSS Optimization

Special handling for Google Fonts and other web fonts:

  • Downloads font CSS files locally
  • Optimizes @font-face declarations
  • Implements font-display: swap automatically
  • Preconnects to font CDNs when necessary

Advanced CSS Optimization

CSS Combination

ZiziCache can combine multiple CSS files to reduce HTTP requests:

  • Merges compatible stylesheets
  • Maintains proper loading order
  • Preserves media queries and conditions
  • Creates optimized combined files

CSS Delivery Optimization

Preload Critical Resources

Automatically adds preload hints for important CSS:

<link rel="preload" href="/path/to/critical.css" as="style">

Non-blocking CSS Loading

Implements non-blocking patterns for non-critical CSS:

<link rel="preload" href="/path/to/style.css" as="style" onload="this.onload=null;this.rel='stylesheet'">

CSS Optimization Monitoring

Performance Metrics

Monitor CSS optimization effectiveness through:

  • File size reduction: Compare before/after CSS sizes
  • Load time improvements: Measure first contentful paint
  • HTTP request reduction: Count of CSS requests
  • Core Web Vitals: LCP and CLS improvements

Debug CSS Issues

Troubleshoot CSS optimization problems:

  1. Check browser console: Look for CSS errors
  2. Verify file paths: Ensure optimized files load correctly
  3. Test responsive design: Check mobile/tablet layouts
  4. Validate critical CSS: Ensure above-the-fold content renders properly

CSS Optimization Troubleshooting

Common Issues and Solutions

Missing Styles After RUCSS

  • Solution: Add missing selectors to include list
  • Prevention: Test thoroughly on all page types
  • Detection: Use browser dev tools to identify missing rules

Broken Layout on Mobile

  • Solution: Include responsive CSS selectors
  • Prevention: Test on multiple device sizes
  • Detection: Use responsive design testing tools

Plugin Style Conflicts

  • Solution: Exclude plugin CSS from RUCSS
  • Prevention: Document plugin-specific exclusions
  • Detection: Test plugin functionality after optimization

Performance Testing

Validate CSS optimizations using:

  • Google PageSpeed Insights: Core Web Vitals analysis
  • GTmetrix: Detailed performance metrics
  • WebPageTest: Advanced testing scenarios
  • Browser DevTools: Real-time performance monitoring

Best Practices for CSS Optimization

Implementation Strategy

  1. Start with minification: Safe optimization with immediate benefits
  2. Test RUCSS gradually: Enable on less critical pages first
  3. Monitor performance: Use tools to measure improvements
  4. Document exclusions: Keep track of necessary exclusions
  5. Regular testing: Verify optimizations after updates

Safety Guidelines

  • Always test in staging: Verify changes before production
  • Keep backups: Maintain original CSS files
  • Monitor user feedback: Watch for layout issues
  • Use version control: Track optimization changes

E-commerce Considerations

  • Include product page dynamic elements
  • Preserve checkout and cart styling
  • Test customer account pages thoroughly
  • Maintain mobile shopping experience

CSS optimization significantly improves website performance when implemented correctly. Start with conservative settings and gradually implement more aggressive optimizations while monitoring both performance metrics and user experience.

What are your feelings