How To Speed Up WordPress ( Big Guide)
 

Why does a slow website even matter?
Because it will always be very detrimental to a visitor’s experience and first impression. It plays a significant factor in bounce and conversion rates. The days of dial-up are long gone, and people don’t have the patience they used to. If they have to wait a long time for a page to load, they’re most likely going to hit the back button and pick the next search engine result.


1. Invest in good WordPress hosting

One of the easiest and most important ways to speed up WordPress is to start with a solid foundation. And that means you need to pick a fast and reliable WordPress host. Unfortunately, this first step is where a lot of people mess up. Many underestimate just how much of an impact a hosting provider has on your performance. Getting this right will save you so much time and frustration.

If you’re on a small website, you’re most likely on a cheap shared web hosting plan. The name of the plan itself defines what it is. The term “shared” means that your website is hosted on a server along with a lot of other people’s websites. This means they are all fighting over the same resources. So invest in a good VPS/ Dedicated server if you have good traffic or want your site to be fast , be able to handle good traffic.
https://i.imgur.com/mW1m2Kh.png
2. Add caching
When a user hits your site for the first time, the server processes the request, including all the database queries needed to render the page. The page is then delivered to the user’s browser. The initial processing time is why it’s so important to have a fast hosting provider.

Cache is the layer that sits in-between your server. The cache is built and stored in RAM or disk during that initial request, and subsequent requests hit the cache layer instead of your server. This results in lightning-fast speeds (up to 40% faster in my testing) for the user as it essentially bypasses the server processing phase. Another benefit is that it also reduces the load on your server

WordPress caching plugins
If your hosting provider doesn’t have server-level caching, that’s when you need to install a WordPress caching plugin. I’ve tested many caching plugins over the years, and I recommend going with one of the following:
W3 Total Cache( free/premium)
WP Rocket (premium)
https://i.imgur.com/LnZiUZw.png

3. Redis/Memcached What is object caching?

Redis is an open-source, in-memory key-value data store. It can be used as a database, message broker, and of course, cache. Redis stores data in RAM, so its accessing speed is quite fast.
Redis cache is based on object cache. It stores data about objects that are usually requested by clients into RAM. Thus, web servers can use these data without accessing the database. This reduces the server load and makes your site run more smoothly (to get more details about how the web server handles requests, refer to this article).

4. Use a Lightweight WordPress theme

WordPress themes can make or break your site. There are a ton of bloated themes out there that can bring your site to crawl. Even with fast WordPress hosting and caching implemented, the amount of code and requests still matter, especially when it comes to Google Core Web Vitals.When you’re looking for a WordPress theme, you also want to make sure you’re buying from a reputable company with good developers and support.

5. Image Optimization
Optimizing your image sizes and delivery is something you can’t ignore. According to The HTTP Archive, as of February 2021, images make up on average 48% of a total website’s page weight on mobile devices.
Compression is a way to make your image files smaller by removing data. It’s one of the easiest ways to decrease your website’s total size, and once you have a sound system in place, it can ultimately be hands-off.

Uploading full-resolution images onto websites, especially those on small shared web hosting plans, will instantly slow down your website’s load time. The following wordpress plugins could be used for the task:

• Optimole.
  Smush Image compression and Optimization.
  EWWW Image Optimizer.
  Shortpixel Image optimizer.
  TinyPNG.
  Imagify.
  resmush.it.

I also take advantage of the .webp image format. This is an image format developed by Google that is much smaller than PNGs or JPGs. It’s now supported by all modern browsers. I use WebP images on all my sites.
Google also recommends using WebP images. Doing this will fix the warning “serve images in next-gen formats.
https://i.imgur.com/j6efMeD.png

Lazy load images
Beyond image compression, you can also optimize the delivery of your images by using lazy loading. This is the method of delaying or deferring the loading of images until a user scroll downs the page (images enter within the viewport).

Why does this work so well? Let’s say you have a long-form blog post with 50 images on it. By default, the browser will load all 50 of those images when someone visits the site. Even with optimized images, this can take a while, especially on mobile.
https://i.imgur.com/rM2S8zP.png
If you lazy load the images, it will only load the images towards the top of the page that the user sees in their browser.

Google actually recommends lazy loading. If you don’t implement it, you’ll see the following warning to “defer offscreen images.”
https://i.imgur.com/oadq2EZ.png


6. Optimize database and reduce disk space


The next thing to do is to ensure that your WordPress database is optimized and that you aren’t wasting disk space.

Before proceeding, it’s always good practice to take a backup of your WordPress site.
InnoDB database tables
If you’ve never done any database optimization before, the first thing you’ll want to check is that you don’t have any mixed MyISAM and InnoDB tables.

For a long time, there were two different types of storage engines: MyISAM and InnoDB. MyISAM is now deprecated, and InnoDB has been the default storage engine since the release of MySQL 5.5.
7. Clean up auto-drafts, spam comments, transients, etc.
It’s also important to clean up other old data you might have lying around. This includes auto-drafts, spam comments, comments in trash, posts and pages in trash, expired transients, etc. All of these things contribute to a larger WordPress database size.

8. Optimize JavaScript and CSS
According to The HTTP Archive as of 2021, JavaScript makes up on average 22% of a total website’s page weight on mobile devices. After images and video, JavaScript is the third-largest source of page weight.

Audit your plugins
Where does a majority of the JavaScript come from? Two places: theme and plugins. So the first recommendation is to do an audit of your plugins and get rid of the ones you can live without.


Defer JavaScript

https://i.imgur.com/B51Iixv.png
An easy way to speed up the paint of a page is to defer all non-critical JavaScript. This means the scripts will load after the rest of the page has loaded. You’re basically pushing them to the bottom of the waterfall. This is done by adding a defer attribute on each JavaScript file.
You can easily defer JavaScript using WordPress plugins I mentioned above for caching.

Minify JavaScript
Minification is the process of removing all the white space in your code. A lot of developers minify their scripts beforehand. You can spot this quickly if the script has .min.js on the end. (Example: file.min.js). Therefore, this isn’t a huge priority because 90% of your JavaScript is probably already minified.

With that being said, you can still minify your JavaScript. For this, I recommend the free Autoptimize plugin. Or, if you’re using Cloudflare, you can easily enable minification for JavaScript under the “Speed → Optimization” tab.
https://i.imgur.com/t7XDlNt.png

Delay JavaScript
While deferring JavaScript pushes the script to the bottom of the page load, you can alternatively delay JavaScript based on user interaction. This can be a great way to speed up the paint of the page for Core Web Vitals when something isn’t needed right away. Especially heavy third-party scripts like Google Adsense, Google Analytics, conversion pixels (FB, Google Ads), etc.

Minify CSS
Like JavaScript, a lot of developers minify their stylesheets beforehand. You can spot this quickly if the file has .min.css on the end. (Example: file.min.css). Therefore, this isn’t a huge priority because 90% of your CSS is probably already minified.

With that being said, you can still minify your CSS. For this, I recommend the free Autoptimize plugin. Or, if you’re using Cloudflare, you can easily enable minification for CSS under the “Speed → Optimization” tab.
https://i.imgur.com/t7XDlNt.png

Best of luck for the following results ( anything above 90 is good)
https://i.imgur.com/0MfCXSn.png

Test your site by using the following tools :
pagespeed.web.dev
gtmetrix.com

Feel free to ask more tips and questions.