Did you know that 80% of website visitors will abandon your website if it takes more than 5 seconds to load? That’s a lot of lost revenue and opportunities. In this episode, we’re going to look at how you can improve your website’s performance. Listen to the episode
- How Page Load Time Affects Conversion Rates
- 7 Page Speed Stats Every Marketer Should Know
- Google Page Speed Test
- How to Use Chrome Developer Tools’ Network Tab
- Liquid Web
- Critical CSS
- Chrome to support native lazy image loading
- WP Rocket
Hey everybody and welcome to Creator Toolkit, the podcast about building stuff on the web. I’m Joe Casabona and today we’re going to talk about how we can improve website performance.
Now, I could spend 20 minutes just rattling off stats like the one at the top of the show, but I won’t. I will link to some more stats in the show notes for this episode, which you can find at creatortoolkit.com/016/.
Instead, I’ll just tell you this: performance is insanely important. Bad performance will lose you site visitors, customers, and search ranking. I’ll also tell you this: don’t assume everyone has as good an internet connection as you do. Most people don’t. Most people, even in the US, are stuck on crappy, slow internet, or on their mobile networks, which despite the flashy names, aren’t as fast as they advertise.
So how can you improve performance? We’re going to go over 5 ways do to it. Let’s learn how to evaluate our performance first though.
Testing Website Performance
There are tons of sites that will help evaluate performance, but there are 3 that I use, and they’re all free.
The first is built right into your browser (in most cases), and that’s the “Network” tab in Developer tools. I use Chrome, but I know it’s there for both Firefox and Safari too. It’s best if you have the tool open before you visit your site. I might even recommend Incognito Mode, or using it over a VPN to ensure there’s no browser cache. To access it in Chrome:
- Go to View
- Select Developer -> Developer Tools
- Click on the “Network” tab
Once you do that, visit your website and watch the timeline. The tool will show you how long it takes your website to load, and what takes the longest. I’ll include a video on how to do it in the show notes as well.
The other 2 resources are free websites that will test your site for you. The first is Google Page Speed Test. You can go to https://developers.google.com/speed/pagespeed/insights/ to see it. The other is GT Metrix, which is found at https://gtmetrix.com.
In both instances, you put in a URL, and these tools will evaluate performance, assign a grade, and give your recommendations on what you can do. Take the grade with a grain of salt, and pay more attention to the recommendations.
Once you know what you’re dealing with, you’ll know how much you really need to do to improve performance. Here are just a few things you can (and probably should) do.
The first is good hosting. There is no way around it: good hosting should be your first stop when improving performance. You can build the greatest house in the world, but if it’s made on top of quicksand, you won’t be able to live in it.
Generally speaking, dedicated hosting is faster than shared hosting, but it will come at a cost. If we’re sticking with living analogies, it’s the difference between splitting rent with 4 friends and buying a house by yourself.
If you’re looking for good shared hosting that’s still pretty fast, I recommend SiteGround. If you want full-on dedicated hosting, LiquidWeb is your company!
Optimizing Images & Media
Once you have a good foundation for your site, it’s time to make some optimizations. Potentially the biggest impact you can make here is with your images.
Make sure the images you’re using aren’t bigger than the space they’re filling (so if the image is sized to 400×600 on the page, don’t use a 4000×6000 image).
You can also run your images through an optimizer like ImageOptim to reduce the size even more, without impacting the quality of the image.
Be sure to optimize other media. If you have video or audio, make sure they’re uploaded to a service that specializes in serving those up (like YouTube, for video). And since a video or piece of audio generally won’t get downloaded until it’s played, don’t auto play media. Let the user choose to play the video.
3rd Party Scripts
It’s also easy to want to use a bunch of 3rd party scripts, like Google Analytics, the Facebook Pixel, and other things here and there. You should be judicious is what you choose to include because each of those scripts is another thing that needs to be downloaded. Ad scripts, for example, are especially detrimental.
Decide if you really need that particular script, and the best way to load it. If you can put it in the footer of your website, right before the
</body> tag for example, it won’t delay the rest of the page.
One way we won’t cover here, but is worth exploring, is Critical CSS. This is the idea that you place the most important CSS Styles in the
<head> of your website, inline, so it loads quickly, with the rest of the page. Then you defer the rest of the CSS until after the CSS is loaded.
On Combining Files
Just a few years ago, the best practice for multiple files was to combine them all into one larger file. That’s because it would cut down on the number of HTTP requests (or times the user’s computer has to ask the server for something), which in turn, would reduce the load time.
However, with HTTP/2, the recommendation has been several smaller files, because of how this proposal handles multiple requests- it can do several at the same time, so smaller files are better because they will load faster. As of this recording, HTTP/3 is also set to be released.
So which protocol does your website use – it’s up to the sever. The best thing to do is ask your host what your server uses.
The last thing we’ll talk about today is caching. Caching is a way of making a copy of your website / web page and storing it someplace where it will load faster for the user, and there are several different types. Here are the common ones:
- Browser Caching: this is where your browser will keep certain files (like images) stores on your computer so that they load faster the next time you visit the website.
- Server Caching: This is where the server will handle some forms of caching for you, so it can more quickly serve your website to the user. A good example is taking a web page rendered by a database, and turning it into a static HTML page. Fewer requests, and a single copy that it can send everywhere, makes faster loading
- Content Delivery Networks (CDN): A CDN is a form of storage for your website. In essence, your website will be copied to servers all around the world, and when someone visits your website, the copy geographically closest to them will be served up. It would be like if your favorite coffee shop opened a location 5 miles from your house, so you don’t have to go to the one 10 miles from your house.
There are lots of different ways to implement caching, from the way your website is coded, to how your server is configured, and lots of ways in between. We could do an entire episode on caching (and if you’d like to hear that, let me know).
So here we just looked at a few ways for you to improve the performance of your website, I think the quickest wins are getting good hosting and optimizing your images. If you use WordPress, there are also tools like WP Rocket, that will help you tick the boxes.
My recommendation is to use one of the speed tests mentioned earlier and use that as a checklist for how you can improve.
For all of the show notes, head over to creatortoolkit.com/016/ If you liked this episode, please share it! In a couple of weeks we’ll look at a case study: how a specific website was optimized
My question for you is: which optimization do you want to implement first? Let me know: firstname.lastname@example.org or on Twitter @jcasabona.
Thanks so much for listening, and until next time, get out there and build something.