My LiteSpeed Cache Settings for my Elementor-built Website

The LiteSpeed Cache Plugin outperforms all of its competitors I’ve used over the years. Since implementing it for my website, in addition to design changes using Elementor Page Builder and switching my web hosting provider, ChemiCloud, my website’s performance has improved tremendously. The LiteSpeed Cache plugin ultimately helped my website perform as well as it does now.

No matter how your website is set up, I highly recommend using the LiteSpeed Cache plugin. It will be the ONLY caching plugin you will need to help your website reach its full performance potential. However, for this article, I will provide my LiteSpeed Cache plugin settings for my Elementor-built website.

My LiteSpeed Cache plugin settings are, first, based on a tutorial provided by Tom from OnlineMediaMasters. He is the same expert who recommended me to my new web hosting provider, ChemiCloud. However, I had to learn to deviate from some of his recommendations because of the specific setup of my own website.

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

Now, my LiteSpeed Cache plugin settings stem:

These setting choices, among other things, help my website achieve maximum performance. However, understand that there is no guarantee that these exact settings will help your website achieve the same results I have. The quality of your web hosting and how your website is designed with Elementor all play a role in these settings’ effectiveness. Also, I integrated QUIC.cloud CDN instead of the more popular Cloudflare CDN because QUIC.cloud is more compatible with LSCache.

Before proceeding, please use a staging tool to test these changes so you do not potentially ruin your visitor’s experience.

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 powerful all-in-one site acceleration WordPress plugin specifically designed to enhance the performance of WordPress websites. Caching is the process of temporarily storing website data, such as HTML, CSS, and images 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, such as ChemiCloud, and server configurations. Also, it offers a comprehensive set of features and settings that enable website owners to optimize their website’s 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.
  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 serve website content quickly 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 of the caching plugins I’ve used for this website, LiteSpeed outperforms all of them. My website is now performing the best it’s 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. This innovative technology ensures that your website loads quickly and smoothly, making it an essential tool for any website owner looking to enhance user experience and increase engagement.
  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 the need to purchase multiple optimization plugins for different purposes. The best part is that LiteSpeed Web Server hosting providers offer LiteSpeed Cache and all its optimization features at no additional cost. Therefore, you can fully optimize all aspects of your website with just one plugin without paying anything extra.

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 my website. 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 ideal 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 for those not hosted on the SiteGround platform. Even for those whose website is 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 was using at the time. Perfmatters advertises itself as a site optimization plugin that works well with other similar plugins. The goal was for Perfmatters to further optimize my website wherever my main plugin could not. However, over time, I understood that one plugin should be enough to help your website perform the best it can.

LiteSpeed Cache

LiteSpeed Cache is a free plugin that offers a range of performance optimization features, such as page caching, minification, and database optimization. It is specifically designed to work with the LiteSpeed web server but can also work with other web servers. The plugin has been shown to improve website speed significantly.

Perfmatters

Perfmatters, on the other hand, is a premium plugin that offers a more granular approach to performance optimization. It lets you turn off unnecessary features and scripts that may slow down your website, such as emojis, Google Maps, or WooCommerce scripts. It also includes lazy loading and DNS prefetching to further improve website speed. The plugin is lightweight, easy to use, and compatible with most WordPress themes and plugins.

Subscribe for Updates

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

What is Elementor?

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. Then, you can 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 Affiliate Disclaimer for more information.

How I Use Elementor for My Website

I use Elementor to completely design my 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.

This level of Elementor use is not easy at all. It takes a lot of work to initially design your website and maintain it afterward. However, I grew tired of feeling limited in the design potential of my website because of pre-made WordPress themes. At the same time, adding Elementor on top of pre-made WordPress themes negatively impacted my website’s performance. Therefore, I took the necessary time to educate myself to design my website on my own. 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 it only loads the elements and resources I use. This is important because those elements and resources must load fast and function for my visitors. However, a common problem for web designers using Elementor is the chance for our websites to slow down because of the amount of features and widgets we use to design them. This could negatively affect our visitor’s experience and growth.

This is why having quality web hosting to support your Elementor website is essential. 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 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. However, 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 pay for Elementor Pro and use the Hello Elementor theme. If you do not already have either of these for your website, I recommend you get them. Either way, these settings should still work, no matter how much of Elementor is used for your site.

Elementor Advanced Settings

Advanced Settings

Of all of the settings on the Advanced tab in the Elementor plugin, these are what I would make sure to change:

CSS Print Method = External File

