My LiteSpeed Cache Settings for my Elementor-built Website

The LiteSpeed Cache Plugin outperforms all its competitors, many of which I’ve used over the years. Since using it for my website, making design changes using Elementor Page Builder, and switching my web hosting provider, ChemiCloud, my website’s performance has improved tremendously.

I recommend using the LiteSpeed Cache plugin for your website, especially if it is designed with Elementor. It will help your website reach its full performance potential. For this article, I will provide my ideal LiteSpeed Cache plugin settings for my website, which is built with Elementor.

My ideal LiteSpeed Cache plugin settings are based, first, on a tutorial provided by Tom from OnlineMediaMasters. He is the same expert who recommended me to my new web hosting provider, ChemiCloud. My settings are also based on my testing and the help of customer support agents.

Read More: ChemiCloud Review: The Best Web Hosting for Entrepreneurs >>>

Now, my ideal LiteSpeed Cache plugin settings stem from:

If you use Elementor to design your website, I recommend using LiteSpeed Cache and my settings choices. I also recommend using Perfmatters in a limited manner to help your website achieve maximum performance by doing the few that LiteSpeed Cache cannot. I will explain why later on in this article.

Read More: Using Perfmatters with LiteSpeed Cache for Elementor-Built Websites >>>

It is essential to understand that these settings are not guaranteed to help your website achieve the same performance results I have. Before proceeding, please use a staging tool to test these changes so you do not potentially ruin your visitor’s experience. Also, know that this post is long, so please use the above Table of Contents to find the settings you’re looking for quickly.

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

What is the LiteSpeed Cache Plugin?

The LiteSpeed Cache Plugin is a robust all-in-one site optimization WordPress plugin specifically designed to enhance the performance of WordPress websites. It optimizes all website data, including HTML, JavaScript, CSS, images, and more.

In addition to its compaitble QUIC.cloud CDN, LiteSpeed Cache temporarily stores this website data so that it can be quickly retrieved and displayed to visitors. By creating a cache of your website’s pages, the LiteSpeed Cache Plugin can serve pages to visitors much faster than if the pages were being generated from scratch every time.

LSCache for WordPress is known for being one of the fastest and most effective cache plugins available. It is designed to work seamlessly with various hosting providers and server configurations. However, it works best with hosting providers that use LiteSpeed Web Servers, such as ChemiCloud. It also offers comprehensive features and settings that optimize websites’ performance.

One of the key benefits of using the LSCache Plugin is that it can significantly reduce page loading times, dramatically improving user experience. Visitors are likelier to stay on your website and engage with your content if your pages load quickly and smoothly. In addition, faster page loading times can also lead to improved search engine rankings, as search engines like Google take page speed into account when ranking websites.

The LiteSpeed Cache Plugin is also ideal for websites designed with Elementor Page Builder. Like with any page builder, Elementor can sometimes slow down your website. However, LSCache has plenty of features to help speed up your website, regardless of what you used to design it. You can still expect faster load times and a smoother user experience.

General Features

The LiteSpeed Cache plugin can be used by anyone and for any website. It does not matter which web server your website uses (LiteSpeed, Apache, NGINX, etc.) or how it is designed. Its general features include:

  • Free QUIC.cloud CDN Cache
  • Object Cache (Memcached/LSMCD/Redis) Support (ultimately depends on your hosting provider)
  • Image Optimization (Lossless/Lossy)
  • Minify CSS, JavaScript, and HTML
  • Minify inline & external CSS/JS
  • Combine CSS/JS
  • Automatically generate Critical CSS
  • Lazy-load images/iframes
  • Responsive Image Placeholders
  • Multiple CDN Support (full compatibility varies)
  • Load CSS Asynchronously
  • Defer/delay JS loading
  • Browser Cache Support (full compatibility varies)
  • Database Cleaner and Optimizer
  • PageSpeed score (including Core Web Vitals) optimization
  • OPcode Cache Support (ultimately depends on your hosting provider)
  • HTTP/2 Push for CSS/JS (on web servers that support it)
  • DNS Prefetch
  • Cloudflare API
  • Single Site and Multisite (Network) support
  • Import/Export settings
  • Attractive, easy-to-understand interface (debatable)
  • WebP image format support
  • Heartbeat Control

LiteSpeed Web Server

To achieve consistently high performance, your website needs at least three things:

  1. A high-quality web hosting provider that uses advanced back-end technology. I recommend ChemiCloud.
  2. A caching plugin (preferably one that includes image optimization).
  3. A CDN, such as Cloudflare or QUIC.cloud CDN (part of the LiteSpeed Web Server). This is a content delivery network that makes it easy to quickly serve website content to visitors around the world.
  4. An image optimization plugin if your caching plugin does not include it.

My new hosting company, ChemiCloud (which I recommend you check out), is powered by LiteSpeed Web Server. LiteSpeed Web Server includes the LiteSpeed Cache plugin and QUIC.cloud CDN, Cloudflare CDN’s ONLY alternative worth switching to. Yes, LiteSpeed Cache and QUIC.cloud include seamless image optimization, but more on that later.

Read More: ChemiCloud Review: The Best Web Hosting for Entrepreneurs >>>

So, What is the LiteSpeed Web Server?

The LiteSpeed Web Server is a high-performance software designed to provide maximum speed and scalability for websites. It is an alternative to the popular Apache and Nginx web servers and is known for being faster and more efficient than its counterparts. If you’ve asked, “Is LiteSpeed better than nginx?” The answer is “YES!”

LiteSpeed uses industry-standard tech to help websites perform their best. One of its key features is its ability to handle many concurrent connections, making it ideal for websites with high traffic volumes. It is also designed to be highly scalable, which means it can easily handle sudden spikes in traffic without experiencing any downtime or slowdowns.

The LiteSpeed Web Server is compatible with many web technologies, including PHP, Python, Ruby, and Perl. It also supports popular content management systems like WordPress, Joomla, and Drupal, making it a popular choice for web developers and website owners.

In addition to its speed and scalability, the LiteSpeed Web Server includes many advanced features for optimizing website performance, such as the LSCache Plugin and the QUIC.cloud CDN.

Overall, the LiteSpeed Web Server is an excellent choice for anyone looking for a high-performance web server that can handle large traffic volumes and provide fast, reliable website performance.

LiteSpeed Exclusive Features

If your hosting provider uses LiteSpeed Web Servers and any of the products within its ecosystem, you will have access to more exclusive features in the LSCache plugin. They include:

  • Automatic page caching to improve site performance greatly
  • Automatic purge of related pages based on specific events
  • Private cache for logged-in users
  • Caching of WordPress REST API calls
  • Separate caching of desktop and mobile views
  • Ability to schedule purge for specified URLs
  • WooCommerce and bbPress support
  • WordPress CLI commands
  • API system for easy cache integration
  • Exclude from cache by URI, Category, Tag, Cookie, User Agent
  • Intelligent preload crawler with support for SEO-friendly sitemap
  • Multiple crawlers for cache varies
  • HTTP/2 support
  • HTTP/3 & QUIC support
  • ESI (Edge Side Includes) support
  • Widgets and Shortcodes as ESI blocks* (requires Classic Widgets plugin for WP 5.8+)

LiteSpeed Cache vs the Competition

When it comes to WordPress caching plugins, the choices seem endless. Finding the perfect one is crucial for enhancing the performance of your WordPress website. Of all the caching plugins I’ve used for this website, LiteSpeed outperforms them all.

With a change of hosting providers that allows me to use LiteSpeed Cache and a significant cleanup of my webpage designs, my website is now performing the best it has ever been. As a result, my organic search traffic is steadily increasing.

