|

Speed up your WordPress Website using LiteSpeed Cache Plugin 2022

Your website’s speed is crucial. If it loads slowly, users may abandon your site. Fortunately, there is an easy way to speed your WordPress site with the amazing cache plugin called LiteSpeed Cache by LiteSpeed. This plugin is one of the most popular WordPress caching plugins.

Here’s my guide to how to use LiteSpeed Cache to get the most out of it.

1. What is Speed Optimization of a Website?

What is speed optimization? You can see the differences by simply visiting some websites. Some websites load slow. However, statistics show that 90% of website visitors expect sites to load within two seconds. Visitors will likely leave the site if it takes longer than two seconds.

Websites must therefore be as responsive as possible.

These factors are the most important to your website’s visitors. They also have an impact on SEO, site rank, indexing, etc.

2. 2. Obstacles to Website Optimization

Many website owners don’t realize the importance of speed optimization. This is especially true if your business is small or you are a startup. While most people are aware that there are many ways to speed up websites, there are also obstacles. Many people don’t know what obstacles are.

1. JavaScript and heavy CSS

WordPress is an open-source CMS that is free and easy to use. Its user base continues to grow. Many people choose to use WordPress plugins and themes that are available on the market. The problem is that a WordPress theme may come with a lot of pages. You might not need all of them so you end up loading unneeded CSS and javascript.

Most themes come with CSS and JavaScript files.

2. 2. Unoptimized images and media

Websites with slow pages load speed and low page load speeds are often due to unoptimized media and images. Many content writers copy and paste images from blogs or websites, but don’t optimize them. Unoptimized images are often caused by the incorrect and heavy formats.

You can optimize images before or after they are uploaded to WordPress. We can either create an optimized image and upload it in web-compatible format, or upload it and optimize it with LiteSpeed cache. This will be discussed later in this post.

3. Too many widgets and plugins

People don’t remove unused widgets or plugins, which is a common cause of slow websites. Unused plugins can put pressure on the server and also add CSS and Javascript files that you don’t use.

Sometimes, users install plugins that they forget to delete. WordPress will still load all files from the plugin, slowing down your site.

4. Bad choice of server

It is important to choose the right Web hosting server. This will affect your website’s performance. Your website’s speed can be negatively affected if your server resources aren’t up to par or your server location is too far from your target audience.

Always seek out servers that are closer to your target audience. Make sure the server can handle the load based on your site traffic.

5. Poor Coding Standards

It is important to write code efficiently when building websites. Not all developers can write efficient code. Developers who write lots of code to implement a single function can make websites slow and unoptimized.

Before you make any modifications, ensure you adhere to good coding practices and avoid relying on external libraries.

3. WordPress and LiteSpeed Cache

WordPress is a free CMS, and LiteSpeed cache can be used as a WordPress Plugin.

3.1 WordPress

WordPress is an open-source platform for creating websites. WordPress is a content management platform (CMS). PHP is used to create WordPress and pair it with MariaDB or MYSQL databases. WordPress was initially created to be a blogging platform. WordPress is used by 41.4% the 10 million most popular websites as of May 20,21. WordPress is used by 455 million websites according to the internet.

3.2. LiteSpeed Cache

LiteSpeed Cache plugin is a WordPress plugin. LiteSpeed can be used to optimize WordPress sites and increase their speed.

4.Prerequisites

Because running tests on a plain WordPress installation is not fair, we will install WP Ocean theme. Also, we will install an E-Commerce demo to ensure that our tests are run on a large site. We chose the e-commerce demo store and imported that into our website so we can perform tests with some data on-site.

5. Performance without LiteSpeed Cache.

After importing demo data from WP Ocean first let’s check the performance of the website without LiteSpeed Cache and check all progress.

Different page speed testing tools can affect performance

Let’s test the page speed on the demo site with SpeedTest tools. After optmizations, we will run these tests again.

Google PageSpeed insight

The site doesn’t have much data, so the speed tests aren’t too bad. OceanWP is also a great theme

GT Metrix:

Speed test results are fine but we will check what is changed after enabling LSCache

6. Enable LiteSpeed Cache and perform custom Optimization

