Jonathan Day: You can have the best content in the world, but if you're not delivering a good experience as measured by core web vitals, your rankings are going to suffer. You're still going to end up with a really disappointed customer and in fact you may death spiral the whole site. And even then a cache ain't going to save you. There are ways that you can reduce the effect of some of those frustrating delays through good UX patterns. Have you been to Disneyland?
[Voiceover]: Welcome to add to cart, Australia's leading e commerce podcast that explains Brest delivers all you need to know in the fast moving world of online retail. Every week Nathan Bush catches up with Australian e commerce leaders to get all the insights, tips and lessons to keep you at the top of the e commerce game and of course keep your customers adding to cart. Here's your host Bushy.
Nathan Bush: It's finally arrived the death of Google Universal Analytics. I hope you shed a little tear, thanked it for all its friendship and insights over the last 11 years and have replaced it with a new slightly disobedient puppy called GA4. Good luck with that little terrier. Today we are going to stick on the analysis theme but dive into site performance. What is it or why is it important and how to measure it correctly? Joining me is an expert in the field, Jonathan Day, Founder, Managing Director and e Commerce Strategist of Allegiant. Allegiant are an Adelaide based e commerce agency specializing in e commerce development, design and Strategy. Established in 2009, they now have over 100 team members and develop e commerce solutions for for brands such as Tommy Hilfiger, Kathmandu, Cooper's Brewery and Mitsubishi. I catch up with Jonathan frequently and I always get so much out of his passion for designing e commerce solutions. He is one of the smartest guys I know. Now there were a number of areas we were considering going down, but we decided on site performance because we think it is a crucial area for retailers to get right, especially as we move towards peak trade season. If you don't get website performance right, you risk losing a huge amount of sales no matter how much you invest
Nathan Bush: in product or marketing.
Nathan Bush: In this chat, Jonathan shares why performance isn't just a technical activity, but an exercise in understanding and reacting to customer psychology. He breaks down why Google's core web vitals should be the tool that you use to measure your website performance and he breaks down the metrics you should be looking at in there. He also gives us other tools to measure user errors, load testing and more. And he shares why getting site performance right is similar to how Disneyland designs their ride experience. Got you in now. And if after hearing all of this wisdom, you would actually prefer someone else to do it for you. Jonathan and his team are offering a website performance assessment for ADD to Cart listeners. Stay tuned until the end of the chat for details on that. So thanks to our partners Shopify plus and Paclio. Here's our conversation with Jonathan Day, e commerce strategist at Allegiant. Jonathan, welcome to Add to Cart.
Jonathan Day: Thanks Nathan. Super excited to be here. It's a cold and rainy day outside, but I'm pretty pumped up and full of energy for a. Well, it's a bit of a technical and nerdy topic, but hopefully once that's going to be really meaningful for people and help people get the most out of their e commerce environment. So really topical for people now getting into the approaching the peak season. You know, it's not far till Click Frenzy is upon us yet again. So what are the things we can do to get in tip top shape?
Nathan Bush: Absolutely, and I've been looking forward to
Nathan Bush: this one because we catch up at most e commerce conferences and have a good chat and our conversations range from everywhere. Right. And it's taken us a while to get here because we've struggled to find one area that we can deep dive into. Because you are such an expert and your team are experts across a range of e commerce topics and it was like what's the perfect time to talk about one thing? And where we landed I think is really exciting because today we're going to talk about site performance, which is critical for retailers at the moment. As you said, coming into peak season, getting those sites up to speed, ready to capitalize on all the sales and we know how hard the environment is out there in terms of not only converting sales but also acquiring traffic. So making sure that when customers do get to the site they have a great experience. So that's all fantastic and we're going to deep dive into how retailers can optimize their site performance ahead of peak season. But firstly, give us some context. Tell us about Allegiant. How do you help retailers?
Jonathan Day: Thanks Nathan. Look, it's very kind of you to introduce us as experts and those sorts of words. I guess something that you know, we certainly have had the privilege of a really long journey in this industry and being able to work side by side with some fantastic retailers over many years that have gained this experience and helped us to learn a few things along the way. So that's something that we love, the journey and that the sharing of the Knowledge. One of the things that we talk about is our who we are as a company, you know, if you want to call that core values, for example, is generosity is one of our five key values. And so generosity means lots of different things. It's something you don't hear very often in a business world, let's be honest. And sure there's a financial element to it, but some of the things that are relevant for this conversation is about generosity of knowledge and how do you share that hard won knowledge. And you know that rising tide lifts all boats in the industry. So this is a great opportunity to live that and, you know, walk the talk and demonstrate a little bit about what's transferable about that knowledge that we've gained. But I guess to answer your question more specifically, allegiance, the E commerce agency that retailers choose when they're making a strategic decision that they want to lead their industry. We've been delivering solutions for our clients for almost 15 years now and we love working in ways that create really meaningful relationships and solve real world problems. It's not just tech for the sake of tech, it's actually understanding as a business. As for the merchant, what do you need to achieve and how can we be a part of that journey to get you there? So we're a team of just over 100 based in Adelaide, representing South Australia. Just a couple of exceptions to prove that rule, but the team's team's all here and with a really broad skill set spanning from your user experience, design, business strategy and analysis and analytics through to integration with your back office systems to make sure that there's a lot of automation and efficiency. And that's another real topic that's at the moment retailers are looking for ways to reduce manual effort and get a lot more automation into their systems.
Nathan Bush: Do you work across all platforms?
Jonathan Day: We've got a broad range of platforms that we work and our heritage is Magento or Adobe Commerce as that have us call it today. So that's still a key part of the kit bag for sure. You know, a good proportion of our builds and optimizations do use Adobe Commerce. It's one that's been around and well known and in our opinion absolutely has a role to play in the modern architecture. We sort of jokingly say it's not the Magento you used to know because back in the day it really was very different. Stack and the ways that it's deployed and can be quite effective and efficient is something that perhaps everyone's not as familiar with as they are with its history. So that's important to spread the word a little bit. But yeah, beyond that we have a number of other e commerce platforms, but also what you call, you know, below the surface of the iceberg. So we all see the pretty front end of the website, but how do we get really great quality product data into our systems through PIM systems? How do we deliver a great wholesale customer experience around fulfillment? So getting optimizing for click and collect and ship from store, reducing carrier costs and overheads, which again is a big thing for retailers in the current environment. And interestingly, when you do that really well, you can also reduce your carbon footprint, which is a key thing for a lot of our retailers. It's not just a greenwashing thing, that's real. Unfortunately there's a reality that returns are still a thing in this industry. So how do we make that really seamless and can be a real differentiator for customer experience? So we do that whole breadth as well as the depth of multiple ecom platforms and systems to really support the operations.
Nathan Bush: Yeah, brilliant.
Nathan Bush: So there is no one better, I
Nathan Bush: think to be able to talk site performance than you. And let's dive straight into it then. So how do you define site performance? What makes a high performing website in your view?
Jonathan Day: I'm an engineer by training, so this is all going to sound a little bit weird, but how we define it is how it feels. So how performance feels is actually made up of lots of different elements and some of them are hard, objective, measurable things like, you know, time to first bite and scalability and all of those good infrastructure engineering numbers. But a lot of it is actually about psychology. It's about the perception of performance and how customers actually can be made to feel by what they see on their screen and the feedback that they get. So that's a fascinating because humans are interesting beings, but it's also can be harder to measure. So we've got to give a lot of thought to that.
Nathan Bush: Can you have a sight that is bad from an engineering sense but still feel good?
Jonathan Day: There are ways that you can reduce the effect of some of those frustrating delays through good UX patterns. So have you been to Disneyland?
Nathan Bush: No.
Jonathan Day: Do you know where I'm going with this? The Disney management around queuing.
Nathan Bush: Yes.
Jonathan Day: One of the things that they've pioneered and every theme park in the world has learned from is the ability to not have people feel like they're waiting in a line because waiting in queues suck. No one likes that. So how do you both entertain people while they are waiting? Inevitably, but also Break things up and give different visual cues as you're moving through that line so that you're much less aware. Aware of the fact you've actually been waiting for the, you know, Death Defying Superman ride or Superman's not Disney, but you know, you've broken the trademarks there for 45 minutes. You've actually enjoyed the experience or not being aware of the fact that you're sitting there with the old spinner, you know, the loading indicator. Let's try to use some psychology to help reduce that appearance.
Nathan Bush: It's interesting too, isn't it? Because we've had guests before talk about the other side of that is actually adding loading, which is purely from a design perspective, make it look like something's loading so that there's a perception of safety and a lot going on in the behind the scenes for a customer.
Jonathan Day: Absolutely. However, there's a balance to be found. So where we think the current state of the art is and going to give a shout out at the moment. Our lead front end engineer Luke Denton, gave a presentation, one of the keynotes at a web dev conference last week in Melbourne on exactly this topic and he gave a great demo. There's a recording of it online which we can talk about later. But making smart decisions about when to show a loading indicator so we can be optimistic about the performance of our website. So if we're confident that under the majority of conditions, and this is something that is a subtlety that you need to be aware of is there's always a range depending on the customer's device or network connection or the conditions at the time. But if we're confident under the majority of conditions that the next page is going to load in less than a second, don't show a loading indicator, however, set a little timer that if for some reason is taking more than say a second, then trigger the loading indicator. Because if it's less than a second, you don't need to have given that little message to say you're waiting, you're in a queue because it's fast enough that they don't need to have been conditioned to be patient. Right. So be optimistic, but also have a fail safe that if it doesn't work out the way that it does most times we're still giving them some feedback because otherwise they get pretty grumpy. And I'm sure you've heard the phrase rage clicks. We start to see the rage click show up in all the monitoring software and that's a problem.
Nathan Bush: Ever scrolled through an E Commerce packaging website for fun. Nah, me neither. Until today. Paclio is putting the joy into the packaging game. So let's play a game. I'll tell you the name of the Paclio product and you have to try and guess what kind of product they are. Fairy Floss Compostable Mailer, Queen Bee Honeycomb Padded Mailer.
Nathan Bush: Here we go.
Nathan Bush: Gummy Shark Water activated Tape. Now if my jaded self thinks that this packaging is fun, imagine what your customers will think. Paclio is also eco friendly Australian owned and operated with same day dispatch and 14 day returns. Now that's pure joy for everyone. Check out the Paclio range of E commerce packaging options@paclio.com that's Paclio P A C K L E O paclio.com.
Nathan Bush: If we talk about the commercialization and the actual benefits of site performance before we go too deep into all the technical nitty gritty and we do want to go there, but from a commercial perspective, does it actually make that much of a difference if we're talking about loading, for example, as our example on performance, does actually a slow loading page make that much difference to conversion?
Jonathan Day: Yeah, absolutely. It's an interesting one because this has almost become just an accepted fact that performance improves conversion. But often people aren't rolling out the stats. But there's actually a lot of data out there. So one of the first came from Amazon in 2006. They published, almost accidentally they published this study. It was sort of buried within another presentation they gave where they had data AB testing, which is a really good tool that I'm sure add to cart listeners have heard talked about. So they deliberately slowed down segments within the A B test by increments of 100 millisecond. And what they found was that for the exact same content, for the exact same user experience, that 100 millisecond delay reduced the number of sales by 1%. So each increment of 100 milliseconds, which is not very long, you're dropping 1%. So that was almost 20 years ago that that research was done and it's still very relevant today. There was another one that I've loved for a long time. Walmart published good on them for sharing real world data as well because there's some sensitivity there. They had a nice little chart that showed if you bucket the users into different time windows, so how many people took between six and seven seconds, between five and six, between four and five exactly. After four seconds it was pretty much flat. Didn't matter if it was 4 seconds or 7 seconds, the conversion rate was about the same once you started getting down from the two to three seconds it would double and then from the two to one would double again and from the sub second it goes exponential. Right, Right. So a very direct correlation between the speed that an individual user is having to their likelihood to check out and they tested that across all sorts of different departments of product. It wasn't just any one product. It was both high consideration products and you know, that sort of spontaneous product and validated with a really large data set. So again, 10 years old, but still valid. Google have also recently published some stats. One of the things they've been pioneering is called Core Web Vitals, which I'm sure you've heard of and you'll see on their web.dev website and can share the link a whole series of different business case examples where retailers have seen conversion rate, time on site, bounce rate, goal completion, all of those sorts of metrics directly affected by one or more of the core vital improvements.
Nathan Bush: I've got a feeling that in our conversation we're going to have a lot of web links referred to.
Nathan Bush: So what we might do at the
Nathan Bush: end we'll put a dump of all the links into our show notes and onto the blog blog post as well. So if people want to follow up some of the great examples that you're giving that we can link through to them as well. Because there's obviously a lot of depth here. The studies that you mentioned there, we're talking 20 years old, 10 years old. Is site speed still a big thing? Are we still seeing sites today that is taking five seconds to load?
Jonathan Day: Absolutely. And something probably should have said earlier is that one of the other aspects of performance that we have to talk about is not just this single point in time. This one user took five seconds. It's also performance under load. So when we again come into peak trading time, quick frenzy, Black Friday, et cetera, how does the site handle particularly large volumes as well as in the good times. So the consistency of performance absolutely influences the effectiveness of your sales. And unfortunately we're seeing right now consumers are very motivated by sale, end of financial and other, you know, the mid year click frenzy have had good results but consumers seem to be waiting for them. So even more, more emphasis to make sure you can scale at that point. But in terms of do we know that in 2023 the whole industry needs to address this? Certainly Google continues to reinforce that. So they're adding another metric to the Core Web Vitals which we can expand on what they already are today. But there's a fourth metric coming in March 2024, so it's only nine months away at most if we're recording this in June. So that's not long to get yourself ready. And what we know and Google are explicit about is that they will take your performance on core web vitals into account for ranking so you can have the best content in the world. But if you're not delivering a good experience as measured by core web vitals, your rankings are going to suffer. And right as we said at the outset, buying traffic, buying eyeballs right now is super expensive. So getting your organic rankings up is going to have an influence. And your performance also reduces your cost cpc, so your ROAS is actually going to improve if you have better performance translating to better conversion rate. So there's a real reinforcement here, both in terms of the organic benefits and the paid advertising benefits.
Nathan Bush: Yeah, carrot and the stick at the same time.
Jonathan Day: Yeah, that's it.
Nathan Bush: When you think of high performing websites and retailers, are there any that come to mind that you want to call out as great examples?
Jonathan Day: Clearly our clients have got great performing sites, so. But in the interest of being objective and fair, there is one that I think really deserves a shout out that have been doing some really cool things, both in terms of the, the technical aspect of performance, but some of the psychology that we talked about before. So shout out to Sydney Tools. So if. I don't know if you're in the handy person market, Nathan, but have a look at what they do. Their site is fast in terms of their initial response times and being able to navigate between pages and perform actions on the site. But one of the really clever things that they do, and again we've been experimenting with this, is if you click on a link, it doesn't immediately translate to an action. So it's a little bit like that optimistic UI we talked about, whereby you'll click on, say a product tile on a listing page and there's the tiniest little progress bar that appears just underneath the top of the page. You'll only see it if you're looking for it. And then they sit and wait until the response from the server for the next page content is actually received by the browser and then snap, they switch over to, hey, here's the full page ready to go for you. Cool. So if you measure from the moment that you click to the moment that the new page is rendered, it's fast, but it's not extraordinarily fast. But the perception is, oh, wow, the whole page just loaded in a fraction of a millisecond there because I didn't see anything to change until it was ready. So very clever and really well done. What I will call out though is that if you're using the site on a particularly slow connection, maybe going through a tunnel on a train or you know, someone in the house is streaming too much Netflix, that can actually be a bit, a little bit jarring because there's nothing to replace that with a loading indicator if it does take more than a second. So it can lead to multiple clicks because nothing's happened. So I'm going to click the button again, I'm going to click it again and all that does is reset the user and you have to wait again for that request to go on. So super impressive technically and I love how they've thought about that engagement still, as always, this is a journey and there's some things that could still move the needle for them, I think.
Nathan Bush: And that's obviously where you were talking about having those fail safe options behind it. If they're going through the tunnel, although they've got a slow service, do you know anything about the tech stack that they're using or the enablers to make that happen?
Jonathan Day: Yeah. So Dash built what these days would be called a headless or sometimes we call it a pwa. I'm sure a lot of listeners are familiar with that acronym being Progressive web app. And we sort of see that as being probably the last two to three years has become quite common in the E Comm industry. It's been around in the broader web industry for a long time now. It's kind of that next iteration of mobile friendly websites. So remember we had the old M dot where we'd sniff the phone and give them a whole different website. And then we went to responsive and now progressive is that next level. There is a big difference there and it certainly allows us to do a lot more cool things around our perception of performance and also optimizing of performance. So the key difference is that the user interface actually lives inside the browser and all that goes up and down the wire to the server is just the raw data. So a little bundle of JSON data which is just a textual structure to provide the name and the price and the various attributes for a product. And then the front end is responsible for rendering and doing all the layout efficient because the server just gets the raw data and it doesn't have to work out how to do the layout, how to adapt that, you know, based on the device and the transmission of the data over the Network is a lot lighter as well. So that's got big benefits for the end user. It's a lot quicker to get the bit that it needs. It has also got big user, big benefits for the server in terms of that scalability event. Right. So when you're under load, the server is doing a fraction of the amount of computation that it used to have to do to generate all of the layouts that are being requested. It can just concentrate on passing almost just light touch data straight up out of the database, which is a lot easier for it to do. And it's also a lot more cacheable.
Nathan Bush: Yeah. And I can't let you go.
Nathan Bush: You're being very humble here.
Nathan Bush: What are some of the sites that Allegiant have built that you're very proud of in terms of performance?
Jonathan Day: Oh, thanks. One that I think objectively we think does a great job is Kathmandu. So we're super proud of that for a couple of reasons. One, it implements the PWA pattern that we've just talked about there and some really interesting capabilities across multinationals. So they're Australia, New Zealand, us, uk, France and Germany with multiple different languages and obviously currencies, all running off a single code base. So there's a lot of efficiency as to how that's developed and maintained, but also what we call feature flags. So the functionality that's available in Australia, New Zealand, say click and collect because of company owned stores, is not available in some of those other geographies. So rather than having a separate code base, there's a flag to toggle that on or off. But when we look at it purely from a performance point of view and core web vitals as we talked about as being a nice objective measurement, the real world data that's coming back from customers. Chrome browsers is reporting average score of 91 out of 100, which is extraordinary for most interactive e commerce sites. It's not too difficult to score in the 90s if you've got static page content, but for highly dynamic with lots of price changing and inventory and all those sorts of things, to be able to score in the 90s for Core Web vitals is pretty awesome. And there's more to come that we're working on to optimize with that one.
Nathan Bush: And for Kathmandu, was that a non negotiable from the start? Was that part of their core brief or is that something that you said? Guys, this is really, really important. We've got to make sure we build with this in mind.
Jonathan Day: The danger with a lot of the industry hype about headless and composable and pwas that it does become tech for the sake of tech and particularly in the current environment, flashy replatforms is something that's very hard to justify to a board, particularly if it's just for a technology sake. So that conversation from an allegiant point of view is always well, what are you trying to achieve as an organization? And for them multinational was a big part of it. But also ensuring that the design from a UI point of view gives them a lot of flexibility and also allows incrementally adding new features and functionality. So plugging in new inventory and fulfillment systems, plugging in new say, reviews and rating systems, loyalty systems, all of those sorts of things that don't have to be bound into the old school monolith, which is a bit of a pejorative these days in the industry with that headless pattern we get a lot more flexibility about choosing genuine best of breed service providers for those enhancements to the overall user experience without sacrificing performance. And I have to just quickly call out a couple of examples as well on the basis of raw speed. So Tarracash, YD Rockwear, the whole suite of brands that we've collaborated with Retail Apparel Group on delivering in the last couple of years, they're super fast. Check out some of the suiting examples on PDP and PLP for Tarracash and Rockware is really quick moving into B2B. B2B doesn't have to be slow and it doesn't have to be ugly. Check out a candle manufacturer and distributor called Eroma, recently launched with some great B2B features and visibility around inventory, but also fast, never fail. Spanning from B2B and B2C and then finally back into the tool sector. Trade Tools who's a great client of ours based up in Queensland, lots of marine in their color scheme, but also another example of a really fast and engaging PWA website.
Nathan Bush: Yeah, great. Are there any retailers out there that you would love to just go give me a meeting with you and I'll fix your site performance?
Jonathan Day: None that come to mind. We talked before about Magento. This is not the Magento you used to know, so the Adobe crew probably won't love me for saying this, but there's a lot of old school Magento sites that don't perform as well as they should and don't perform as well well as they could with a little bit of love. And this approach around a headless and or microservice driven architecture, which sounds fairly scary, but it's actually a much lower risk approach than RE platform to a whole new backend that require a whole new set of integrations. So there's really we've had a number of our clients that we've taken on that journey whereby we've had some fairly legacy code existing inside Magento that has been slow and painful and to be blunt, expensive to maintain and gone through basically a reset where we could say, okay, keep all of the bits of Magento that deliver on the benefit of that platform, which is great flexibility and the opportunity to really differentiate from what everyone else is doing, get rid of some of the crud that's really slowing you down and make a step change in terms of that customer experience and the flexibility for the business. So it's a bit more of a broader answer than what you're looking for, but I think I was hoping you
Nathan Bush: just name and shame just put them all out there.
Jonathan Day: It's not really my nature. Sorry.
Nathan Bush: I know, I know. I thought I'd get there like the little evil Jonathan coming out.
Jonathan Day: Maybe after a few beers at some of those conferences, like you were saying,
Nathan Bush: let's change track then you've mentioned core web vitals a few times. So I'd like to go down that path because I'm really interested in the key metrics that you look at when determining whether a website has been geared for good performance. If we've got listeners going, well, I want to understand whether my website is good or bad. How can they measure that?
Jonathan Day: The first thing I would say is for people to not necessarily get too hooked up on comparisons and industry standard benchmarks for a couple of reasons. One, there is a bit of FUD and noise out there in the industry and it can be quite easy to focus on the wrong thing. So a historical example of that was always page load speed. So Google Analytics, you know, unfortunately, GA that we knew and loved is now dead. GA4 is the horror story. But anyway, back in the good old days of ga, we could all find page load metrics in GA and we could look at that. There's some real danger in relying on that because that incorporates everything that comes up on a page, even the stuff that doesn't actually matter to the customer journey or the perceptions of speed. So things like your when does the live chat pop up, when does the Google Trusted Stores review stars pop up? That's all incorporated in that page load metric. And so that really doesn't represent what is a customer's effective experience of being able to engage with the website. So make sure you understand what the metric is actually measuring and then move beyond that to actually define for yourself what matters to our customers. So a classic one in fashion and apparel and we've done a lot of work with this with configurable product detail page, you know the old size and color attributes where you want to click on a swatch for your color and size. Defining and throwing a metric when those swatches are ready is a really key point in the load waterfall. So in Google Dev tools you'll see what they call the waterfall, which is all the various different events that happen during a page render. So, so we think that that is a much more relevant metric in a fashion context than time to first bite or page load or some of those other sorts of historical metrics. And it's actually relatively straightforward using GTM to observe that point and then throw a flag that will get picked up either by GA or some of your other monitoring tools. So, so take the time to understand your customer's journey and then instrument the site so that when you do do these optimization exercises a you've got a before and after so you can demonstrate to your stakeholders, look, we've moved the needle this far, it's translated to this much in conversion rate, we spent this much on it, so therefore we've justified more investment. Right. So take them on that journey, but complement some of the industry standard metrics with the ones that are unique to your journey. The other thing to do is that sometimes you will over optimize one metric to the detriment of another. So don't go trying to fake it in one metric if another one is going to suffer. So you do still need to keep an eye on these industry standard ones. So core web vitals, there's three key as we said at the moment, which the first is largest contentful page paint. Largest contentful paint is basically when is there the majority of a page that looks like a page. So the browsers interpret all of the response they get and they do a paint a render of all of that material on the page. So it's not referring to the full page being ready, but it's something that looks like a page. So what Google's trying to do with core web vitals is actually objectively recreate a user's experience rather than something that is purely technical and doesn't represent that user experience. And that first impression. Right. Large content, I can see something looks like a page. That's the first one. So that's kind of replaced what we used to look at of time to first buy it or other things like that.
Nathan Bush: So that's a core one that you use?
Jonathan Day: That's a core one, yeah. Definitely represents the user's experience of how long are they waiting before just sitting there and getting nothing.
Nathan Bush: Yeah.
Jonathan Day: Okay, so lcp, the next one that Google looks at is fid, which is first input delay. And so that means that not only is there something that looks like a page, but I can click on it, I can increment a quantity counter, I can start typing my details into a contact form. I can actually engage and interact with the page. The reason why there's a difference between the two is the largest contentful paint might just be made up of some images. Often there will be JavaScript that has to execute and be finished doing all of its pre thinking before the page will respond to you trying to click on something.
Nathan Bush: Gotcha.
Jonathan Day: Okay. Again, represents a bit of a frustration for users if they're like ready to move on and the page won't respond yet because it's still so busy working out all the instructions you gave it. So trying to keep bloat out of your page is a really important thing to maximize fidget.
Nathan Bush: And I can imagine that becomes really important on pages such as say, your checkout or your contact Us page, where if customers can't do an action straight away, those pages are worthless.
Jonathan Day: Perfect. Yeah. And then the final one in some ways isn't actually a speed metric. It's called cls, which is cumulative layout shift. Bit of a mouthful. And the affectionate term for it is often layout jank. And it's where the page jumps around on you like, oh, okay. And you'll see that when often images come in late in the page and, well, you might have seen a row of content and then that gets pushed down below the footer of the page may show up initially and then that gets dropped out. And that's a really disconcerting, jarring experience for customers. So making sure that you've either got placeholders there for your content. What might call a skeleton loader that gives you a scaffolding or a framework for the page to get populated so you don't get that jar, or even better, use something out of cache that you've got. So for example, if you're going from a listing page where you've got a thumbnail for a product and you're clicking through to the pdp, take that same image and put it in the gallery, you've already got it in your browser's cache. Right. And then wait for the high res image to come up from the server and replace that low res thumbnail with the high res image. It just looks like a progressive JPEG that's loading. Right. Which we all remember what they used to be, but it doesn't give that jarring jank of change of layout. So they're the three core web vitals, all of them are important and not all of them are necessarily just about raw speed.
Nathan Bush: Yes. Did you say there was a fourth as well or a fourth coming?
Jonathan Day: Yeah. So there's a fourth that's coming in in March and that's called inp, which is to do with the interaction to next paint. And this comes back to what we were talking about before about PWAs or headless build, where one of the big differences with a spa, pwa, headless, they're all kind of the same thing, is that when you navigate from one page to another, the old school way was the whole page got replaced with the new page, even all the things that were exactly the same. So the header and the menu and the footer and all of that sort of stuff doesn't actually change. Which is another reason why it's a lot more efficient. And in the new model, you're just replacing the bits that are different from one page to another. Interestingly, currently Google Analytics and a lot of Google's tools can't measure the time it takes to have that next paint update on the screen. So this is effectively the same as a page view. Right. We used to talk about page views going from one page to another, but because we're not replacing the entirety of the page, we have to fake the page views in our GA metrics to tell GA that we're navigating between pages. But also the timing signals aren't being thrown at court. So they're now and they've admitted and they've said, look, we've actually really dropped the ball. We're quite far behind in measuring this because these spas and PWA have been around for a few years now. So they're introducing this INP metric to be able to capture that. It's actually something to be aware of for merchants and e comm managers is that if you do have an spa right now, your GA metrics for page load are actually skewed because the only page load metrics that are being captured is a first page visit, which is always heavier because you've got all that JavaScript overhead that you're loading for the first time and then as you're moving around subsequently from page to page. They're like, you know, 300, 400 milliseconds max typically for these PWAs, but you won't see them being recorded in your average scores. So definitely a gotcha.
Nathan Bush: We know that customers are going to be more price conscious in 2023, but it doesn't mean that they've lost their soul. Shopify conducted a global survey to understand customer trends and found that Australian customers are actually the most passionate about buying locally to reduce their carbon footprint. And while price pressure won't go away, the research showed that the majority of the Australian customers will wait longer for delivery and recommend a product that is
Nathan Bush: sustainable at its core. We're such a good bunch here, aren't we?
Nathan Bush: To view more resources to help with
Nathan Bush: your 2023 planning and see how Shopify
Nathan Bush: can take your E commerce business to the next level, visit shopify.com au today.
Nathan Bush: You've done such a good job there of taking those four acronyms of Core Vitals and actually making translating them into customer experience terms, which I love about that. What I took out of that is that there's two key steps. There is, there is understanding what that waterfall of experience looks like and what's important to your customer, which point is important to your customer and then understanding which of those core vitals is most important for you as a business to track and monitor.
Nathan Bush: If I haven't gone into this as
Nathan Bush: a retailer and had a good look at it, are these tools easy to access?
Jonathan Day: Yeah. So Core Web Vitals definitely the a, you can go to web.dev. which is Google's website to explain these metrics and on there there is a form where you can dump your URL in and it will happily give you a report. The caveat to that is that that is sort of a one off report and googlebot will be looking at your site, you know, in the moment. It will attempt to I guess decorate or give you some context for that point in time with what they call field data where it's collected all that info from real world users browsers and give you some comparisons between what it's seeing in the moment versus what the rest of the world is saying. Also if you go into your Google Webmaster tools, there is a report in there which shows you which of your pages are either scored as good. I forget the exact term, but there's three different categories that Google will tell you per score. How many of your site URLs are either good or not against Core Web Vitals and you can export that as a report and It'll give you a little CSV and go and investigate is there a pattern? Is it all of the PDPs that are bad or all the PLPs and that can then help you understand some of the subtleties because it's not a one and done. You can't just apply a quick band aid or a gloss of what we call lipstick on a pig to the website to implement this. There's lots of different things that customers can do that merchants can do. Sorry around that are in their own control. We'd love to have a conversation about that with you, but there's a lot of stuff that you can do yourself around image optimization, being really careful around JavaScript bloat and making sure that you're not dropping unnecessary third party scripts in on your website. So there's quite a lot that people can tackle themselves which is good. And Google gives quite a lot of those hints to you as well. So that report will make suggestions for you and you'll be able to see which of those you can tackle or need a hand with.
Nathan Bush: Outside of those Google tools, are there any other tools that you really rely on or recommend?
Jonathan Day: Yeah, definitely. New Relic is a classic in the industry that gives a lot of technical data of what's going on on the server and inside the database and the servers. Unless of course you're on a SaaS based platform which a lot of these things are hidden away from you and therefore you have a lot less levers that you can pull to optimize. But New Relic also has what's called rum, which is it's a bit, a little bit early in the day for rum, but you know, it's gotta be after midday somewhere.
Nathan Bush: I've got a feeling there's another acronym coming here.
Jonathan Day: Yeah, real user monitoring. So that puts a little monitoring tool in every visitor your site and it reports back what those customers are experiencing and that takes into account the fact they may have an older device, they may be on a slow network connection. And so you see the spread of experiences that customers have. So those run metrics are really good. There are other tools, one we called logrocket that's a little bit similar to hotjar that many people will be familiar with. Logrocket is fantastic for capturing user errors and problems that are happening on site, but also giving you that really broad based performance monitoring through the user's eyeballs because it's actually recording it in their particular browser and you can literally see a screen recording. So go and find all of the customers that are below a certain threshold of performance and go and watch their experience or which bit of the page was slow to load for them. So that's pretty cool. Coming back to the scalability one, one of my favorite little graphs or plots being a bit of a data nerd, is a scalability scatter plot that comes from New Relic. It's really colorful on the vertical axis. It gives you response time from the server. So how long did it take for the server to give back the page? And along the horizontal axis it will show you the amount of traffic that you're currently getting. So on the left hand side, a lightly loaded server, maybe overnight middle, you're going to get your typical daily load and then out to the right you peak events. What you want to see there is a flat line. It shouldn't matter whether your server is lightly loaded, normally loaded or heavily loaded. The scatter of data points should be quite a narrow band and the trend line should be flat or even it should actually improve under load. All right. Because if you have done your caching well and you've optimized your site, the more traffic means, the more cash hits and therefore larger proportion of customers are going to be able to serve out of cash.
Nathan Bush: Gotcha, Gotcha.
Jonathan Day: That's next level.
Nathan Bush: So is that the one activity that you would recommend to retailers? We mentioned coming into peak season and making sure your sites are stable and performing when you do have have that influx of customers. Is that the one activity that you would recommend for retailers to do pre that?
Jonathan Day: Yeah, look, you can do some stress tests ahead of time. So there are a variety of different load testing tools out there. One that we use is called blazemeter that allows you to simulate a really diverse range of customers. So old school load testing, you'd sort of have that one server and it would try and siege was what it was called. It would try and just throw bucket loads of simulated users. What BlazeMeter and other tools do is it uses the power of the cloud to simulate users come from lots of different locations with different traffic patterns through the site. And so you can emulate what a nice diverse spread of customer interaction with the site looks like. And what you're looking for in the output of that is again to see how does the system respond under load and what we would call an inflection point. So where does it first start to labor? What is it that's causing it to grind a little bit before it death spirals? So the idea is not to crash the whole thing, it's to identify those friction points and then go again. It's like peeling the layers of an onion, Right?
Nathan Bush: Sounds like my personal trainer.
Jonathan Day: Yeah, exactly. Peel every layer that you pull off the onion, then expose what the next optimization is. And sometimes they might not even be in your core app itself. It could be some third party systems.
Nathan Bush: Yeah.
Jonathan Day: So it might be the inventory service that you're using to check store stock in the various different locations around Australia. That might be the first thing that's going to buckle more than the actual core E commerce. And again, that won't be shown to you by Google. Google doesn't know how to exercise some of those on page interactive elements you do.
Nathan Bush: Yeah. So push it to its limits without killing it ahead of time.
Jonathan Day: Yep.
Nathan Bush: So I love that point around load testing pre peak sales as we're coming up to peak sales planning or we're in peak sales planning right now. What are some of the steps that you would recommend retailers take to reduce the load and the pressure on your website and ensure that there is strong site performance when you've got customers engaged and ready to buy?
Jonathan Day: Yeah. Critical to do some of that load testing. So make sure that you can emulate what real user pathways through the website might be. So firstly, establish a baseline for yourself by doing that load testing and then look at some of the techniques that you might use to improve the performance. Now a classic is caching. We've all heard about CDNs and full page caches and those sorts of things and they're an essential part of the armory. But I know I've talked about Lipstick on a Pig and it's a bit of a throwaway line, but it really does count here because you might have the fastest homepage or product detail page in the world because you've cached the heck out of it. But a don't forget that if you get a new release of inventory, you're going to bust all of that cache. And so it still needs to be able to load without the protection of the cache. But there are some parts of the site that are inherently uncacheable. You cannot cache the mini cart, you cannot cache the checkout, you can't cache the customer login to see their order history. So even beyond those first layers of defense, defense in depth is a great strategy for security and for performance. Make sure that there's enough horsepower and optimization put into those because you're still going to end up with a really disappointed customer. And in fact you may death spiral the whole site and even then a cache ain't going to save you. Wow.
Nathan Bush: I love the death spiral. That's a fantastic analogy. Is there anything else from in terms of how we attract customers onto our website, how we spread that traffic out that you would recommend?
Jonathan Day: Yeah, look, driving traffic to websites. We've talked about the importance of SEO and obviously SEO. The other one which retailers love and we get great results from is email campaigns and SMS campaigns and absolutely vital to push them hard at the right time. However, one of the things to definitely consider is to be able to at least spread them a touch. Even if you've got the best performing and most scalable website in the world, there is still a slight lag. You know, it might only be 30 seconds if you've got a really optimized auto scale environment. It might be more like five minutes if it's a little bit of an older generation. So highly recommend to consider spreading your email and or SMS sends over say a 10 minute period or you know, if you worried, spread it out over a half an hour. It's really not going to make a massive difference to that customer experience if they get it 10 minutes later than their best mate. But it gives you just a little bit of risk mitigation to a allow the cashers to do their job and get nice and warm and avoid that. The death spiral that we're trying to avoid at all costs.
Nathan Bush: I love it. Great tip.
Nathan Bush: In terms of other easy and I
Nathan Bush: say easy, but quick wins for retailers who might be looking to go and to make some changes straight away. Are there any other quick wins that come to mind to improve site performance?
Jonathan Day: Yeah, look, we've talked about headless and PWAs and those sorts of things and they're not a quick win, they're a substantial win, but it's not a quick win. So having something that gets you part of the way there is definitely a good strategy. So there are some techniques that we can do to try to accelerate the delivery of sites to the customer and that's about trying to preempt and guess what their next actions might be. So we can do things called prefetch or pre resolving. Understanding that if you're on a homepage and there's some promoted products, then there's a reasonable chance they might click on one of those products. So go and get that data ahead of time. If they don't click on it, throw it away. Particularly if you're using lightweight data up and down the wire, there's very little cost. Most consumers are on an unlimited data plan these days, so try to preempt what their next most likely action is.
Nathan Bush: And is that A technical implementation.
Jonathan Day: It is a technical implementation, but thankfully there's some pre written tools out there that are open sourced. Yay for open source. And you'll need some help to implement them, but a competent agency will be able to help you with that.
Nathan Bush: What about simple things like scanning for image size and cleaning up images, does that still work?
Jonathan Day: Yeah, definitely. Images are one of the real quick wins for sure. When you run the core web vitals report from Google, it'll actually give you a list of images that are ideal for optimization. So these are the ones that are either the wrong size, they're too large or they're being stretched, but also the ones that are too heavy that you can reduce the pixel density of them or some other techniques. So that's definitely a quick win. I've said it before, I'm going to say it again. Third party JavaScript is very, very dangerous. Ironically, one of the worst offenders is Google themselves. They have so much data, oh, it's crazy. So they will ding you in their own report. They will tell you that One of the two worst performing JavaScript files are the Google Trusted Stores thing and Google Fonts, which is terrible because it gives you that the fountain familiar with that, the flash of unstyled text where you get vanilla fonts and then they get replaced with the Google fonts, which lots of people do. Come on Google, you gotta meet your own guidelines here.
Nathan Bush: That's a great tip, thank you. And then we talked obviously about Magento. Sorry. Adobe Commerce. Is this, all of this activity and this monitoring and this optimization still is relevant for off the shelf self hosted platforms such as Shopify?
Jonathan Day: Absolutely. And in some ways more so. Shopify is a really great option in the way that it handles all of the infrastructure for you. It's something that merchants don't really need to think about security. There are still security risks to be clear and Shopify sites do still get breached. So it's not a free pass. You need to make sure that you're following secure development practices with your agency and with your admin and all of those sorts of things. But a lot of that is Shopify does take care of certainly the infrastructure elements for you. But what that also means is that you don't get the opportunity to optimize it. You're entirely responsible on whether it's BigCommerce or Shopify or Vtex or Commerce Tools or any of those sorts of SaaS solutions to optimize it for you, which they do a great job of in most cases. But again, it's A one size fits all in many cases. So making sure that your particular use case is a good fit for that infrastructure is important and so exercising it through those independent tools like a Blazemeter or similar, but also controlling what you can control, control. So the things that your can influence around image sizing, serving up right size pages, not having really heavy pages, not throwing tons of third party JavaScript into a website, which is a real gotcha. We see sites that have got 4, 5, 6 megabytes of JavaScript being loaded on every page load, which is just brutal. It doesn't matter how fast the server's going to be, if customers are waiting to Download that much JavaScript, you're going to have a bad experience. So absolutely you can move the needle and also prove where your friction points are on a hosted site so that you're not caught out on those key days.
Nathan Bush: Great advice. What's fascinated me about this conversation has been a lot, but if I think about themes, if we come back at the start we talked about some of that research that was 20 years old, 10 years old, around how site performance impacts customer experience, which impacts conversion and commercial outcomes. That hasn't changed, right? That's still solid research and still the pattern that we're seeing. However, the way that we get there through how we build websites, how we measure has changed a lot over the years. What do you see coming up say in the next five years in terms of development or innovations that you expect to emerge to help brands deliver a high performing site?
Jonathan Day: Look, it's one of the things I love about this industry and we get really passionate about these optimization that we can find for our customers. You know, as I said, many of our customers have been with us for over a decade and the journeys or what's important about it. So what I'm really pleased is that there is no one solution to solve all of these things. There's no one platform to rule them all. There's no one optimization that's a silver bullet. So it is about that conversation between a merchant and their agency to, to deeply understand that customer's experience. As we said right at the outset, how do we every eyeball that hits our site right now, we want to give them every opportunity to check out because there are less consumers with a spare cash in their wallet right now. So if they're coming to the site, they're motivated. So let's give them that great experience and make the most of it. So there's no one tool. But what we do see is that there are continually ways to monitor and progressively identify improvements that there is no one and done. You reached a particular metric and there's no further juice to be squeezed out of that particular optimization. And particularly as customer expectations continue to rise. As I said, if we were just building a static website that didn't have any real interactivity, performance would be trivial. But I love it. A few years ago one of our clients said to us, customers are ringing us up and telling us that the website is broken. And like, website's not broken. What do you mean? And they're like, well, I can't check the store stock in the Chatswood Store. So it's broken. Oh no, that's not broken. We just haven't built that yet. But the expectation from the consumer was that of course you've got the ability to see livestock into the Chatswood Store. So we have to continually be lifting the bar around that interactivity and that continues to create performance challenges and opportunities.
Nathan Bush: Brilliant. If we've got retailers listening to this who are coming away inspired and informed around what site performance means now and really want to spend a few hours getting started or restarted on that journey, what advice would you have for them as that starting point?
Jonathan Day: Obviously I love a chat about this, so definitely really welcome anyone to reach out. Would that be through LinkedIn? And the Allegiant website will be Online Retailer in a couple of weeks. I'm not sure if we'll have gone to air by then, but say I'd love to have a chat in the corridor at Online Retailer but more formally we've got a process and a tool whereby we can assess your website and this is a service that we offer and especially for add to cart listeners. We'd really be pleased to run that objective assessment for you. And that leverages some of the industry standard tools that we've talked about, but also summarizes them in ways in terms to make them actionable and some things that we've learned from the various platforms that we work with as well. So that's a really good starting point and can give you something that you can also share with your stakeholders to help justify investment in performance because it has such a measurable and direct outcome in terms of the commercial returns.
Nathan Bush: That's very generous offer. We will put the link to that in the show notes as well. So thank you very much. Jonathan, what's coming up? You mentioned Online Retailer there, but what's coming up for yourself and the team at Allegiant over the next 12 months?
Jonathan Day: The next month is super exciting. I Think we've got five major launches going out across all using that sort of PWA pattern we talked about. What's interesting is that spanning a really broad range of use cases. So that's from a wine distributor to a B2B, hi Fi and audio seller through to another fashion and apparel. So there's a lot of different platforms and systems, but the momentum behind these headless, highly engaging and interactive stack is really quite powerful. So our team's excited about that because we're seeing great productivity for our development team, which is great. Again, in this environment, making sure that every hour of effort is highly valuable is exciting. But we're also pushing the boat out on some of our accelerators, helping merchants to get up to speed with their PIM capability, with their order management and also with getting the most out of their existing stack. From an E Commerce point of view, as I said, we don't expect that a lot of people are keen for Big RE platforms right now, but how do you leverage that existing investment, those existing integrations, the knowledge in your team and de risk having to change to build on top of something that is not. That's something that is a real future in the next couple of years for this industry.
Nathan Bush: Exciting times ahead. Jonathan, thank you so much. You've been extremely generous with your knowledge and everything that you've shared for free and openly today. Some great examples in there, some great tools that we can get stuck into straight away and obviously that amazing offer of having your team look and audit your site as well. Well, Jonathan, if people want to get in touch, what's the best way?
Jonathan Day: LinkedIn's great. Definitely keen to meet up with people there. Our website gives you a little bit of an insight as to who we are and some of our culture and the way we work with people. And we'd love to hear from you there too. So otherwise, give us a shout at online retailer. And if I'm not talking to Nathan, I'd be happy to talk to his listeners.
Nathan Bush: Just interrupt us. We're probably talking rubbish anyway. Just feel free to interrupt us.
Nathan Bush: Jonathan, thank you for joining us on ADD to cart.
Jonathan Day: Thanks, Nathan. It's such a pleasure.
Nathan Bush: I really love the episodes where we get to deep dive into a technical element of E commerce. And it reminds me that while the foundations of E commerce usually remain the same, the tools and the measures we have at our disposal are constantly changing and evolving. That for me is really exciting. If you'd like to take Jonathan and the team at Allegiant up on their website, performance audit for free. Make sure you reach out to them. Visit Allegiant A L I g e n t.com au or reach out to Jonathan direct on LinkedIn. Here are the biggest lessons I took away from my conversation with Jonathan on Site Performance Number one Correct Core Web Vitals are vital we mentioned the death of Google Universal analytics at the top of the episode. It used to be a pretty handy place to get an indicator on site performance. Now, if you aren't monitoring Google's core web vitals, you are missing out. Make sure you're staying across those four key metrics, especially lcp. Largest Contentful Point can you beat Jonathan's Kathmandu example of 91 out of 100? Number 2 Performance Tool Belt along with Core Web vitals, Jonathan mentioned a number of other tools to help you manage other elements of site performance. I want to repeat them here for you in case you miss them. New Relic for real User monitoring, Logrocket for capturing user experience errors and Blazemeter for stress testing. All are pretty accessible and will give you the why behind the metrics that
Nathan Bush: you see on performance.
Nathan Bush: And number three, don't forget load testing. It's great that you're measuring and benchmarking performance now, but is this the experience that customers are getting when you run a promotion or have a new release? It's so important that you stress test your site ahead of time using tools such as blazemeter. And as Jonathan said, you should actually, actually see performance improve in those moments, but you really need to see it beforehand. I also love the little tip that Jonathan gave there about batching emails a few minutes apart to try and spread out the load on your website.
Nathan Bush: Very smart.
Nathan Bush: To get the highlights of today's episode, head on over to add to cart.com and sign up for our free newsletter each Tuesday. We will send Monday's episode Episode summary links and discount codes for you to go next level on. And if you're looking to explore your next e commerce opportunity, come and Visit us at eSweet. We're a dedicated e commerce talent agency connecting the best e commerce talent with the fastest growing brands in Australia. Head on over to esweettalent.com where you can download the free E Commerce Salary Guide and sign up to our weekly ecommerce job emails. Thanks for listening and until next time, keep those customers adding the Cart.
