WordPress Tutorials

The Complete Guide to Optimizing WordPress Site Speed in 2021

Building a WordPress website seems simple enough, doesn’t it? You purchase hosting, get a domain name, and install WordPress. With so many great themes and plugins readily available for WordPress users, you could realistically get the site built out, designed, and filled with content in a few hours.

For anyone who’s ever thought, “How hard could it be to build a website?”, that’s exactly what they envisioned. However, this leaves out a critical component of the website building process:

Site speed optimization.

The following guide explores all of the ways a WordPress website can and should be optimized for performance.

Why Does Site Speed Matter?

Many years ago, Kissmetrics published an infographic that demonstrated the high expectations consumers have for websites. Namely, a growing majority expected websites to load in a matter of three seconds or less.

In the time since that data was published, though, we have case studies that show how serious this issue has become and what happens when a website fails to optimize for speed or manages to exceed expectations.

Take the BBC, for example:

“At the BBC we’ve noticed that, for every additional second a page takes to load, 10 per cent of users leave.”

Pinterest, on the other hand, has a great example of what happens when you improve site speed:

“The result of rebuilding our pages for performance led to a 40 percent decrease in Pinner wait time, a 15 percent increase in SEO traffic and a 15 percent increase in conversion rate to signup.”

It’s not just news and social networks that can benefit from a boost in speed either. Retailer Zitmaxx Wonen shows what happens when a website is specifically optimized for the mobile user:

“Zitmaxx Wonen achieved a maximum score of 100 on PageSpeed Insights, and a load time of 3 seconds on Test My Site… In addition to improving speed and accessibility, key business metrics have also improved since the launch of the updated mobile site: mobile conversion rates are up by 50.2%, while mobile revenue has increased by 98.7%.”

When you improve the on-site experience and improve your engagement rates, your website’s search ranking will be directly impacted as well. If you can demonstrate to Google that you have a well-built, well-written, and super fast website, it’ll be greatly rewarded in search results.

How to Measure Your WordPress Site Speed

If you haven’t built your WordPress site yet, there’s nothing to do just yet in terms of testing for site speed. Once the site is done, though, you can run it through one of a number of tools to see how well you did to optimize performance.

Thankfully, there are a bunch of free website speed test tools you can use to do this. Google, of course, has its own, so you may want to start there just to get a sense for how fast Google interprets your site to be.

This is Google PageSpeed Insights:

Just enter your domain name (or a page you suspect is running more slowly than others) into the field and click “Analyze”.

Google will then spit out a bunch of data regarding how quickly your site loaded for Mobile and Desktop. Be sure to click through both tabs to explore how well your site performs for your different audiences.

Then, scroll down to see how you did in terms of optimizations.

Other site speed testing tools will produce similar reports. That said, it’s still a good idea to run your website through at least two of them. Here’s GTmetrix, for instance:

Unlike Google that splits out mobile and desktop speeds, GTmetrix splits out tests with results and recommendations from PageSpeed Insights and YSlow.

You can also check the waterfall analysis to see which specific parts of your site are causing the most drag on site speed.

Needless to say, there’s a lot to take into consideration here. Your goal, however, should be to find the site speed testing tools that work best for you and that provide suggestions in a way that make sense.

Optimize Your WordPress Site Speed in 2019

A lot of what those website speed testing tools recommend is going to look like technical jargon, which is okay. For many of these optimizations, you don’t actually need to know how to code the backend of a website.

With this list of 26 site speed optimizations, you’ll see that most of this can be done with WordPress settings, plugins, and reliable web hosting.

#1: Web Hosting

Before you do anything else, take a look at your web hosting. If your website isn’t sitting atop server infrastructure from a reliable web hosting company, that might very well be the source of your site speed issues.

Things you want to look for when evaluating the quality of your web hosting plan are:

  • SSD storage
  • PHP
  • Apache
  • Server-side caching
  • Nginx
  • Load balancing

Another thing to look for is where their server facilities are located.

Take, for example, managed WordPress hosting from Flywheel:

