As a LiteSpeed web hosting provider we utilize LSCache plugin tools. On-top of the server-side performance capabilities it offers, LSCache surprisingly offers a fair share of additional on-site optimization tools.
While Image optimization (will be covered in a future post) is great! Some themes may require page optimization.
CSS Optimization (with LS Cache)
The LiteSpeed Cache plugin offers a fair amount of CSS optimization. You’ll find most of the settings are quite flexible.
Using CSS Minify alone often made little difference for us (assuming your theme is well-optimized). Without combining all the CSS files it made little difference and often impacted speed-test results negatively. But did provide a relatively faster browsing experience.
We found a lot of themes were incompatible with LSCache’s CSS minification, either shift layouts were all over the place or simply did not function as intended. CSS HTTP/2 Push function did not seem to make any difference on user experience or page speed test results.
Critical CSS on the other hands can be a real-pain to deal with. Most of the free critical CSS generators require minor edits after generating. Changing one little thing on the website means re-generating and uploading the code etc.
LS Cache’s Load CSS Asynchronously feature allows CDN generated critical CSS. While (like all critical CSS setups) it causes layout shifts, on some themes this can be utilized quite well.
We do however recommend disabled Inline CSS Async Lib as it caused errors and added to shift layouts (severely impacting the viewing experience). Having fonts optimized under the Swap option works wonders!
LiteSpeed Cache does a great job at optimization JS, we found that having some; if not all options enabled works wonders.
Combining JS files does not work with every WordPress or OpenCart theme, so we recommend playing with these.
Be sure to test any scripts when enabling these options (such as contact forms or interactive plugins). As JS optimization may not appear break the aesthetic of the website, it may make plugins malfunction.
If you are in the development stage for obvious reasons have CSS/JS Cache TTL set to 6400. Once published the recommended 604800 is viable.
HTML Minification has very little customization other than an On/Off switch, so test it and be sure to purge the page cache when testing.
DNS Prefetch is a great tool! We find that most of the external analytics services make websites lag. The best way to deal with this is enable DNS Prefetch Control and add the URL of the tracking tool.
We found that Remove Query Strings can break websites that are blog-based or online-stores.
Tuning LS Cache
What do you do when page optimization is breaking your site?
Head over to the final 3 tabs. Here you’re able to exclude certain files from being optimizations.
We found that WPForms fails with almost any plugin that optimizes JS so excluding wpforms.js will prevent any issues.
Under Media Excludes you can exclude any media files you don’t want being optimized. You’ll find in the Media Tab there are a fair share of image optimization options that we’re not covering in this post.
Versus other plugins
LiteSpeed Tech has published their own tests, whlie this is extremely debatable as it is completely theme based.
We’d like to factor in price to performance ratios and say.. NitroPack and LSCache are the leaders in the WordPress plugin industry.
We use Autoptimize combined with LS Cache here at webup.link. We found Autoptimize does the best optimization when it comes to CSS and leave the rest of the optimization to LiteSpeed cache.
Web Uplink Speed Test Results (with LiteSpeed Cache)
We ran some tests that will give you an idea of how effective the Page Speed Optimization options were on our own website here at Web Uplink. Here were some of our preferred results (as well as results with no optimization):
All tests configured:
- Image Optimization
- CDN disabled
- DNS Prefetch enabled
- Google Font Async Loading
One important thing we’d like to mention is, all these tests fall-down to the theme you’re using. When purchasing a theme from somewhere like themeforest try to run a pagespeed test via GTMetrix or at least Google Lighthouse on the demo of the site.