Elementor makes building pages easy, but it can also add a lot of CSS and JavaScript. If your host runs LiteSpeed, the free LiteSpeed Cache plugin (LSCWP) is one of the best ways to speed things up. The catch is that some optimization options can clash with Elementor’s own features. In this guide we share the LiteSpeed Cache settings for Elementor that LiteSpeed itself recommends, plus a safe testing method to improve Core Web Vitals without breaking your layout.
Why Elementor Sites Need Careful Cache Settings
LiteSpeed Cache does two different jobs:
- Page caching: it saves a ready-made copy of each page, so the server does not rebuild it on every visit. This is safe for almost every Elementor site.
- Page optimization: it minifies, combines and delays CSS and JavaScript files. This is where problems can appear, because Elementor depends on its scripts for menus, sliders, popups, animations and forms.
So the goal is simple: turn on caching, then enable optimizations one by one and test after each change.
Step 1: Change These Elementor Settings First
The official LiteSpeed third-party compatibility guide says LSCWP is compatible with Elementor, but recommends a few changes in Elementor’s own settings so the two plugins do not overlap:
| Elementor setting | Where | Recommended value |
|---|---|---|
| CSS Print Method | Performance | Do not change if the frontend works |
| Optimized Image Loading | Performance | Disable |
| Optimized Gutenberg Loading | Performance | Enable |
| Inline Font Icons | Features | Active |
| Additional Custom Breakpoints | Features | Inactive |
| Lazy Load Background Images | Features | Inactive |
According to LiteSpeed, with these settings you can use LiteSpeed’s CSS and JavaScript minify and combine options, lazy loading and image placeholders without conflicting with Elementor’s optimizations. Elementor’s menu layout changes between versions, so check Elementor’s Help Center if a setting has moved.
Step 2: Basic LiteSpeed Cache Settings
- Cache: in LiteSpeed Cache > Cache, make sure Enable Cache is on. Keep the default options for logged-in users unless you know you need them.
- Guest Mode and Guest Optimization: in LiteSpeed Cache > General, Guest Mode serves a cached, optimized page to first-time visitors. Test it, because it changes what new visitors receive.
- Purge on update: keep the default purge rules so pages refresh when you edit them.
Step 3: CSS Optimization (Test One by One)
These settings live under LiteSpeed Cache > Page Optimization > CSS Settings. The Page Optimization documentation explains each one in detail.
- CSS Minify: usually safe. Turn it on first.
- CSS Combine: merges files. If you enable it, also consider CSS Combine External and Inline to keep the CSS order correct.
- Generate UCSS: a QUIC.cloud service that creates a “unique CSS” file with only the CSS each page needs. It can help a lot, but test it carefully, because Elementor content that appears later, such as popups or tabs, may lose styles. Use the UCSS Selector Allowlist to keep those styles.
- Load CSS Asynchronously: can improve render speed but may cause a flash of unstyled content. Note that if UCSS Inline is on, this setting is ignored.
Step 4: JavaScript Optimization (Be Careful)
JavaScript settings cause the most Elementor problems. They live under Page Optimization > JS Settings.
- JS Minify: usually safe.
- JS Combine: test carefully. If anything breaks, turn it off first.
- Load JS Deferred: the “Delayed” option waits for user interaction before running scripts. This can make scores look great, but Elementor menus, sliders, sticky headers and above-the-fold animations may not work until the visitor moves the mouse or scrolls. If that happens, add the affected scripts to JS Deferred/Delayed Excludes in the Tuning tab, or switch to “Deferred”.
Step 5: Images and Media
- Lazy Load Images: turn it on, but exclude your logo and the main hero image so they load straight away. That helps your Largest Contentful Paint (LCP).
- Image optimization: convert images to WebP, either with LiteSpeed’s image optimization or before uploading.
- Add missing sizes: setting image width and height helps reduce layout shift (CLS).
How to Test Every Change
- Change one setting at a time.
- Click Purge All in the LiteSpeed menu.
- Open your site in a private or incognito window, so you see what visitors see.
- Check menus, mobile menu, sliders, forms, popups and the checkout if you have one.
- Run a speed test with Google PageSpeed Insights, and compare the result with your previous one.
- If something breaks, undo that setting or add an exclusion in the Tuning tab.
Always take a backup before big optimization changes. Our UpdraftPlus backup guide shows how.
Choose a Fast Theme Too
Caching works best on top of a well-built theme. Popular Elementor-ready themes such as The7 and Betheme include their own performance options, so avoid enabling the same optimization twice, in the theme and in LiteSpeed. If you are thinking about switching to Elementor’s new lighter elements, read our guide to the Elementor Atomic Editor.
Frequently Asked Questions
Does LiteSpeed Cache work without a LiteSpeed server?
The page cache needs a LiteSpeed web server. Some optimization features, including QUIC.cloud services, can work on other servers.
My layout broke after enabling optimization. What now?
Turn off the last setting you changed and purge the cache. Then use the CSS or JS excludes in the Tuning tab for the file that caused the issue.
Final Thoughts
The best LiteSpeed Cache settings for Elementor are not about switching everything on. Make LiteSpeed’s recommended Elementor changes, enable caching, then add CSS, JavaScript and image optimizations one at a time, testing after each one. That way you get faster load times and better Core Web Vitals, without broken menus or missing styles.
){kind=link}