Web UX Design for High Converting Websites

Performance Impacts Conversion

Paul Boag

Paul Boag

Web UX Design for High Converting Websites

Check out a free preview of the full Web UX Design for High Converting Websites course

The "Performance Impacts Conversion" Lesson is part of the full, Web UX Design for High Converting Websites course featured in this preview video. Here's what you'd learn in this lesson:

Paul discusses how a websites conversion rate is impacted by performance. Optimizing image/css/js files, using a CDN, and minimizing web fonts are all strategies that will increase performance.


Transcript from the "Performance Impacts Conversion" Lesson

>> And actually, this isn't just about the content you add to your website if you wanna build trust. It's also about your design as well, your design can have a big impact on whether your site is being trusted or not. And I'm gonna talk about this a lot more when we talk about design.

But basically, we can very easily associate certain design as being trustworthy and other design as being untrustworthy. And actually, it's something you need to test for. And you need to put your design in front of people and go, do you find this trustworthy? So, yeah, that's a little bit about how to build trust.

Now the fourth psychological pillar we're gonna talk about, I know that a lot of the people watching this would class themselves as developers and not designers or content people. And I know I'm taking out of your comfort zone and making you look up all kinds of things that maybe you're not quite so familiar with.

But this last one, you're gonna love cuz it's all about speed, it's all about performance. Because actually, we are incredibly impatient more so than ever before. And so performance is one of the most important things that we can do to improve conversion. And there's been loads of research done into this, right?

For every 2 seconds of load time on a website, you're gonna see a 4.3% loss in revenue per visitor. You're gonna see a 3.8% reduction in clicks and a 1.8% drop off in inquiries. Performance makes an enormous difference. So next time you're dealing with a designer who wants a video background, right?

Click them around the head and tell them that performance matters more than their stupid graphic, right? What next time you've got a designer that wants to use 20 different forms, shut them down. Stop them doing it cuz they're undermining performance and people are so impatient. And performance impacts repeat visits as well, 79% of shoppers won't return to slow site.

It also affects whether they're willing to recommend a product or service, right? 44% of shoppers will share if they have a bad experience or their sites really shut slow, don't bother with it. So we need to be improving performance as much as we possibly can. So how can we do that?

Well, I've kind of indicated a few things in my rants, but here's a few more to kind of throw into the mix. Imagery is a huge one, right? Serving the right images at the right time and at the right size is critical to success. So I would highly recommend that you use a service like servesiv.com, which basically just because the trouble is we know what happens, right?

You let a client or a stakeholder at the content management system and they upload some enormous ass PNG or TIFF, some ridiculous resolution. And obviously, all of that needs to be resized and they don't follow the rules. So a service like Serve, basically, they upload it at a massive size.

And then you can pull it back at whatever dimensions you want. And it basically, compresses and serves the image on the fly. It's really, really great. So it's not the only one. There are a number of them, and no, I'm not getting paid commission by them, unfortunately. So something like that works really well and also serving the right file format.

And again, server will do this automatically. So if you can serve a web p file or whatever. So speed up your imagery, make sure you're serving at the right resolution. There's also I think about the perception of speed as well, not just the reality of speed. So don't just go and run this through Google page speed test, because that will give you the numbers, but won't necessarily give you the feel of using a website.

So images get great example of this. Lacy load images, load up the rest of the page, and then bring the images in afterwards. Because it will give a perception that the site is loading faster than actually is. That's gone wrong, yes, on my slide. Sorry about that. It should say use a content delivery network, okay?

So, yeah, make sure that your website has been served from multiple locations around the world. Hopefully, if you guys got developer background, this is something that you're doing a standard. I know sometimes, clients are reluctant to pay for this color, kind of functionality, stakeholders are reluctant to do it, there may be complications in it.

But when you can tie it back to the impact that it's having on conversion, you'll find that they start to pay a lot more attention to this kind of thing. So, for example, you can actually calculate the amount that it's costing them not having a content delivery network.

And then what you can do is effectively work out how many additional seconds it's taking to load because there's no content delivery network. Then from that, you know that you're gonna get a 4.8% reduction in revenue. And then work out what your revenue is and you can get a guesstimate how much it's costing the business.

You'll be amazed how quickly people then turn around and say they're willing to spend a bit of money on tech when they realize that it's actually undermining their conversion rate. And then obviously, we need to do things like optimize our CSS and JavaScript. And increasingly, we're building our websites on top of frameworks and systems like React and stuff like that, and, yeah, these are incredibly powerful.

Yeah, they have their place. Yeah, they make your life easier maybe but often, they are a sledgehammer to crack a nut, as a phrase we have over here. In other words, they're overkill. And for a lot of websites, you shouldn't be using these kinds of frameworks because the amount of JavaScript that's required is actually fairly minimal.

And we should be minimizing our code, minimizing our use of JavaScript, minimizing our use of framework, because it will have performance benefits doing so. And this applies to all kinds of JavaScript that we use on our websites, aren't strictly necessary in order to deliver. Not only is JavaScript additional downloads have to be made, additional calls to the server that have to be made.

They also have the problem of they can cause performance issues on slower browsers, cause browsers to crash. We overly use JavaScript in my humble opinion these days. You can write the hate in the comments, I'm sure it will come. And then there's finally watch those web fonts. Remember I was talking about for designers.

Designers love to include lots of different fonts, and those fonts are a killer. Fonts can be huge, so bully your designers, or if you do design yourself, really show restraint over this. Because it will have a big impact on your conversion rate if you start downloading these big fonts.

Also when you do low fonts, make sure designers won't like that flash you get where you delay the loading of the web font until the whole pages appeared so you'll get it in a default font to begin with. But actually, you should be doing that wherever possible because it means that the page loads quicker.

Users feel more of a perception of speed. So get a default font in there then bring your web fonts in afterwards. Use variable fonts where you can as well because obviously, that they're much smaller font sizes. Now the one I throw in a dodge just sort of off the top of my head.

Get rid of those social media icons. The marketing team always likes to use these social media icons. These social media icons are a bugger for performance. They really do undermine the performance of your website and cause all kinds of problems. Hardly anybody uses them. If you look at your analytics, nobody will be using them anyway.

And he's ruining your conversion rate so really that's a good argument to go back to your marketing people, is to say, look, this is undermining conversion and so we need to avoid this.

Learn Straight from the Experts Who Shape the Modern Web

  • In-depth Courses
  • Industry Leading Experts
  • Learning Paths
  • Live Interactive Workshops
Get Unlimited Access Now