Litespeed cache

This article outlines how to get the best results out of the Litespeed cache plugin.

Presets

The recommended preset is Advanced, this provides a solid foundation for us to build upon with further optimisations.

Page Optimisation

The settings here are critical to the proper function of the cache.

CSS Settings

1. Ensure "CSS Combine" is turned off, this is known to cause issues with both Divi and Elementor.

JS Settings

1. Ensure JS Combine is turned off.
2. Ensure load JS deferred is set to Deferred.

HTML Settings

1. Turn on "Load Google Fonts Asynchronously"

Media Settings

1. We want to utilise lazy loading so start by switching on Lazy Load Images
2. Now we need to add a placeholder, luckily an invisible asset it provided by litespeed:

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

3. Next we want to ensure that "Lazy Load Iframes" is turned off, this is known to cause issues.
4. "Add Missing Sizes" should be set to on.
5. "Wordpress Image Quality Control" should be set to "62"

VPI

1. We want to enable "Viewport Images" this will help stop items jumping around the page upon loading.
2. Ensure "Viewport Images Cron" is also switched on.

Media Excludes

1. Finally, we want to ensure our logo media URL is added to "Lazy Load Image Excludes" this will stop the logo from being replaced with a placeholder while the page is loading.

Database

The database features are helpful for stopping long term bloat from page edits, blog revisions, etc.

DB Optimisation Settings

1. "Revisions Max Number" should be set to "20".
2. "Revisions Max Age" should be set to "30".

Manage

1. Press the "Clean All" button a couple of times to clear out database bloat.