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. When it comes to hosting, there’s no such thing as “unlimited resources.”
This is simply a marketing gimmick.I’m sure you see bloggers and affiliate marketers all the time advertising cheap hosting providers like BlueHost or GoDaddy. Sorry to be the bearer of bad news, but 99% of these sites are run by affiliate marketers merely trying to make a quick buck. Most of the time, they don’t even use them; they’re only trying to refer as many as they can. 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.
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.
If caching isn’t set up correctly, this will cause higher time-to-first-byte (TTFB) and what is also referred to as “wait time.” Regarding Google Core Web Vitals, this will generate a warning to “reduce initial server response time.” The warning triggers if the TTFB is higher than 600 ms (source).
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)
3. Redis/Memcached What is object caching?
PHP is an Object-oriented language. It uses the Object paradigm to structure code. As a result, your WordPress site consists of many different PHP Objects that are constantly created, instantiated and destroyed (by memory manager). Creating and destroying objects has a cost overhead, particularly if they are many. However, most of these tend to be reused a lot since they represent core functionalities. This means that each time the application needs them again, it will need to instantiate them from the start.
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. That’s pretty close to half of the assets the browser has to download and deliver to a user.
That’s where image compression comes into play.
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. You would be surprised by how much some images can be compressed without any quality degradation. 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.
How much smaller is the WebP file format? Well, take one of the images on this blog post, for example. The PNG image is 60.6 KB, while the WebP version of the same image is 16.3 KB. That’s a 73.1% decrease in size!
Google also recommends using WebP images. Doing this will fix the warning “serve images in next-gen formats.
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.
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. The number of images varies based on the type of browser, lazy loading method, viewport’s size, etc. But regardless, the idea is that it usually cuts down on 85%+ of the image requests.
Google actually recommends lazy loading. If you don’t implement it, you’ll see the following warning to “defer offscreen images.”
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. To this day, I still see sites with old MyISAM tables. InnoDB has proven itself to be much faster, and that’s what you should be using for your database tables.
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.
This is one reason I love using WordPress. There are so many different ways to accomplish things. If you go with another platform such as Shopify or Wix, you’re stuck doing it one way or worse; you don’t have a way to fix it at all.
Defer JavaScript
Due to the nature of how JavaScript works, you’ll most likely see an “Eliminate render-blocking resources” warning from Google. This means your JavaScript files slow down (block) the first paint of your WordPress site’s page when loading.
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.
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.
Best of luck for the following results ( anything above 90 is good)
Test your site by using the following tools :
https://pagespeed.web.dev/
https://gtmetrix.com/
Feel free to ask more tips and questions.