They have a number of data centers all over the world. Some WordPress hosting companies, however, aren’t as transparent about where websites are served from, which can be problematic if the server is too far away from your target visitor. It’s not just a heavy site that can hurt speed; physical distance can, too.

So, if your web host doesn’t have information available about where their servers are located or you’re nervous that your site is being served from one too far away, reach out to their support. They may be able to put you on a better plan or move your site to a closer server.

#2: CDN

Now, if you find that your web hosting is fine enough as is, but site speeds are still hurting, your next move might be to purchase a content delivery network (or CDN). In fact, if you’ve built an e-commerce website and you’re hoping to reach a global audience, this shouldn’t be a debate. You most certainly need a CDN.

A CDN is sort of like web hosting, except that it cannot live on its own. You have to layer a CDN on top of a web hosting server. It then magnifies your server network, so you no longer have to worry about vast distances separating your visitors from where your website lives on the server.

So, let’s use the example from Flywheel. There are seven server locations from which a website may be hosted, in North America, Europe, and Asia.

Here’s what happens when you add a content delivery network like the one from Cloudflare on top of that:

Your website then lives in over 165 data centers simultaneously — and on all continents. This means that someone trying to buy your products in Russia wouldn’t have to wait anymore for a server in Singapore or Amsterdam to deliver your website. The distance would greatly shrink and your global customers would see your content exponentially faster.

Before you go researching a CDN, though, check with your web hosting company to see if you can get one added to your plan. Many shared hosting plans include a free CDN add-on option. And most hosting companies will at least offer a CDN as an upgrade while also taking care of installing it for you.

#3: Caching

Notice how there’s a lot of emphasis placed on the physical distance between hosting servers and visitors. However, that’s not the only thing that slows down a website’s loading times.

Your website accumulate lots of files over its lifetime. Files for page content. Files for each image. Files for all of the code. And so on. The larger a website becomes, the more processing power is needed to handle it all.

This is why caching is an essential process for every website.

What caching does is save a static HTML copy of a web page and deliver that to visitors instead of the dozens or hundreds of files it would otherwise have to process. As you can imagine, this speeds up loading times on your visitors’ browsers a great deal.

Plus, so long as the content remains unchanged, the cached page will continue to be sent to visitors’ browsers over a set time period. If you’ve built a website that doesn’t change on a daily basis, caching is incredibly helpful in keeping speeds high.

In terms of how to implement this, you’ll need two tools:

1. Your web hosting plan needs to include server-side caching. If there’s no mention of “cache” or “caching” in your features list, it’s time to find a new one.

You might also want to see if your host offers Varnish caching. This is a caching mechanism that lives at the HTTP-level, so it works like a reverse proxy. Basically, it reviews traffic before it has a chance to hit your web server and scales up your resources to ensure you can properly handle all of it.

Needless to say, this is really helpful for e-commerce websites and others with large amounts of traffic.

2. A WordPress caching plugin will take care of the other types of caching:

  • Browser – This encourages your visitors’ individual browsers to hold a copy of the web page in case they return to it.
  • Page – This caches a website on a page-by-page basis. When individual pages change, the cache clears and starts all over again.
  • Gravatar – If your blog accepts comments from Gravatar users, the loading of their avatars takes time, so this type of caching stores that content for repeat commenters.
  • Object, Fragment, Database, and Memcache – There are pieces of data behind the scenes of your website that benefit from caching as well. Some plugins give you full control over these caching options.

This is an example of caching controls from W3 Total Cache:

Activate your plugin, configure the cache settings you want to use, and then leave it to do its job. There’s nothing to manage here.

One of the other benefits of using a WordPress caching plugin is that they typically include other performance optimizations. We’re going to talk about them next.

#4: Minification

All of the code that sits behind your website takes up space and processing power on your server. While writing lean and clean code is important for keeping a WordPress website as lightweight as possible, you can only go so far with it.

Thankfully, many WordPress caching plugins include an option for minifying your HTML, CSS, and JavaScript files.

This effectively compresses your files down to a more reasonable size.

