How To Configure LiteSpeed Cache

SkyStra
Jun 15, 2020

LiteSpeed Cache is a fantastic cache plugin that is available through our Premium Caching service.

Here are some of the best features this caching plugin has to offer:

  • Server-side caching (caching pages are generated by the cloud instance instead of slow PHP)
  • Private pages caching (logged-in users) and admin pages
  • CDN compatible
  • Free image optimization
  • Database optimization
  • Advanced CSS/JS optimization options
  • … and a lot more!

LiteSpeed Cache will not only speed up your website significantly, but it will also use fewer WordPress resources. 

To demonstrate the speed and resource improvements, we installed WordPress with the WooCommerce plugin and then installed the eStore theme with the demo content imported.

Here’s how the GTMetrix speed test looked before the LiteSpeed Cache installed and configured on it:

And here’s how the test looked after we installed and configured the LiteSpeed Cache plugin:

As you can see, our score improved, loading speed dropped by 1.1 seconds (massive!), page size dropped by almost a half, and we have 50+ fewer requests to load every time we access the website.

The plugin also has a before/after PageSpeed score, which is handy as well and the improvement is quite obvious:

Let’s start with the plugin configuration!

First, install and activate the LiteSpeed Cache plugin on your WordPress website.

Next, head to the LiteSpeed Cache section in the left frame of your WordPress Dashboard, where all the configuration options reside.

General

Automatically Upgrade – Feel free to turn this option to ON, as LSC is well maintained, and we never experienced any issues with any of the frequent updates.

Domain Key – Request a key to use the free image optimization service (explained later in the guide).

Notifications – Leave this option on OFF if you don’t want to receive news, promotional offers, etc.

Cache

Cache

Enable Cache – Set this to ON to enable caching on your website.

Cache Logged-in Users – We have it set to OFF. Only use this if you have a few logged in users. If you have tons of active users, this will create a lot of cached pages that won’t be used often. 

Cache Commenters – Set to OFF.

Cache REST API – Leave it on ON, but feel free to turn off if you’re debugging any issues.

Cache Login Page – Set to ON, as bots frequently attack the login pages. You can turn it off if it breaks your login page in any way (captcha, design, or function). If you change the wp-login URL, switch it back to default as LiteSpeed servers protect admin URLs by default.

Cache favicon.ico – Set to ON.

Cache PHP Resources – Set to ON as it helps with the poorly coded themes and plugins.

Cache Mobile – If you don’t use AMP or have a mobile-specific content – make sure to turn OFF.

List of Mobile User Agents – No changes unless you use the Cache Mobile option.

Private Cached URIs – Ignore, as this is rarely used and only in specific scenarios (if you have separate content for different visitors and need to cache them separately). It uses additional server resources, so it’s not advisable.

Force Public Cache URIs – For advanced users. All pages listed here will be cached regardless of the no-cache settings.

Drop Query String – You can use this option to ignore some query strings that don’t need to be cached (Facebook and Google trackers, affiliate cookies, etc.). You can read more about this option here.

TTL

TTL settings define how long certain pages (private and public, for example) are cached. Leave all these settings to default values.

Purge

Purge All On Upgrade – Set this to ON, so whenever the WordPress, plugins, or themes are upgraded – the cache will be cleared.

Purge Stale – You can experiment with this setting. We recommend leaving it OFF, but the idea behind this is good, and it saves some server resources. If it’s set to OFF, the page is dynamically generated while the user waits, and if it’s set to ON – the plugin serves stale cache copy of the page until the new one is created.

Auto Purge Rules For Publish/Update – This depends if you want the cache to be purged when specific content is published. Default options are good, and you can make changes if needed.

Scheduled Purge URLs – Ignore this option.

Scheduled Purge Time – Ignore this option.

Purge All Hooks – Advanced users can adjust this setting if needed, but if you’re a beginner – leave the default options and manually purge the cache when you make changes on your site. Essentially, you can set up the plugin to purge cache anytime the specific hook is executed.

