You’ve built your website, you’re getting traffic through your analytics but you just aren’t getting the kinds of benefits you’ve expected. Your repeat visitor rate may be low and the time people spend on the site doesn’t suggest interest or engagement.
One possible culprit may be your website speed or loading time.
How long are you willing to wait for a page to load? At what point do you say “enough is enough,” close the tab, and click somewhere else? According to recent studies, a one-second increase in page load time correlates to 7% in lost conversions and sales. That’s not all, they have also found that 40% of people who visit a site will abandon it if it takes more than three seconds to load.
As someone running a website, I can tell you speed has a huge impact! Luckily, there are some things that you can do to combat slow loading times and speed up your WordPress site. Some of these tips are WordPress specific, while others may be used on other Content Management Systems too.
Definitions
Before we begin, there are a few key terms that we will be using throughout this guide. Let’s cover them first.
- Time To First Byte (TTFB): Amount of time it takes for the visitor to receive the first bit of information from your website. This is typically affected by your host and by the amount of code (plugins + theme) that has to run before any information can be sent.
- Start Render / First Visible: When the content of your site first start being visible to the visitor (text is usually first, followed by images).
- Load Time: Load time is how long it takes for your site to be completely loaded, including all text, images, fonts, and scripts.
- Requests: Requests are the number of files that are called and loaded by your site. These can either be internal (hosted on the same server as your site) or external (such as font files from Google). Generally, a lower number of these is preferable.
Benchmarking Your Site
The first step in your journey to speed up WordPress should be to have a starting benchmark for your site so you can measure improvement. These tools will also give you feedback for specific areas to improve on. We’ll be using the following three tools today:
Run your site through each of these, and bookmark the results.
I also strongly suggest taking a backup of your site or working on a staging site if possible. As with any website, there is the potential for causing errors if you are not careful, and a current backup is always nice for peace of mind.
Common Causes for Slow Sites (And Their Fixes)
The hardest part of improving WordPress performance is identifying what is causing the slow down in the first place. Although the tools above will give you some insight into what is slowing down your site, chances are you don’t know how to act on it.
That’s why we compiled some common causes for slow sites and how to address them. If you’re not sure how to speed up your WordPress site then the following fixes are a great place to start.
Optimize / Resize Images and Video
The largest files on websites, and thus slowest loading, are images and videos. There are a few simple tips you can follow to help speed up your site when working with images.
- Resize your images. Look at your site, and see how you are using each image. Is your logo just taking a small corner of your site? Then you don’t need such a large resolution. Open your photo in any photo editing software, and resize to something more appropriate. This can reduce the load time of your page dramatically.
- Compress and optimize your images and videos. Once you’ve resized your images, you can optimize them without losing any quality. There are several free websites to optimize images on an image by image basis, such as compressor.io.
There are also several plugins you can use to handle this automatically. Many of these are free for a set amount per month, and relatively inexpensive afterwards. I personally like the Tiny Compress Images plugin, by TinyPNG, since it also includes compressions from files already uploaded in its free version.
Use a Content Delivery Network
Consider looking into a Content Delivery Network (CDN) if your site has a global reach, to speed up remote loading. CDNs work by placing copies of your static content (images, scripts, and videos) on servers around the world. As visitors come to your site, the assets are served from the server that is closest to them, reducing latency as the files are transmitted.
A free account with CloudFlare is perfect for just starting off, if you expect your site to be read worldwide. If your site is local only, it may actually increase your site load time, so some testing may be needed.
Optimize Your Code and Code Delivery
If your images and videos are optimized, but your site still isn’t as fast as it could be, then it’s time to dig a bit deeper. Next, we’ll look at how your site’s code could be slowing things down. Don’t worry though, you don’t need to know how to code — just follow these steps.
Remove the Bloat
- First, look at the plugins you currently have installed. Are there any that you can do without? If so, remove them. Are there any plugins where you only use a small subset of the features? That’s a good candidate for replacement with a smaller, more targeted plugin then.
- How bloated is your theme? If your WordPress theme has a demo page, run that demo through the testing sites above. If it scores extremely poorly, consider the trade-off of switching to another theme.
- Are there any external sources you can do without? If Facebook loads 15 scripts on your page, is there a way to accomplish the same goal without? Or maybe you want to look at using a locally hosted font file, rather than downloading it from Google each time.
Optimize and Serve Your Content
We’re going to start by combining and minifying our remaining CSS and JavaScript Files. Combining files reduces the number of requests made by your site, and minifying them reduces the size of the files that are required to be downloaded, speeding up your total page load.
To do this, we’re going to install and activate the Autoptimize plugin. When you have it enabled, go to the page under the Options menu in the dashboard, and enable optimization for HTML, CSS, and JavaScript.
You will also want to install W3 Total Cache to allow all script and CSS files to be cached. The simple way to do it is to go into the settings, click on ‘Browser Cache’ and uncheck the box ‘Prevent caching of objects after settings change.’
NOTE: Autoptimize sometimes causes certain JavaScript-based plugins or features to have issues. Do not panic if something stops working once it’s installed, since nothing here is permanent. If this is the case, on the plugin settings page, you can click “Show Advanced Settings”, and then add the files in question to the “exclude” list under JavaScript. This part may take some trial and error. When any changes are made, be sure to click “Save and Clear Cache”.
Next, we’re going to defer JavaScript to the footer. This causes JavaScript to load after the content of the page, so that the user can start reading while the scripts load in the background. For this, we’re going to use the Async Javascript plugin.
Once you have it installed and enabled, you should make sure everything is set to “defer”, and on the bottom, be sure to enable Autoptimize support. The same note applies as with Autoptimize: if something breaks, you can add it to the exclude list. This may take trial and error.
The last step we’re going to take here is to set up a caching plugin. After you have a visitor to your site, a caching plugin builds a static copy of your page. This static copy is served up to future visitors, bypassing all of the source code calculations required and speeding up subsequent page loads. There are many options here, all with their own advantages and disadvantages. I personally like Cachify, where you just install it and activate it, and the default settings work great.
NOTE: Since everything is saved (by default for 12 hours), you will occasionally want to force a cache reload early, especially if you are doing things like editing or publishing articles.
Cachify flushes the cache automatically when you post a page, but when you make an edit, you may need to flush it by clicking the trashcan in the top right end of the admin bar. You can also exclude individual pages from the cache in the Cachify settings page, if you have something that changes often (such as a WooCommerce checkout, etc).
Optimize Your Server Settings
This section is highly dependent on your individual hosting situation. Not all of these options will be available for all hosts. If you are unsure, I would suggest you contact your hosting provider. These will mostly impact time to first byte (TTFB), and some of the options such as gzip and file expiry settings.
If your host cannot answer these questions to your satisfaction, or if you are still getting a slow TTFB (WebPageTest) after completing the other steps, it might be time to consider moving to a new host.
I would ensure that your host is running a minimum of PHP 7.3, or preferably PHP 8 (with a significant speed boost over 7.x). You will want to make sure that gzip is enabled on a server level. There are other options for speeding up your site load on the server itself, using setups such as Varnish caches and other configurations beyond the scope of this article.
If you are using Apache as your web server, you can place (or modify) a .htaccess file inside your main WordPress site folder. You can use that to enable expires headers for all of your site content.
These tell visitors’ computers to not re-download things such as images, scripts, etc until a certain amount of time has passed. This is very useful for things that are not going to change so that subsequent visits load much faster.
Or if you want to keep things simple, upgrade to fully managed WordPress hosting. It’s a larger investment, but your hosting provider will handle all this for you.
Wrapping Up
These are the major issues that can slow your site down. There’s always room for more improvement, but these should get you a good start.
Just a couple of caveats on the speed testing sites that we used earlier:
- It’s often not doable (or even desirable) to get 100% on any particular speed-test site, without severely crippling the features that you want to offer. Instead, shoot for the fastest speed that you can get without sacrificing quality.
- Each of the sites tests different things, and measure in different ways. Don’t worry about the letter grades or percentages. Instead, check and make sure you’ve worked on the categories as much as you can. The parts that really matter are TTFB, Start Render, and Load Time, as these are what the visitor will see in the end.
Want to give your feedback or join the conversation? Add your comments 🐦 on Twitter.