#5: Combine Code

Compressing the size of your JavaScript and CSS files isn’t the only thing you can do. You can also combine all of your JavaScript files and all of your CSS files into a single file. WP Fastest Cache is a caching plugin that makes it really easy to do this.

#6: Gzip Compression

Another form of compression is called Gzip compression.

Instead of just looking at your code, though, Gzip compression compresses content files.

If you have a website that updates frequently, these kinds of compression and file combination techniques help improve loading speeds even if the page can’t be cached at the moment.

#7: HTTP/2

As it turns out, the original HTTP protocol (now known as HTTP/1) wasn’t as efficient as it could have been. In recent years, HTTP/2 was released as an improvement to HTTP/1:

“HTTP/2 enables a more efficient use of network resources and a reduced perception of latency by introducing header field compression and allowing multiple concurrent exchanges on the same connection… Specifically, it allows interleaving of request and response messages on the same connection and uses an efficient coding for HTTP header fields. It also allows prioritization of requests, letting more important requests complete more quickly, further improving performance.”

As more and more consumers and businesses flock to the web, it’s become absolutely critical that we all make the switch to HTTP/2.

That said, there isn’t really anything you can do to make this switch, other than work with a hosting company that automatically places its websites on this modern and fast protocol.

Bluehost is one such host that does this:

#8: Server Tech

There are a number of pieces of technology and software on your server that require regular maintenance.

PHP, for instance, is the scripting language used by the majority of websites today. According to W3Techs, 79% of the web currently uses PHP:

Like other web technologies, though, it’s not enough to use any old version of PHP. Your WordPress website should always use the latest and greatest version of PHP. This ensures that you’re making the most of your performance optimizations.

If you’re unsure of which version your WordPress website runs on, check inside your control panel for details. For instance, Bluehost not only provides a snapshot with this information, its WordPress control panel lets users upgrade if they’re not using the latest version of PHP.

Apache is a web server software commonly used by web hosts. Like PHP, it needs to be updated to keep server performances high. This, however, you don’t have control over. Instead, you’ll want to make sure you’re working with a web host that prioritizes the optimization of its Apache servers.

For example, Bluehost recently informed customers that it was doing just that:

One other piece to keep updated is your server database technology.

If your website is on shared or cloud hosting, you probably won’t be able to upgrade your MySQL or MariaDB. You should at least be able to confirm which version your WordPress website is using though. If the information isn’t available in your control panel, reach out to your web hosting support and inquire about upgrading the tech.

#9: WordPress Updates

With the hosting stuff out of the way, it’s time to look at what more you can do inside of WordPress to speed up your WordPress website.

The first place to start is by creating a system for managing your WordPress updates.

As you can see in the image above, your WordPress dashboard will let you know as soon as updates are available to:

  • The WordPress core
  • Installed plugins
  • Installed themes

There’s a number of reasons a developer might push an update out for their WordPress software. It could be to fix a bug or security issue. It could be to add new features. Or it could be to improve performance problems. Either way, you want to have a process in place that ensures you stay on top of issuing these updates when they’re ready. WordPress will take care of the most critical security updates for you, but it’s your responsibility to handle all of the rest.

You have two options in this case.

The first is to manually make the update from your WordPress dashboard like so:

Or you can use a tool that automates the process for you. There are WordPress plugins like Easy Updates Manager that enable you to automate all updates.

Just be careful. While it may save you time from having to check on updates and do them yourself, there is a small possibility that a future update could prevent certain features from working or break your site entirely. If you can, it’s best to manage these on your own.

#10: WordPress Theme

The quality and size of WordPress themes can be problematic for WordPress, too. While WordPress does vet the quality of code before it allows a theme to show up in its repository, there’s a reason why plugins and themes are frequently updated.

Now, unless you’re a skilled coder or theme developer, it’s not likely that you’ll be able to poke around the theme to assess its quality. However, you can use two things to help you make this judgment.

The first is user reviews. They are available in the WordPress repository as well as in theme marketplaces like ThemeForest. Grab a handful of reviews and see if anyone has had problems with the theme slowing down their website. If so, find another one to use.

