Is your website lacking speed? Are you new to web design like me? Have you had to start your website because others you work with thrust it upon you? Are your conversions lower than you’d like?
Well, If you’re like me, then you might not know too much about creating a website. I’ve even made a blog post about how my website isn’t good (yet). A fast website is key to making the most out of your website. No matter how bad (or good) your site looks or functions, it doesn’t matter if a slow website sends viewers away.
I’ve taken the time to dig into how to speed up my website and get the most out of it. What follows is a result of what I’ve found and put into practice on my own site. Just remember the two most important rules. 1 – always make a backup 2 – test before and after to confirm results.
What’s Wrong With a Slow Website?
A slow website has everything your fast website does, but slower. If it takes too long to load, visitors might not even make it to your homepage before leaving.
If a viewer does make it to your homepage, they might still leave the site because it’s not worth their time. Attention spans are at an all time low right now (mine included) and that might turn people off. If your viewers can’t click on items once they can see the homepage, they’ll become frustrated and leave. That’s just how it is.
Any delay in the use of your website will lower your conversion rate, engagement, and basically any metric worth tracking.
Let’s dive into how to speed up your website.
Test Your Speed
The first thing to do is to test the speed of your website. You can do this in a lot of ways, like using the Google Site Kit plugin, other plugins, lots of websites, or https://gtmetrix.com/. I like GT Metrix because it shows your website’s load in a very helpful way. Go ahead and type in your url into the site and let it run. It’ll come back with a page that looks like this
Overall, my site is pretty good. It has some room for improvement, but it’s pretty solid. If you scroll down to the Speed Visualization, you’ll find something like this with some terms
First Contentful Paint – The Goal is less than 0.9 seconds (900 ms) for the FIrst Contentful Paint. The way you can reduce this is to reduce your image file size.
Time To First Byte
First, open another tab of GT Metrix, and add “readme.html” to the end of your url. Mine would be “https://samboatmusic.com/readme.html“
What this does is it loads an html file that wordpress automatically adds to your site. Basically this is the fastest your TTFB would ever go.
Another thing you can do is make sure to run the latest version of PHP.
To do this, Log into WordPress → scroll to tools → Site Health → Info → Server. Make sure to run the latest version. PHP has been known to give significant speed boosts when a new version comes out.
If your TTFB time is still high, then check with your Hosting Service (like bluehost or hostgator) to try to get a faster plan for your website.
Optimizing Images
There are many ways to do this. You can use a plugin to do this (but more plugins will slow down your site), or your can manually reduce the size before uploading.
If using windows, using the built in photo viewer, you can do this easily. Click the 3 dots –> Resize Image –> and choose the smallest file size. If the image looks bad, try the next largest size.
This works for just a few images, but if you have a lot or are constantly uploading photos, it might be better to use a plugin. There are many free options (with their own limitations), or you can do a paid option. You can even set the plugins to optimize automatically. This is really great for saving you time. The small decrease in site speed from an additional plugin can be offset by the speed gains it gives you when optimizing your images.
You can also concatenate files, but do so at your own risk. For me, I chose not to do this, because my site is smaller, I don’t have tons of files to be working with. I also don’t want to spend the time troubleshooting what’s broken if something does go wrong when doing this.
There are plenty of plugins and guides on what to do here if you choose to go down this route.
I like to use Shortpixel because it’s free, but you can also pay to do more. You can set it to automatically optimize on upload, and also bulk convert what’s already on your site. Another great thing about it is that it can change the image from a png to a jpg.
Changing the file type can save a lot of space without affecting the quality. Both file types have their uses, and are good for certain things. If the image has a transparent background, it won’t convert it, and if the image would be larger, it won’t convert.
To manually test out the file type for every photo would be a huge hassle, but the fact that the plugin does this automatically is a huge time saver for you, but also helps to get the best speed for your website.
Content Delivery Network (CDN)
A website is hosted in a physical location. If you live in North America (NA) then you’d typically want your website hosted there, unless your traffic is mostly from a different country. You can change where your website is hosted by communicating with your host, but if you have international traffic, or even traffic that spans a large region, you should consider a CDN.
A CDN can store a lot of files for your website in a way that’s faster to access in far away locations. Your hosting service might have one (Bluehost does), but you could use a plugin instead. Jetpack is a great one that is useful for other things as well.
You also should look to see if there’s a CDN plugin that can handle Javascript and CSS. Make sure that you don’t have multiple plugins doing the same thing, since that can slow down your site.
Lazy Loading is actually a good thing for speed
Lazy Loading will load the what appears on the screen first and then move to assets off screen. If you have pictures that you can’t see when the homepage loads, these will be loaded later, after the visitor sees the homepage. This reduces the amount of data that has to be loaded and will then load the rest of the assets later.
Jetpack has a lazy load feature as well as being a CDN (this is great!) All it takes is a click of the button, and you could see a drastic increase in your speed, particularly if you have a lot of images.
To do this in Jetpack, go to Performance –> Lazy Load, and that’s it.
There are other plugins you could use, but I like Jetpack since it does more than just lazy loading.
I’m all about that… Caching
Caching can happen with the Host, in the browser, or appear as a CDN. It is great at improving speeds of websites that don’t change too much.
I use WP Fastest Cache. It can integrate with Cloudflare (CDN) to provide the best experience with caching. It’s paid option also has image optimization, which could lower your plugin count by 1.
Although significant speed gains can be made with caching, it’s not the golden ticket. Sometimes it can hide the problem.
If your website gets slow, turn off your caching to help diagnose the issue. You can turn it back on once you’ve solved the problem.
Also, sometimes a cached site won’t show updates and you have to cache bust. Clear the cache and make sure everything loads properly.
Other Options for Speed
You can also look into speeding up your site by
- Choosing a fast theme (by testing the speed of each when active)
- Concatenating theme files
- Custom Database Tables
- Limiting revisions
These are more advanced options than I’d prefer to use. As you could see, my site is plenty fast. As your site grows, you might find yourself wanting to speed up your website even more. These are a starting point that you can use.
Since my website traffic doesn’t rely heavily on SEO, it’s okay if my website isn’t lightning fast. As long as I’m fast enough not to turn anyone away, I’m happy.