Elementor recommends choosing an external file for this setting for better performance. This is because the CSS Print Method determines how the CSS code for your website 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 to reduce the size of the HTML file, which can improve page loading times.

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 = Swap

If you are using a Google font, understand that it is an external resource that has to load on your website. Therefore, it is essential to consider how it loads on your website to achieve maximum performance. Ultimately, how your chosen Google font should load depends on the specific needs of your website and what you want to prioritize. Each option has its benefits and drawbacks.

  • “Blocking” is the default option, meaning the browser will not display any text until the fonts are fully loaded. This can result in a delay in the text being displayed, which can negatively impact user experience.
  • “Swap” is a good option if you want to prioritize text display over loading fonts. With this option, the browser displays text immediately using a fallback font while the Google font is still loading. Once the Google font is loaded, the browser swaps out the fallback font for the Google font. This can result in a faster-perceived loading time and better user experience.
  • “Fallback” is the least desirable option because the browser will use a fallback font if the Google font fails to load. This can result in a less visually appealing website and a poorer user experience.

Since my website has a lot of text because of my blog, it is essential to display what I write to visitors like yourself as quickly as possible. As a result, “swap” is the best option for me because it prioritizes text display while still loading the Google font in the background.

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.

By choosing yes for this setting, you are adding the Font Awesome 4 support script (shim.js). It ensures all previously selected Font Awesome 4 icons are displayed correctly while using the Font Awesome 5 library.

Remember that enabling this option may slightly increase your website’s load time. So, it’s recommended to test the performance of your website after making this change to ensure that it doesn’t negatively impact your website’s speed.

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 major ongoing issue.

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:

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

For this section, I will only focus on the features and experiments that play a role in improving the performance of websites.

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 on your server from external sources.

Grid Container = ACTIVE

This feature should be active if you are trying 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.

Optimized Gutenberg Loading = ACTIVE

I am glad Elementor made this performance feature available. Since activating 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, regardless of whether or not you use them in your Elementor-designed webpages, these widgets are still loading in the backend 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 = ACTIVE

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 that 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.

Optimize Image Loading = ACTIVE

This feature compliments the Lazy Load Background images above. Therefore, it should also be active. Activating Optimize Image Loading 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.

As with the above setting, this setting is also available in the LiteSpeed Cache plugin. Turning it on in both plugins does not impact your website’s performance.

Optimized DOM Output = ACTIVE

When designing a website with Elementor, you will be inclined to utilize its many widgets. Those widgets are code that Elementor makes easy for non-web design experts like ourselves to implement without realizing we’re technically coding. The problem is that all of that “code” we’re using from all those widgets must be loaded. This is where DOM output comes into play.

According to Elementor, the Optimized DOM output setting helps decrease the number of DOM wrapper elements in a webpage’s HTML. This setting is crucial because the more widgets you use, the more DOM script has to load. Developers, including myself, have complained about this because all of the widgets we use slow down our websites. Now, Elementor has finally done something about it.

I highly recommend you take time to master Elementor because there are ways to achieve your ideal web design and use fewer widgets. Thanks to the Flexbox Container feature, which you should have turned on, I’ll explain in a few, among other ways, you can now design your website in a better-optimized way.

So, what is DOM?

The DOM (Document Object Model) is a way to access and manipulate web pages using programming languages like JavaScript, HTML, or XML. It’s like a treemap of a webpage. Each element represents a node or object that can be changed or updated. This makes it possible to create dynamic and interactive web pages that respond to user input.

Web developers use the DOM to change a web page’s structure, style, and content. It’s an essential tool for modern web development and allows developers to create websites that are engaging and responsive to user interaction.

Improved Asset Loading = ACTIVE

As you build your website with Elementor, you will add assets that must load each time a visitor visits your site. As a result, the Improved Asset Loading setting reduces the amount of code loaded on the page.

According to Elementor, this setting improves your website’s front-end performance by only loading the functionality needed on that page. It breaks up the loading method into small chunks so assets are only loaded once a visitor reaches a point on a webpage where an asset needs to be displayed.

Improved CSS Loading = ACTIVE

Elementor also utilizes a lot of CSS code with its many widgets and settings for its users to build their websites. At the same time, they allow users to implement custom CSS code. Of course, this code must be loaded each time a visitor visits your website.

