Pace Up Your WordPress Web site in 20 Minutes
Everyone knows page speed is important. This is a confirmed Google ranking factor for desktop and mobile devices, affects the user experience and can have a direct impact on your bottom line.
Slow WordPress websites are a common problem, however.
Here is the mobile score for one of my pages on PageSpeed Insights.
When we run the entire website through Ahrefs' Site Audit, which shows the page load time for all pages, we see that this isn't the only slow loading page. None of them load massively quickly with an average load time of 570 ms.
Here is the same page after about 20 minutes of page speed optimization:
And the rest of the pages in Site Audit:
The difference is day and night. PageSpeed Insights scores are near perfect, and each page loads pretty quickly.
In this guide, I'll show you exactly how I did it in a few simple steps.
- Remove unused plugins
- counter DNS Cloudflare provider
- Install a caching plugin
- Minimize your code
- Eliminate render-blocking resources
- Lazy load pictures and videos
- Optimize Google Fonts
- Enable preloading
- Use one CDN
- Optimize your pictures
Many of the tweaks recommended below use WPRocket, a paid plugin to speed up your WordPress website. I've listed free alternatives whenever possible, but it's important to note that plugins can sometimes conflict with each other and cause problems. You should always test how they will affect your site in a staging environment before making changes to your live site. Here's how to set up a staging site.
Step 1. Remove unused plugins
Unless you have a brand new WordPress website, you have likely installed a number of plugins that you haven't used over the years. Some of these can affect page speed. So it pays to disable and uninstall anything that you don't need as a starting point.
Just be careful when you do this. If you are not sure if something is needed, leave it there.
Step 2. Switch DNS Cloudflare provider
Websites are files on hard drives (servers) that are connected to the Internet. And every device connected to the internet has one IP Address (e.g. 184.108.40.206).
because IP Addresses are difficult to remember, domain names are assigned IP Addresses with DNSstands for Domain Name System. You can think of this as the web's phone book. When you enter a domain in your browser, a DNS It looks up to find the servers IP Address.
But here's the thing: most people use the free one DNS Provider from their domain registrar, which is usually slow.
When you are, switch to a faster one DNS Providers like Cloudflare.
To do this, sign up for a free Cloudflare account. Click "Add Site", enter your domain name and click the button.
Select the free plan and click "Confirm plan".
Cloudflare is now giving you the opportunity to review yours DNS Settings before proceeding. If you don't see any warnings, it's usually safe to continue.
Now all you have to do is swap your nameservers with your domain registrar. The way you do this varies between registrars. So don't hesitate to ask their assistance if you are unsure how to do this.
If you're using Google Domains, do the following:
Step 3. Install a caching plugin
Caching is a process of temporarily storing files so that they can be served to visitors more efficiently.
There are two main types:
- Browser caching: Stores "general" files such as logos on users' hard drives so they don't have to be downloaded again on repeated visits.
- Server caching: Stores a fully built "static" version of a page on the server so it doesn't have to be recreated every time a new visitor requests it.
WP Rocket makes it easy to enable caching. Just buy, install and activate it. Basic caching (server and browser) is enabled by default. If your site responds, go to the cache settings and check the box to enable caching for mobile devices as well.
Are you looking for a free option? To attempt W3 Total cache.
Minimizing removes spaces and comments from your code to reduce file size. And smaller files lead to faster loading times.
If you aren't using WPRocket, install and enable Autoptimize and do the same.
Combining these files can make things faster, but it depends on your server setup.
If your server uses HTTP/1.1 Combining files speeds up work because fewer files have to be loaded. When used it HTTP/ 2: Combining files doesn't necessarily make that much difference, since files can be loaded at the same time anyway.
To see which version your site is using, connect your domain to Key CDNTester.
When using Autoptimize, there are two check boxes to "aggregate" files. All you need to know is that these things can "break" things on your website at times. It is therefore worthwhile to check whether everything still looks and works the same after activation. Remember to clear the cache beforehand and look for changes in an incognito window. Otherwise, the changes may not show up in what you see.
Step 6. Eliminate render-blocking resources
When rendering, code is converted into a visible web page.
The keyword there is "visible" because a web page does not always have to be fully loaded before it is visible.
Because of this, it makes sense to prioritize resource loading for content above the fold.
If you've previously seen the "Remove Render Blocking Resources" issue in PageSpeed Insights, it will usually resolve this issue.
Step 7. Lazy load images and videos
Delayed loading improves page speed by delaying the loading of pictures and videos until they are visible on the screen. If you're running WordPress 5.5+, image lag loading is enabled by default, but not for videos.
If you are using WPRocket, solve this problem by checking the "Enable for Iframes and Videos" box under LazyLoad Settings.
If you're not using WPRocket, the free Lazy Load for Videos plugin works similarly.
Step 8. Optimize Google Fonts
Many topics use Google Fonts. These fonts must be downloaded from the Google server every time you visit your website. This can be a time consuming process as your server has to do it HTTP Inquiries, download a CSS Then download the font from the location referenced in the stylesheet. And that needs to be done for every font on the page.
When you use WPRocket, Google Fonts requirements are automatically optimized. Otherwise, swapping the Google font display is a good place to start.
Step 9. Enable preloading
Preloading allows you to define key resources so browsers know the priority of files to load.
Suppose your code looks like this:
The easiest way to solve this is to add another line of code like this:
You can add preload attributes manually by editing the code. However, this can get cluttered and confusing unless you know what you are doing. It's a lot easier to install WPRocket, which does it automatically right out of the box.
Content Delivery Networks (CDN) are server groups that are distributed around the world. Each of these websites stores a copy of your website so that users can connect more quickly when requesting web pages.
For example, suppose your web host's server is in the United Kingdom. When someone visits your website from the US and you don't use any CDNthe connection between your device and your server will be slow. When someone from the visits US and you use a CDNThe device connects to the closest server, which makes the connection faster.
There are many CNS So all you have to do is choose one, activate it in WPRocket and enter that CNAME.
Step 11. Optimize your images
Lazy loading solves many image-related problems, but it does not help load images that load over the fold. The bigger they are, the more they have a negative effect on loading times.
To solve this, compress your images with a plugin like Shortpixel. Just install it, enable it, go to settings and enter yours API Click the "Save and Switch to Bulk Process" button, then click "Restart Optimization".
If you find these to be of poor quality, go to Settings and change the Compression Type to Glossy or Lossless.
Let's see how these tweaks have affected our page speed using some popular tools.
Here are the before and after stats for my post in Google's PageSpeed Insights:
And here is the same from GTMetrix:
You can see the page previously fully loaded in 5.9 seconds with a page size of 1.89MB and 67 requests. After the optimizations, all three metrics failed. The page size is 695 kilobytes, the fully loaded time is 4 seconds, and the number of requests has decreased by almost 50%.
When we review all the pages of the website in Ahrefs' Site Audit, we see an improvement in the average load time and 95th percentile load time of about 40%.
All of the above worked fine for my website, and it worked fine for other websites as well. However, it is important to keep in mind that every WordPress configuration is different. You may have more plugins, a clunkier theme, slower hosting, or more third-party tracking scripts slowing down your website.
If your page speed could still see some improvement after these tweaks, you will likely need to do custom work on your website. So it's worth hiring a developer or page speed expert to take a closer look at things.
For more information on specific topics, check out our complete guide to page speed.
Did we miss something important in this guide? Ping me on Twitter.