Episode 16: Improving Performance on Your Website

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. Show Notes How Page Load Time Affects Conversion Rates 7 Page […]

The post Episode 16: Improving Performance on Your Website appeared first on Creator Toolkit.

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.

Show Notes

How Page Load Time Affects Conversion Rates
7 Page Speed Stats Every Marketer Should Know
Google Page Speed Test
GTMetrix
How to Use Chrome Developer Tools’ Network Tab
SiteGround
Liquid Web
Critical CSS
ImageOptim
Chrome to support native lazy image loading
WP Rocket

Transcript

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.

Good Hosting

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.

Lazy Loading

You can also lazy load images and other assets- which means to defer loading something until it’s needed. The most noticeable use of this is with an images that’s not presented on the screen right away (or above the fold). Instead of loading images below the fold, you can tell your website (through the use of some javascript) not to load those images until the user scrolls near them – so they load only when they need to be see.

At the time of this episode, Chrome was also working on implementing native image lazy loading as an attribute, which means you won’t need javascript for that part. There will be a link in the show notes, which you can find at creator toolkit.com/016/

Other Media

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.

Minifying

On top of optimizing media, we can minimize the essential files for our website. Because spaces in CSS files and Javascript don’t matter, we can remove all of them without affecting their outcome on the website. In some cases, this can dramatically decrease the size of these files.

Critical CSS

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.

Caching

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

Wrapping Up

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: [email protected] or on Twitter @jcasabona.

Thanks so much for listening, and until next time, get out there and build something.

The post Episode 16: Improving Performance on Your Website appeared first on Creator Toolkit.