Moving on to customization to improve page speed. Optimize your website with LiteSpeed Cache. Minify, combine CSS and Javascript. LiteSpeed cache not only allows you to minify CSS and Javascript, but also lets you set up object cache, browser caching, etc. We will now go through each option and configure them all so you get the most out of LSCache plugin.

6.1 CSS Optimizations using LiteSpeed Cache, Performance Improvements and Other Features

For CSS optimization, visit theLiteSpeed Cache->Page Optimizations->CSS Setting.

CSS Minify

This will reduce the size of your CSS files as well as inline CSS. You can also turn this ON if you don’t use any external CSS controllers like Cloudflare or similar.

CSS Combine

This will combine all your CSS files. To ensure that your website design is not broken, turn it on and double-check it.

CSS Combination of External and Inline

When CSS is enabled, you can include both inline and external CSS in a combined file. This option preserves CSS Combine’s priorities and minimizes potential errors. It will be turned ON.

Load CSS Asynchronously:

While this may increase your score on speed testing platforms, it can also cause problems with site initial display. So keep it off.

Create critical CSS:

Critical CSS will load and generate the necessary CSS before the rest. This option can be enabled by thoroughly checking your website to ensure that nothing is broken. We will leave this off for now.

Create critical CSS in Background

A cron-based queue automatically generates critical CSS in the background. This article will turn it off.

Separate CCSS Cache Post Types:

Types of list-post should include each item having its own CCSS.

6.2 JavaScript Optimizations With LiteSpeed Cache And Performance

JavaScript optimization can be done at theLiteSpeed Cache->Page Optimizations->JS Setting.

JavaScript Minify

This will reduce the size of your JavaScript files as well as inline JavaScript. You can also turn it ON if you don’t use any external JS controllers like Cloudflare or similar.

JavaScript Combine

This will combine all your JavaScript files with inline JavaScript code. If it doesn’t break your website design, turn it ON. We turned it ON to accomplish this.

JavaScript HTTP/2 Push

Before they are requested, pre-send JavaScript files to your browser. (Requires HTTP/2 protocol).

Load JavaScript Deferred

This can reduce resource contention and increase performance. This will improve your speed score on services such as GTmetrix, PageSpeed, and Pingdom. It will be kept ON, but it will not affect JavaScript functionality.

Load Inline JavaScript

Keep it default.

6.3 Image Optimizations using LitSpeed Cache Performance

LiteSpeed Cache allows you to optimize images on your website. Image optimization can be done at theLiteSpeed Cache-> Image Optimization-> Gather Data.

To optimize the image click on Gather Data button and optimization will start. You can see the progress in the sidebar of this screen.

If you want to do any settings for image optimization click on Image Optimization Settings.

6.4 Cache setup using LiteSpeed Cache.

LiteSpeed cache supports different types of caches. Go to theLiteSpeed Cache->Cache

There are many options available, including Cache, TTL and purge, Exclude, ESI. Object, Browser, Advanced.

1- Cache

  • Enable LiteSpeed Cache- Keep it on to cache will work. This is the default page-caching of LSCache.
  • Cache Logged-in Users- Cache pages available for users logged in.
  • Cache Login Page –You can leave it on because the login page won’t be changed much.
  • Cache favicon.ico- Keep it  ON to load the favicon from the cache
  • Cache PHP Resources- This is a must-have
  • Cache Mobile- If your phone has a different theme, keep it ON.
  • Drop the query string- You can either drop the query strings from URLs or create one cache copy.

2- TTL:

Keep all values default and change if you are an expert user.

Purge:

Purge All On Upgrade:

Keep it on. And keep others as default.

Excludes:

Add anything accordingly if you want to exclude anything from getting cached.

Object Cache:

Redis Cache can be enabled to reduce the load on your database.

Browser Cache:

Browser caching saves static files locally within the browser. This setting can be changed ON Reduce repeated requests for static data.

7. Result after LScache custom optimization

7.1 Google PageSpeed Insight:

Results are  improved by activating LS cache with custom settings.

 

7.1 Google PageSpeed Insight:

 

7.2 GTmetrix Result:

8. High PageSpeed has many benefits.

A happy website is one that’s fast. Google requires that PageSpeed be an integral part of their ranking algorithm. Users have also taken into consideration how long it takes websites to load. PageSpeed affects:

  1. Search Engine Ranking for the website.
  2. User Experience
  3. Conversion rate

 

 

Leave a Reply

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