Some advantages of LiteSpeed Cache include:

  1. LiteSpeed Web Server integration: LiteSpeed Cache integrates well with the LiteSpeed Web Server. This is now the gold standard for web hosting servers. If you do not have a hosting provider that uses LiteSpeed Web Servers, consider switching to one that does. This is especially true if your website is designed with Elementor. I recommend ChemiCloud! Check out my official ChemiCloud review to learn more about this hosting provider.
  2. Serve-Level Full-Page Caching: LiteSpeed Cache employs server-level full-page caching to significantly boost your website’s loading speed. Serving cached pages directly from the server eliminates the need for repeated processing of dynamic content and database queries, resulting in a highly optimized and efficient website experience for your visitors.
  3. Comprehensive Optimization Features: LiteSpeed Cache offers a wide range of optimization features that cater to various aspects of website performance, including image and object optimization, CSS, and JavaScript minification. This comprehensive solution eliminates purchasing multiple optimization plugins for different purposes.

LiteSpeed Cache vs WP Rocket

One of the first caching plugins I primarily used, even paid for, was WP Rocket. While I appreciate WP Rocket for introducing me to the many settings available to optimize my website, it could not meet my long-term needs. I could not achieve the best performance results I am now experiencing with LSCache.

LiteSpeed Cache

LiteSpeed Cache is a built-in caching solution for LiteSpeed web servers, known for their exceptional speed and efficiency. This means that LSCache is specifically designed to work with LiteSpeed servers, resulting in faster and more efficient page loading times. LSCache offers a range of features, including page caching, database optimization, image optimization, and lazy loading. Additionally, it provides advanced features like Edge Side Includes (ESI) and HTTP/3 support, which can further improve website performance.

WP Rocket

WP Rocket, on the other hand, is a standalone plugin that can be used with various web servers. WP Rocket offers similar features to LiteSpeed Cache, such as page caching, minification, and lazy loading. It also provides additional features like database optimization, image optimization, and CDN integration. However, WP Rocket does not offer advanced features like ESI or HTTP/3 support.

LiteSpeed Cache vs SiteGround Optimizer

When I used SiteGround to host my website, I also used their optimizer plugin to optimize it. It was my first experience using an in-house optimizing plugin that I did not have to pay for separately. Unfortunately, SiteGround Optimizer and the hosting did not help my website reach my desired performance.

LiteSpeed Cache

LiteSpeed Cache is a plugin designed for sites hosted on LiteSpeed web servers. The server-level full-page caching guarantees fast loading times, thus laying the foundation for an optimized and user-friendly experience. It offers a range of features, including page caching, object caching, and browser caching. It also has a built-in image optimization tool and supports HTTP/2, HTTP/3, and QUIC protocols. With LiteSpeed Cache, web pages can load with lightning speed, improving website performance and enhancing customer satisfaction.

SiteGround Optimizer

SiteGround Optimizer, on the other hand, is a caching plugin developed by SiteGround, a popular web hosting provider. It offers similar features to LiteSpeed Cache, such as page caching, object caching, and browser caching. Additionally, it includes a tool for minifying HTML, CSS, and JavaScript files and a lazy loading images feature.

However, its scope may be limited to websites not hosted on the SiteGround platform. Even for websites hosted on SiteGround, the optimizer still does not help achieve the best possible web performance.

LiteSpeed Cache vs Perfmatters

Before using LiteSpeed Cache with my new hosting provider, ChemiCloud, I used a plugin called Perfmatters in conjunction with whatever caching or optimization plugin I used. Perfmatters advertises itself as a site optimization plugin that works well with other similar plugins. The goal was for Perfmatters to optimize my website further wherever my main plugin could not.

Now that I use LiteSpeed Cache, I still use Perfmatters to optimize my website further. However, I am not using Perfmatters with LSCache as much as I was using it with other site optimization plugins. LiteSpeed Cache does a good job optimizing my website on its own. Still, Perfmatters takes optimization even further to ensure my website loads as fast as possible, especially for brand-new visitors.

Perfmatters does an excellent job of regulating the sometimes excessive amount of DOM elements involved in building websites with Elementor. It also better determines what is above the fold and ensures it loads as fast as possible.

Read More: Using Perfmatters with LiteSpeed Cache for Elementor-Built Websites >>>

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

What is Elementor?

Elementor plugin homepage
Elementor plugin homepage – Choose Elementor to design your website.

Elementor is a drag-and-drop page builder plugin for WordPress. It allows website owners to create custom, professional-looking web pages without knowing how to code. Elementor is the leading choice for website owners who want more control over their website’s design and functionality.

With Elementor editor, you can create a wide range of web pages, including landing pages, product pages, blog posts, and more. It features a user-friendly interface that makes adding and customizing elements like text, images, videos, buttons, and forms easy. You can also choose from various pre-designed templates to help you get started quickly.

Elementor creates a visual representation of your web page, which you can edit and customize using a simple drag-and-drop interface. You can add flex box container sections and widgets to your page and adjust their position, size, and style. Elementor also includes various advanced features, such as animations, custom fonts, and global settings, allowing you to create unique and professional-looking web pages.

Overall, Elementor is a powerful tool that can help you take your WordPress website to the next level. Whether you’re a blogger, small business owner, or web developer, Elementor can help you easily create beautiful, high-performing websites.

Disclaimer: This section contains affiliate links from Elementor. This means I will receive a small commission if you purchase an Elementor Pro plan at no additional cost to you. Please read my full Disclaimers for more information about my partnerships.

How I Use Elementor for My Website

I use Elementor to design my entire website. This includes:

  • Paying for Elementor Pro. This means I can access all of Elementor’s features, excluding A.I. and hosting capabilities.
  • I am using Hello Elementor as the child theme. This means my entire website is built from scratch.

It takes a lot of work to design and maintain your website. Designing your entire website with Elementor is not easy at all. However, I took on the hard work because I grew tired of feeling limited in my website’s design potential because of pre-made WordPress themes. Therefore, I took the necessary time to educate myself on how to design my website independently. It was not easy, but it was worth it.

Elementor Pro, with its Hello theme, gives me complete control over how my website looks and functions. Unlike most pre-designed WordPress themes, I am not limited to specific design settings.

Importance of Hosting and Optimization for Elementor Websites

One of the most important benefits of building my website from scratch with Elementor is that there are no limits to how it can look. Elementor allows me to move from a “brochure website” to one that genuinely showcases my brand.

However, a common problem with using Elementor is that our websites can slow down because of the many features and widgets we use to design them. This could negatively affect our visitors’ experience and organic audience growth.

Designing each page for your website with Elementor to utilize fewer widgets is essential. However, having a quality hosting provider for your Elementor-designed website is also important. You want to make sure your host provides you with enough backend resources that are powerful enough to support your Elementor designs. I recommend ChemiCloud hosting for many reasons described in my official review. One of which is their cloud-based infrastructure via LiteSpeed Web Servers.

However, understand that quality hosting is only part of the overall equation. You must also use a good optimization service to fine-tune your Elementor website. This way, your webpage designs can load fast and function well for your visitors. That is why I believe LiteSpeed Cache, with a hosting provider that implements its compatible LiteSpeed Web Servers, beats all of its competition in best optimizing your Elementor-designed website.

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

My Elementor Settings (Before Setting Up LiteSpeed Cache)

Elementor is sometimes known for producing poor performance results for websites that use the page builder because of the script that needs to be loaded. Though not intentional on either Elementor or you, all the script from your design trying to load can be overwhelming. Thankfully, Elementor is now addressing this persistent issue with recent updates.

Now, Elementor has new settings that users can turn on that are meant to help improve the performance of their websites, from new ways to design your website that also minimize the amount of used script to if, when, and how specific assets are loaded, and more.

