WordPress Optimization with LiteSpeed Cache

Do Not Publish

Still copyediting this doc. Please don't publish. --LRC

LiteSpeed Cache can be a great way to maximize your website's speed using just the default configuration, but there are a lot of features you may not know about. These features can optimize your site even further.

Because it has so many features, LiteSpeed Cache for WordPress can also be confusing for some. We want you to get the best out of it, so we've produced this guide. We presume that you've already activated the plugin from the WordPress Plugin Directory. We will explain each option and function of the plugin one by one, the benefits and the issues it might cause on your website, and also how to fix any issues that crop up.

As of this writing, the latest version of the LSCWP plugin is 2.9.8. All options are current as of that version. We do intend to keep this guide up to date as features are added and changed. If you notice any discrepancies, please contact us at support[at]litespeedtech[dot]com so we may correct them.

There's a lot to read here, so grab a cup of coffee and get ready to speed up your site!

Introduction and Installation

What is caching?

Caching is a method of storing a snapshot of data at a given point. Caching is used in situations where the snapshot is more efficient to serve than the original content would be.

Caching may be implemented for two types of data: static and dynamic.

Static data refers to CSS, Javascript, images, and other types of content that is served as-is and is understood natively by the browser. Static files tend to make up the bulk of a website's size. As static data is usually browser-parsed, all the server needs to do is be a download medium for the files. All of the understanding of the static data will be handled by the browser. Caching of static files is often handled at the browser level to minimize the impact of transferring website pages.

Dynamic data, on the other hand, refers to content that must be processed and generated into a static file format (usually HTML) so that the browser may understand it. In a WordPress environment, in response to a page request, the server must first parse PHP, fetch the data from MySQL, and finally generate static content in the form of HTML so that the browser may understand it. This process is highly resource-intensive. Too many requests for dynamic content can take down your server. So, caching of dynamic data is critical for conserving server resources.

LiteSpeed Cache is a server-side page cache for dynamic content.

How does caching work?

To understand why caching is important, it is first helpful to understand how it works.

Diagram

User Request

A user sends a request by visiting the website URL in the browser.

CDN (Optional)

If a CDN is configured on the website for caching static or dynamic data, the cached data will be served from the CDN itself. The request will not go the server, unless there is no cached content available.

Some CDNs cache only static data, while some CDN's like QUIC.cloud also cache dynamic data. In this case, assuming the site is fully cached, no requests will ever go to the server. This decreases the server load dramatically, while simultaneously increasing the website's speed.

We will discuss setting up QUIC.cloud further in our tutorial.

Server Cache Manager

If there is no CDN Configured or the CDN does not have cache for the requested data, it will then query the server cache manager. If the content is cached at the server level, then it will serve the request from the cache manager itself, without troubling PHP or MySQL.

PHP and MySQL

Lastly, if none of the cache intermediaries have any data, the content will be processed through PHP and MySQL. This will require resources to first understand the request sent by the user, process the parameters, compile some code, fetch some data from MySQL, parse a response and then send it back to the user.

If caching is enabled, the moment PHP and MySQL parse the page content, it will be stored by the server cache manager and the CDN (if set up for dynamic cache). Then, the next time that same content is requested, it will be served quickly from the cache instead of going through PHP and MySQL again. As mentioned, PHP and MySQL are resource-intensive.

Why is caching important?

The ability to avoid invoking costly processes such as PHP and MySQL is what makes caching very important for your website.

Prepare for Installation

Before installing, and activating the LiteSpeed Cache plugin, ensure that all other cache or optimization plugins are removed from your WordPress installation. LiteSpeed Cache is a battle-tested Plugin and has excellent reviews. It does everything very well, and you won't need any other plugin.

If you do choose to use another plugin in conjuction with LSCache, do not duplicate any features between the plugins. i.e. If you're caching with LSCache, disable caching in the other plugin's settings. Or, if you're using the other plugin for CSS/JS Minification, disable those features in LSCache. If you're unsure, it's safest just to uninstall the other plugin.

Optimization is not an exact science. And for that reason, you must read every step in this tutorial very carefully, and test your website with every change you make. Conflicts may be introduced at any stage, so it's highly recommended that you make sure the website is loading correctly after each optimization is applied. It's not advisable to enable all options inside the plugin at the same time, as that makes troubleshooting unnecessarily complicated.

Install and Activate the Plugin

The first step in optimizing your WordPress site is to install and activate the LSCache plugin. Often installation and activation is the only step you might take with a new plugin, but for us it is only the beginning. That said, if all you wish to do is caching, LSCache's out-of-the box configuration should work for most sites without any manual tweaking. In this guide, we are assuming that you want to fully optimize your site using all of the features available to you.

Tip

Some hosting providers auto-install LiteSpeed Cache on their clients' WordPress sites. If this is the case for you, verify that the latest version is installed, and move on to the next step.

To install the plugin, log into your WordPress Dashboard, navigate to Plugins > Add New, enter LiteSpeed Cache in the search box on the right, and then click the Install Now button. That latest version of the plugin will automatically be downloaded and installed. The button will change to Activate. Press the button to activate LSCache.

Install LSCache

If you'd prefer to install LSCache via zip file, you may download it from here, install manually, and activate.

Both installation methods are equal, so you may choose whichever one you prefer.

And that's it! Installation is complete.

Know Your Web Server

While the LiteSpeed Cache plugin for WordPress carries the LiteSpeed name, it can also be used with other web servers. The functionality when used with a non-LiteSpeed server is limited. Generally speaking, any function that is not a server-level cache function may be used with any web server (LiteSpeed, nginx, Apache, etc.). Cache functions, though, require OpenLiteSpeed, LiteSpeed-powered hosting, QUIC.cloud CDN, or a commercial LiteSpeed product.

