Site speed is important — nobody likes a slow website. If yours is acting up, here are some things to check up on:
Images take time to load, so when you use massive, super high quality images, it can really slow your website down. Especially if you have a few on one page.
What you can do:
a: don’t use larger images than you need to
There’s no need to use a 2000×2000 image in an area that will only ever be 300×300. Take a look at how each of the images you’ve added to a page are being used, and evaluate the size and quality sufficient for that space. There will be a point at which a higher quality image is only slowing down your website.
b: use JPGs instead of PNGs
Particularly if you’re saving photographs, or anything that doesn’t require transparency (such as an icon on a transparent background).
For line drawings and typography-rich images, a PNG is still probably your best bet for quality, but depending on the size of the image you’ll have to decide which is more important in each case: image quality or speed.
But the motto is: if you can use a JPG instead of a PNG, do it.
c: compress, compress, compress
The good news is, images often contain a lot of unnecessary stuff that can be gotten rid of—in a compression process—without losing any of the quality. This is particularly helpful if you require a very large image on your page (perhaps for the nice full-width look that is very much popular right now).
Our favourite compressors are ImageOptim and compressjpg.com / compresspng.com. ImageOptim is software that you download onto your computer. You can pass images through it easily without having to upload them to a website and download them again. Everything stays in place neatly within your folders. ImageOptim puts the original file in the trash and replaces it with the optimized version. This has never been a problem for me because the compression ImageOptim does is fairly conservative — it won’t forfeit quality for compression.
The other two are websites that require you to upload images and then download them, however, they allow you to get very specific with the amount of compression that happens. You can keep it conservative, or really amp it up. Sometimes if I’ve already used ImageOptim and a file isn’t quite compressed enough for my liking, I run it through one of these as well. It compresses it in a bit of a different way and I can get the size down a little more with only (extremely) minor changes in quality.
Another tool you can use for compression is Smush Image Compression and Optimization, a free plugin you can install on your WordPress website. It allows you to both compress and resize images on your website automatically. Can be really useful if you don’t think you’ll remember to compress images manually each time!
It’s easy for plugins to pile up, especially if you are testing something and making changes to your website often. What tends to happen is plugins that aren’t actually being used are still activated, so the browser has to load them each time (even if they aren’t outwardly doing anything on your website).
So if your website is slow, it’s worth a check to see if you can clean things up a bit. Go to you list of plugins, delete any you for sure don’t need, and deactivate any you aren’t currently using.
Having your website hosted on a quality server can make all the difference to site speed. Our favourite hosts are Flywheel and Siteground. If you find you’re using a cheaper host (GoDaddy, Bluehost, etc) you may find it impacts the speed of your site. One tool you can use to check the speed of your server is Bitcatcha. Run your site through a few times for reliability. Something like this isn’t always 100% accurate, so only use this as a piece of the puzzle.
If your website uses caching, it means versions of the website are stored (at different levels, depending on the type you are using) so that the website can be displayed more quickly.
There are 2 common types of caching:
1: Browser-level caching
Web browsers (Chrome, Safari, etc) often store bits of websites on your hard drive so they can be loaded more quickly later on. As a viewer, it means the pages load more quickly if you’ve been to them before on that browser. This is fantastic, and it isn’t something you need to turn on — it is controlled by the browser and each individual viewer’s preferences.
*However, if you or your developer are making rapid changes to the styling of your website, the cached versions can become outdated quickly, causing you to not see your changes. Luckily, you are able to clear your own browser’s cache. The instructions are a bit different for each browser, but you can find instructions here.
2: Server-level caching
Your hosting provider does these caches in order to send along a website’s information more quickly each time it is accessed.
*Again, if you or your developer are making rapid changes to the styling of your site, you may need to clear the server cache in order to see the changes. Flywheel has a Development Mode you can turn on when making changes so you don’t encounter caching problems, and Siteground’s caching can be turned off within cPanel.
So, if you’d like to make use of caching to help improve your site speed, know the following:
- Browser-level caching is already on your side.
- Your hosting provider may be able to do server-level caching. Check with them.
- There are plugins that can do a third type of caching. A popular one is called WP Super Cache. However, there are occasionally some issues that arise with plugins like this, so if you are super unfamiliar and uncomfortable with making edits to your theme files (and looking at code), and/or don’t have anyone to turn to if problems arise, this may not be the best option for you.
Everything on your website is stored within a database, and sometimes your database can get a little messy. This slows down your website.
A popular plugin for helping clean up your database is WP Optimize. Keep in mind, before you run something like this for the first time, it’s always a good idea to do a backup of your database in case anything wonky happens. Better safe than sorry!
Speedy websites FTW!