However, it is essential to solidify which of these new Elementor settings you want to implement for your website before you begin setting up the LiteSpeed Cache plugin. You want to ensure your web design is optimized as best as possible before you introduce a caching plugin to finish the job.

A lack of proper settings for Elementor could lead to wrong settings for LiteSpeed Cache, often without realizing any mistakes. Those unintended mistakes could cause design issues and decrease website performance.

Below are the Elementor settings I have turned on for my website. Remember that I paid for Elementor Pro and used the Hello Elementor theme. If you still need to get either of these for your website, I recommend you do so. Either way, these settings should still work, no matter how many of Elementor’s features are used for your site.

Elementor Advanced Settings tab
Elementor Advanced Settings tab

Advanced Settings

Here are the settings within the Advanced tab in the Elementor plugin I have set for my website:

Switch Editor Loader Method = DISABLE

This setting is only needed when troubleshooting issues.

Enable Unfiltered File Uploads = DISABLE

Google Fonts = ENABLE

If you plan on using Google Fonts or come across a font you like while designing your website, and it happens to be a Google Font, it is best to enable this setting. Enabling the Google Fonts setting on Elementor is highly recommended, as it allows the website to load fonts from Google’s servers rather than from the website’s servers. This can dramatically improve page speed and performance.

In addition, enabling Google Fonts can also provide access to a broader range of fonts unavailable on the website’s servers. This can be especially useful for designers who want to use unique or custom fonts on their website.

Google Fonts Load = DEFAULT

This setting helps determine how your chosen Google font will load on your website. I use this setting in the LiteSpeed Cache plugin, so I leave it alone here.

Load Font Awesome 4 Support = YES

If you use icons in your website design, your font is likely under the older Font Awesome 4 library. We are now at Font Awesome 5; it is okay if you did not know that. Either way, since this library update, your icons may not be showing up at all.

You add the Font Awesome 4 support script (shim.js) by choosing YES for this setting. This ensures that all previously selected Font Awesome 4 icons are displayed correctly when using the Font Awesome 5 library.

Enabling this option may slightly increase your website’s load time. Therefore, it’s recommended that you test your website’s performance after making this change to ensure that it doesn’t negatively impact its speed.

Generator Tag = DEPENDS

This setting is completely optional and has no direct impact on the performance of your website.

Elementor Performance Settings tab
Elementor Performance Settings tab

Performance Settings

These Performance settings within Elementor help ensure my website loads as quickly as possible from the theme level.

CSS Print Method = External File

Elementor recommends choosing an external file for this setting for better performance. The CSS Print Method determines how your website’s CSS code is delivered to the browser.

When the CSS Print Method is set to External File, the CSS code is delivered separately from the HTML code. This helps reduce the size of the HTML file, which can improve page loading times.

Optimize Image Loading = ENABLE

LiteSpeed Cache has settings for optimizing images. However, you use Elementor to determine where your photos will be displayed on a web page and at what size. Since Elementor is the source for how your images are displayed, they should be the first to determine how they are optimized.

Enabling Optimize Image Loading in Elementor does two things:

  1. It applies the code fetchpriority=“high” on the Large Contextual Paint image (usually the main featured image). This ensures that the image is included in the initial webpage load and ready for visitors.
  2. It also applies the code loading=“lazy” on all remaining images on a page that will not be shown until a visitor scrolls down the page.

Optimized Gutenberg Loading = ENABLE

I am glad Elementor made this performance feature available. Since enabling the Optimized Gutenberg Loading setting, I’ve noticed that the “reduce initial server response time” error I sometimes get in various PageSpeed Insight test results either decreases in severity or is eliminated altogether.

When using Elementor to design your website, you can still access most of the Gutenberg widgets from WordPress’s default page builder. However, whether or not you use them in your Elementor-designed webpages, these widgets are still loading on the back end of your website.

This performance setting helps reduce unnecessary render-blocking loads by preventing unused Gutenberg block editor files from loading. As a result, your website’s performance will improve because fewer styles and scripts are loading in the background.

Lazy Load Background Images = ENABLE

When activating this setting, all images not visible in the initial webpage load will be lazy-loaded. This usually excludes the very first image, such as a blog post’s featured image. As a result, your web pages will load faster for your visitors, keeping them engaged on your website.

This setting is also available in the LiteSpeed Cache settings described later in this article. However, I still have it active in Elementor’s settings, so it is active on a theme level, just in case. After some tests, and based on current performance test results, having this feature on in both Elementor and LiteSpeed Cache settings DOES NOT negatively impact performance.

Features and Experiments

A common issue with Elementor (as with other page builders) is that too many features offered and widgets used can slow down users’ websites. That is why their recent updates are meant to finally address this.

A collaborative effort with its more advanced users, who are developers, Elementor now provides new features and ongoing experiments. These new features and experiments allow users to personalize their Elementor experience by controlling what is active on their websites. As a result, this:

  1. Changes how users design their websites to be better optimized and load less script.
  2. Dictates what resources load in the backend and how and when to load.

This section will only focus on the features and experiments that improve website performance.

Elementor Ongoing Experiments settings tab
Elementor Ongoing Experiments settings tab

Ongoing Experiments

Although these experiments are still in beta testing, they can still play a key role in your website’s performance.

Optimized Control Loading = ACTIVE

Optimized Control Loading is a new experiment setting that is supposed to improve asset loading by only loading what visitors need. Websites with many web pages, each with complex or extensive designs, would find this setting useful by only loading what is in the viewpoint of visitors’ screens.

Upon further researching this setting, I found a GitHub discussion forum about it. A contributor with the username ‘betatester07’ explained in the forum thread that this setting is supposed to improve the TTFB (Time to First Byte) metric by optimizing the rendering process.

Element Caching = DISABLE

The Element Caching setting is the only performance setting in Elementor that I leave off. It is supposed to serve a static copy of an element instead of rendering a fresh version every time the page is loaded. However, I’ve noticed that my web pages mess up when I turn this setting on. Therefore, I leave it off. Besides, leaving static and dynamic content settings to LiteSpeed Cache and QUIC.cloud is probably best.

Elementor Stable Features tab
Elementor Stable Features

Stable Features

When these features were first made available to Elementor users, they were experiments. However, they have improved enough to be considered stable and work well for all websites. Below are the stable Elementor features I make sure to turn on for my website because they, directly and indirectly, affect its performance.

Inline Font Icons = ACTIVE

Turning on Inline font icons is a performance feature I have active. According to Elementor, this will load your Font Awesome icons and e-icons inline with SVG. What is SVG? They’re vector-based images that are loaded using your browser. As a result, this lowers the amount of data requests from external sources on your server.

Flexbox Container = ACTIVE

Activating the Flexbox Container setting is about enabling a new feature on Elementor. However, it does have a tremendous impact on your website’s performance when implemented correctly. Flexbox containers replace the currently popular section/column web design structure. It allows users to create advanced layouts and responsive designs in one container.

According to Elementor, with Flexbox Containers, you can add as many widgets as you want into one container. You can then alter each widget’s width, height, and order to fill the container’s available space best. Finally, these settings are responsive to mobile phones, tablets, etc.

Flexbox Containers correlate to everything I covered earlier, including Grid Containers, DOM output, asset loading, and CSS loading. By designing your website with flexbox containers instead of regular sections and columns, you will:

  1. Cut half the time it would typically take to build your website.
  2. Reduce the amount of code used on your website that has to load for every visitor.
  3. Improve your website’s load time and performance.
  4. Increase your website’s responsiveness and compatibility with more devices.