To find out which web server you're using, you can use this tool.

Enter your website's URL, and you'll see something like this:

Find Webserver

Tip

Cloudflare is not a web server, it is a reverse proxy. If your web server is displayed as Cloudflare, you can disable Cloudflare for a moment, check the tool again, and see the actual web server that is powering your site. Most WordPress sites use LiteSpeed, Apache or Nginx.

If you're still unsure which web server you're using, please consider asking your hosting provider.

Know the Plugin Terminology

We have a lot of ground to cover, so let's make sure we define a common language first. From the WordPress Dashboard, navigate to LiteSpeed Cache > Settings.

Get To Know

Options

An "option" is another name for a setting. In the screenshot, Default Private Cache TTL, Default 404 Page TTL, and all of the other settings on that left column are options.

Tabs

We use Tabs to organize groups of options. The General tab, for example, contains the most general options for the plugin. The Cache tab contains all of the options that pertain to caching.

Toggle Advanced Options Button

This button will open up a lot of new tabs. For simplicity, the plugin interface defaults to a small number of basic tabs. More advanced tabs are hidden behind the Toggle Advanced Options button. It is not required to click the button right now, but if you're curious go ahead. You can always hide the extra tabs again by clicking the same button.

There is more to LiteSpeed Cache than Options and Tabs, and here is the spot where you will find them. These menu entries are fairly self-explanatory, and we will go into them in more depth later.

Top Bar or Admin Bar LSCache Controller

This small utility is a shortcut to the most used menu entries and management functions of the LiteSpeed Cache Plugin. It can save you a few clicks.

Only Modify if Required

While every plugin option is explained in this tutorial, we will be marking some options as Only Modify if Required, which means that the default value is the preferred value. You should only touch these options if you have a specific reason to do so.

Proofread up to this point

Still copyediting this doc. Please don't publish. --LRC

Setup Basic Cache Settings(LiteSpeed-Only Features)

Note

LiteSpeed Cache Plugin is supported by all Webservers(Yes! Including Apache and Nginx), but the webserver-caching feature is only available with LiteSpeed, if you wish to you can skip these options and start from here if you're using any other Webserver than LiteSpeed.

However, We highly recommend moving to a host which uses LiteSpeed. To find out a host using LiteSpeed Webserver, Go here.

If you're using a VPS or a Dedicated Server and want to install LiteSpeed on your own server, You can order a license from here. It is priced at as low as 0$/month.

Now that you've already reached the LiteSpeed Cache >> Settings Page during our get to know, this is where we start.

The first two Tabs - General & Cache are dedicated for LiteSpeed Webserver caching. Let's take the options one by one. While the next two Tabs Purge and Excludes are to control the cache settings on LiteSpeed Webserver.

General Tab

General > Enable LiteSpeed Cache

The Enable LiteSpeed Cache simply edits your .htaccess file to tell the LiteSpeed Webserver to cache the dynamic website data and serve through cache. Always, Keep this to ON.

This option requires LiteSpeed Cache Module and LiteSpeed Cache Module both to be enabled on your server, If you try to enable it without those, it will show an error.

Enabling this will solve the High TTFB Problem or Slow Server Response problem in Google Pagespeed/GTMetrix etc.

Known Issues and Solutions

I see an error, which says LiteSpeed Cache Module is not enabled on Server, What does it mean? This error means that either you're using a non-LiteSpeed Webserver, or LiteSpeed Cache is not properly setup on your Server and/or is disabled by the host. Please contact your host.

I have a few things, which cannot be cached, on a page, how will that work? Don't worry, We have ESI which will be configured later which can help punching holes in the pages. Move ahead to proceed.

General > Default Public Cache TTL

Tip

What is TTL? TTL is Time-to-Live, It is an internet terminology which is measured in time and usually defines the time for which the value will be valid for which it is being defined.

The Default Public Cache TTL Setting defines the Public Cache Time for your Website, Public Cache stands for the Cache which is created for anonymous views, which means the pages which are same for all non-logged in users. The recommended value is 604800 but feel free to increase it as per your needs, LiteSpeed Cache always purges the required data automatically if something new is added, so it is good to keep this value to a higher one.

General> Default Private Cache TTL

The Default Private Cache TTL Setting defines the Private Cache Time for your Website, which means the cache which is created for your logged-in users, such as writers who are working in the front-end, Private Cache is always created separately for every-user, the value should be set to recommended.

General > Default Front Page TTL

The Default Front Page TTL Setting defines the Cache Time for the front-page of your website, this defines the TTL for Public Cache, Some website owners might feel the need to purge Front-Page early or Late based on their needs. This setting does not affect Private Cache, and it is usually set the same as the Public Cache TTL value, if set differently it will change override the cache TTL for frontpage only.

General > Default Feed TTL (Only Modify if required)

The Default Feed TTL setting defines the Cache TTL timings for RSS Feeds, It is usually recommended to not cache it, but if it is causing too much load on your server, It can be enabled temporarily.

General Tab

General > Default 404 Page TTL (Only Modify if required)

The Default 404 Page TTL Setting defines the Cache TTL for Pages which are with the status 404, which usually happens when someone tries to access a page which does not exist. In some conditions during an attack, some attackers deliberately send traffic to non-existing pages which can trigger high server-load. This setting will save you from such attacks by serving 404 Pages from the cache itself. Value should be set to recommended or higher.

Tip

The pages which load correctly are usually with 200 OK HTTP Status, 404 Not Found, and some other HTTP Codes which are sent by the website/server when any error happens or something other than what should be said as OK happens, You can read more about HTTP Codes here.

General > Default 403 Page TTL (Only Modify if required)

The Default 403 Page TTL option defines the TTL for Pages which load with 403 Status Code which is for pages which are forbidden to access(due to permission or hidden pages).

Value should be set to recommended or higher.

General > Default 500 Page TTL (Only Modify if required)

Just like previous settings, Default 500 Page TTL option defines the Cache TTL for Pages with 500 HTTP Status Code.

Value should be set to recommended or higher.

Settings in the General Tab have been completed, You can click on Save Changes to save any changes you've made and just move ahead to the Cache Tab.

Cache Tab

Cache > Cache Logged-In Users

The Cache Logged-in Users defines if the front-end pages(everything except the wordpress admin) should be privately cached, this option will only work if you've setup a [Private Cache TTL] earlier.

This option should be set to on to cache the front-end pages for the logged in users.

Cache > Cache Commenters

Comments are one of the most used functions of WordPress. The Cache Commenters option ensures that as soon as someone starts commenting on your WordPress website, their cache is being created Privately instead of Public Cache to ensure that the commenter can see his own comment differently from others.

This option should be set to on if you use the comment functionality of WordPress on your website.

Cache > Cache REST API

WordPress REST API is vastly used in websites, The Cache REST API option enables caching for those API requests, which help serving the data from your WordPress faster.

This option should be set to on if you use WordPress REST API or if you're not sure.

Cache > Cache Login Page

Cache Login Page option enables caching GET Requests for the wp-login.php page. This saves your server from spending resources on internet scanners which keep scanning the WordPress websites around the world to check for login pages.

POST requests are not cached, and enabling this option will never create a problem with Login process, since during Login a POST request will be sent. This option should be set to ON.

Tip

Read about HTTP Methods like GET/POST/PUT/DELETE/HEAD here.

Cache > Cache favicon.ico

favicon.ico though a very small file, but it loads on every page and every visit of your website. It should be cached to decrease the number of server calls, Enabling this option will store the favicon.ico in the Server Cache Manager and it will be served from there directly.

This option should be set to on.

Cache Tab

Cache > Cache PHP Resources

Cache PHP Resources option caches the PHP calls made by themes and plugins to decrease the number of PHP calls and save their data in the Server Cache Manager.

This should be set to on.

Cache > Cache Mobile

Cache Mobile option defines if LiteSpeed Cache should create a different cache for mobile devices, this option is not needed unless you're not using a responsive theme i.e if your theme is different for mobile and desktop devices.

Check if your theme is responsive, Set it to OFF if it is. Creating a different cache for mobile devices might cause extra cache misses which means more PHP/MySQL calls.

Cache > List of Mobile User Agents (Only Modify if required)

The List of Mobile User Agents option defines the User-agents which will be used to cache the mobile data, and the defined Useragents will also see the mobile cache only. This only works, if Cache Mobile option is set to On.

Known Issues and Solutions

Sometimes, you can see irregularities with this option. For best practices, always make sure that the User-Agents which are listed here should be the same used by your theme to detect Mobiles.

The Cache Tab is now complete.

Next Tabs are Purge and Excludes which provide you more precise control on the caching settings we just did for your website above, Almost everything in the Purge and Excludes section can be left as default. Unless you specifically want to read about them, you can skip to Advanced Settings

Purge > Purge All On Upgrade (Only Modify if required)

This option simply defines, if LiteSpeed cache should Purge the data when WordPress is Upgraded.

Purge > Auto Purge Rules For Publish/Update (Only Modify if required)

This option defines, which pages should be purged in an event of Publish/Update to the website such as adding an article.

Purge > Scheduled Purge URLs (Only Modify if required)

If you would like to purge any URL's at a specified time of the day, this is where you can put them.

Purge > Scheduled Purge Time (Only Modify if required)

This option sets the time to purge the URL's set in Scheduled Purge URLs option.

Excludes > Force Cache URIs (Only Modify if required)

This option forces a URL on the website to be cached for Dynamic Data in the Public Cache(for non-logged in users), even if it is set to non-cacheble.

Excludes > Do not Cache Options (Only Modify if required)

All Do not Cache Options(URL,Query Strings,Categories,Tags,Cookies,User-Agents,Roles) forcefully set the LiteSpeed Cache to disable the Page if the condition defined in those fields are matched.

Setup Advanced Settings(Part -1)

Now finally click on the Show Advanced Options Button to open the advanced settings which will even further speed up your website, and all the features we are going to discuss below are supported by all webservers.

While these options need a little technical expertise, we will try to explain them in the most easy way. We will also remind that, these options might break your website, though the plugin does not make any permanent changes so it is always recoverable by simply turning the option off. That is why we strongly recommend checking your website after enabling each and every option from now on, to ensure that everything is running smooth fine.

The first tab we will configure, we will configure is the Optimize Tab. Please test thoroughly after enabling any option in this Tab. Use the Top bar Shortcut, to Purge the cache after enabling any option to ensure you're testing the uncached version.

Optimize Part 1

Optimize > CSS or JS Minify

This option Minifies your CSS/JS Files, by removing the unused code inside the CSS/JS files, which are served. This will decrease the browser parsing time and make your website faster, It will also improve your Pagespeed/GTMetrix score.

Known Issues and Solution

Website might break, Solution here.

Optimize > CSS or JS Combine

This option combines your CSS/JS Files, and serves them in a combined format. It does not combine them in actual, so it is safe to turn it on and test it out, CSS and JS files are not combined with each other, CSS files are combined with other CSS Files and JS Files are combined with their own.

Known Issues and Solution

Website might break, Solution here.

Optimize > CSS or JS HTTP/2 Push

This option enables the HTTP/2 Push feature for CSS/JS Files, It will help speed up your website by sending the CSS/JS Files to the browser, even before they are requested while loading your website, which will allow the browser to start parsing faster and inturn it will load faster for the visitor.

Optimize > CSS/JS Cache TTL (Only Modify if required)

If you're using CSS/JS Minify or Combine, LiteSpeed will not serve the CSS/JS files directly from the theme. Instead it will serve the CSS/JS files from a folder it will create itself and use it to store and serve combined/minified files.

This TTL defines for how much time those files should remain there before LiteSpeed re-uses the original CSS or JS files from the themes and plugins to regenerate those Minified or Combined Files.

The default value is good to go, However, you can increase the TTL if needed.

Optimize Part 2

Optimize > HTML Minify

When PHP and MySQL parse a page, the output is always generated in HTML which is then further sent to the browser to parse, now PHP can also put some code in these which remains unused by the browser, but the browser will parse it anyways.

This option will Minify the HTML Code, before it is sent to the browser which will make your website faster.

Known Issues and Solution

This option might cause some issues with themes which are not properly coded, we've seen multiple instances of themes which have missing closed tags, in which case the minification process might consider important code as unused and remove it as the part of minification. Solution is to either find the issue within the theme, or turn off the function.

Optimize > Inline CSS and JS Minify

CSS and JS files can linked in an HTML Page in two ways, One is external another is Inline, while the options we discussed above cover the external CSS and JS Files, Enabling these will also minify the CSS and JS Code which is Inline.

Optimize > Load CSS Asynchronously

While loading some of the CSS is important before loading the website data, maximum amount of CSS is not required before the website data is loaded. Due to which it should be asynced, and this option does just that.

Known Issues and Solution

Might cause the website to show a White Flash before loading, Solution is to enable Critical CSS in the next Step.

Optimize > Generate Critical CSS

Enabling CSS Async will optimize your website speed, however, some of the CSS is required before the website data is loaded, while the rest can load later to save the initial data.

LiteSpeed automatically does that for you for free, Just enable the Critical CSS option and your website will automatically contact LiteSpeed's servers to general Critical CSS for your website and store it locally.

Optimize > Generate Critical CSS In Background

This option will allow your website to generate critical CSS in background while the website will keep working. If this option is set to OFF, The website will try to contact LiteSpeed's Critical CSS servers,

Known Issues and Solution

White Flash on Website, even after enabling Critical CSS. Solution here. Critical CSS is generated, but it works on some pages, but it still breaks some of the other pages, Solution is to Separate CCSS Cache Post Types in the next Section.

Optimize > Separate CCSS Cache Post Types (Only Modify if required)

Some websites have different CSS on their homepage, and compeltely different CSS for their other pages. In such cases, Keeping one single CCSS for the whole website will not work and might throw errors. This option will allow you to separate the CCSS cache for pages based on WordPress post types.

A value like page in this field will generate different CCSS for all pages on WordPress. A value like page,post in this field will generate different CCSS for all pages and posts on WordPress.

This option should be only be used if required, and your website is breaking after enabling CSS Async and Critical CSS both.

Optimize > Separate CCSS Cache URIs (Only Modify if required)

Just like the previous option, this option also helps creating different Critical CSS for the given URL's instead.

So let's say you want to generate a different Critical CSS for https://yourdomain.com/blog-post only, instead of all blog posts. You can use ^/blog-post$ in this field.

^ denotes here, that the starting will be exactly matched, if it is not included all URL's including blog-post in the end of the URL will start having seprate CCSS. $ here denotes, that the ending is exactly matched, without this , all U'RL's starting from blog-post will have separate CCSS. If ^ and $ both are removed, all URL's containing blog-post anywhere in the URL will have different Critical CSS.

Optimize Part 3

Optimize > Inline CSS Async Lib

This option inlines the CSS Async Library which avoids render blocking. It should be set to enabled, to improve Google Pagespeed/GTMetrix Performance.

Optimize > Load JS Deferred

This option hold the Javascript from loading before HTML is loaded, Since Javascript has no use before parsed HTML is loaded on your website, It only decreases the website speed.

Enabling this option will eliminate this problem and Javascript will only be loaded after HTML is loaded. This option will help you increase your score in Pagespeed/GTMetrix.

Known Issues and Solution

This breaks my website, how do I exclude the JS which is needed before HTML, and how do I find it? Solution - There is a section in the Tuning Tab ahead, which can be used to Exclude JS Deferred.

Optimize > Exclude JQuery

This setting excludes JQuery from all of the above optimization measures. It is recommended that this setting remain ON, particularly if you have inline JavaScript. If you are experiencing errors when JS Combine is enabled, turning this setting on should eliminate them.

Optimize > DNS Prefetch

Everytime your website loads, it loads maximum parts of its data from your server itself. But some of the files like Google Analytics, Ads are often loaded from External Resources, to access the files from these external resources browser usually sends a request after the website is loaded to load the resources differently.

This option eliminates that delay, and increases the speed by Pre-fetching the DNS for the domains defined by you.

How to find out the Domains, you need to pre-fetch ?

Console_Browser

Just open your Browser Console on Chrome by pressing F11 and then In the network tab and then open your website, You will see all the files which are loaded on your website. In the end of the list of files, you will see multiple files which are loaded from third-party domain which are not yours.

For the above example, I will add //www.google-analytics.com to the field, It will then pre-fetch the DNS for www.google-analytics.com and speed up everything we load using that domain on our website.

Note

It is important to note here that www or non-www are considered different. If the resource on your website loads from a domain with www, enter it with www, if it loads without, enter it directly.