Excludes

The only setting you should use here is Do Not Cache URIs to define pages that you don’t want to be cached. We recommend adding pages that contain contact forms, checkouts, or logged-in pages. Please note that the WooCommerce checkout is excluded by default.

ESI

Ignore ESI options unless you have a web developer to help you with the configuration. It allows you to cache dynamic content that usually isn’t cached, by converting widgets and functions to ESI blocks. Then you can choose how to cache that block, select TTL for it, etc.

Object

Object caching is not available on Skystra Cloud instances, so you can skip this section.

Browser

This setting saves static files locally in the user’s browser, to reduce reoccurring requests for files that don’t change/update.

Browser Cache – Set to ON.

Browser Cache TTL – Leave the default value (1 year).

Advanced

Skip this section as it’s for advanced users only, and we don’t believe any options in it are beneficial for regular users.

WooCommerce

If you don’t use WooCommerce on your website, skip this section.

Product Update Interval – We recommend the fourth option (Always purge both product and categories on changes to the quantity or stock status.), but you can choose whatever suits your site the most.

Use Front Page TTL for the Shop Page – Set to ON.

Privately Cache Cart – Set to OFF, as it can cause potential issues with mixed cart sessions.

CDN

This section is used to configure CDN caching options in conjunction with the LiteSpeed Cache plugin. Please check the following article for more information on how to enable Cloudflare CDN on your website.

Image Optimization

Summary

Gather Image Data – Click this button to request free image compression. After the first image is processed, you will be able to request a maximum of 200 images at once.

Pull Images – Manually download the optimized images to your website. Original images are automatically backed up. If you use Cron (in Settings) for this, you can ignore this button.

Clean Up Unfinished Data – Use this option if the compression process is stuck and can’t complete.

Calculate Backups Disk Space – Shows how much disk space the image backups take. Download them locally to your computer and remove them from the account to save space.

Remove Original Image Backups – Once the backup is downloaded, click this button to remove the original image backups.

Use Original Files/Use Optimized Files – Use this option to switch between optimized and original images quickly. This allows you to see the difference in real-time.

Destroy All Optimization Data – Allows you to remove all optimized images and revert to the original image files.

Settings

Auto Request Cron – Set to ON, so that cron automatically requests optimization for new images.

Auto Pull Cron – Set to ON, and cron will automatically pull optimized images to your website.

Optimize Original Images – Set to ON to optimize original images and create a backup automatically.

Remove Original Backups – Set to OFF. It’s better to manually remove the backups of original images to be on the safe side.

Optimize WebP Versions – Set to OFF. Turn it on if you use WebP images on your site.

Optimize Losslessly – Only huge images benefit from this setting, so turn it OFF if you don’t have any.

Preserve EXIF data – Set to OFF, unless you want to display EXIF data on the frontend via a plugin.

Create WebP Versions – WebP has upsides and downsides, and in general – we don’t recommend using this format. It does use better compression, and images are smaller, but they can’t be easily downloaded or viewed on some devices.

Image WebP Replacement – Set to OFF if you don’t use WebP image format.

WebP Attribute To Replace – Options to control which images are replaced with the WebP version.

WebP For Extra srcset – An option to enable WebP image replacement for images not located in the WordPress media library.

WordPress Image Quality Control – Leave the default value (82).

Page Optimization

Options under this section are the most important when it comes to optimizing your website, and caching settings. Be careful, though, as most caching issues stem from these options.

Make sure to test changes thoroughly, and always use the Purge All action when changing any of these options.

CSS Settings

CSS Minify – If you use a CDN minification, set this to OFF, and if you don’t use CDN, set to ON.

CSS Combine – Set to ON.

CSS HTTP/2 Push – Set to ON.

Load CSS Asynchronously – Set to OFF.