Remember that implementing Flexbox containers for your website will require some learning. Before diving right in, I recommend you check out Elementor’s various tutorials on their Help Center blog and YouTube channel.

Grid Container = ACTIVE

This feature should be active if you want to create a symmetrical layout for a webpage, such as a listings page. According to Elementor, grid containers consist of widgets in a grid that will be consistent throughout a webpage. This feature allows you to set how many rows and columns those widgets in a grid will repeat on its webpage. This is a faster alternative to adding individual containers one by one, both in terms of process and overall web performance.

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

My LiteSpeed Cache Settings

Now that I have shared the Elementor settings I use for my website, which uses both Elementor’s page builder and Hello Theme to design it, I want to share the LiteSpeed Cache settings I use to ensure my site performs well. As stated in the beginning, these ideal settings come from my own tests and the help of outside sources.

My goal for sharing these settings is to help make setting up LiteSpeed Cache less complicated for you. This optimization plugin is a powerful yet complex tool for your website. One wrong setting or two could cause your site to miss its true performance potential or crash.

If you have a robust hosting provider for your website and use Elementor Page Builder with its Hello Theme to design it, my guide could help you. However, I cannot guarantee 100% success for everyone because all websites differ. Please be willing to seek other sources for help if you feel to or must deviate from my guide for specific settings.

LSCache Presets

Presets

One great thing about LiteSpeed Cache is its preset settings for beginners. If you browse through LiteSpeed Cache’s settings and find yourself overwhelmed or unsure about how to set it up, it’s okay. Choose from any official LiteSpeed-designed presets below to help configure your site in one click.

Some people may want to choose a preset and be done with this process, but I do not recommend it. Every website is different! By selecting a preset, you could either:

  1. Miss out on additional ways to optimize your website as best as possible.
  2. Mess up your website because of a setting included in a preset you chose.

This is why I created this guide to help beginner users like myself optimize their websites with LiteSpeed Cache. I tried getting away with using a preset, and both instances above occurred. As a result, I spent time testing my website with each setting to determine the best configuration to achieve my current performance results.

Essentials

The Essentials preset only enables basic caching settings, including:

  • Default Cache
  • Higher TTL
  • Browser Cache

This preset is ideal for new users, simple websites, or cache-oriented sites.

Basic

The Basic preset enables basic optimizations for speed and user experience. It includes everything in the Essentials preset, plus:

  • Image Optimization
  • Mobile Cache

Advanced

The Advanced preset is the most recommended preset. It enables more settings that should be good for most websites, including those designed with Elementor. It is unlikely to cause conflicts in most settings except CSS and/or JavaScript. This is why further testing is necessary, specifically with Page Optimization > Tuning tools.

This preset includes everything in the Basic preset, plus:

  • Guest Mode and Guest Optimization
  • CSS, JS, and HTML Minification
  • Font Display Optimization
  • JS Defer for both external and inline JS
  • DNS Prefetch for static files
  • Gravatar Cache
  • Remove Query Strings from Static Files
  • Remove WordPress Emoji
  • Remove NoScript Tags

Aggressive

Depending on the level of design your website has, the Aggressive preset, as it is set up, may work for you. However, be sure to test with Page Optimization > Tuning tools.

This preset includes everything in the Advanced preset, plus:

  • CSS & JS Combine
  • Asynchronous CSS Loading with Critical CSS
  • Removed Unused CSS for Users
  • Lazy Load for Iframes

Extreme

The Extreme preset enables the most settings that will most certainly require testing. Some of that testing will likely include exclusions for CSS, JavaScript, and Lazy Loaded images. Speaking of images, you may have to pay specific attention to logos or slider images.

This preset includes everything in the Aggressive preset, plus:

  • Lazy Load for Images
  • Viewport Image Generation
  • JS Delayed
  • Inline JS added to Combine
  • Inline CSS added to Combine

LSCache General Settings

General

The General section is the starting point for your site-optimizing journey.

1. General Settings

Automatic Upgrade = YOUR CHOICE

You can choose to have LiteSpeed Cache update automatically or manually. Either option does not impact your site’s performance.

Domain Key

Request a domain key here, and one will automatically be generated. I recommend using QUIC.cloud CDN, so make sure to link this Domain Key there.

Guest Mode = ON

When turned on, Guest Mode provides a default version of your website for a visitor’s first access. I recommend turning this setting on because it is the first that helps improve PageSpeed Insight scores. It ensures that your webpage performs its absolute best for first-time visitors.

Guest Optimization = ON

In addition to the Guest Mode above, this setting will enable maximum optimization for guest visitors. For example, page and image optimizations will be aggressive for first-time visitors.

Warning About Guest Mode and Optimization

When turning on Guest Mode and Optimization for your website, understand that Google may have difficulty properly recognizing the mobile layout of several web pages. As a result, you may temporarily (not right away or for too long) receive mobile usability errors for those one or two pages.

This discrepancy does not mean that you did anything wrong. It also does not mean you will not receive search traffic from mobile devices on those affected pages. Finally, it does not happen often. I only experienced this once in my first year using LiteSpeed Cache. This issue is really on them, and it is a matter of when they will finally fix it.

After reading several support forums for people who have already experienced this, LiteSpeed swears that this does not affect visitors. However, I hope they understand how much of a problem this can be for Google and how it could affect our websites’ crawling and showing in search results.

The easiest way to avoid this is to turn off Guest Mode and Optimization. However, that will mean your website will only be partially optimized. As a result, your PageSpeed Insights tests will report back an entire list of issues you will be responsible for manually fixing with other settings throughout LiteSpeed Cache. Speaking from experience, because I tried this route, it is time-consuming, and I could never optimize my website as well as Guest Mode and Optimization do when turned on.

To be clear, LiteSpeed Cache warns users about turning on these two settings. However, the shallow risk is worth it. Again, it will not last long or cause you to lose traffic. Also, you’ll probably experience it once or twice, max.

Server IP

For this setting, click “Check my public IP from DoAPI.us.” Once your server’s IP address shows up, paste it here.

Notifications = YOUR CHOICE

You can choose whether or not to receive notifications from LiteSpeed about new releases or other updates. This has no impact on your website’s performance.

2. Tuning

The entire Tuning section you can leave alone. This lists all the IP addresses of automated visitors, such as search engine crawlers and page speed test bots. As a result, these crawlers and test tool bots WILL NOT be included in your page view analytics.

According to LiteSpeed, as long as Guest Mode is enabled, whenever you test your website’s performance using a third-party service, or Google crawls your website, they will always be served a cacheable landing page. This way, you will receive positive test results and a successful crawl every time.

The best part is that these lists are automatically updated with known bots. So, you only need to do something here if you use a third-party service with unknown automated bots.

Cache

The cache section features all the ways to cache your website to achieve maximum performance. This section is part of what helps LiteSpeed Cache stand out from its popular competitors.

1. Cache Control Settings

Tyler's LiteSpeed Cache Control settings
LSCache Cache Control Settings
Enable Cache = ON

This setting must be turned on to enable this plugin’s caching functionality.

Cache Logged-in Users = DEPENDS ON YOUR WEBSITE

This setting is for you if you are building a website with exclusive content that users must sign up for and log in to access.

Cache Commenters = DEPENDS ON HOW YOU HANDLE COMMENTS ON YOUR BLOG POSTS

If you are building a blog and want to moderate your comments to prevent spam, this setting should be turned on. What it does is it caches your site for people who leave comments on your blog posts that are pending and waiting for your final approval. However, according to Tom from OnlineMediaMasters, this setting could consume many resources if you do not moderate your comments and receive a lot. Therefore, it can negatively impact performance.

Cache REST API = ON

