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 effected based on the hosting you have. Instead of getting into all the hosts that I really don’t like, I will just point to two that I think is are good options: FlyWheel and Kinsta. Just remember, with any host if you get the cheapest plan possible… well, you get what you pay for.
Optimize Your Plugins – t
It is always surprising to me how many people run over 40 plugins on their sites and 15 of which are not being used at all. There are several reasons where this might be necessary, but in most cases, this is simply way too much. Think minimal when it comes to plugins. There is no perfect number, so here are some tips to help you limit what you have installed.
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 if they really need all of them. Don’t be that person. Testing out plugins is great and lots of fun to see all the amazing things you can do 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 in peoples sites. They downloaded one social sharing plugin and for whatever reason decide 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 deactivate the one you no longer want to use.
Here I would like to make a note to about plugins that are recommended or bundled with your theme. Many themes (Kadence Themes included) offer an admin page or some onboarding with bundled or recommended plugins. This is to help the theme users get the most out of the theme and the plugins it’s optimized for. It’s a great thing BUT just because it’s recommended or “bundled” does not mean you need to install and use it. It means you can install and use it if you need it. For example, our themes recommend our free WooCommerce Extension and make it really easy to install from the getting started admin page. But if you are not building an online store then you should not install it. Also, our themes (and many others) have recommended page builders, and just because we list three plugins that are great options (if you need a page builder, most people don’t because of the new block editor and Kadence Blocks), it does not mean you should install all three. We try to make all this clear in our themes getting started admin page but it seems appropriate that you be aware of this and consider what plugins you installed and if they are needed when you activated your theme.
Images for Web – balance compression and quality
There are two things to look at when it comes to images. First is the image dimensions (how large in pixels size). The second is file type/compression (how large in file size).
I am commonly asked, “what size images should I use?”. Now I am assuming you’re going to read the next part about file size where you determine file type and compress the file. So for this, “size” is referring to the dimensions of the image. The problem is that there is no solid answer to this question. It completely depends on where you plan on adding the image and how you want it to display on your site. For example, if you plan on adding a fullscreen slider then you need a larger image. Makes sense, right? However, if you’re just wanting to add a logo in the top right of your site, well, that takes a much different size.
Below is a quick guide as something you can follow which will get you in a safe place and a good starting point for setting up your image dimensions.
If the image is a general image that you are going to use in a post or gallery or even a product I suggest going for something around 2000px by 2000px for the dimensions. 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 cropped 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. The height would be set based on where you are adding. For example, if you’re adding a slider and you’ve set the slider height to be 600px then the image height should be that.
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.
How to compress your images for web:
Before uploading your images you should make sure to use good compression techniques. 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.
But I don’t suggest you stop there, and if you have already uploaded all your images and are reading this don’t worry, there is a great plugin for on-site optimization and it will improve the compression for all the images you upload as well as all the resized images WordPress creates so in every situation your image can be compressed and optimized. You can find more information about using an on-site image compression plugin in our post that takes all this into further detail. There you can also read about how to implement WebP images using the suggested Shortpixel plugin.
Lazy Load your Images
A really powerful way to optimize your images is to lazy load them. This means the images will only load when they become visible on the screen. This can significantly lessen the initial load time for your site. WP Rocket has a free lazy load plugin you can test with: Rocket Lazy Load
Site Caching – it’s critical for optimizing your site.
Let’s start by explaining the two main caching types in the most simple terms.
Browser Caching – Web browsers will keep a copy of a web page once you’ve visited that page. Then if you re-visit that page it will use that copy rather than downloading a new copy. This can also be done with specific items such as images. For example, if you load the logo on the first page your browser can have a cached copy to use on the second page so it does not have to be re-downloaded.
PHP Page Caching – WordPress uses server-side code to gather all of the information 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 “is there a logo?” then “where is that logo?” then “what size is that logo” then “output the html for the logo and its size”. What page caching does is it copies all of the final outputted code so the next time someone comes to the page it doesn’t need to reprocess anything, it just outputs that cached page.
Caching is complex and way more involved than just that, but hopefully, you can see in those simple terms how useful it could be to help speed up your site. Thankfully you do not need to understand all of caching to be able to use it on your site. There are two plugins I personally recommend.
Premium – WP Rocket
Free – Cache Enabler
Both plugins have different setup options. If you can swing the price of wp-rocket it is much easier to set up and they have great support. Either way refer to the plugins docs and your hosting provider for the best settings based on your server and site.
Minify – optimize your scripts
WP Rocket has a minify option built in that you can test with along with non render blocking. Some plugins don’t work well with minify enabled so you have to do the testing.
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: