Skip to main content

File Combination (HTTP/1.1 Optimization)

File combination merges multiple CSS or JavaScript files into fewer requests. This optimization only benefits HTTP/1.1 and may hurt performance on HTTP/2+.

Understanding HTTP Versions​

HTTP/1.1 (Legacy)​

  • Creates one TCP connection per file request
  • Multiple files = multiple connections = more overhead
  • Combining files is beneficial — fewer connections = less latency

HTTP/2+ (Modern)​

  • Uses multiplexing — multiple files in one connection
  • Browsers cache individual files
  • Combining files often hurts — loses individual file caching

Most browsers and hosting today use HTTP/2 or HTTP/3.

When to Enable File Combination​

Enable this only if:

  1. Your hosting confirms it serves HTTP/1.1:
    • Ask your host directly
    • Check with curl -I https://yoursite.com | grep "HTTP"
    • If you see HTTP/1.1, you might benefit
  2. You want to test and can revert if problems occur
  3. You'll test thoroughly on key pages

How File Combination Works​

CSS Combination Example​

Before:

<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/typography.css">
<link rel="stylesheet" href="/css/layout.css">
<!-- 3 requests -->

After:

<link rel="stylesheet" href="/combined-css-abc123.css">
<!-- 1 request containing all CSS -->

JavaScript Combination​

Similarly merges multiple script files into fewer files while respecting dependency order (when possible).

Enabling File Combination​

  1. Go to Performance Toolkit → File Optimization
  2. Scroll to HTTP/1.1 only: File combination
  3. Read the warning carefully
  4. Check Combine external CSS files (optional)
  5. Check Combine external JavaScript files (optional)
  6. Click Save changes
  7. Test thoroughly on all key pages

Exclusion Rules​

Files can be excluded from combination by adding one per line:

CSS Combine Exclusions​

woocommerce-layout
bootstrap.css
/wp-content/themes/*/css/critical.css

JavaScript Combine Exclusions​

jquery-core
jquery-migrate
/wp-content/plugins/gravity-forms/*

Why Exclude Files?​

  • Dependency order matters — some scripts must load in specific order
  • Dynamic loading — scripts that load conditionally shouldn't be combined
  • Conditional comments — IE-specific scripts
  • Third-party scripts — external scripts (ads, analytics) often serve their own versions

Important Warnings​

File combination can cause issues:

Dependency Order Problems​

If Script B requires Script A to load first, combining them in wrong order breaks Script B.

Conditional Loading​

Some plugins load scripts conditionally (e.g., only on product pages). Combining loses this optimization.

Cache Busting​

Updating one combined file invalidates the entire combined bundle, even if only one part changed.

Size and Complexity​

Huge combined files are harder for browsers to parse and optimize.

Testing Combination​

Before deploying to production:

  1. Test all key pages:

    • Home page
    • Blog/post pages
    • Product pages
    • Shop/archive pages
    • Checkout
    • Account/user area
    • Custom landing pages

  2. Check console for errors:

    • Right-click → Inspect → Console
    • Any red warnings indicate issues

  3. Test all interactions:

    • Clicks and form submissions
    • Filters and search
    • Modal popups
    • Shopping cart operations
    • Comment forms

  4. Performance check:

    • Google PageSpeed Insights
    • WebPageTest before/after
    • Browser Network tab (request count)

Troubleshooting​

Site partially broken or JavaScript errors​

File combination likely broke dependency order.

Solutions:

  1. Disable file combination
  2. Check browser console for which script is failing
  3. Add that script handle to exclusion list
  4. Re-enable combination with exclusion
  5. Test again

Performance actually got worse​

This often happens on HTTP/2+ hosting. File combination is hurting, not helping.

Solution:

  1. Disable file combination
  2. Ask your host to confirm HTTP version
  3. If HTTP/2+, leave combination disabled

Still having issues?​

File combination is complex because every site has different plugins/themes/configurations.

Safe approach:

  1. Disable file combination
  2. Focus on caching, minification, and lazy loading instead
  3. These provide better performance without the complexity

Best Practices​

  • ⚠️ Enable only after confirming HTTP/1.1 usage
  • ⚠️ Test thoroughly on staging before production
  • ⚠️ Start with CSS combination first, then add JS if successful
  • ✅ Keep exclusion list current as plugins change
  • ✅ Monitor performance metrics after enabling
  • ✅ Have a rollback plan

Recommendations​

For most sites in 2024+:

  1. Never enable file combination — HTTP/2+ is standard
  2. Instead focus on:
    • Page caching (biggest win)
    • Minification
    • Lazy loading
    • Defer scripts
    • CDN integration

These provide better performance AND reliability on modern hosting.

HTTP Version Detection​

To check what HTTP version your host uses:

curl -I https://yoursite.com

Look at the first line:

  • HTTP/1.1 — Old hosting (file combination might help)
  • HTTP/2 — Modern hosting (skip file combination)
  • HTTP/3 — Very modern hosting (definitely skip)

When in doubt, contact your hosting provider directly.

On this page