Generate Critical CSS – Set to OFF. We don’t recommend critical CSS, as it can hurt the load time of the website.

Generate Critical CSS In Background – Set to OFF.

Separate CCSS Cache Post Types – Ignore this option if you don’t use critical CSS.

Separate CCSS Cache URIs – Ignore this option if you don’t use critical CSS.

Inline CSS Async Lib – Set to OFF. CSS should be render-blocking, or you can face some issues.

Font Display Optimization – Set to Default.

JS Settings

JS Minify – If you use a CDN minification, set this to OFF, and if you don’t use CDN, set to ON.

JS Combine – Set to ON.

JS HTTP/2 Push – Set to ON.

Load JS Deferred – Set to ON.

Load Inline JS – Set to Default.

Exclude JQuery – Set to ON.

Optimization Settings

CSS/JS Cache TTL – Leave the default value. Lower it if you’re making a lot of development changes.

HTML Minify – If you use a CDN minification, set this to OFF, and if you don’t use CDN, set to ON.

Inline CSS Minify – Set to ON.

Inline JS Minify – Set to ON.

DNS Prefetch – You can use this option to preload DNS for outside domains, and they’ll load faster when your website loads the external asset from them.

DNS Prefetch Control – This option will automatically prefetch domains called from CSS or JS. If you use the previous option, you can turn this OFF.

Remove Comments – Set to OFF.

Remove Query Strings – Set to OFF.

Load Google Fonts Asynchronously – Set to OFF. The most common Google Fonts are probably already cached in the browser, due to other websites you visit on your computer.

Remove Google Fonts – Set to OFF.

Remove WordPress Emoji – Set to ON.

Media Settings

Lazy Load Images – This option will load images only when browser scrolls to them. Set this to ON.

Basic Image Placeholder – You can set a placeholder image that replaces the blank space users see before the original image is loaded.

Responsive Placeholder – Set to ON. This option will reserve a space for images that are not yet loaded to prevent the layout from jumping around when scrolling.

Responsive Placeholder SVG – Options for the SVG used in a responsive placeholder.

Responsive Placeholder Color – Choose the desired color.

LQIP Cloud Generator – This option will show a low-quality version of the image that is replaced with the original version once it’s loaded. It’s an advanced placeholder technology, and we like it, so we recommend settings this option to ON.

LQIP Quality – Play around with this option or use the default setting (4).

LQIP Minimum Dimensions – Use the default values.

Generate LQIP In Background – Set to ON if you’re using LQIP Cloud Generator.

Lazy Load Iframes – Set to OFF.

Inline Lazy Load Images Library – Set to ON.

Media Excludes

These options allow you to exclude images from lazyloading. This depends on the usage and the website itself, so we won’t go through these. You can find more information on these options here.

Discussion Settings

Gravatar Cache – Set to OFF. If you have tons of comments, you might want to turn it on.

Gravatar Cache Cron – Set to OFF if you don’t use the Gravatar Cache option.

Gravatar Cache TTL – Leave the default value.

Tuning Settings

Combined CSS Priority – Set to OFF, unless you have a web developer to help you with excludes and combined/uncombined CSS.

CSS Excludes – In this field, you can put all CSS files you don’t want to be minified or combined. 

Combined JS Priority – Set to OFF.

JS Excludes – In this field, you can put all JS files you don’t want to be minified or combined. 

Max Combined File Size – Leave the default value.

Critical CSS Rules – Ignore this option if you don’t use critical CSS.

JS Deferred Excludes – Here, you can exclude the specific JS to have them load as they usually would.

URI Excludes – In this field, you can put any URL that you want to exclude from any type of optimization. If you have pages with a broken design or functions due to the LiteSpeed Cache settings, specify them here.

Role Excludes – You can exclude any page optimization for any role of the logged-in users.

That’s it! 

Please note that this guide is a good starting point, but it’s always best to test the options and test yourself and see what works best for your website.