Also, look at what comes with the theme. For example, there are some premium themes that come jam-packed with templates, plugins, builder tools, and add-ons from third parties. If you don’t have a use for them, you shouldn’t install a theme package of that size on your server. It’s a waste of space and a drain on your resources. So, choose wisely.

#11: Mobile-friendly Design

These days, it’s near impossible to find a WordPress theme that isn’t responsive in design. That said, you still have a responsibility to your mobile users to customize your website in a way that’s mobile-friendly.

If you go back to the speed testing tool, you’ll see that the same website will register different scores for desktop and mobile. That’s because mobile can’t handle websites the same way the bigger screens on desktops can.

As such, if you want to ensure that speeds are high across all devices, you’ll need to create a custom design strictly for mobile users. This means cutting down on nice-to-have-but-not-necessary design elements or sections (like pop-ups or ads), reducing the numbers of images used, and making pages shorter.

While you can’t do this with WordPress alone, you can do this if you use a page builder tool.

For instance, this is where Elementor gives designers the option to hide certain elements from mobile users:

In addition, page builders give you the ability to test your designs in mobile previews:

This gives you a chance to take the website for a spin as a mobile user and see if there’s any part of the page that doesn’t load quickly or if the length itself is too much for such a small screen.

#12: WordPress Plugins

WordPress plugins are great because they help even the least tech-savvy user build advanced features into a website. But plugins suffer from similar performance issues as themes, which can make it tricky to use them.

Here’s what you need to do to confirm your plugins won’t hurt speed:

  1. Always check the reviews of any plugin you want to use. Again, if there are known performance issues, plenty of people will have chimed in already.
  1. See how many people have installed the plugin. If there are under 5,000 users, you might want to find a more established replacement. This doesn’t mean that newer plugins aren’t worth trying out. However, it’s a big risk to take if you don’t know how the plugin affects site performance.
  1. Only use the plugins you absolutely need. If any of them overlap in terms of functionality, get rid of one of them. The fewer plugins you have installed, the better.
  1. Look at your web host’s list of banned plugins. Here’s a snippet of Kinsta’s list:

Sometimes plugins appear on these lists because the host know the plugin to be bad or outdated and they don’t want users to unknowingly taint their website with it.

There are also some plugins that tend to be a huge drain on websites because of how many external scripts they call (e.g. plugins for external analytics or social media have issues with this).

There are other times when a plugin will do the same exact thing that your web hosting does, which makes the plugin unnecessary.

So, see what your web host says if you’re on the fence about a plugin.

#13: Unused Software

Schedule time in your calendar a few times a year to review your list of themes and plugins.

Are there any that are installed, but not activated? Unless you have plans to use them tomorrow, they shouldn’t be sitting there, taking up space on your server.

Inactive plugins and themes also require updates just as your active ones do. So, that means that if you fail to update them when there’s a known performance or security flaw, you could be putting your site at risk.

To keep this from happening, go in and delete any plugins or themes you’re not using.

#14: Database

While we’re on the subject of cleanup, your database could use some cleaning too.

Every time you install a new plugin or theme, add a new user, receive a new comment, and so on, your database logs it. And each of these files add up. To keep your web server from having to process each and every one of these, you should keep your files clean.

When you work on your scheduled plugin and theme cleanup, make some time for this as well. All you have to do is install a database cleanup plugin like WP-Optimize.

It will go through and clean out unused or unnecessary data while also optimizing the rest of your database for speed.

#15: Unused Content Files

Another place that’s going to need ongoing cleaning is your content:

  • Posts
  • Pages
  • Media
  • Comments
  • Projects
  • Categories
  • Tags
  • Products

When was the last time you looked through your content?

There may be old drafts you won’t ever publish. Or really old, outdated content that serves no purpose today. Comments, categories, and tags can get especially messy if you don’t keep an eye on them.

Users fall into this category as well. Go through your user list and make sure only the people who should have access to the site still do. The rest can be deleted.