Turn this setting on to cache requests made by WordPress REST API calls. This includes themes, plugins, and the WordPress Block Editor (if you’re using it with the Hello Elementor theme).

Cache Login Page = ON

This setting MUST be turned on! Otherwise, it will negatively affect performance.

Cache PHP Resources = ON

This setting caches resources from themes and plugins loaded via a PHP request. This typically includes static PHP files such as CSS and JavaScript, which most websites, including Elementor-designed sites, have. Unless you know your website has dynamic CSS and JavaScript loaded in PHP, which is unlikely, this setting should be on.

Cache Mobile = ON

The Cache Mobile setting creates a separate cache copy for mobile visitors. I recommend turning this setting on because it is a primary solution for poor mobile PageSpeed test scores. Also, this will help the responsive feature of Elementor to help distinguish your mobile web pages from their desktop versions.

Before using LiteSpeed Cache, regardless of the hosting provider I used, one problem I could never solve was having a well-optimized mobile version of my website. Even if I could achieve good PageSpeed Insight and GTMetrix scores for the desktop version of my website, the mobile version test scores needed to be better. No matter what I do, my mobile test scores always hover between 50 and 75 out of 100.

Since turning on Cache Mobile, my PageSpeed Insights test scores for the mobile version of my website have now achieved at least 85. In fact, most of my web pages’ mobile test scores actually achieve 90 or better, which is ideal.

While this setting alone is not enough, it is an excellent start to finally having a well-optimized website for your mobile visitors. As a result, mobile search traffic is likely to increase. So far, mine has.

List of Mobile User Agents = LEAVE ALONE

Private Cache URLs = LEAVE ALONE

Force Cache URLs = LEAVE ALONE

Force Public Cache URLs = LEAVE ALONE

Drop Query String = LEAVE ALONE

2. TTLLSCache TTL Settings

Cache TTL is the length of time LiteSpeed Cache keeps a cached file. Once it expires, a new one will be created. Ideally, these settings can and should be left alone. The default settings will be okay.

Your website will only require a shorter TTL if it updates frequently (beyond text edits) and you want to guarantee visitors will see the new cached version. However, this does consume resources and could hurt performance.

3. Purge Settings

LSCache Purge Settings

When you make any significant changes to your website, it is crucial to purge it so all of your changes can be reflected to your visitors immediately. The purge settings below help determine when and how your website’s changes will show to your visitors.

Purge All on Upgrade = ON

This option selects whether to purge all pages when any plugin, theme, or the WordPress core is updated. LiteSpeed highly recommends leaving this on because each update can bring changes that should reflect immediately.

Auto Purge Rules for Publish/Update = LEAVE AS IS

It’s important to consider dynamic widgets linked to posts on pages other than the front or home pages before selecting all pages. Whenever a post is published or updated, not only does the post page change, but also category listings, tag listings, the blog’s front page, and various archives.

To ensure no issues, you can select which types of pages to be automatically purged every time a post is updated or created, depending on your Hello Theme setup and how posts are displayed on your site.

You should only check the options that are necessary to optimize performance. For example, if the site only has a monthly archive and does not have a yearly or daily archive, only the “monthly archive” needs to be checked. Similarly, if the site does not have an archive by author, then there is no need to select it, as it will only slow down the process with extra checks.

Serve Stale = OFF

I recommend leaving this setting off because, when turned on, a stale copy of a cached page will be shown to visitors until a new cache copy is available. Since Elementor provides many animation design options, this setting could mess them up for your visitors. At the same time, this setting consumes many resources, which could hurt performance.

Scheduled Purge URLs = DEPENDS ON YOUR WEBSITE, BUT LEAVE OFF

Unless your website has pages that should be purged at a specific time, separated from the rest of your website, this setting should be off.

Scheduled Purge Time = LEAVE BLANK
Purge All Hooks = LEAVE AS IS

4. Exclude Settings

LiteSpeed Cache Exclude settings tab
LSCache Exclude Settings

If you look at the above screenshot, you will see that I have URL paths for my sitemap in the Do Not Cache URLs setting. This is because, at one point, Google Search Console could no longer read my website’s sitemap.

Why? To this day, I still have no idea. However, thankfully, my SEO plugin had a fix for this issue specifically for LiteSpeed Cache users. What you’re seeing above is that fix.

Please remember this after following my guide if you suddenly experience this issue. Otherwise, this entire section should be left alone unless you have parts of your website that you do not want cached.

5. ESI Settings

LSCache ESI Settings

According to LiteSpeed, Edge Side Includes (ESI) allows pages to be cached for logged-in users. ESI enables you to separate parts of your dynamic page and assemble them to create the complete page. In other words, ESI lets you create “holes” in a page, which can be filled with content that may be cached privately, cached publicly with its own Time-To-Live (TTL), or not cached at all.

This entire section can be left alone unless you must change these settings and know what you’re doing.

6. Object Cache Settings

LSCache Object Cache Settings

Object caching can significantly benefit your website’s performance by reducing the time it takes for the server to retrieve frequently accessed data. It involves storing commonly used data in the server’s memory to recover and deliver it to visitors quickly. This helps reduce the server load and can significantly improve page load times, leading to a better user experience and improved search engine rankings.

Enabling object caching can create a faster and more efficient website that is better equipped to handle high levels of traffic and user activity.

Object Cache = ON

This setting ensures that the Object Cache feature is indeed turned on.

Method = REDIS

There are two popular methods for object caching: Memcache and Redis. Usually, hosting companies choose which method to use for their customers’ websites. However, if you have a hosting company like mine, ChemiCloud, you can select the best method for your website.

Hosting companies are failing by not allowing customers to choose the best object caching method for their websites. While Redis and Memcache have no significant difference in core functionality, they produce different results for each website. Depending on how your website is designed and functions, one object caching method may be better for it than the other.

If your hosting company allows you to choose, I recommend picking REDIS as your object caching method over Memcache for the following reasons:

  1. Redis supports more complex data types, such as lists, sets, and sorted sets, allowing more advanced data manipulation.
  2. Redis has better persistence options, meaning data can be saved to disk and recovered after a server restart or crash.
  3. Redis has better scalability options, including support for clustering, which allows for horizontal scaling across multiple servers.

While both Redis and Memcache can improve website performance, Redis has some advantages that make it a better choice for Elementor-built websites.

For all settings from Host to Do Not Cache Groups, your hosting provider should have instructions on setting them up or leaving them alone. Settings to leave alone are:

  • Default Object Lifetime
  • Global Groups
  • Do Not Cache Groups

Persistent Connection = ON

This setting helps with uptime by using keep-alive connections to speed up the caching process.

Cache WP-Admin = ON

This helps improve the speed of your WordPress admin interface.

Store Transients = OFF

Only turn on if Cache WP-Admin is OFF.

7. Browser Cache Settings

LSCache Browser Cache Settings

Browser Cache = ON

LiteSpeed Cache provides the Browser Cache setting for users without access to their server’s admin. Regardless of whether or not you do, this setting should be turned on. It stores static files such as images, videos, and CSS locally on visitor’s devices.

As crazy as this may sound from a visitor’s perspective, trust me, it is not. It makes retrieval of those files much faster, resulting in better website performance, especially for repeat visitors. If visitors do not want this, all they would have to do is delete their cache and cookies from their browser. This can be done at the same place where you can delete your browser history.

Browser Cache TTL = LEAVE ALONE

8. Advanced Settings

LSCache Advanced Settings

For the Advanced Settings section, leave them all off and alone, especially Instant Click. I bring this up because you will be inclined to turn it on when you see it. This setting preloads the page where a visitor hovers over its link on the current webpage.