Activating the Improved CSS Loading setting reduces the amount of CSS code loaded on a page. The CSS code will only be loaded when needed. If you often receive the “Reduce unused CSS” issue in your web page performance test results, this setting will either help reduce its severity or remove the issue altogether.

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 add as many widgets into one container. You can then alter each widget’s width, height, and order to best fill the container’s available space. 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 be a learning curve. Before diving right in, I recommend you check out Elementor’s various tutorials in their Help Center blog and YouTube channel.

Scroll Snap = INACTIVE

The Scroll Snap setting is the one I recommend you set as INACTIVE because when you see it, you will be inclined to activate it. It’s okay; I myself activated it at first. What it does is it customizes how visitors scroll through your site.

According to Elementor, when visitors scroll through a webpage, this feature will stop the scroll when a section reaches a defined point in the viewpoint. They say it is really useful in full-height sections where you wish to pause the user from scrolling so they can pay more attention to what is in their current viewpoint.

This setting DOES NOT make your website scroll fast upon loading. Instead, it adds to your initial page load time. This setting could be flagged in performance test results depending on how well your web page is optimized. So be careful when activating this feature.

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 help from 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 out on its true performance potential or crash. The problem is that everyone’s website is different. So, what truly is the right way to set up LiteSpeed Cache?

If you have a good hosting provider to power your website and use Elementor Page Builder to design your website, including their Hello Theme, my guide can help you.

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 best set it up, it’s okay. Choose from any of the official LiteSpeed-designed presets below to help configure your site in one click.

While I understand some people may want to choose a preset and be done with this process, 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 suitable 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 of all. It enables more settings that should be good for most websites, including those designed with Elementor. It is unlikely to cause conflicts in most areas 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 update it. This has no impact on your site’s performance.

Domain Key

Here, request a domain key, and one will automatically generate. Since I recommend using QUIC.cloud CDN over Cloudflare, link that Domain Key to your QUIC.cloud account.

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. This issue is really on LiteSpeed Cache, 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 is not an issue for your visitors. However, I hope they understand how much of a problem this can be to Google and how it could affect our websites being crawled and shown 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 does warn users about turning on these two settings. However, I believe turning these settings on is worth the shallow risk. I would rather temporarily miss out on an official Mobile Usability status from Google on one or two web pages than not have my website well-optimized at all. As long as I am still receiving mobile Google search traffic to these pages, it is okay.

Server IP

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

Notifications = YOUR CHOICE

Whether or not you want notification from LiteSpeed about new releases or other updates is up to you. 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 do not need to do anything here.

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

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

If you are building a website with exclusive content for people who need to sign up and log in to access, this setting is for you.

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 favicon.ico = ON

The favicon.ico is the small logo image shown in the browser tab (and next to the URL in Google search result listings). This setting caches that logo image. This setting should be on even if you do not have one (and you should).

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 for a fact 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 were never good enough. No matter what I do, my mobile test scores always hover between 50 and 75 out of 100 at best.

Since turning on Cache Mobile, my PageSpeed Insights test scores for the mobile version of my website now achieve at least 85. Most of my web pages actually achieve a 90 score 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 amount LiteSpeed Cache keeps a cached file. Once it expires, it will create a new one. 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 many major 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. As you never know what may change across versions, LiteSpeed highly recommends leaving this on.

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 optimum performance, 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 those animations 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

LSCache Exclude Settings

This entire section should be left alone unless you must exclude any aspect of your website from the caching settings above.

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.

Honestly, this entire section can be left alone unless you need to 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. Essentially, object caching stores commonly used data in the server’s memory to quickly recover and deliver it to visitors. This helps reduce the server load and can significantly improve page load times, leading to a better user experience and improved search engine rankings. By enabling object caching in your website, you 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

For this setting, you can choose between Memcache and Redis as your object caching method. Typically, this setting correlates to which object cache method your hosting provider provides by default. However, if you have a hosting company like mine, ChemiCloud, which provides its users both, you can choose which is best for your website.

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.

Overall, while Redis and Memcache can improve website performance, Redis has some advantages that make it a better choice for Elementor 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 that is closest to them rather than from the website’s origin server. This results in faster load times and a better user experience for visitors.

CDNs are essential for websites because they help to improve website performance, reduce load times, and increase reliability. By serving content from a server closer to the user, CDNs reduce the time it takes for content to be delivered, resulting in faster load times. This is particularly important for websites that have 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! It was a decision I made later in my website-building journey. I was grateful but also upset I didn’t use them sooner because my website’s performance was one of the few things holding 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.

