Need for Speed

speed_post

A Guide to Speeding Up Your WordPress Site

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 google rankings to make your site optimized for speed. Here is a guide that we think will help you optimize the speed on your WordPress site.

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 preform with lightning speeds, however, it needs to be said up front that you cannot get that with cheap hosting. If you’re on a large shared server getting a value price then you need to lower your expectations. If you’re stuck with cheap hosting there are some options with cloud caching (see below), but good cloud caching is not free.

I want this post to focus on steps you can take to improve your site regardless of who your host is, but it is important to state at the beginning that your results will be highly effected based on the hosting you have. Instead of getting into all the hosts that we really don’t like, let me just point to two that we think is are good options. Just remember, with any host if you get the cheapest plan possible… well, you get what you pay for.

FlyWheel

Kinsta

*NOTE we don’t get anything from either host for posting these links.

Also Kadence Themes is going to start offering Managed WordPress Hosting. Click the link for early access.

Plugins; think minimal.

It is always surprising to me how many people run 20-30 plugins on their sites. 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.

Tip: 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 and then forget what each does and if they really need all of them. Don’t be that person.

Tip: Don’t have two plugins installed that do the same thing.

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

Here I would like to make a note to Kadence Themes Premium users- Our premium theme comes with multiple slider plugins that you can use on your site. They are not required and I strongly suggest only using one. Just because you can install them all doesn’t mean you should install all of them unless you have to. Try to limit yourself to use one.

Images; 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).

Image dimensions:

We are 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 1600px by 1600px 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).

If the image needs to be the full width of the screen (for a slider or background) then I suggest 2000px 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.

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.

Compression:

Before uploading your images you should make sure to use good compression techniques. I like using http://compressjpeg.com/ 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.

If you have already uploaded all your images and are reading this there is a great plugin for you that’s free (up to 100mb) and can optimize the images you already have uploaded. See here: imagify

Caching; it’s important.

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 it’s 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 we personally recommend.

Premium – WP Rocket

Free – W3 Total Cache

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. If you are using that option just enable caching and you’re set.

If you’re using w3 total cache then the setup will be a little different based on your hosting. I recommend contacting your host first for the best settings (note* some hosts don’t work well with this plugin). In general, start by enabling page and browser caching on the general settings page of the plugin.

Minify; combining your scripts into one.

Minifying the javascript and css scripts as well as combining them can decrease page load speeds.

Both of the above plugins have a minify option built in that you can test with. Some plugins don’t work well with minify enabled so you have to do the testing.

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.

pingdom_test

 

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:

Sucuri

CloudflareBusiness plan.

 

On a free note:

I have found Cloud Flares free option to be disappointing in terms of speeding up a site, but if you are on a slow host it can make a real positive difference and it’s free 🙂