Optimize > Remove Comments

While comments in code are mandatory and are considered good coding practice, it is only needed for the developer. The comments included in CSS/JS Files are not needed to the visitor who is visiting your website, and those comments there are only increasing bytes in the CSS and JS files.

Enabling this option removes the comments for the front-end, making your website faster while loading, and it does not edit your files and remove your comments in actual, allowing you to keep your files intact for development.

This completes the Optimize Tab for LiteSpeed Cache, Moving on to th next one Tuning which controls the precise settings for what you just enable in the Optimize Tab, If you had any problems on your website with any of the functions in the Optimize Tab, Tuning Tab has controls to solve them for you.

Tuning > Combined CSS Priority and Combined JS Priority (Only Modify if required)

This option allows you to change the priority of loading the LiteSpeed Cache Combined CSS and JS files on your website, this option should only be used if changing the order of combined and uncombined CSS and JS is needed.

If I turn on JS and CSS Combine, Why would there be any Uncombined files in the first place? Good Question, When you turn on the JS and CSS Combine function, it will combine all the JS and CSS files which are loading from your domain. However, external CSS and JS files are not combined since we do not have access to modify them, also in the options further you will learn that you might have to exclude some of the website's JS and CSS Files aswell to make the website load correctly, this option is also helpful then.

Tuning > CSS Excludes and JS Excludes (Only Modify if required)

This option allows you to exclude certain CSS and JS Files from being combined or minified. This option only works for locally hosted JS and CSS files, Externally hosted files are not under our control.

This option is helpful if you're having problems after enabling JS/CSS Minification or Combine in the optimize section.

Tuning > Max Combined File Size (Only Modify if required)

If there are a lot of JS and CSS files on your website, combining them all into one might make a very big JS and CSS file which might make your website slower than needed, which keeping the size to more than the recommended value 1.2 MB will increase your Pagespeed/GTMerix score, it can actually decrease your website speed for mobile devices or devices with slower Internet connection.

Tuning > Remove Query Strings

This is an important option, Accroding to GTMerix and Pagespeed, Removing Query String from Static Cache improves the loading of your website. However, it is also important for a few developers to use Query strings with CSS and JS to differentiate between versions.

This option solves both the issues, It only makes changes to the front-end where the Static Files are loaded without the Query string in them, making your website faster and it also does not change any of your files on the backend.

This option should be set to ON to increase your Pagespeed/GTMetrix score.

Tuning > Load Google Fonts Asynchronously (Only Modify if required)

Google fonts are enabled by default on almost every website, however, mordern websites and themes in WordPress use their own set of fonts. But still if you need Google fonts to be loaded, they can be made faster by loading asynchronosouly.

Enable this option only, if you're sure you need Google Fonts on your website. You can also check using Browser console, if you're loading any fonts from your own website, which would mean that you have your own fonts and don't need Google's fonts.

Tuning > Remove Google Fonts

Most of the mordern websites and themes include their own set of fonts, and loading Google fonts adds extra DNS queries and extra size for the website. Turn this ON and see if the website loads correctly, check a few pages to see if everything is loading correctly.

You can also check using Browser console, if you're loading any fonts from your own website, which would mean that you have your own fonts and don't need Google's fonts. Fonts from Google will load from fonts.googleapis.com.

Known Issues and Solutions

Google Fonts still load on my website, even after enabling this option. Solution - This means, that you also have Load Google Fonts Asynchronously option set to ON, Disable that option to disable Google Font loading on your website.

My website breaks after enabling Remove Google Fonts option. Solution - This means that your theme does not have their own font and need Google fonts to be loaded, Disable this option and enable Load Google Fonts Asynchronosouly to load Google fonts and load them faster.

Tuning > Critical CSS Rules (Only Modify if required)

NEED DEVELOPER ASSISTANCE TO WRITE THIS

Tuning > JS Deferred Excludes (Only Modify if Required)

As explained during the Optimize Tab, loads the Javascript after HTML is loaded. However some JS might still need to load if the website breaks without JS loading first.

You can list all your JS(with all options off in the Optimize Tab) and then list all JS and keep halfing them, till you find the culprit. This way you can still load the unused JS after HTML is loaded to make your website faster, and exclude the required JS from the defer process.

Tuning > Remove WordPress Emoji

This option disables the loading of WordPress Emoji, which loads externally from wordpress.org, adding an extra DNS Query and extra load for your customers.

This option should be enabled unless you specifically need WordPress Emoji to be displayed on your website.

Tuning > URI Excludes (Only Modify if Required)

This option allows you to disable everything in the Optimize Tab for a specific URL in your WordPress website.

So let's say you want to generate a different Optimization for https://yourdomain.com/blog-post only, instead of all blog posts. You can use ^/blog-post$ in this field.

^ denotes here, that the starting will be exactly matched, if it is not included all URL's including blog-post in the end of the URL will be marked for non-optimization. $ here denotes, that the ending is exactly matched, without this , all U'RL's starting from blog-post will be marked for non-optimization. If ^ and $ both are removed, all URL's containing blog-post anywhere in the URL will be marked for non-optimization.

Tuning > Role Excludes (Only Modify if Required)

Optimizations are valid for both logged in users and non-logged in users by default. If you would like to exclude any of the user groups(such as Administrator/Editor) for some reason. This option can disable the settings for the selected user group.

This completes the Tuning Tab. Now we will move on the Media Tab, which controls the Image and media part of your WordPress, and is important for optimizing website speed and increasing your Pagespeed/GTMetrix Score.

Media

Tip