While this does make loading that page much faster if the visitor clicks on its link, this setting has nothing to do with the initial page load for them. When turned on, this setting slightly decreases website performance because your site will have to preload the pages to which the current webpage links. As a result, a mid-level warning will likely appear in your Page Speed Insights test results.

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

CDN

A CDN (Content Delivery Network) is a network of servers strategically placed worldwide to provide faster and more reliable delivery of website content to users. When a user visits a website, the CDN will serve the content from the server closest to them rather than from its origin server. This results in faster load times and a better user experience for visitors.

CDNs are essential for websites because they help improve performance, reduce load times, and increase reliability. By serving content from a server closer to the user, CDNs lessen the time it takes for content to be delivered, resulting in faster load times. This is particularly important for websites with a global audience.

In addition, CDNs can reduce the load on a website’s origin server by caching content and serving it from the CDN’s servers instead. This can help reduce server load and improve website performance, particularly during high traffic.

Overall, CDNs are essential for website owners who want to ensure a fast and reliable user experience for their visitors. The most popular CDN on the market is Cloudflare. However, the LiteSpeed Web Server has its own robust CDN called QUIC.cloud. Both can be integrated with this LiteSpeed Cache plugin. It is just a matter of which is best for you and your website.

1. CDN Settings

LSCache CDN Settings

Before switching to my current hosting provider, ChemiCloud, and LiteSpeed Cache with QUIC.cloud CDN: I used Cloudflare CDN for my website. Honestly, they were great! I made this decision later in my website-building journey. I was grateful but also upset I didn’t use them sooner because my consistently poor website performance held it back.

However, since ChemiCloud uses LiteSpeed Web Servers for my website, I decided to switch to QUIC.cloud CDN. Even though Cloudflare CDN can be easily integrated into LiteSpeed Cache, I figured it would be ideal for my website’s performance to keep the entire LiteSpeed Web Server ecosystem on and working together.

Many online articles and forum threads debate which CDN is the best. I concluded that QUIC.cloud is working perfectly fine. It’s working so well that I forget it is even turned on half the time. So far, I have no issues whatsoever.

One good thing about QUIC.cloud is that I’ve only experienced one CDN-caused outage so far. In fact, since changing hosting providers to ChemiCloud, I have rarely experienced any outages. Under my previous hosting provider, out of the several outages my website has experienced, some were briefly caused by Cloudflare, while the hosting provider caused others.

QUIC.cloud CDN = Depends on your CDN choice

If you decide to use QUIC.cloud CDN, this setting just officially turns it on.

Use CDN Mapping

This setting should stay off. It is only required if you use a CDN other than QUIC.cloud or Cloudflare, which you likely will not.

Therefore, leave all settings from CDN Mapping to Exclude Path alone.

Cloudflare API = Depends on your CDN choice

If you decide to use Cloudflare CDN, here is where you can integrate it into LiteSpeed Cache.

2. QUIC.cloud CDN Setup

This section is only for you if you decide to use QUIC.cloud CDN. Here is where you would link your QUIC.cloud CDN account.

3. Manage

This section is where you can manage whichever CDN you choose.

Image Optimization

Suppose you decide to use QUIC.cloud CDN, you have access to LiteSpeed Cache’s Image Optimization feature. This is great if you want an all-in-one solution instead of paying for a separate plugin.

1. Image Optimization Summary 

This section is just a general summary of information on your optimized images.

2. Image Optimization Settings

LSCache Image Optimization Settings

Auto Request Cron = ON

When turned on, this setting sends requests to optimize newly uploaded images.

Auto Pull Cron = ON

This setting MUST be turned on, especially if Auto Request Cron is on. If turned off, information on optimized images will stop being pulled from the QUIC.cloud image server.

Optimize Original Images = ON

Whether the image is a JPG or PGN file, this setting will optimize them and save a backup.

Remove Original Backups = OFF

I would leave this setting off because, god forbid, if something happens to your photos, you cannot restore the original image files if you turn this on.

Optimize Losslessly = Your Choice, but ON

Lossy and lossless are two types of compression methods used to reduce the size of digital files. Lossy compression involves removing some of the data from the original file, resulting in a smaller file size and a loss of quality. On the other hand, lossless compression reduces the file size without losing any data, resulting in a file identical to the original.

The main difference between lossy and lossless compression is that lossy compression sacrifices some quality to achieve a smaller file size. In contrast, lossless compression maintains the quality of the original file.

It is entirely your choice how you want to optimize your images. If you follow the rest of my setting recommendations, your website should still perform well no matter what. All LiteSpeed Cache warns is that the image file size may be larger than lossy compression. Because I have a lot of photos from my portfolio and other blog posts, it is ideal for me to optimize my images in a way that maintains their original quality.

Preserve EXIF/XMP Data = OFF

Keeping this setting off will help keep your image file sizes low. Preserving EXIF/XMP data means keeping the image’s copyright information and other data when optimizing, which increases the file size.

Image WebP Replacement = ON

I recommend turning this feature on because serving your images in WebP format is one of the best things you can do for your website. WebP is an image format created by Google and designed to provide a more efficient way to store and deliver images on the web. It achieves this by using advanced compression techniques that can reduce the file size of images by up to 34% compared to JPEG and PNG formats while maintaining similar image quality.

Websites that use WebP images can load faster, use less bandwidth, and provide a better user experience for visitors. Additionally, WebP images are supported by most modern web browsers, including Chrome, Firefox, and Microsoft Edge, making it an ideal image format for the web.

According to LiteSpeed, two things will happen when this setting is on:

  1. All future image optimization requests will be generated in WebP format while optimizing the original images.
  2. Images will be served in .webp instead of .jpg or .pgn to supported browsers. If a visitor uses an unsupported browser to visit a web page with WebP images, LiteSpeed Cache will serve a version of the original file type.
WebP Attribute to Replace = LEAVE ALONE

This lists the element attributes that will be replaced with WebP. Usually, this is updated automatically. However, if you know the image attribute you want to ensure is served in WebP format, you can add it here.
<h5″>WebP for Extra srcset = ON

This setting ensures that images in custom code also serve as WebP. I have turned this setting on for my website because I display ads, embed affiliate widgets with images, and use my social media feeds on my Portfolio, which includes photos. If you plan on embedding images via custom code, you should probably have this setting on.

WordPress Image Quality Control = LEAVE ALONE AT 82 OR 85

Based out of 100, this is the amount of image compression quality. The default value is 82, which is perfectly fine. However, if you want to ensure you are complying with Chrome Developer Tools Lighthouse standards, Tom from OnlineMediaMasters recommends changing it to 85.

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

Page Optimization

The Page Optimization section was the most challenging to set up, and it stressed me out. I also waited to write this section last so I could explain these settings as effectively as possible.

The Page Optimization settings below ultimately help me achieve the positive performance results my website receives. However, keep in mind that my website is completely designed with Elementor. This means I pay for Elementor Pro and use the Hello Elementor Theme. Also, I use QUIC.cloud CDN instead of Cloudflare CDN to gain full access to all LSCache plugin capabilities. Finally, I use Perfmatters to finish the job and ensure my website loads quickly and efficiently.

Nine times out of ten, your website is not set up the same as mine. For example, even if you are using Elementor Pro, you’re probably using a WordPress child theme instead of Hello Elementor (which I recommend). Also, you may use Elementor page builder for some of your pages and the default Gutenberg page builder for others. Finally, you may be using Cloudflare CDN (which is fine, don’t worry). My ideal settings below are meant to be a baseline guide for you to work with as you discover your website’s perfect settings.

I recommend creating a staged version of your website before testing these settings. Extensive testing will be required to determine which settings are best to achieve performance results similar to mine for your website. A staging site ensures you can do all your desired testing without impacting visitors’ experience.

1. CSS Settings

LiteSpeed Cache CSS Settings tab
LiteSpeed Cache CSS Settings tab

This section contains LSCache CSS optimization settings. By optimizing your CSS, you can reduce the size of your website’s stylesheets, improve page load times, and enhance user experience.

The CSS settings for my website below are based on using Elementor and QUIC.cloud CDN. In fact, some of these settings are specifically for QUIC.cloud CDN to be able to manage my website’s CSS files. So, if you are not using QUIC.cloud CDN for your website, some of these settings should remain off.

CSS Minify = ON

This setting removes all unnecessary characters that can accumulate from Elementor from CSS files. Those unnecessary characters can include:

  • Extra white space
  • New lines
  • Comments
CSS Combine = ON

This setting combines all individual CSS files into one file. Depending on how your website is designed with Elementor, this setting may be turned off. Therefore, please test this setting.

Whether or not to turn this setting on depends on your theme. If you use a Gutenberg child theme and Elementor as just a page builder, this setting should probably stay off. LiteSpeed warns about disk space potentially filling up because pre-made themes tend to insert random strings into the CSS.

However, I’m using Elementor’s Hello Theme to design my entire website with just Elementor widgets and settings. Therefore, I will need this setting turned on because Elementor creates a lot of CSS code that needs to load.

Combining the CSS files of your Elementor-designed website helps:

  1. Reduce HTTP requests required to load your website
  2. Reduce the amount of code that needs to be downloaded by your visitors’ browsers.
  3. Simplify your website’s code.

All of these benefits help significantly improve your website’s loading speed for both you and your visitors. At the same time, they help you manage and update your website more easily.

Generate UCSS = OFF

Generate UCSS is a QUIC.cloud online service that creates a single streamlined CSS file for each of your web pages. It also removes unused CSS and includes only what is needed to render your web pages.

I prefer to keep this setting off, even though it is technically on when ‘Guest Optimization’ is turned on. This way, this setting only kicks in whenever the ‘Guest Optimization’ setting feels like Unique CSS needs to be generated for a specific webpage to ensure it loads efficiently and does so automatically.

UCSS Inline = OFF

Similar to the Generate UCSS option above, I also leave the UCSS inline setting off and let ‘Guest Optimization’ apply this setting when it feels it is needed.

CSS Combine External and Inline = ON

Only turn this setting on if CSS Combine is also on. It helps maintain the priorities of CSS and reduces extra file loading.

Load CSS Asynchronously = OFF

What Load CSS Asynchronously does is it loads both CSS, HTML, and even Google Fonts at the same time. QUIC.cloud’s online service will typically generate critical CSS and load any remaining CSS script asynchronously.

I tested this with other settings and concluded that it should remain off. While this setting can improve page load time, it can also ruin the formatting of your web pages’ design. This is especially true if you design any pages with sticky or responsive elements, such as your header/top navigation bar, sidebar section, table of contents widget, etc. Those elements will no longer be sticky or responsive.

Loading CSS Asynchronously is part of the Guest Optimization setting we turned on earlier. Keeping this setting off will ensure it only works for qualifying requests due to Guest Optimization. For our type of website, this is probably best. I also leave “CCSS Per URL” OFF, but turn ON “Inline CSS Async Lib” to avoid render blocking.

Font Display Optimization = SWAP

This setting determines how your website’s text font is processed. Yes, you set this in your Elementor font load settings. However, turning this on in LSCache is also best, mainly if you choose SWAP in the Elementor settings. This section should also be turned on if you get the “ensure text remains visible during webfont load” warning in your PageSpeed Insight test results.

2. JS Settings

LiteSpeed Cache JavaScript Settings tab
LiteSpeed Cache JavaScript Settings tab

Like optimizing CSS, you must do the same for JavaScript. Optimizing JavaScript is especially important for websites that use Elementor. I set up JavaScript settings the same way I did for CSS.

JS Minify = ON
JS Combine = ON
JS Combine External and Inline = ON
Load JS Deferred = DELAYED

Choosing the right option for this setting depends on how your Elementor website responds to them. You can either defer JavaScript until the HTML is done loading or delay it until user activity is detected.

I tested both settings and chose DELAYED as the preferred JavaScript load setting. Based on SpeedVital test results, JavaScript files do not load at all until they are needed. The deferred setting will still load all files, regardless of whether they are required, reducing the page load speed.

I also turned on Delay JavaScript in the Perfmatters settings. However, my official article, ‘Using Perfmatters with LiteSpeed Cache for Elementor-Built Websites,’ provides more on that.

3. HTML Settings

LSCache HTML Settings

Optimizing your HTML settings is another way of reducing page load times. It can also help improve user engagement by loading what needs to be loaded on time.

HTML Minify = ON

Minify HTML the same way you would for CSS and JavaScript.

DNS Prefetch = Your decision

Prefetching DNS can reduce latency for your visitors when they click on external links, especially on mobile networks. You should only include external domains that are linked and loading on your website. However, not all external domains should be added to this list. Therefore, some testing will be required.

DNS Prefetch Control = ON

Turn this setting on because it automatically prefetches all URLs in a webpage, including images, CSS, JavaScript, and more. As a result, page loading speeds can improve.

DNS Preconnect = Up to You

I would leave this setting alone unless you know what you’re doing.

HTML Lazy Load Selectors = Up to You

This setting allows you to lazy load specific HTML content by its selector. Using Elementor will be critical because you enter the CSS ID or Class you name for each section or widget in this text box.

Remove Query Strings = ON

Turn this setting on to increase page load times. It removes query strings from static resources so they can be cached.

Load Google Fonts Asynchronously = ON

Since I recommend you leave Load CSS Asynchronously off (which would have also loaded Google Fonts), turn Load Google Fonts Asynchronously on. This method loads your font separately from CSS and implements a pre-connect for Google so a connection is established quickly.

When using Elementor, you will have plenty of font options. The problem is you will not know right away that the font(s) you chose is indeed a Google Font. Turning this setting on ensures that your selected font loads in a way that does not hinder your website’s performance.

Remove Google Fonts = OFF

It is best to keep this setting off since you will likely choose a Google font when designing your website with Elementor.

Remove WordPress Emoji = ON

I recommend turning this setting off because it is an outdated feature that may slow down your website. According to LiteSpeed, this setting removes the JavaScript file that supports emojis on older browsers. Since most internet users use a modern browser with native emoji support, this feature is no longer needed.

Remove NoScript Tags = ON

I recommend turning this setting on because it will result in a smaller page size, which is critical for website performance and SEO. The only caveat to this setting is you risk making your website incompatible with visitors using older browsers or browsers where JavaScript is turned off for security reasons.

4. Media Settings

LSCache Media Settings

The media settings section (in addition to VPI and Media Excludes) is an extension of Image Optimization. Only these settings help you determine how media files on your website, such as images and videos, will load for your visitors.

Controlling how your media loads plays a crucial role in overall performance. If these files take forever to load, search engine crawlers will have difficulty crawling your website. At the same time, it will cause an unpleasant experience for your visitors and make them leave your website.

Lazy Load Images = ON

Turning on this setting is mandatory. It only loads images once visitors scroll to where they are on the webpage.

Basic Image Placeholder = Up to You

Changing this setting is entirely optional. Even the default gray placeholder is acceptable. This setting applies a simple placeholder over an image while it finishes loading.

Responsive Placeholder = ON

When the images on your website load, the layout of the overall webpage can shift and reshuffle. Search engines typically do not like this because it can alter your visitors’ experience for the worse, especially if their connection (and your website) is slow. Therefore, it will be flagged in your website performance test results.

