Page caching makes the server respond fast; Page Optimization makes the browser render fast. The LiteSpeed Cache plugin can minify, combine and delay CSS and JavaScript, generate critical CSS and lazy-load media. These settings improve Core Web Vitals, but some can break layouts, so turn them on one at a time.
Before you start
- LiteSpeed Cache installed and page caching working (see configuring LiteSpeed Cache).
- A baseline score from PageSpeed Insights for your home page and a key inner page.
- A staging copy, or at least a quiet time, for testing.
Where the settings are
In WordPress go to LiteSpeed Cache → Page Optimization. The tabs are CSS Settings, JS Settings, HTML Settings, Media Settings, VPI, Media Excludes, Localization, Tuning.
A safe order to enable settings
- CSS Minify and JS Minify: low risk. Save, purge all, test.
- HTML Minify: low risk.
- Load JS Deferred set to Deferred: medium risk. Test sliders, menus and forms.
- Lazy Load Images and Lazy Load Iframes (Media Settings): low risk; exclude your logo and hero image so they are not delayed.
- Generate Critical CSS / Load CSS Asynchronously: medium risk; uses QUIC.cloud services (see QUIC.cloud setup).
- Generate UCSS (unique CSS per page): higher risk; test many page types.
- CSS Combine and JS Combine: often unnecessary with HTTP/2 and the most likely to break things. Leave off unless tests show a gain.
- Load JS Delayed (delay until user interaction): biggest score gain, biggest risk. Exclude scripts for menus, cookie banners and above-the-fold sliders.
Tip: After every change: click Purge All in the admin bar, open the site in a private window and check the home page, a post, a form and (for shops) the cart and checkout.
Excluding scripts and styles
When one feature breaks, exclude only the file responsible rather than disabling the whole setting:
- JS Excludes / JS Deferred/Delayed Excludes (Tuning tab): add part of the file name, such as
jquery.min.jsorelementor. - CSS Excludes: add the stylesheet name.
- Guest Mode JS Excludes: scripts that must always run immediately.
Font and preconnect settings
- Font Display Optimization set to Swap avoids invisible text.
- DNS Prefetch / DNS Preconnect (HTML Settings): add external domains such as
fonts.gstatic.com. - Remove Google Fonts only if you host fonts locally.
Measure the result
Run PageSpeed Insights again on the same pages. Focus on Largest Contentful Paint, Cumulative Layout Shift and Interaction to Next Paint. If a setting gives no gain, turn it off; fewer moving parts means fewer problems.
Troubleshooting
Layout broken or unstyled for a moment
Critical CSS or UCSS is incomplete. Regenerate it, or exclude the page type.
Menu or slider does not work
Delayed or deferred JavaScript. Exclude the related script.
More fixes are in LiteSpeed Cache troubleshooting and the general WordPress speed guide.
Frequently asked questions
Do I still need another optimisation plugin?
No. Running two optimisation plugins usually causes conflicts. Use LiteSpeed Cache alone for caching and optimisation.
Will page builders like Elementor work?
Yes, but they are the most common source of conflicts with JS Delayed and UCSS. Test editor and front end after each change.