Plenty of online articles and forum threads debate which CDN is genuinely the best. Personally, 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 my website has yet to experience any CDN-caused outages so far. In fact, since changing hosting providers to ChemiCloud, I have not experienced any outages at all. While under my previous hosting provider, out of the several outages my website has experienced, some were briefly caused by Cloudflare.

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. This setting is only required if you use a CDN that is not 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 webpage with WebP images, LiteSpeed Cache will serve a version with 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.

WebP for Extra srcset = ON

This setting ensures that images in custom code are also served as WebP. I have this setting turned on for my website because I display ads, embed affiliate widgets with images, and my social media feeds on my Portfolio, which includes images. 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 is the most challenging section to set up. This section stressed me out. I also waited to write this section last to explain these settings as simply but best 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.

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 ideal settings.

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

1. CSS Settings

LSCache CSS Settings

Within this section are 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.

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 CSS file. Depending on how your website is designed with Elementor, this setting may be turned off for your website. Therefore, please test this setting.

Whether or not to turn this setting on does depend on your theme. If you use a Gutenberg child theme, then Elementor as just a page builder; I would test this setting and leave it off. LiteSpeed warns about disk space potentially filling up because of themes inserting random strings into the CSS. However, I’m using Elementor’s Hello Theme, a blank-slate theme that allows me to build it from scratch. Therefore, I am unlikely to experience this issue.

Generate UCSS = OFF

Only consider this setting if you are using QUIC.cloud CDN and CSS Combine are turned on. Generate UCSS is a QUIC.cloud online service that creates a single streamlined CSS file for each of your web pages. It also drops unused CSS and only includes what is needed to render your web pages.

Even though this setting reduces processing time, as you can see, I still have it turned off because I use Hello Elementor to build my own theme. UCSS does help remove unused CSS; however, heavy CSS is often found in most default Gutenberg themes provided by WordPress plus Elementor Pro.

If Guest Mode is turned on, this setting will still work. However, it will only work for qualifying requests due to Guest Optimization. Based on my website’s performance results, this is ideal instead of having this setting completely turned on.

UCSS Inline = ON

Tom from OnlineMediaMasters recommends leaving this setting off because even though it does improve PageSpeed Insights test scores, it could also increase HTML sizes. However, because I’m using a blank-slate child theme (Hello Elementor), turning this setting on has improved my PageSpeed scores without increasing my website’s HTML sizes. At least, not to dangerous levels to the point where it would get flagged in performance test results.

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

I tested this with other settings and concluded that it should remain off. What Load CSS Asynchronously does is it loads both CSS,  HTML and even Google Fonts this way, without formatting. While it is meant to improve performance test scores, it is not entirely the case for my website. As a result, I also leave both “CCSS Per URL” and “Inline CSS Async Lib” OFF.

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

LSCache JS Settings

Like optimizing CSS, you must do the same for JavaScript. Optimizing JavaScript is especially important for websites that use Elementor. For these JavaScript settings, I optimize them the same way as I did for CSS.

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

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. While Delayed is a more recommended option, my website functions better if JavaScript is Deferred.

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

Similar to minifying CSS and JavaScript, you should also do the same for HTML.

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. This is where using Elementor is 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. It also 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

Since you will likely choose a Google Font when designing your website with Elementor, it is best to keep this setting off.

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

To me, 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. All this setting does is apply a simple placeholder over an image while it finishes loading.

Responsive Placeholder = ON

As the images on your website load, the layout of the overall webpage can shift and reshuffle when those images are loaded. 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. This means larger page sizes and load time.

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. If this setting is turned off, LQIP will be rendered in the foreground for visitors. As a result, your web page load time will increase.

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. This calculates if and by how much your webpage’s layout changes as elements are loading. You want to keep this as minimal (in 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 are not shifting as your web pages are loading 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 not lazily loaded. This way, only these images are included in the initial web page load. 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. 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 caches your visitors’ profile picture next to their comments on your blog posts locally.

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, there is no need to utilize this feature. All it does is localize external resources on your website to load faster. Add each URL for the external resources in your website performance test results in the Localization Files text box below.

8. Tuning Settings – JS

LSCache Tuning JS Settings

Tuning settings for JavaScript is mainly helpful if you are not using Guest Mode or Optimization. Some exceptions for specific external resources may have to be included in JS Delayed Includes. Other than that, what is entered into the JS Excludes and JS Deferred / Delayed Excluded text boxes are 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 trying to optimize 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 possible 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 right ones to 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.

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

If these settings worked for you and your website, leave a 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 *

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.