These are the exact LiteSpeed Cache settings I run on Elementor sites, including my own, which scores in the mid-90s on mobile PageSpeed. Copy them as a starting point, then test, because every site breaks in its own special way.
LiteSpeed Cache is the best free caching plugin for WordPress, but only on LiteSpeed servers, where it caches at the server level instead of in PHP. It’s also the plugin most likely to break your Elementor layout if you enable everything at once. I’ve configured it on enough client sites to know which settings are safe, which need testing, and which order to enable them in.
This is a starting configuration, not gospel. Your theme, plugins, and custom scripts all interact with these settings. Enable in the order below, test after each group, and keep a backup. If you’re new to why caching matters, start with how to speed up an Elementor site for the full picture.
If you’d rather have the work done for you, my Elementor speed optimisation service applies this configuration to your site, with before-and-after measurements.
Table of Contents
Before You Start
- Back up your site. Caching changes are reversible, but a backup means you can revert in minutes instead of debugging for an hour.
- Connect a QUIC.cloud domain key (LiteSpeed Cache → General → Domain Key). It’s free and unlocks critical CSS generation and image optimization, two of the biggest wins below.
- Run a baseline PageSpeed test on your homepage and one content page. Write the numbers down.
- Enable settings in groups, testing between each. If something breaks, you’ll know exactly which group caused it.
Group 1: Cache Settings (Safe)
LiteSpeed Cache → Cache. These are the foundation and rarely cause problems.
- Enable Cache: ON. The whole point of the plugin.
- Cache Mobile: OFF, unless your theme serves different content to mobile devices. Elementor sites are responsive, so one cache copy is enough and you avoid double cache storage.
- Cache Logged-in Users: OFF (unless you specifically need it). Caching logged-in views causes confusing behavior.
- Cache Commenters: OFF. Same reasoning.
If you run WooCommerce: LiteSpeed Cache auto-detects it and excludes cart, checkout, and account pages. Verify this under Cache → Excludes rather than assuming.
Group 2: CSS Settings (Test After Enabling)
LiteSpeed Cache → Page Optimization → CSS Settings.
- CSS Minify: ON. Safe on virtually all sites.
- CSS Combine: ON, then check your layout. Combining merges stylesheets into fewer files. It breaks some themes and Elementor custom CSS. If your layout breaks, turn this off first before touching anything else.
- Generate Critical CSS (CCSS): ON. Requires the QUIC.cloud domain key. This extracts above-the-fold styles so the page renders immediately.
- Load CSS Asynchronously: ON. Works with CCSS: critical styles inline, the rest loads in the background. This is what eliminates “render-blocking resources” warnings for CSS.
Group 3: JS Settings (Highest Impact, Highest Risk)
LiteSpeed Cache → Page Optimization → JS Settings. JavaScript is where the biggest speed gains and the most breakage live.
- JS Minify: ON. Usually safe.
- JS Combine: ON. Test thoroughly. Like CSS combine, this can break scripts that depend on load order. Test menus, forms, sliders, and popups.
- JS Deferred: set to Delayed. This is the big one: scripts load only after user interaction. On my own site this single setting was worth several seconds of load time. But it will break things if you’re careless.
- JS Excludes: add
jquery.js,jquery.min.js,gtm.js, andanalytics.js. jQuery must load normally or half your interactive elements fail; analytics exclusions keep your tracking accurate.
Test protocol for delayed JS: open every page template, click the mobile menu, submit a test form, trigger any popups, play any sliders. If something doesn’t respond, find its script and add it to the excludes.
Group 4: Media Settings
LiteSpeed Cache → Page Optimization → Media Settings.
- Lazy Load Images: ON. Defers offscreen images.
- Lazy Load Images Excludes: add your logo filename and hero image filename. Lazy loading the above-the-fold image tanks your LCP score. That’s the exact opposite of what you want.
- Lazy Load Iframes: ON. Defers embedded videos and maps until scrolled to.
- WebP Replacement: ON. Serves WebP versions to browsers that support them. Run Image Optimization (LiteSpeed Cache → Image Optimization) first to generate the WebP copies via QUIC.cloud.
- WebP for Extra srcset: ON. Covers responsive image variants.
Group 5: Object Cache (For Dynamic Sites)
LiteSpeed Cache → Cache → Object. If your host offers Redis or Memcached, enable it here and select the method. This caches database queries in memory, most valuable on WooCommerce, membership, or multilingual sites where page caching can’t do the whole job. On a simple brochure site, you can skip this.
Elementor-Specific Gotchas
| Symptom | Likely cause | Fix |
|---|---|---|
| Layout broken / unstyled flash | CSS Combine or async CSS without CCSS | Disable CSS Combine first; ensure CCSS generated |
| Menu/form/popup not working | Delayed JS catching a critical script | Add the script to JS Excludes |
| Edits not showing | Stale cache | Purge All Cache after editing; exclude when logged in |
| Fonts look wrong briefly | Font display + async CSS | Preload key fonts; accept minor FOUT or host fonts locally |
| Slider shows all slides stacked | Delayed JS on slider library | Exclude the slider script or disable delay for that page |
One more Elementor tip: in Elementor → Settings → Advanced, the CSS Print Method set to “External File” works best with caching plugins. And keep Elementor’s own experiments (Optimized Asset Loading, Improved CSS Loading) enabled: they reduce what LiteSpeed has to process.
How to Verify It’s Working
- Re-run PageSpeed Insights on the same pages. Compare against your baseline: you want lower LCP and less render-blocking.
- Check response headers for
x-litespeed-cache: hit. “hit” means the cached copy is being served. - Browse the site logged-out on mobile: menu, forms, popups, checkout. Functionality first, scores second.
- Wait 24 hours and check again. CCSS generation and cache warmup mean day-two results are often better than day-one.
If your scores are still stuck after all of this, caching is probably not the real problem. I have broken down the other reasons why Elementor sites load slowly, and if it is specifically your LCP, INP or CLS numbers that will not move, work through my guide to improving Core Web Vitals in WordPress next.
Caching is one piece of the puzzle. Pair it with the image, font, and hosting fixes in how to speed up an Elementor site, and keep everything maintained with the WordPress maintenance checklist. If you’d rather not fiddle with excludes and critical CSS yourself, WordPress speed optimization is something I do as a one-off project, and it is also built into my maintenance plans. Get in touch.
Frequently Asked Questions (FAQ)
Is LiteSpeed Cache only for LiteSpeed servers?
It works on any server, but its headline feature, server-level page caching, only works on LiteSpeed servers (including OpenLiteSpeed). On Apache or NGINX it still works as a regular caching plugin, but you’d get similar results from alternatives. Check with your host which web server they run.
Will LiteSpeed Cache break my Elementor site?
It can, if you enable everything at once: JS delay and CSS combine are the usual culprits. Enabled in the order above with testing between groups, breakage is rare and easy to trace. Never enable all optimization features simultaneously on a live site.
Do I need the QUIC.cloud domain key?
Not strictly, but critical CSS generation and image optimization both run through QUIC.cloud, and they’re two of the biggest wins in this guide. The key is free, so connect it.
Can I use LiteSpeed Cache with another optimization plugin?
No, pick one. Running two minification/caching plugins causes double processing and unpredictable breakage. If you switch to LiteSpeed Cache, deactivate and remove the old one first.
