Let’s say you had a stomach ache you knew a doctor could give you medication for, but you had to wait for 6 hours to get it. Would you go? What it you had to wait 3 minutes for the same results? You’d go if it took 3 minutes, but not 6 hours, right?
Well, people are as impatient when it comes to websites. Even if they know it might be helpful and relevant to them, if your website takes too long to load, they’ll just close the tab and move on.
But it’s not the only reason you should try to make your website faster: it helps you rank higher in Google search results. Just speeding up your website won’t take you to the front page of Google, but it gives you a chance to get there. You’ll still need to do other things like use proper keywords and get links to your website (check out this post about SEO to get more ideas of what to do), but at least we can tackle this one together!
Step One: Check your speed score
Let’s be honest: there are probably a few things you need to fix when it comes to speeding up your website. Nobody’s perfect. Even I’m not! So what’s the best way to know what you have to change to optimize your website? I love using a combination of Google’s PageSpeed Insight and GTmetrix to give me the answer. All you have to do is go to these websites and type your URL. It’ll give you score and we can optimize from there.
Don’t freak out.
Yes, it’ll look confusing. But I’m here to explain everything to you!
Step Two: Optimize your website
If both mobile and desktop are in the green on PageSpeed Insight, you’re fine. You can probably still optimize a little, but getting those last few points to reach 100/100 is extremely hard. You’ll probably need to hire someone if you want to get there.
But if you’re in the red or orange, there are quite a few things you can do to get a better score.
Reduce server response time
The problem is that your server (hosting company) is too slow. You can always email them and ask to be on a server that is faster, but some companies just suck. They put too many people on the same servers, which is like plugging too many things into one power outlet. It just doesn’t work properly, and there’s no way you can fix it. What you can do, though, is switch hosting! If your website has been down a lot or even you notice how slow it is, then it’s time to change. I recommend going with SiteGround! I’m with them, and they honestly do an amazing job at answering all my questions and keeping my website online.
This is a very common problem. When you upload a picture to your website, it doesn’t need to be 5000px wide. It’ll take way too long to load, especially considering that 1200px wide would have done the job. You want your images to fit the size they’ll appear on the screen. If you want the image to be full-width and go from one side of the screen to another, 1920px is as large as you should go. It’ll be big enough for most screens, while still loading relatively fast.
A few images you can quickly optimize:
- Your logo
- Small graphics
- Full-width images
- Featured image
Don’t know what their size on the screen is? Use the Developer tool on Chrome or the Page Inspector on Firefox (Ctrl+Shift+I for both) and select the small box with an arrow on the top left corner. This’ll let you inspect the page and select and element to see its properties. Click on the image you want to optimize. Scroll to the bottom of the right window (the Style tab) and you’ll see its size! Now, all you have to do is resize your image to fit in that width and height. This way, your users won’t download more data than they need to.
Still lost on how to do that? Check out the video below.
The last thing to keep in mind when it comes to image optimization is if you want your website also to be compatible with Retina screens. Those screens have double the amount of pixels in them, which means your image need to be twice as big to appear correctly (read not blurry) on those screens. I recommend using a plugin like WP Retina 2x to handle your images.
All of the errors below can be fixed with one plugin: W3 Cache. (Configure the plugin using this post) This plugin does a lot of things, but let’s go through them one by one. Caching is a really cool thing that lets your website take a picture of itself every so often and make people download that instead a new page every time they visit your website. The whole website and all its pictures don’t need to be downloaded every time since the browser has already done it once. It can speed up a website considerably! The only drawback is that if you change anything in your code (especially CSS), you have to remember to flush it so that a new “picture” is taken. Otherwise you won’t see your changes. Some hosts already have caching included on their servers, so installing W3 Cache might not change anything.
Minifying is basically making files smaller. When it comes to code, the longer the file is, the longer it takes to read through it. W3 Cache can handle this, but make sure it doesn’t screw up with your website’s design! I know I have some problems minifying my CSS files sometimes, so I might just not do it if it’s interfering.
Compression is using something called Gzip. Basically, it makes the files that are being transferred between the website and the server smaller, so it goes faster and uses fewer data. Remember how you zip files sometimes to send them by emails so they fit? This does a similar thing.
Avoid landing page redirects
Most people won’t have this error since you probably don’t need to redirect your homepage. This is an error that might happen if you have an SSL certificate on your website to protect your users’ data and that someone tries to access your website using http:// instead of https://. It’ll simply redirect the person, but there’s nothing you can do about it. It’s better to have the redirect in that case.
If you’re redirecting users from your home page to another page though, it might be a better idea just to make that second page your home page instead of using the redirect.
These are the two that are the hardest to fix, but that can make a big difference.
What happens when you go to a website is that it’s going to load everything in a certain order. Unfortunately, a lot of code can insert itself in between the beginning of your page and your first line of content, meaning that your users don’t see anything for a few seconds before your website appears.
If you really want to clean up your website, but don’t have any plugins to uninstall or your theme needs to stay the same, I would recommend hiring someone to take care of it. It’s great that you want to deal with this problem, but I wouldn’t want you to end up with a white screen of death by accident.
GTmetrix will have a lot of similar categories on their website, but they go into a lot more details. If you don’t understand them, it’s okay. There is a lot of technical terms involved. Do your best to optimize your images, install cache and limit your numbers of plugins and you’ll be way ahead of a lot of people! And again, if you want to tackle the most technical categories of GTmetrix, hire someone to make sure it’s done properly and that you’re not shooting yourself in the foot.