Optimize WordPress Website Speed (LiteSpeed Plugin)

Website speed is important for search engine rankings and user experience. This post demonstrates how to speed up WordPress website with a free plugin and load 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, specially if a website is built using a page builder, the number assets the website will load are expected to be more.

How to Speed Up WordPress Website (LiteSpeed Cache)

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

Step 1: Install LiteSpeed Cache Plugin

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

Login to WordPress admin side.
Click on "Plugins ➜ Add Plugin" in left side menu.
Type "LiteSpeed Cache" in search box.
Click on "Install Now" in 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 CDN.
Removes unused CSS.
Provides security at CDN level.
Creates cache for entire site.

After plugin has been activated follow thse steps to enable QUIC.cloud:

Click "LiteSpeed Cache ➜ General" in left side admin menu.
Click "Enable QUIC.cloud Services" button.
We will be redirected to quic.cloud app where we might need to register an account 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 settings of LiteSpeed plugin to serve optimized images. Follow the steps to optimize images:

Click "LiteSpeed Cache ➜ Image Optimization" in 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 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 faster load time.
Switch on the option "Generate UCSS", this will remove the unused CSS and save the 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 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 recommended font display "swap" for fonts.

Step 5: Optimize & Minify JS (Javascript)

Now 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 website for any site breaks and errors after saving changes in this step. Follow these steps to optimize JS:

Click on "JS Settings" tab under "LiteSpeed Cache ➜ Page Optimization".
Switch on the option "JS Minify", this will minify JavaScript used on website.
Switch on the option "Load JS Deferred", this will delay JavaScript loading and load JavaScript on user activity after page has loaded. This option improves 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 contribute to increase WordPress website speed and improve the load time. Follow these steps to optimize page:

Click on "HTML Settings" tab under "LiteSpeed Cache ➜ Page Optimization".
Switch on the option "Minify HTML", this option will minify HTML page content for faster loading.
In "DNS Prefetch" enter the third-party resource domains. This will perform a DNS lookup for 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 WordPress emoji CSS file for front-end pages.

Step 7: Lazy Load Images & Iframes

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

Click "Media Settings" tab in "LiteSpeed Cache ➜ Page Optimization".
Switch on option "Lazy Load Images" to enable lazy loading for images.
We can define 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. Following options are available in this step:

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

Step 9: Delay JavaScript Loading

This step is about fine tuning the deferred/delayed 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. Following are the steps to implement:

Click "Tuning" tab in "LiteSpeed Cache ➜ Page Optimization".
Enter the JS file names that should be delayed in "JS Delayed Includes " section.
Enter in section "JS Excludes" the JS file names that should be excluded from minifiction and combining.
Enter in the section "JS Deferred / Delayed Excludes" the JS file names that should excluded from defer loading 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 LiteSpeed Cache plugin. Following these steps we will be able to drastically increase page speed using the free plugin features.