#16: WordPress Blog

Upon setting up a new installation of WordPress, there are a number of default settings for the page where you display your posts (your blog or home page). This is how WordPress sets it up for you:

If left as is, your posts page will become excessively long as each of the 10 posts would need to load in full.

Instead, you should adjust these settings to a reasonable amount. A limit of 5 to 8 post summaries would work well.

#17: Post and Page Revisions

Every time you hit the “Save” button on a page or post, it saves a copy of the old version on your server. You can override this setting and put a limit on how many revisions are saved, but it requires some coding in the wp-config.php file.

If you’re not comfortable doing this, you can use your database optimization plugin (WP-Optimize or WP-Sweep) to clean out excess revisions every couple of months.

#18: Comments

In general, comments in WordPress aren’t lengthy discourses. However, it’s not really the size of the comments that matters to performance. It’s the quantity of comments each of your posts receives.

Similar to how you use the Reading Settings to break up long post pages, you want to use the Discussion Settings to break up lengthy comments sections:

By default, WordPress will leave comment boards open for 14 days and store 50 comments on each page. That’s too much.

Update the timeframe to keep comment submissions under control — this will also encourage readers to comment on topics that are timely instead of ones that are old and out of circulation.

Reduce the total numbers of comments allowed per page to 10.

One last thing to do here is disable pingbacks and trackbacks. These are notifications you receive when someone shares a link to your blog on their website. They might seem necessary, but they just add more data to your server. Instead, set up a Google Alert if you want to stay on top of who’s mentioning your brand or website.

#19: Image Resizing

Images are one of the worst offenders when it comes to compromising website performance. But they don’t have to be.

The first thing to do to get your images under control is to resize them before uploading to WordPress.

Image resizing will reduce the dimensions of your image to one that better fits your website. That way, if your site automatically sizes images to 150 px, 300 px, and 1024 px wide, you won’t be wasting processor power on resizing.

You can use any number of tools to do this. Your design software can help, though free image resizing tools work just as well.

ResizeImage is a good one to try. It also allows you to compress your images and convert them to other file types.

#20: Image Compression

Image compression, on the other hand, shrinks down image file sizes. This way, the server can more efficiently process and deliver the image to your visitors’ browser screens.

You can certainly run images through an online image compressor tool, but there are a number of image optimization plugins for WordPress that will automate this for you.

Here’s an example of what the free Smush plugin can do:

#21: Lazy Loading

If you’ve ever spent time looking at a heat map or screen recording of your website, you may be surprised by how few people actually make it all the way down your pages. If you have images at the bottom, though, your server is still going to take time to load them which may end up being a waste of resources if no one sees them.

That’s what lazy loading is for.

Essentially, your server stops loading all image assets the second someone arrives on a web page. Instead, it only loads them as the visitor scrolls down to those parts of the page; thus, conserving your resources and speeding up loading times.

The WP-Optimize plugin has a setting that allows you to turn this on.

#22: Hotlinks

It’s always great when someone likes your site enough to link back to it. What’s not so great, though, is when they like your images so much that they decide to pull them directly from your server.

To clarify, this doesn’t mean someone right-clicked an image from your site and saved it to their drive. Or that they took a screenshot. This means that they’re using a link to the image file on your server to load it on their own website. So, whenever someone views the web page where that hotlinked image lives, your server has to do the work of loading it; not theirs.

To prevent this from happening, disable hotlinks using your security plugin.

#23: Videos and Audio Files

Video and audio assets tend to be much heavier than images. Although your website might not use as many of them, they can still cause serious issues for your site speed if you don’t add them to a page wisely.

Unlike images that can be uploaded as media, all video and audio files should be stored on an external drive.

One of the most common ways to do this is to upload videos to YouTube or Vimeo and them embed with a shortcode on the page. This way, when the page loads, your server doesn’t have to worry about pulling that video asset up. The video storage service does all of the work.

With drag-and-drop builders — including WordPress’s new Gutenberg editor — all you have to do is add a block for video or audio and then provide a link:

#24: AJAX Cart Fragments

