This guide explains how to use the LiteSpeed Cache and Cloudflare CDN to optimize page speed and fix CLS, and LCP issues on your WordPress Site.
A Content Delivery Network (CDN) is a network of geographically distributed servers that work together to deliver web content to users located closest to them. Read this article to determine whether you need a CDN or not.
Caching is the process of storing and reusing generated web page content on a server. When a visitor requests a page on a site, the server generates the content by running various scripts. Caching saves a copy of this generated content on the server’s memory and serves it to subsequent visitors without re-executing those time-consuming scripts. Its like using copy-paste instead of writing everything all over again.
Before you Start
Be mentally prepared about the following:
- You will be creating accounts with Cloudflare.com and Quic.Cloud.
- Your website will experience up to 24 hour downtime during this process. Make sure this downtime is not going to affect your business operations.
- The wrong combination of themes, plugins, and settings might break your website. Although unlikely, it is still an unpredictable factor. So just create a backup of your WordPress site before doing anything.
Anyways, log into your WordPress dashboard and lets get started.
Apply a free Content Delivery Network (CDN) for your WordPress Site
Create a Cloudflare account
Head over to cloudflare.com and Create an Account using your email address and password. You may have to verify your email address.
Link your Website to Cloudflare
Once you’re logged in. Click on the ‘Add Site’ Button
Enter your domain e.g. yourwebsite.com
From Step 1 of 3, select the “Free Plan”.
Click Continue on the Review DNS records Step
Change your Nameservers, follow the instructions Cloudflare is giving you to change your nameservers. It is basically telling you to log into your hosting account and go to the DNS settings again to find the nameservers. Change them to the nameservers cloudflare is providing you with. Click “Done, Check Nameservers” on the Cloudflare site.
WARNING: Your Site may experience downtime after this step. Don’t worry, cloudflare and your hosting service are doing their thing in the background and it takes time (up to 24 Hours) to get your new configurations running smoothly.
In case you get a “Too many HTTP requests error”
You may get this “too many http requests error” in your browser after linking your website to cloudflare. If your website loads normally, skip this step.
Configure SSL (If too many HTTP requests error)
- If your website is being wonky and giving you the following error: Too Many HTTP Requests, do this:
- In Cloudflare, go to the SSL/TLS from your menu
- Select “Full” or “Full (Strict)” SSL/TLS encryption
CDN set up is complete. Now for the caching.
In Cloudflare, go to the DNS settings and leave that tab open. Open a new tab and open your WordPress dashboard.
Install and Activate the LiteSpeed Cache Plugin in WordPress
As a WordPress user, you would already be familiar with the process of finding, installing, and activating plugins. Remember that LiteSpeed cache is a free plugin in WordPress.
Obtain a Quic.Cloud Domain Key
From the LiteSpeed Cache Menu, head over to General Settings.
From there, click on the Request Domain Key Button, Refresh a page after 5 minutes and you will see the Domain Key field populated with some hidden characters. Now click the Link to Quic Cloud Button.
Create Quic Cloud Account
You will be taken to the Quic Cloud website where you will have to create an account and log in. A verification process may be involved.
Quic Cloud Settings
In your WordPress Dashboard, go to the CDN settings in LiteSpeed Cache and enable QUIC.cloud CDN (Turn it ON)
Back in Quic Cloud, Click the Enable CDN button.
You will be presented with a selection of options such as “I want t use Quic Cloud DNS and Use CNAME only. Select CNAME only.
Then it will generate a CNAME record for you. Copy that CNAME record into your Cloudflare DNS settings (Add record, Type: CNAME, Name: @, Target: the generated cXXXXX.tier1.quicns.com).
After saving this DNS record, go back to Quic Cloud and refresh the DNS settings. This may take an hour to update. After verification, it will generate an SSL certificate for you. Nothing More to do here. Go back to LiteSpeed Cache Settings.
How to optimize LiteSpeed cache Settings
Apply the Advanced (Recommended) Preset for the LiteSpeed Cache Plugin
Go back to the LiteSpeed Cache menu from your WordPress Dashboard and go to Presets
Select the “Advanced (Recommended)” preset from the available options. You should be done.
Double Check your Cache Settings
Even though you have applied the preset, just go through the LiteSpeed cache settings to make sure the following options are enabled
General Settings
- Automatically Upgrade: ON
- Guest Mode: ON
- Guest Optimization: ON
- Server IP: Open a new tab and go to your website’s hosting provider. Find the DNS settings of your website. The first record labeled “@” is the IP address you want to copy. Paste that ID address into the Server IP Field.
Cache Settings
- Enable Cache: ON
- Mobile Cache: ON
- Object Cache: ON
Image Optimization Settings
- Click on “Send Optimization Request”.
- Auto Request Cron: ON
- Auto Pull Cron: ON
- Optimize Original Images: ON
- Optimize Losslessly: ON
- Image WebP Replacement: ON
- WebP For Extra srcset: ON
- Save Changes. Go to Page Optimization Settings
Page Optimization Settings
CSS Settings
- CSS Minify: ON
- CSS Combine: ON
- Generate UCSS: ON
- UCSS Inline: ON
- CSS Combine External and Inline: ON
- Load CSS Asynchronously: ON
- CCSS Per URL: ON
- Inline CSS Async Lib
- Font Display Optimization: Swap
- Save Change. Go to the Next Tab Called JS Settings
JS Settings
- JS Minify: ON
- JS Combine: ON
- JS Combine External and Inline: ON
- Load JS Deferred: Deferred
HTML Settings
- HTML Minify: ON
- DNS Prefetch Control: ON
- Remove Query Strings: ON
- Load Google Fonts Asynchronously: ON
- Remove Google Fonts: ON
- Remove WordPress Emoji: ON
Media Settings
- Lazy Load Images: ON
- Responsive Placeholder: ON
- LQIP Cloud Generator: ON (Will be on anyways due to Guest Optimizer)
- Generate LQIP In Background: ON
- Lazy Load iframes: ON
- Add Missing Sizes: ON
And you’re done. Litespeed Cache is enabled properly for your WordPress website, and you are also using a Cloudflare CDN to optimize your site for the best possible user experience. Google and page speed insights will pick this up and give you a positive score for your efforts. The screenshot below shows the results of a website that has been cached with the same settings as described above. Note the high performance numbers and a CLS value of 0.
You may not see result scores immediately as it takes time for your website configurations to pass through all the CDNs. However, due to caching and the CDN, the performance metrics of your WordPress site will automatically get better with time.