By turning on Responsive Placeholder, as long as your images have their width and height attributes set, a placeholder will be generated in their place while loading.

Responsive Placeholder SVG = LEAVE AS DEFAULT VALUE
Responsive Placeholder Color = Up to You

Gray is the default color. However, if you want to change it, you can.

LQIP Cloud Generator = ON

You must be using QUIC.cloud for this setting to work. They have an LQIP (Low-Quality Image Placeholder) generator service if you want more responsive image previews while they’re loading. However, keep this setting off if you want to use plain color placeholders (which don’t always look nice).

LQIP Quality = 4

The default setting is 4, so leave it alone. The higher the number, the larger the files become, which means larger page sizes and load times.

LQIP Minimum Dimensions = 150 x 150 pixels

Unless you know what you’re doing, keep the default dimensions as-is.

Generate LQIP in Background = ON

This setting automatically generates LQIP in the background, so web pages load quickly. If this setting is turned off, LQIP will be rendered in the foreground for visitors, slowing down the time it takes for the page to load for them.

Lazy Load Iframes = ON

An iframe is a way to display content from another website or web page within your page. This is often used to display ads, videos, or other types of content on a webpage without redirecting the user to another website. Just like images, it is best to lazy load this as well.

The only issue you could have with this setting is if you are displaying ads on your website. Lazy-loading ads could negatively impact your revenue. However, as long as your website is well-optimized, your ads should load immediately.

Add Missing Sizes = ON

The Cumulative Layout Shift is a crucial Core Web Vitals metric in your website performance tests. It calculates whether and by how much your webpage’s layout changes as elements are loading. You want to keep this as minimal (not none at all) as possible. Turning on Add Missing Sizes helps ensure this. It will explicitly set the width and height of image elements so they do not shift as your web pages load for your visitors.

5. VPI

LSCache Viewport Images

Viewport images are the first images that search engine crawlers and visitors see on a web page. Typically, this is a featured image or banner at the beginning of a blog post or any other web page. Because these images are “above the fold,” they should be able to appear right away and not be lazy-loaded.

Unfortunately, when you lazy load your images and iframes, ALL of them, no matter where they are on the web page or their purpose, will lazy load. Lazy-loaded photos above the fold could negatively impact performance.

Viewport Images = ON

Turning on Viewport images ensures that the most critical images at the beginning of a webpage are included in the initial web page load. It prevents them from being lazy-loaded like the rest of the pictures on a web page. You must be using QUIC.cloud for this setting to truly work.

Viewport Images Cron = ON

This is done in the background, so you can also turn this on.

6. Media Excludes

LSCache Media Excludes Settings

Even though you’ve turned on Viewport images, the setting is not always perfect. It may forget to prioritize an image. At the same time, there may be other media files throughout a webpage that you may not want to lazy load. This entire section is where you would indicate which media files you do not wish to lazy load, regardless of where they are on a web page.

7. Localization Settings

LSCache Localization Settings

Gravatar Cache = ON

When building a website with WordPress, you can add a profile picture or Globally Recognized Avatars. Also known as a Gravatar, that picture will show up when you leave comments on other WordPress-built blogs and websites. When turned on, this setting locally caches your visitors’ profile picture next to their comments on your blog posts.

Gravatar Cache Cron = ON

This setting should be turned in as well.

Gravatar Cache TTL = LEAVE ALONE

The default setting of 604800 is fine.

Localize Resources = OFF

Unless you are not using Guest Mode, you do not need to utilize this feature. Its only purpose is to localize external resources on your website to load faster. In the Localization Files text box below, add each URL for the external resources in your website performance test results.

8. Tuning Settings – JS

LSCache Tuning JS Settings

Tuning JavaScript settings is mainly helpful if you are not using Guest Mode or Optimization. However, some JavaScript resources can still flag errors in your web performance test results even with Guest Mode and Optimization turned on. This section is where you address those JavaScript issues, specifically in the JS Delayed Includes text box.

Other than that, what is entered into the JS Excludes and JS Deferred / Delayed Excluded text boxes is fine as-is. Just make sure that Optimize for Guest Only is turned ON and no Role Excludes options are checked.

9. Tuning Settings – CSS

LSCache Tuning CSS Settings

After testing LSCache plugin features, I’ve noticed that when Guest Mode or Optimization are turned on, these Tuning Settings for CSS will not do or change anything. However, this section will take the most time to work through when optimizing your website without Guest Mode or Optimization.

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

Database

LSCache Database Settings

This section is where you can mass delete files and data to clean up your website. First, with a Clean All option, you can also choose to delete:

  • Post revisions
  • Auto drafts
  • Trashed posts
  • Spam comments
  • Trashed comments
  • Trackbacks/Pingbacks
  • Expired transients
  • All Transients
  • Optimize tables

In addition, you can set the maximum number of revisions you want to keep and the number of days to keep them.

Crawler

LSCache Crawler Cron

You do not have to do anything with this section if you have a shared hosting plan, which you likely do because they are the most economical for small business websites. The likely reason is that your hosting provider will prevent access to the features in these settings.

Hosting providers will likely prevent users on shared hosting plans from using the Crawler features because this uses up a lot of server resources. As a result, websites on a shared server using these crawler features could ruin the performance of other websites sharing the same server.

Rest assured, your website will not have issues being crawled due to not having access to these features.

Toolbox

LSCache Purge Toolbox SettingsLSCache Heartbeat Toolbox Settings

The only settings you want to change are the Heartbeat settings; specifically, disable them. Disabling WordPress interval heartbeat can improve website performance and reduce server load. However, it can also have some drawbacks. By disabling heartbeat, some WordPress features such as autosave and post locking may not function properly.

If you’re experiencing high server loads or performance issues, temporarily turn off the heartbeat API and monitor your website’s effects. But if everything is working fine, disabling it is unnecessary. My site does experience high server loads. Therefore, I decided to follow Tom from OnlineMediaMaster’s advice and disable WordPress Heartbeat. Here are his suggested settings:

Frontend Heartbeat Control = ON

Frontend Heartbeat TTL = 0

Backend Heartbeat Control = ON

Backend Heartbeat TTL = 0

Editor Heartbeat = ON

Editor Heartbeat TTL = 120 seconds = 2 minutes

Final Thoughts

Thank you so much for reading through my ideal LiteSpeed Cache settings for websites designed with Elementor. If you followed my guide all the way through, I hope your website performs just as well as mine. I also hope you have similar performance test scores to verify the improvements.

If not, continue to test setting changes until you find the ones that best optimize your website. You may have to spend more time in the Page Optimization section. I also recommend considering the same backend setup and services. This first includes switching to a hosting provider that uses LiteSpeed Web Servers for its hosted websites, such as ChemiCloud. It also includes implementing Perfmatters to optimize your website even further than LiteSpeed Cache could.

Having the same backend setup and services involves fully implementing Elementor to design your entire website. This involves investing in Elementor Pro, using the Hello Theme, and creating all aspects of your website. This way, you are not limited to design potential and loading resources you do not intend to use.

Finally, consider implementing Perfmatters to improve your website optimization even further. If these settings worked for you and your website, comment with your feedback. Also, if you have any further questions or concerns, message me.

Subscribe for Updates

You will receive email notifications on new posts and all other updates.

This post was originally published on: 11/28/2023

Leave a Reply

Your email address will not be published. Required fields are marked *

Related Posts:

You cannot copy content of this page

Subscribe for Updates

By subscribing to my website, you will receive email notifications on:

  • Announcements, updates, and events.
  • Newly published blog and portfolio content.
  • Exclusive promotions and discounts from brands I am affiliated with.