There are a number of ways in which our plugins create extra work for the server. As already mentioned, plugins like analytics and social media make regular requests to external services which requires your server to work repeatedly to process those updates.

The same thing happens when you leave AJAX cart fragments enabled in WooCommerce.

When enabled, users immediately see their new item added to the cart icon in the corner of the site. While it’s a nice feature to have, e-commerce sites with lots of activity and sales are going to put their servers into overdrive if they leave them on.

Instead, turn off the AJAX cart fragments and enable the redirect option. This way, your shoppers won’t be confused if the new item doesn’t show up in the cart. They’ll be redirected to the cart page where they can see it for themselves.

#25: User Data

Whether your website gathers user data from e-commerce gateways, contact forms, reservation tools, or something else, it’s a good idea not to store that user data on your WordPress site and server.

This is true both for the performance side of things as well as the security piece. By keeping user data in a remote and secure location, you’ll conserve space on your server while also keeping it out of harm’s way if a hacker were to find their way inside your site.

#26: Security

There’s another way in which security and performance intertwine.

When talking about Varnish caching, I noted how it worked as a reverse proxy. Security firewalls work in a similar manner. They sit on top of a server and website, reviewing visitor requests as they come in. If a noted hacker is detected or the firewall otherwise suspects the intent to be malicious, it will block that user from ever getting to the server or website.

Your brute force protection measures do something similar, except that they keep bad users from entering the login page of your website.

Either way, it’s these kinds of security protections that reduce the amount of bad visitors from touching your site. As this bad traffic is reduced, your server has more power to handle the good visitors, which, in turn, improves your speed.

Speed Rules

It might seem like a lot of extra work to do to optimize a WordPress site for speed (especially after spending all that time designing it), but it’s not as bad as it looks. With a small handful of tools, a reliable web host, and a repeatable process for WordPress performance optimization, you should be able to implement all of these site speed fixes in very little time.

sscacca

View Comments

  • I scanned through this article looking at each headline. I don't see anything about auditing the JavaScript enqueued from your theme or plugins to determine if they are actually needed.

    For example, are you using Contact Form 7 to add a form to your contact page? If you are, did you know that CF7 is adding JS and CSS to every page and not just your contact page? Consider the number of plugins you're running and how many of them are doing the same thing as CF7. Caching and minifying assets that you aren't using seems like a waste.

    So what do we do about it? Well, you need to understand exactly what each plugin you've installed is repressible for. If it's a slider or a contact form plugin, that's pretty easy. You should be able to determine on a page by page basis (or even for a specific page template) whether or not we need to load assets for your slider/contact form plugin.

    Then, we need to remove it. Sometimes this means manually dequeueing the script from your functions.php file (CF7 provides instructions on how to dequeue their JS and CSS), or digging into the settings of your plugin (some provide conditional loading settings), or using an asset manager plugin which provides a GUI for selecting scripts to dequeue based on the page you're currently editing.

    I run 2-3 WordPress optimization audits for clients every month, and this is always a huge step when caching and magnification just isn't enough.

Recent Posts

Top 20+ Examples of Real-Life Websites Using the Total WordPress Theme (2021)

Let’s talk about Total, a multipurpose WordPress theme that can be the right theme for…

1 day ago

9 Best Squarespace Alternatives Reviewed & Compared (2021)

Squarespace is a great website builder, no doubt about it - but it isn’t perfect.…

4 days ago

17 Examples of Real-Life Websites Using The Flatsome WordPress Theme (2021)

If you're looking for a new WordPress theme, check out Flatsome. It's one of the…

1 week ago

11 Best Transcription Software Tools for 2021

Transcribing audio files manually is a tedious and time-consuming process. It can also be expensive…

2 weeks ago

How to Add Layer Masks in Photoshop

Layer masks are often considered an advanced tool in Photoshop, when in reality they are…

3 weeks ago

Top 20 Examples of Websites Using the Astra WordPress Theme (2021)

Astra is one of the most popular WordPress themes out there. It’s well known for…

3 weeks ago