Lazy Loading is the process of loading the data only when it is requested. In general when a website is loaded, all images and frames on the website are loaded directly, even if the browser screen cannot accomodate them all, which means that the frames and images which are loaded below what you can see on the browser and useless at the initial-load and are increasing number of requests on the server. Lazy Loading allows to disable that by loading only when you are actually viewing the frame/image.

Media > Lazy Load Images and Lazy Load Iframes

This option enables the LazyLoading of images and frames, which simply means the images or frames will only load once LiteSpeed cache detects that the browser is vieweing that image or frame.

This option should be set to ON, to decrease initial requests and increase website speed.

Media > Lazy Load Image Excludes

Some images like website logo, or an image which has some important message(Like a Sale), does not look good when it is Lazy Loaded.

We recommend, excluding atleast the Logo using this option. You can use full URL here i.e, if your logo is at https://yourdomain.com/logo.png , You can add the full URL to exclude it, you can also use Partial Strings with ^ and $ exactly as defined in the previous parts of the tutorial here.

Media > Lazy Load Image Class Name Excludes (Only Modify if Required)

This option allows you to exclude a full image class from the LazyLoading. This option can be used if Lazy Load Image excludes by URL is not sufficient or excluding by image class is explicitly required.

Media > Lazy Load Image Placeholder (Only Modify if Required)

When the website is loaded with LazyLoading on, the part that is not loaded on the first visit needs a placeholder to replace it with something. This option, does just that. It uses a Grey Placeholder by default. You can change it to Transparent by data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7 using this for the value, which will then match your theme's color.

Media > Responsive Placeholder

This option enables the responsive placeholder for the images which are lazy loaded. This helps with generating the same-size placeholders as the image to ensure that the page is loaded correctly, enabling this option is generally recommended, if you have a responsive website.

Media > Responsive Placeholder Background Color

This option allows you to decide the color for the Responsive Placeholder, Default is Gray, however it should ideally match your theme's background to give it a more proper look. You can select the color that matches your theme background from the Color Palette.

Media > Generate Reponsive Placeholder In Background

Responsive Placeholders are generated by LiteSpeed servers in exact sizes and sent to your servers when requested. This option should be set to enable to generate these placeholders in background. If set to off, The page will load only after the Responsive Placeholders are generated and fetched by your website from LiteSpeed's servers.

Media > Inline Lazy Load Images Library

Lazy Load requires a JavaScript image library in order to work. When this setting is OFF, the JS library is accessed via a separate request. When this setting is ON, the JS library is included inline in the HTML.

Turning this option ON can improve your speed score in services like Pingdom, GTmetrix and PageSpeed. It does make your website page bigger, but increases your website speed.

Media > Optimize Automatically

This option utilizes our Image Optimization feature to optimize your images automatically, and replacing them with their compressed versions.

Nothing to worry about, we will discuss about Image Optimization in detail later in this tutorial, but if you would like to enable the automatic optimization process, It is recommended to enable it here.

Media > Optimization Cron(Modify Only if Required)

This option defines if the cron should automatically fetch the images from LiteSpeed Server after they are optimized. If you're unsure, just let it be Enabled.

Media > Optimize Original Images

This simply means if you would like to optimize the JPEG and PNG files, If any JPEG and PNG files can be optimized. It will store the backup as image.jpg.bk in the same folder, and image.jpg will be the optimized version.

This plugin can also generate webp versions of your images which is faster than optimizing original images. You can turn this option off if you only need webp images and do not want to optimize jpg and png original files.

It is recomended to keep this to on, to improve website speed with the browsers who do not support the webp images yet.

Media > Remove Original Backups (Modify Only if Required)

This option will allow LiteSpeed Cache to delete the original image file image.jpg.bk after the optimized versions are generated. This option should be only Enabled if explicitly required,since once the originals are deleted, they cannot be reverted.

Media > Optimize WebP Versions

This option enables our Image Optimization Process to optimize the images in webp format which is much faster than JPEG and PNG and is lighter.

This option should be set to ON to increase your Pagespeed Score.

Media > Optimize Losslessly (Modify Only if Required)

By default, LiteSpeed compression technique is lossy. While it compresses your image nicely, it can rarely leave some problems with very high quality images, while it is not recommended to enable it for all websites.

If you need it and want to compress the image Losslessly, Keep in mind the image sizes can be bigger than expected and the compression might not work as expected. If you're unsure, set it to OFF.

Media > Preserve EXIF/XMP data (Modify Only if Required)

Preserve EXIF data (copyright, GPS, comments, keywords, etc) when optimizing. This will increase the size of optimized files. Enable only if required specifically, Set to OFF if unsure.

Media > Image WebP Replacement

This option will only work with Optimize WebP versions is set to ON, while that option allows optimization of images in WebP format, this option actually enables the serving of WebP.

It should always be enabled in conjuction of Optimize WebP versions option to serve WebP versions for the images which are available. It also loads the original version of the image if the browser does not support WebP format or if the WebP image is not generated yet, This option is safe to use, and should be enabled.

Media > WebP Attribute To Replace(Modify Only if Required)

Specify which element attributes will be replaced with WebP. Only attributes listed here will be replaced, It should be modified only if required.

Media> WebP For Extra srcset

