A Guide to Speeding Up Your WordPress Site (Updated 2020)
Need for Speed.
Slow loading sites are frustrating for everyone. The last thing you want is to lose traffic because of how slow your site loads. It is becoming more and more important with mobile traffic and search engine rankings to make your site optimized for speed. Here is a guide that I think will help you optimize the speed on your WordPress site.
WordPress Hosting – you get what you pay for
People commonly ask us how to increase their sites loading speed. They come frustrated and upset that their site is not faster. While there are always things you can do to increase the speed of your site, most people expect their low-end “value” servers to perform with lightning speeds, however, it needs to be said up front that you cannot get that with cheap hosting. If you’re stuck with cheap hosting there are some options to help improve your speed with things like cloud caching (see below), but it’s important to have expectations that match your host.
I want this post to focus on steps you can take to improve your site regardless of who your host is, but it is crucial to be clear from the beginning that your results will be highly affected based on the hosting you have. If you need to find a new host check out our post on “How to choose the right host for your WordPress site“. If you need a quick recommendation I will just suggest a few that I think is are good options: Cloudways, Kinsta, and Liquid Web. Just remember, with any host if you get the cheapest plan possible… well, you get what you pay for.
Optimize Your Plugins – think minimalist
A common issue that I see from all types of sites is what I’ll call plugin overload. However, let me be clear I’m not saying just a lot of plugins active on a website, a specific number isn’t a clear sign of anything. It’s that there are 40+ plugins and 15 of those are not even being used. There are several reasons where 40+ plugins might be necessary, but in most cases, that is way too much. However, there is no reason to load 15 plugins that you are not using. Think minimal and quality when it comes to plugins. There is no perfect number, so here are some tips to help you limit what you have installed and choose the best quality.
Plugins Tip One: If you don’t know know what the plugin does then you probably need to deactivate it.
Unless you have a developer who is setting up your site and they are installing plugins for you, you should know what all your plugins do, and you should have weighed out the pros and cons of whether or not you need to have them installed. Some people get excited about trying plugins out, and they install too many too quickly and then forget what each does and whether they actually need all of them. Don’t be that person. Testing out plugins can be lots of fun, or can be out of necessity as you try to accomplish something but when the testing is over make sure to deactivate the plugins you are not going to be using.
Plugins Tip Two: Don’t have two plugins installed that do the same thing.
I commonly see this on people’s sites. For example, a user downloads one social sharing plugin and for whatever reason decides it’s not doing everything they want, so they go and download another one without deactivating the first. Don’t be that person. If you are moving on from a plugin for another one that does similar things, make sure to disable/delete the one you no longer want to use
Plugins Tip Three: Don’t just install any plugin you find titled with the feature you want.
A common mistake some people make is to search for a function or option you want and download the first plugin that sounds like it may accomplish your need. Don’t be that person. Do the research when looking for a plugin, try multiple ways to search for something, so you get different results to access. Read through each plugin’s description to understand all that it does, and consider how that might impact your site. Read reviews, look at active installs, and the last time the plugin was updated. It’s essential to get a full picture of a plugin before you install it and spend your time trying to make it work on your website. Doing this will save you time and keep you from installing poorly coded and slow plugins.
Images for Web – balance compression and quality
I am commonly asked, “what size images should I use?”, which can confuse. There are two things to consider when it comes to image sizes. First is the image dimensions, for example, the size in terms of pixels used. The second is file type/compression, for example, the size of the file in kilobytes.
Image Dimensions:
In terms of strictly referring to dimensions, there is no one perfect dimension size because there is no one use for images on a website. Naturally, your logo would be a different pixel size than a fullwidth background image you are using for a content area. But, before we get to a general guide for common uses and sizes, it’s critical to talk about pixels per inch (ppi).
Pixels Per Inch (ppi):
In as simple terms as possible, some screens have more pixels per inch than others, which means that an image that appears crisp clear on a standard screen may be blurry on a high definition screen. Almost every mobile device uses high definition screens, some with more pixels than others. It’s also increasingly common for laptop and desktop users to be on a higher than standard screen resolution. What this means is that you need to upload images at a larger pixel size then you may initially think. For example, if your logo shows on your page taking up 100px in width and 100px in height, you can’t just upload an image that size because on HD screens it will appear pixelated. You need to upload an image at least twice the size of that space.
General Dimension Guidlines
If the image is a general image that you are going to use in a post, gallery, product or in multiple places on your site I suggest uploading around 2000px by 2000px in dimensions. Larger then 1600px by 1600px but not larger then 3000px by 3000px. That is a good size if the image is opened in a Lightbox, yet it is not too large. In most cases (like a gallery) there will be a resized version delivered that is specific to the needs of that page (like the gallery thumbnail size). And that is why uploading the larger image is best because it gives you a lot of quality to work with and smaller versions of the image will be created for when the image needs to show in smaller dimensions.
If the image needs to be the full width of the screen (for a slider or background) then I suggest 2400px wide.
Need to get a bunch of images ready for web?
A tool that we have come to love is imageresize.org. With it, you can upload your images in bulk and resize and compress them all equally, and all from the same place! Click on “Bulk Resize” in the header, then upload your images.
Next, you can resize, optimize, and save. Just a few seconds later your newly sized and compressed images will be ready to download!
Image file Compression for Web
Choosing the right file type:
First things first, what type of file should you use? Because there are a lot of different things that weigh in here, I will give you some simple general advice. If you’re interested in getting into the details and the “nitty gritty” of file types for web, check out this post.
Simple Rule: If you need transparency in your image then use PNG. If you need animation in your image then use GIF, otherwise, use JPG.
It is a simple rule that isn’t always perfect, but it’s a good starting point.
For those wondering about WebP images and how to implement them I suggest you upload as one of the above file types and if you want to add WebP images for the browsers that can read them then it’s best to have a plugin create those files for you from the JPG image. We’ll cover options for this as you read on.
Compress your images for web:
If you’ve not yet uploaded images to your site then I recommend you compress your images before you upload. I like using http://compressjpeg.com/ when I just need to compress something quick. It’s a free online tool that allows you to upload images and then download them compressed. This saves tons in terms of file size and as a bonus, it is easy to use. Another option if you want to also resize image dimensions at the same time is imageresize.org.
Regardless if you’ve already uploaded or not, you need an on-site optimization plugin. WordPress creates multiple cropped and resized versions of your image on upload, and each version needs to be optimized not just the full size, so it’s not good enough just to optimize the image you upload.
There are several useful plugins for this, and I recommend Optimole or ShortPixel Adaptive Images. Both plugins do all the optimization through an off-site CDN which enables you to deliver perfectly compressed images to your users without the need to do any processing on your site. This type of service comes with several advantages, like getting to use a CDN, having built-in lazy load support, and a much more advanced way to make sure your images are the right pixel size and density for each screen that views it.
Just take note that both have limited free plans if you don’t have a ton of photos or you can swing small budget for this then they are amazing, and a must add.
If you need a free option that isn’t limited to a number of image variations check out Robin image optimizer this will allow you to optimize all the images on your site.
WebP Images
WebP is an image format created by Google that allows for more compression than other image formats. All browsers do not support these, so it’s best to have these added in based on the browser. The best way to accomplish this and support caching is to use a service that can deliver these optimized images from a CDN based on the browser information. Both Optimole and ShortPixel Adaptive Images add this kind of support.
Lazy Load your Images
A very effective way to optimize your site is to lazy load your images. Lazy loading images means the images will only load when they become visible on the screen, which can significantly lessen the initial load time for your site. As mentioned Optimole and ShortPixel Adaptive Images have this support built right in.
If you’re not using those plugins an excellent free plugin that adds lazy load for your images is Rocket Lazy Load. It’s also worth noting that Rocket WP is our favorite plugin for caching and it includes this lazy load feature as well.
Using a Content Delivery Network (CDN) for your images
Content Delivery Networks can help with site performance by moving the burden of delivering images off of your web server and onto a network of servers positioned throughout the world. A viewer to your site then gets all the photos from the closest CDN server, which reduces latency and delivers the images faster to your viewers. As mentioned, our recommend plugins Optimole and ShortPixel Adaptive Images have built-in CDN’s to deliver your pictures.
If you’re not using those plugins, a great free option is Cloudflare, which we recommend using regardless and is mentioned in a little more detail in the last section of this post.
One final note, I do not recommend you use Jetpack. It has a built-in CDN and Lazy load option in its settings. I have been thoroughly unimpressed by it. I’ve answered support questions from thousands of users over the last seven years and I can’t even begin to count how many times people’s sites have broken, or images fail to load because of Jetpack’s image options. I realize others have a great experience with it. I’m only saying that I don’t recommend you use it based on my experience and others that I’ve helped.
Site Caching – it’s critical for optimizing your site.
Caching can be challenging to grasp, but with a little bit of understanding and implementation, it can significantly improve the performance of your site.
In simple terms caching for a WordPress website can be thought of as three types that all need to be enabled and working for optimal performance. Those three types are Browser Caching, PHP/Server Page caching, and Object Caching.
Browser Caching
Web browsers (for example Chrome and Firefox) will keep a copy of the assets loaded from a web page. Then if you revisit that web page it will use that copy rather than downloading a new copy. A simple example of this is a web site’s logo. Once a user loads the first page of a website, a copy of the logo can live in their cache. When the user navigates to the next page, that logo will show faster because it doesn’t need to be re-downloaded but instead gets shown from the cache.
PHP/Server Page Caching
WordPress uses server-side code to gather all of the information from the database, theme, and plugins to output for a specific page. It runs through a long list of processes to determine all of the html for a page. For example, in human language, it could look like this: “is there a logo?” then “where is that logo?” then “what size is that logo” then “output the html for the logo”. PHP/Server Page caching copies all of the final outputted code. Then the next time someone comes to the page, your site doesn’t need to reprocess anything, and it just responds with the cached HTML.
Object Caching
There are situations where you can’t enable PHP/Server Page Caching for areas of your WordPress site. For example, the admin area of your WordPress site or an e-commerce website that has pages or areas where the content needs to be specific to the visitor and not cached. Consider an online stores checkout and how that needs to show the current visitors desired products and not someone else’s from a cache. Object caching can help in these cases because it can cache responses from the database, which is usually the slowest part of the server processing.
Now that you have a little understanding of caching, hopefully, you can see how useful it is to help speed up your site. Thankfully you do not need to understand all of caching to be able to use it on your website. There are two plugins I recommend that can help you get started.
Premium – WP Rocket
If you can swing the price of wp-rocket it is much easier to set up, comes with some bonus options and they have great support.
Free – Cache Enabler
Minify – optimize your scripts
Minifying removes empty spaces in the code and changes code to make it as short and small as possible. Compressing ( minifying ) your assets and html is a great practice and should be done on your site to increase performance. If you are testing your website before and after you, likely won’t see a significant impact on your overall page load, but any little bit helps. For some sites with lots of scripts, it can make a noticeable difference.
Deferring Javascript, optimizing CSS.
A suggestion you might see from Google page speed or another performance testing site is to:
“Eliminate render-blocking JavaScript and CSS in above-the-fold content.”
Render-blocking Javascript or CSS occurs by default and isn’t an error even though you can change it. For a browser to show a webpage, it has to first render all of the html on that page. While processing the html, if the browser encounters a script link for a javascript or CSS file, it has to request that file and wait for it to download, then execute the data before it can proceed on with the rest of the page. If the script isn’t needed in the initial page load, it’s suggested that you delay loading it until all the html is processed by the browser. This allows the page to be displayed faster.
You should load javascript deferred and ideally load CSS optimized so that only the CSS that styles the top of your page is loaded render-blocking. However, you may be running plugins that need javascript to be part of the initial load and turning on deferred will break your page. Also optimizing CSS can be tricky even for the best plugins. So it’s best to do lots of testing.
WP Rocket has powerful minify and deferring options and built-in. The plugin can create optimized CSS files that initially and deffer your main CSS.
For a free option check out: Fast Velocity Minify.
Test, test, test
There is not one perfect setup. Some plugins will work well with servers, some simply will not. It is important to test your results, especially as you’re enabling caching options. I recommend using Pingdom tools to test your page speed.
It is important that you click “settings” and choose a “Test from:” location. Choose one that is closest to you as a good starting point and to keep the test more accurate, then see how your site does throughout the world.
There are many speed test options out there all with different ways of scoring your site. I suggest almost ignoring the scores you get. Focus on the important thing and that is page load time. If you run Amazon through Googles page speed test the score won’t be that great, but that does not mean that Amazon has a slow site.
Firewall with Cloud Caching and other security benefits
If you’re looking for a really complete option and you have the budget for it, I highly recommend a firewall with cloud caching. The site speed can be massively improved. It is also a really good security option. Here are a few services:
