Learn how to Velocity ​​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.

Before optimization.

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.

Before optimization.

Here is the same page after about 20 minutes of page speed optimization:

After optimization.

And the rest of the pages in Site Audit:

After optimization.

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.

  1. Remove unused plugins
  2. counter DNS Cloudflare provider
  3. Install a caching plugin
  4. Minimize your code
  5. Combine CSS and JavaScript files
  6. Eliminate render-blocking resources
  7. Lazy load pictures and videos
  8. Optimize Google Fonts
  9. Enable preloading
  10. Use one CDN
  11. Optimize your pictures

important

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. 123.123.12.1).

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.

5 Cloudflare DNS

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:

6 name servers

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.

7 wp rocket caching

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.

wp page speed

If you are using WPRocket, select the check boxes to minimize CSS and JavaScript in the settings.

8 minimize

If you aren't using WPRocket, install and enable Autoptimize and do the same.

Keep in mind, however, that you should always test how this will affect your website before going live. Minimizing can often lead to broken code, especially when it comes to Javascript.

Step 5. Combine CSS and JavaScript files

Most WordPress websites contain several CSS and JavaScripts files. Some are for themes, others are for plugins, and you might have some custom ones too.

Combining these files can make things faster, but it depends on your server setup.

  • With HTTP/1.1, CSS and JavaScript files are loaded one after the other. This means that one file must be fully loaded before the next can be loaded.
  • With HTTP/ 2, Files are loaded at the same time. That means multiple CSS and JavaScript files can be loaded at the same time.

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.

9 http1 http2

If HTTP/ 2 is not supported, it is worth combining CSS and JavaScript files.

To do this, activate the check boxes "Combine JavaScript files" and "Combine" in WPRocket CSS Files ”in the settings.

10 wprocket combine css

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.

You can do this by postponing loading non-critically CSS and JavaScript files, which are needed later for content below the fold. To do this, activate the checkboxes "Load JavaScript delayed" and "Optimize" in WPRocket CSS Delivery."

11 optimize wprocket CSS

If you are not using WPRocket, you will need two plugins: Autoptimize and Async JavaScript.

In the settings for Autoptimize, activate the “Inline and Defer CSS. "Then click in the settings for Async JavaScript on" Activate Async JavaScript ".

If you've previously seen the "Remove Render Blocking Resources" issue in PageSpeed ​​Insights, it will usually resolve this issue.

12 Rendering Blocking Insights into Page Speed

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.

13 Loading Lazy Videos

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:



content

Based on this code, the JavaScript file should be loaded first due to the hierarchy. That's not ideal because the CSS File is almost certainly more critical than the JavaScript code.

The easiest way to solve this is to add another line of code like this:

This tells the browsers to prioritize them CSS File via the JavaScript file, regardless of the hierarchy.

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.

14 wprocket cdn

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".

15 short pixels

If you find these to be of poor quality, go to Settings and change the Compression Type to Glossy or Lossless.

16 short pixel compression

The results

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:

1 page speed insights slow

Before optimization.

Quick insights in 3 pages

After optimization.

And here is the same from GTMetrix:

18 gtmetrix before

Before optimization.

17 gtmetrix according to

After optimization.

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%.

4 site audit fast

Final thoughts

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.

Comments are closed.