Enable replacement of WebP in srcset elements that were generated outside of WordPress logic. [Learn More]. (https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:configuration:media#webp_for_extra_srcset)

This here completes our Media Tab, while LazyLoading Images and Iframes were the options which were explained quite properly, The confusion must have been there for Image Optimization.

We will now discuss, Image Optimization feature of LiteSpeed, before proceeding further to the rest of the Advanced Settings, If you would like to optimize your images later and instead move ahead with rest of the Advanced settings, You can do so from here

Image Optimization

You can access the Image Optimization function from the Sidebar or from the Top-Menu. When you enter it for the first time, You will see a screen like this.

Image Optimization

Click on Initialize Optimization to allow your WordPress to contact LiteSpeed's Webservers to generate an API Key for your website you will use in further steps to optimize your images.

Now before you start here, You should go through the Settings here from the Media Tab to ensure that you're optimizing images the way you want to.

The most recommended way is, Optimizing the original images along with WebP in default compression state.

Once you've gone through the settings, and when you come back to the Image Optimization Page, you will see this page - Image Optimization

Send Optimization Request - This option will send the a set of images selected automatically from your Media Library to LiteSpeed's server to optimize, Once the images are optimized, LiteSpeed Webserver will automatically notify your website to Pull Images. Don't worry, you can use this button again if it does not send all the images in first time.

Once you click you should see a message like Pushed 1 group (5 images) to LiteSpeed optimization server, accepted 1 group (5 images). on the top which means that the images have been sent to LiteSpeed's servers.

The first request, will always be of 1 group only, since it is done to make sure that your website can send and recieve images without any issues. After the 1st request is sent and images are recieved for the first time properly, The plugin will be able to send more groups together.

After sending the request, wait for sometime, and then refresh the page, You should see something like this -

Image Optimization

Images requested: 1 group (5 images) means there are 5 images which are still in progress of being optimized. Images notified to pull: 1 group (1 image)means that these images are done and should be pulled from the LiteSpeed Server. Last pull initiated by cron at just now, if you've setup this setting to ON, Cron will automatically pull Images from LiteSpeed's Server. Images optimized and pulled: 1 group (4 images), tells you how many images have been already pulled.

What is Level: 1 Credit: 90 in this image? How do I level up? LiteSpeed's Image optimization has a level system to ensure correct allocation of the resources, Level: 1 usually has a total of 100 Credits, Since I have already sent 10 images to optimize. My credits got decreased to 90, If I refresh the page after images are Pulled, I will see 100 credits again.

To level up, You've to do nothing except optimize the images, You will level up very fast when you optimize images.

Do I have to do this manually all day long? I saw some option to Optimize automatically, How does that work? No, if you've turned on the Optimize Automatically here, the cron which was only pulling the images till now will also start sending the requests. However, it will only work automatically after you've atleast 1200 Credits, which is on Level - 3, and it is not hard to reach Level - 3, Usually takes about 15 minutes, once the process has started.

Then you can sit and enjoy while LiteSpeed will automatically optimize the original images for you, also generate their webp version and replace it on the front-end too, any new uploads to the Media Library will also be optimized automatically.

Will this also optimize images outside Media Library? Currently no, it is not capable of optimizing the images which are not uploaded through Media Library. It is on the roadmap though.

Now let's get back to setting up the plugin, once you've reached Level -3(Have more than 1200 credits, or all images are optimized), to make the website even more faster.

Setup Advanced Settings(Part -2)

Coming back to the Settings Option, This is where things start getting serious, Till now most of the settings can be understood simply by reading what is written, from this point of time, it is important to understand that all settings now are super-advanced and you need a little bit of technical touch to understand it. So let's start with the CDN Tab.

These settings -

CDN > Enable CDN (Modify Only if Required)

CDN > CDN Mapping (Modify Only if Required)

CDN> Original URLs (Modify Only if Required)

CDN > Included Directories (Modify Only if Required)

CDN > Exclude Path (Modify Only if Required)

are for setting up a pull-based CDN such as MaxCDN or Stackpath or BunnyCDN, these CDN's help you caching your Static Files, and can be setup using a tutorial such as this - https://docs.litespeedtech.com/lscache/maxcdnwordpress/.

CDN > Load JQuery Remotely

While websites have their own Jquery, the same Jquery files are exist in the worldwide Jquery library which is maintainted by Google and CDNJS, you can enable any one of them to load Jquery remotely instead of your own server. It is not required, but can help in speeding up your website.

CDN > Quic Cloud API (Modify Only if Required)

We discussed about how, caching your website's dynamic data can decrease load on your website's PHP and MySQL. In the Basic settings above, we enabled Cache for websites hosted on LiteSpeed's Webserver.

Quic.cloud is a CDN service by LiteSpeed, currently in Beta, offers wordpress users hosted on all Webservers to enjoy the benefits of Dynamic Cache.

If you would like to set it up on your website, this is where you go - https://docs.litespeedtech.com/lscdn/onboarding/

The above tutorial, will also explain what you fill here in place of the API Key it has been asking and what it does.

CDN > Cloudflare API (Modify Only if Required)

If you use Cloudflare to cache your Static files, you can use LiteSpeed Cache to handle purging automatically from the plugin itself. All you need to do is enter the Cloudflare API key, Email address and domain name you want to control the settings for.

LiteSpeed will then start auto-purge of the Cloudflare data(Static Files Only), whenever needed, Alternatively you will also get an option to Purge Cloudflare Cache from the Top-bar shortcut.

CDN Tab completes here, Let's move to ESI

ESI TAB

ESI is a feature which allows you to punch holes, between a fully cached page. Consider a situation, where a complete page can be cached, but some of the part(such as a comment box) cannot cached because of its nature. If we have to uncache the whole page because of that, that would be unfortunate and will increase the server-load. ESI, when enabled will punch a hole in a fully cached page and will start privately caching data for the block which is defined. Admin Bar and Comment Form ESI is built in.

ESI > Enable ESI (Modify Only if Required)

Enable caches public pages for logged in users and serves the Admin Bar and Comment Form via ESI blocks. These two blocks will be uncached unless enabled below.

ESI > Cache Admin Bar (Modify Only if Required)

Cache the admin block, using ESI.

ESI > Cache Comment Form (Modify Only if Required)

Cache the Comment Form, using ESI.

ESI > Vary Group (Modify Only if Required)

If your site contains public content that certain user roles can see but other roles cannot, you can specify a Vary Group for those user roles. For example, specifying an administrator vary group allows there to be a separate publicly-cached page tailored to administrators (with “edit” links, etc), while all other user roles see the default public page.

To learn more about ESI, Go here and [here]https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:esi

How do I setup any other widget with ESI? 2nd link in the above paragraph explains about how you can use custom widgets with ESI and what all is supported, One shortcut is also to just simply append esi in front of the block i.e. if your widget on the block is written like [samplewidget], you can simply append esi in front of it like this [esi samplewidget] to enable ESI on it.

Now comes the Advanced Tab, Some settings here are important, but be careful while playing with them.

Advanced > Object Cache

An object cache stores the results of expensive and/or frequent database queries in a way that makes them easy to retrieve, and eliminates the need for repeated access to the database. Object caching greatly reduces the time it takes to retrieve query results. According to our Cache Diagram, It sits between the communication of PHP and MySQL, and since they're both saved on the Disk. It is slower, Object cache is configured to work on the memory which makes running database queries faster.

While usage of the Object Cache is recommended, You must make sure that Object cache is first properly installed. It needs a three-step Job to make it work i.e. - - Installation of Redis or Memcached Server - Setting up PHP extension to allow PHP to communicate with Redis or Memcached Server - Enabling Object Cache from the LiteSpeed Cache Plugin to utilize and finaly enable it.

Object Cache

Note

You only need either of the one, Memcached or Redis, However, we recommend using LiteSpeed Memcached, which utilizes the same speed of Memcached but with High Availablity and Persistent Data Storage.

How to install LiteSpeed Memcached? Please use the following guide - https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:lsmcd:install-memcached , This guide also includes installtion of Memcached, but LiteSpeed Memcached(LSMCD) is recommended.

How to install Redis Server and PHP Extension? Please use the following guide - https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:redis

What if my server has both Redis and Memcached installed? Does it create a problem? The object Cache Setting has an option to choose from both, You can utlize only one out of it. However, If you don't need the other one, It is better to remove it.

What about other settings in the Object Cache Menu? While most of the Redis/Memcached instalaltions are default and will work out of the box, If you're looking to setup advanced stuff like a password for your redis server, or setup a database ID, Its best to do it with an experienced systemadmin. Otherwise, just leave it as it is.

Advanced > Browser Cache

While PHP has to be served from the server everytime, to make sure they get the latest data. Static files remain same and are parsed at the browser end, Browser Cache should be set to enabled, to improve Static file serving. It will also improve your GTMetrix/Pagespeed Score.

Advanced > Browser Cache TTL(Modify Only if Required)

This setting defines how long the user's browser should cache the file, Default is set to 2592000 seconds, It can be futher increased, or can be left as default.

Advanced > Check Advanced Cache(Modify only if required)

This option is only needed if you're using a different full page cache plugin and are using LiteSpeed Cache for Optimization only and not caching. It should be left as default, However, if you're using another cache plugin on Apache or Nginx, You can disable this to allow other caching plugins to work while LiteSpeed can help with the Optimization.

Advanced > Login Cookie(Modify only if required)

The default login cookie is _lscache_vary. The server will determine if the user is logged in based on the existance of this cookie. This setting is useful for those that have multiple web applications for the same domain. If every web application uses the same cookie, the server may confuse whether a user is logged in or not. The cookie set here will be used for this WordPress installation. Example use case: There is a WordPress installed for www.example.com. Then another WordPress is installed (NOT MULTISITE) at www.example.com/blog/ The cache needs to distinguish who is logged into which WordPress site in order to cache correctly.

Advanced > Purge All Hooks(Modify Only if required)

This option contains the list of hooks, which if triggered by WordPress will also trigger LiteSpeed to Purge Cache. Default Hooks are already there and will work with most of the websites, Edit is needed only if a custom hook is used.

* Advanced* > Improve HTTP/HTTPS Compatibility(Modify Only if required)

When a site uses both HTTP and HTTPS, conflicts with the login cookie may occur. Cookies are based on domain name, regardless of protocol, however an HTTP connection can't read a cookie that was saved with HTTPS. And so, if a user logs in with HTTPS and then connects with HTTP, the user will be treated as a guest, and not as a logged-in user. When you enable this option, the login cookie is saved as an HTTP cookie at all times, regardless of the protocol used to access the page. This ensures that the login cookie is always accessible to both HTTP and HTTPS connections.

Advanced > Instant Click(Modify Only if required)

It takes time for a user to click a link. First they hover over it, then they depress the mouse button, and then, only after the button is released, is the link considered “clicked” and the new page loaded. With Instant Click enabled, the page begins to load as soon as the user hovers over the link. By the time the mouse button is released, enough of the page has been loaded that the display can seem almost instant. Be aware, though, that this function will generate extra requests to the server, if your visitors do a lot of link hovering without clicking. As such, it has the potential to impact server load. It is not needed on most of the websites, with LiteSpeed Cache, since it is already super fast.

This here completes the optimization of a WordPress Website, If everything is followed correctly. Your website should be much more faster than what it was before.

How to contact LiteSpeed Support Team incase help is needed? In a case, where while following this guide, you see a bug on LiteSpeed Cache or find any issues, Please contact our support team by emailing us at support@litespeedtech.com.

I think I would like a professional to handle this, Can I get in touch? Sure, Feel free to email us, or checkout our Professional Services at - https://store.litespeedtech.com/store/cart.php?gid=5