Optimize WordPress Website Speed (LiteSpeed Plugin)

Website speed is important for search engine rankings and user experience. This post demonstrates how to speed up a WordPress website with a free plugin and load the website faster.

WordPress comes with core JS and CSS files to provide its core functionality. Besides WordPress core files, a WordPress website tends to have other theme assets, especially if a website is built using a page builder; the number of assets the website will load is expected to be more.

How to Speed Up a WordPress Website (LiteSpeed Cache)

There are many plugins in the WordPress plugins repository that can be used to improve website speed, with some cool and useful features available for website optimization. In this post, we will be using the LiteSpeed Cache plugin to increase the page speed of a WordPress website and make the website load faster. Let's go through each step one by one.

Step 1: Install LiteSpeed Cache Plugin

The first step to start optimizing is to install the cache plugin. Follow these steps to install the LiteSpeed Cache plugin:

Log in to the WordPress admin dashboard.
Click on "Plugins ➜ Add Plugin" in the left-side menu.
Type "LiteSpeed Cache" in the search box.
Click on "Install Now" in the LiteSpeed Cache plugin box.
After the plugin has been installed, click "Activate" to activate the plugin.

Step 2: Enable QUIC.cloud Services

After installing and activating the plugin, we need to activate QUIC.cloud services of LiteSpeed. It is a CDN and online services provider created by LiteSpeed. The benefits of using LiteSpeed CDN include:

Page Optimization and Image Optimization.
Creation of next-gen image formats.
Loads above-the-fold critical CSS from the CDN.
Removes unused CSS.
Provides security at the CDN level.
Creates a cache for the entire site.

After the plugin has been activated, follow these steps to enable QUIC.cloud:

Click "LiteSpeed Cache ➜ General" in the left-side admin menu.
Click the "Enable QUIC.cloud Services" button.
We will be redirected to quic.cloud app where we might need to register an account and enable CDN for our website.
Follow the instructions on quic.cloud app and configure the QUIC.cloud CDN.

Step 3: Optimize Images

After enabling QUIC.cloud for our WordPress website, we will first change the settings of the LiteSpeed plugin to serve optimized images. Follow the steps to optimize images:

Click "LiteSpeed Cache ➜ Image Optimization" in the menu.
Click the tab "Image Optimization Settings".
Switch on the option "Optimize Original Images".
Switch off the option "Optimize Losslessly".
Switch the option "Image WebP Replacement".
Switch the option "WebP For Extra srcset".
Click "Save Changes".

Step 4: Optimize & Minify CSS

After optimizing our images, we are ready to move to page optimization and minify CSS, combine CSS files and asynchronously load CSS to improve CSS delivery. First, we will change settings to optimize CSS to speed up the WordPress website. Follow these steps to optimize CSS:

Click "LiteSpeed Cache ➜ Page Optimization".
Click the "CSS Settings" tab if it is not already selected tab.
Switch on the option "Minify CSS", this will minify the CSS and lead to a faster load time.
Switch on the option "Generate UCSS". This will remove the unused CSS and save time for extra unnecessary parsing.
Switch on the option "CSS Combine External and Inline". This will combine both external and inline CSS into one file.
Switch on the option "Load CSS Asynchronously". This will only load the critical CSS and load the rest of the CSS after page load.
Switch on the option "Inline CSS Async Lib" to avoid render blocking for inline CSS.
Switch on the option "Font Display Optimization" to apply the recommended font display "swap" for fonts.

Step 5: Optimize & Minify JS (JavaScript)

Now, the next step is to optimize JavaScript and minify, defer load and delay JavaScript loading, which contributes to page speed. This step needs attention as it may break some functionality, so check the website for any site breaks and errors after saving changes in this step. Follow these steps to optimize JS:

Click on the "JS Settings" tab under "LiteSpeed Cache ➜ Page Optimization".
Switch on the option "JS Minify", this will minify JavaScript used on the website.
Switch on the option "Load JS Deferred", this will delay JavaScript loading and load JavaScript on user activity after the page has loaded. This option improves the page speed score marginally.

Step 6: Optimize & Minify HTML

Next, we need to optimize HTML page performance by minifying HTML, Preconnecting third-party DNS and removing WordPress icons. This will help to increase WordPress website speed and improve the load time. Follow these steps to optimize the page:

Click on the "HTML Settings" tab under "LiteSpeed Cache ➜ Page Optimization".
Switch on the option "Minify HTML", this option will minify the HTML page content for faster loading.
In "DNS Prefetch", enter the third-party resource domains. This will perform a DNS lookup for the given domains and make resource requests faster when the resource is actually requested.
In "DNS Preconnect", enter the third-party domain names. This will not only perform a DNS lookup but also perform a TCP handshake, which works faster than DNS prefetch.
Switch on the option "Remove WordPress Emoji" to remove the WordPress emoji CSS file for front-end pages.

Step 7: Lazy Load Images & Iframes

One of the practices involved in making a WordPress website load faster is to only load the images that are in the current viewport. This approach of lazy loading images reduces the render-blocking time by preventing the off-the-viewport images from loading and only loading them when they are needed. Follow these steps to enable lazy loading with the LiteSpeed plugin:

Click the "Media Settings" tab in "LiteSpeed Cache ➜ Page Optimization".
Switch on the option "Lazy Load Images" to enable lazy loading for images.
We can define an image placeholder to be used until the image is loaded.
Switch on the option "Lazy Load Iframes", this option will lazy load iframes.
We can also switch on the option for "Add Missing Sizes" to generate missing image sizes.

Step 8: Media Excludes from Lazy Loading

This step is about fine-tuning lazy loading images and iframes. In this step, we can define which images and iframes to exclude from lazy loading. The following options are available in this step:

Click the "Media Excludes" tab in "LiteSpeed Cache ➜ Page Optimization".
We can define the image file names in the section "Lazy Load Image Excludes" that should be excluded from lazy loading.
We can define an image class name in the section "Lazy Load Image Class Name Excludes" that should not be lazy loaded.
We can define parent element class names in the section "Lazy Load Image Parent Class Name Excludes". Images inside elements with these class names will not lazy load.
We can define an iframe class name in the section "Lazy Load Iframe Class Name Excludes" to exclude iframes with certain classes from being lazy loaded.
We can also define parent element class names of Iframes in the section "Lazy Load Iframe Parent Class Name Excludes". Iframes in elements with these class names will be excluded from lazy loading.

Step 9: Delay JavaScript Loading

This step is about fine-tuning the deferred/delayed execution of JS. In this step, we can define which JS files should be delayed and which ones should be excluded. We can also define JS files to be excluded from minification and combining of JS files. The following are the steps to implement:

Click the "Tuning" tab in "LiteSpeed Cache ➜ Page Optimization".
Enter the JS file names that should be delayed in the "JS Delayed Includes" section.
Enter in the section "JS Excludes" the JS file names that should be excluded from minification and combining.
Enter in the section "JS Deferred / Delayed Excludes" the JS file names that should be excluded from deferred and delayed loading.
Switch on the option "Optimize for Guests Only", this option will apply all these features only for guest users.

We demonstrated step by step how to speed up a WordPress website with the LiteSpeed Cache plugin. Following these steps, we will be able to drastically increase page speed using the free plugin features.