CSS Combination merges multiple CSS files into a single file to reduce HTTP requests and improve loading efficiency.
13.1 Overview #
Instead of loading multiple stylesheets such as:
style.csstheme.csscustom.css
They are combined into a single optimized file:
combined.css
Benefits:
- Reduced HTTP requests
- Faster page load (especially on HTTP/1.1 servers)
⚠ Important Note:
On HTTP/2 servers, file combination may not always be necessary because HTTP/2 handles parallel requests efficiently. Test performance before and after enabling.
How It Works Internally #
- Collects eligible enqueued CSS files
- Maintains loading order to prevent conflicts
- Merges them into a single cached file
- Serves the combined file via cache directory
13.2 Settings #
Enable CSS Combination #
- Toggle Enable CSS Combination → ON
Exclude CSS Files #
If layout breaks or styling conflicts occur, add problematic file URLs inside the Exclude CSS Files textarea.
Example:
/wp-content/plugins/plugin-name/style.css
13.3 Best Practice Recommendation #
- Test layout thoroughly after enabling
- Exclude dynamic or conditionally loaded styles
- Compare performance results before and after activation
CSS Combination reduces requests and improves performance when configured correctly.
