My LiteSpeed Cache Settings for my Elementor-built Website

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.

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.

Optimized Control Loading = INACTIVE

This new setting is supposed to improve asset loading by only loading what visitors need. It is best to keep this setting off unless you have many web pages with complex designs (which most bloggers and small business websites do not have). Besides, it does not directly impact webpage performance tests. Depending on your website, it could have a negative impact.

When Elementor first rolled out this beta experiment feature, I immediately turned it on.  Thinking it would improve my website’s performance, I was wrong. Most of my web pages saw no improvement in their performance test results. However, some web page test results worsened, even displaying an error message. Identifying this setting being turned on as the cause of the no-change-to-worse performance was an educated guess.

I had to conduct further research on this new setting and came across a GitHub discussion forum on 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. Caching solutions such as Pache Cache and Browser Cache must be turned off for it to work fully. Since I recommend that these settings be turned on in my ideal LiteSpeed Cache settings, leaving the Optimize Control Loading setting inactive makes sense.

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

Improved CSS Loading = ACTIVE

Elementor 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 problem altogether.

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.

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.

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

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

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

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

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

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

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

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

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

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.

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

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

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.

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.

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. 

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 to determine which settings are best to achieve performance results similar to mine for your website. A staging site ensures you can do all the testing you want without impacting your visitors’ experience.

1. CSS Settings

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

Only turn on this setting if you are using QUIC.cloud CDN and the above CSS Minify and Combine settings are also 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.

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, turning this setting on has improved my PageSpeed scores without a noticeable increase in my website’s HTML size.

Turning on UCSS Inline is ideal for people using the QUIC.cloud online service to generate Unique CSS (UCSS). This setting helps by reducing any extra CSS file loading. 

This setting is also suitable for the Guest Mode. However, it is not turned on automatically. Turning on this setting here ensures that it works on Guest Mode.

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” 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

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

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

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

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

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

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

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

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.

Database

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

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

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. 

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 developing all aspects of your website. This way, you are not limited to design potential and loading resources you do not intend to use.

If these settings worked for you and your website, comment with your feedback. Also, if you have any further questions or concerns, message me.

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

Leave a Reply Cancel reply

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

Comment *

Name *

Email *

Website

Related Posts:

Fred Meyer Jewelers Review & Recommendations

September 19, 2023 1 Comment

ChemiCloud Review

November 21, 2023 15 Comments

Realities of Starting a Business

April 29, 2024 No Comments

MoneyLion Review

September 11, 2019 38 Comments

Affordable Hotel Alternatives for St. Thomas Carnival

April 7, 2024 No Comments

Pure Vitamin E Oil

July 21, 2024 No Comments