Speeding up your web experiences!
Understanding the difference between fast and fastest
Site loading times & overall performance have a direct impact on customers satisfaction, as well as driving conversion.
Hello and welcome. Welcome to a session on from Experience League around speeding up your web experiences. My name is Mark Schultz. I’m a product marketing manager here at Adobe based in the APAC region specifically here in Sydney, Australia. We had a great session lined up for you today from Experience League. If you haven’t checked out Experience League yet, great place to check out great documentation tutorials and interact with other people who are doing exactly what you do. So if you haven’t already, go and check that out. Now, this is a live session and hopefully you’re watching it live. But you have the opportunity to ask questions and interact with us. So the comments if you just want to say hi, you want to ask a question. We’ve got some great content to go through today. So with that, let’s get straight into the session. Let me introduce Cedric Cucher, who is the lead product manager for Adobe Experience manager sites. Hey Cedric. Now Cedric, I’m sure I understand what you do at Adobe. I know you do many things. So maybe you just want to introduce yourself and explain all the things you’re involved in. Sure, sure. Thank you. Well, thanks for having me first. I know I’ve been listening to your sessions with other folks and so finally I’m on to. Yay. So what am I doing? I am the lead product manager for AM sites, as Marcia said. I just recently took over extra responsibility. Actually, I was leading the storefront team on Adobe Commerce. So I really focus on topics that are about delivering web experiences and I think that’s what I want to talk about today. How do we deliver fast websites? So get into it. Good. Hey, just before we get into the main topic, I couldn’t help notice the fun fact. You can’t tell Liffin, right? So there’s this thing, apparently, there’s people who cannot distinguish left and right. I’m one of those. It’s a weird thing. It’s really under pressure, like you’re in a car and then you’re trying to find something and people next to you say, wow, it’s on the left. Make the left turn. And I’m just high confidence to turn to right. Yeah, I don’t know. It’s a weird thing, but this can happen. Yeah, it’s interesting. It’s a fun fact. I’ve known you for many years. So it’s one of those little things, but you also grow orchids. Yeah, so I think that was kind of like a joke as a comparison. There’s rather complex things, I guess, that are rather easy, but they seem to go easy. Yes, they do love to do that. They’re a good collection of orchids at home. That’s actually kind of a challenge. They’re blooming for a good few months, really nicely. And then, obviously, they’re somewhat of a fade. And how to get them to grow back. It’s a lot of people can’t really do it. I don’t think I have good tricks here to share today. I guess I can share some other tricks, not about growing orchids. But there’s ways to do it. And it’s really fun. It’s rewarding. Because, obviously, it’s a lot of stuff. You never know, you might get people hitting you up on Twitter or LinkedIn for orchid tips, we’ll say. But yeah, let’s get into today’s topic. We want to make web experiences fast. And let’s get straight into that. What does it mean when your site is fast? Why should we bother? Well, let me, this is good. So let’s talk about this a little bit. And I want to show you something after that. So let’s talk about it. So first of all, most of us, when we visit websites, for us, websites are fast. Because you probably have decent computer. Because we’re working with computers, so we have pretty decent computers. We probably live in an area where there’s a good network, or you’re in the office, or at home and have a good network connection. So most websites are probably fast. But again, there’s lots of folks that are not. And I think that’s one aspect of it. And then we’ll talk about this in more details. The other aspect I think which is interesting is really, you go to a website to complete a task, or a web experience, you complete a task. Or you have something in mind, typically in a rush. And so the performance of your site can make a difference to whatever that person will complete their task or not. So the success rate of what happens on your site is depending on the performance. So if your site is really slow, and again, if your site is really, really slow, you might have experienced that before yourself, where you kind of gave up and said, no, that’s it. I’m out of here. I’m going to go somewhere else. I’m going to do something else. So it might have not happened to you often, but that certainly might have happened. So I think these are the two parts that I think I certainly want to kind of want to dive a little bit more in. Yeah, I think there’s a user experience. Everyone knows when the site’s slow, right? And there’s a measure of, is this acceptable experience? But then it’s not just about acceptable, right? It’s like, there’s a so what around, when am I done? What’s good enough? And is it just a pride thing as far as, I’m really happy with my website performance? Or what does it actually mean from a business perspective? Yeah. So, I mean, let me actually quickly share a little something, just one point that I made earlier, if we can switch that over to my sharing. So going back to the devices that folks use, again, websites that are probably faster on your computer. So that’s a common phenomenon. But if you look at the distribution of what kind of hardware, and this is actually a mobile device, most traffic today on websites are actually mobile, particularly when it comes to commerce. And so it’s interesting that, yes, it’s true that if you always have the latest iPhone, you probably won’t have really that many performances. Websites might not be as slow as for most other folks. But if you actually are not buying a high end phone or not having a high end phone, the performance of the CPUs and the network haven’t really grown substantially. And you see this in this graph where over the years, on one hand, iPhone and the top of the line Samsung phones have grown nicely versus the current more mid range, low end phones, actually have kind of stagnated, they haven’t moved. So in this case, it was like, oh, sure, yeah, no problem. We can add even more JavaScript. There’s no issue with that. It’s fast on my computer. It’s going to be fast on mobile too because everybody has the latest phone anyway. And that’s not true. I think that’s the fact that we have to understand here. I think one thing. Now, to your question, what happens when so, there’s a few things that I think are important. Let me actually get into, let’s talk a little bit about the business aspect of it, and then we can maybe talk a little bit about the technical part of that. So if you look at, and I talked about people not being able to complete their tasks, that they were intended to come to the site. So there’s some good research out there that are linked up here that, and then I will be able to show some of our own research shortly here also, is really that there’s these key things like how long does it take until the website appears visually, which what we refer to as LCP or largest contentful paint. Right. And then there’s the other aspect of it is how quickly does, like just again, something actually starts loading and then until it’s completely loaded. But we’ll get to this in a bit, but they do matter, whatever you, how long you’re staying on the site. So one of the key metrics is that people track in, you know, Google Analytics or Adobe Analytics, whatever analytics you’re using, is really this time spent on site. Like how long are you actually staying on that site? And obviously another one is the bounce rate. Like are you just coming to site and just go away? Right. So bounce rate is you’re not actually doing a second click, you’re just doing one click. So these are the bounce rate, time spent on site. So the first thing that you notice when you take it on the existing side and you start tuning on the performance, you’re trying to make that site faster. The first thing you’re going to see in your analytics is that time spent on site will go up and bounce rate will go down. And this graph kind of shows us a little bit. Now that’s one particular test that was done. That is obviously, you know, actually specific numbers here. But I think we’ve done a few of those by now. And it’s been interesting that we were able to replicate similar improvements along the lines of if we really do that. So in this case, it’s almost, you know, it’s kind of like it’s a no-brainer. Why are you not able to do that? But I think that’s one certainly aspect that is that makes, and ultimately results in conversion rate. If that’s something that actually happens on your site, if you’re always in commerce, there’s conversion rate, some sites don’t really have that conversion. But then, you know, time spent on site obviously also helps for the brand to, you know, there’s more exposure, more time, more time people reading things and kind of therefore, you know, learning more about the brand or the product or services that you’re offering. And I think, you know, you brought up a good point around like the mobile aspect to it because I mean, a lot of us sit at home, we’ve got fiber connections and things are ultra fast. But, you know, I’m in the APAC region, a lot of people don’t even use desktop. They just, you know, it’s mobile first for everything. You know, the latest stats as far as you look at mobile, you know, traffic is around what, 65 to 80% of web traffic out there. So it becomes increasingly important. Even, you know, when I’m traveling around the United States, even though the, you know, the cell coverage can be really good, it’s a lot of times when it’s not so good, right? So I think, you know, your comment around bounce rates and time on site, it’s not just for normal everyday traffic on desktop, but it’s, you know, accelerated when it comes down to, you know, connectivity and the actual device itself. So, yeah, good to know. All right, excellent.
So I don’t know if, one thing that I would love to kind of go into a little bit more, if you don’t mind, is we, out of the, we actually did an experiment.
We said, what would happen if we create the fastest website possible? All right, you know, one thing is having a good site and kind of improving it, right? But what does it actually mean if you could create the fastest site? What would happen? So let me show you, I’ll go back to sharing. And again, we’re going to spend a few minutes talking about that. So give me, so the question is, what does it actually mean to build the fastest site? Right? What does it actually mean? So here, what we’re looking at is two screenshots that we’ve made. Now I’m going to show you the live site and I’m going to explain it a little bit more. One was in the beginning, was the existing site, right? Where you see some little timing shares of largest contentful paint on mobile was like, you know, 20 seconds, which is reasonably long as you know. I don’t know how many people are actually going to wait for 20 seconds. Now again, might it be okay or not okay, I don’t know, depending, but you know, if you get that down to like one to three seconds, it is no brainer, no problem at all. Right? So what happens if we could make sites that are fast? Now these measurements that you see here, and again, some of you might be very familiar with that, is what Google has established. One hand is what we call the Lighthouse score, which is a lab value, which means it takes your environment or whatever environment the test has done and see how fast is it on that particular environment. And it does add some simulation to it to kind of figuring how would it be with lower network or lower CPU. So that simulates some like older devices there for mobile. And then there’s data that is the Chrome User Experience Report where you actually get real data. So I’m going to show you both a little bit of what that means if you can create the fastest site. Now before we even get into this discussion of, okay, sure, you can make a site that fast, that’s awesome, great. But who are the fastest websites, right? Like if you want to kind of get a benchmark and it’s interesting. So of course there’s a few. There’s not that many actually. If you think of it, really go find one. But so an interesting fun fact, I guess, the UK government websites, actually generally the UK government websites, they’re some of the fastest websites that the UK government is doing. And so it’s interesting. So the way to measure, the way to look into this or measure this, site, trio, where you can access the Chrome User Experience Report for any different site. But if I basically go look that up for, and you can obviously do that for your own site at any time. Go. Of course. Let’s see if I can, loading that.
Oh, wait, what did I do? Oh, here we go. The training slash. Anyway, so if I go look that up, it’s so you see some of the technical, this is now not, you know, it’s not like the analytics thing, like time spent on page and bounce rate, but this is more like the Core Web Vitals, where you see technical specifications for how fast that site is. So here you’ve, it’s kind of an interesting stats. So again, the largest comfortable paint is when the website actually appears visually. So that is the, in my mind, the most important metrics. Now again, the others are also kind of good indicators of what’s going on, but the largest contentful paint is good. So in this case, you know, that’s an absolute phenomenal number. So 97% of all visitors that go to the government, UK government website, and not just the homepage, but like all pages below, get the largest contentful paint in 0.7 seconds. That is absolutely phenomenal. And there’s not many websites out there that are faster. Okay. So if you think of what the fastest website in the world, okay. So the question is, but then when you go look at the site itself, you know, okay, it’s basically text. There’s not even images on it. It’s very simple, but in this case, that’s a very good thing because again, folks can on their phone or whatever, it gets very quickly, quickly do whatever they need to get done for the UK government. It’s great, right? But we basically went back and just, how can we build sites like that, but not having limitations or, you know, like I want to have an image, I want to have a banner, I want to do experimentation, I want to do personalization, I want to do all these things, but still be this fast, right? And I think that’s, it’s been a very interesting journey for us to figure this out on how to do that. And so I think that’s certainly one aspect that is technically, I guess, pretty challenging if you think of that way. How do you actually do that, right? So how do you get, how do you do that? So let me actually… I mean, you’ve just brought up this mention sites, I mean, obviously to define fast, we need to have a metric. You mentioned LCP or Largest Contentful Paint being one of the key ones, that you look at, but as far as tooling, you’ve just gone to this site, other people might know like Lighthouse scores, et cetera. So where should I get the measurements? Okay, so obviously you can have your… Let’s talk about how you’re not going to get your measurement, okay? A lot of people make this. So what, you know, you might know that if you’re on a site like this, Google has developer tools in the browser, and then you can do the Lighthouse report within your browser. Okay, do not do that. Okay, don’t do that. Because that testing your local computer, and if you have a fast computer and a fast network, it just tests your computer, and that you might have splendid results, even though in real world that doesn’t really matter. So if you want to do Lighthouse scores, the best way to do that is with the PageSpeed website or PageSpeed Insights. It’s called PageSpeed Insights. That’s in order to get kind of like, I guess, it does both. It loads the data from, I guess, the real telemetry data if your website is actually in production. If your website or experience is not in production, which is most likely we’re still working on it, then you won’t get any telemetry data because people are not on your site yet. In this case, it does the actual Lighthouse score. It calculates the score based on your site. You’d have to make your site public in order to make it accessible to that, but I think you might find a way to do that. And then it actually measures… For those who don’t understand terms like telemetry, what does that actually mean? What am I missing out on? Okay, so anyone, like if you’re using, if you’re using Google Chrome on your phone or on desktop to browse around the internet, Google is actually collecting how quickly the site is loaded for you, and it’s sending this data back to Google in a way that’s privacy preserving. So, you know, they won’t really collect your IP address or anything. So there’s no way for somebody to actually collect or somebody to actually go back and see what kind of sites you visited. So it’s definitely built in a privacy-preserving way. And so this data is actually then aggregated. So this site that I used earlier just now, this one here too, they basically use an API that goes against that telemetry data that is collected. Again, it’s totally aggregated data. You can’t tell individuals from it anymore. It’s just aggregated. And it works for pretty much all sites. If you need to have a certain amount of traffic, what it do show up. If there’s too little traffic, they won’t add you because again, that’s the privacy-preserving way that it’s just a few people accessing a site. They don’t want to add that to the dataset. But if you have some decent amount of traffic, there should be no problem for you to be able to access that data and then be able to see how your site is doing. Now, again, you can obviously collect the data yourself, but these are public datasets, which are really good to kind of, I guess, compare with maybe some of your competitors, how you’re doing versus them, or you can figure out some of the projects you recently did. Yeah. Yeah, so obviously I’m assuming everyone’s like sidetracked right now and they’re going and putting their URLs in and trying to test things out. But, you know, measurement’s one thing, but what is the benchmark? Like, how do we know what good looks like? Yeah, so there is, like for each one of those values, there’s basically thresholds. Actually, I have a better value for that. So the way that gets calculated, actually, no, not me, actually, two different, a mix of things, not good. So one thing is for the data that’s collected telemetry, there’s kind of like a definition of what is good and what is poor. And that might not be the best place to show you that. Actually, Google has a good page where this is all documented and you can go to Core Web Vitals and then you’ll find that same. But there’s a base, you know, that’s kind of what folks decided that based on looking at the data, that is probably something that is considered good and that’s considered not so good. Now, again, there’s obviously lots of like research I’ve been into kind of deciding that, what that is. Now, when it comes to, that’s for telemetry, there’s the same thing for scoring for Lighthouse, this for lab, if you do the test yourself, where depending on which metrics and what value this has, how much scores you get, right? And so that’s the way the score gets calculated. This, I guess, now, I guess famous Lighthouse score 100, which is basically the best you can reach in terms of if you reach, if your website has a Lighthouse score 100 of both desktop and mobile, you’re considered among the fastest websites in the world. So I think that’s kind of correlating this back to why is the score important? The score helps you to kind of obviously gamification, sound like, hey, I want to reach this, right? That’s one thing. But the other one is also what do you get? Like if your website has a Lighthouse score for mobile and desktop of 100 in Lighthouse score, you’re among the fastest websites in the world. And with the benefits that we just mentioned earlier a little bit about. So a lot of questions there. But let me just pause for a second. If you’re watching live and you’ve got a question or even post live, you’ve watched the recording, feel free to drop a question into the chat. And we’ve got Century Key Live so we can absolutely pick his brain and get more insight. But my immediate question for you around that perfect score of 100, if I invest effort and I get to 100 or as close as possible, am I done or is this a sliding scale that I have to keep renewing and keep looking at? Well, depending on what kind of changes you’re doing to your site, but typically it is what we see often is that some of our customers, they launch their site, they spend a lot of effort in making sure it’s fast. And then over time it deteriorates because folks just keep adding things to it. So one of the popular things that reduces your score is extra JavaScript that gets added. Oh, we need this tracker, we need this, we need that. So over time more JavaScript gets added, for example, through a tag management system or so. So you can go to the tag manager, Google tag manager, or the one from Adobe data collection. And then the website actually gets progressively slower because more of that gets added, which adds to the whole weight of the site. So it is something to kind of keep a tap on, kind of understanding of that and obviously have mitigation strategies and there’s ways to add this functionality without impacting the score. But I think that’s the one that I think is where it gets interesting. Like, okay, how do I even achieve that? But yes, you have to ideally keep at least, I would at least check once per month, put on your calendar once per month, check how things are going. And because in case it suddenly deteriorates. Now, again, I know folks, some folks set up their own monitoring systems for that. I think it’s a great thing to do to actually keep an eye on that. But you raised a very good point because I know sometimes we’re rolling out a project and as pre-go live, we want to make sure our score is high, but the responsibility is broader than just the core dev team who are building the initial site. It’s everyone involved and it’s an ongoing thing because things change and things do evolve, right? And there are requests to add functionality, et cetera. So, yeah, I think that’s a good metric to, or a good rhythm to be in, right? So, and then do you see the, I mean, will there be a time where there might be a score of 200 to aspire to, like as things change or do you think this is something that will be reflective for some time now? No, I think so what happens is that sometimes the way the score gets calculated gets refined or changed. I think it’s going to be 100, that’s it. But you see here, for example, actually I’m on the Lighthouse scoring calculator page, which is an open GitHub project, where you can see there’s different versions of the metrics of how it was calculated. Depending on, you see here the different versions, like version five, this exact site that I’ve scored here actually only had a 93 and then afterwards it went to 100. And actually version 10 was just introduced a week ago or so. So, there’s basically a debate on what are the things that really matter to kind of calibrate that. The debate is, the idea is that the lab score simulates as close as possible the results that you get in real world. It’s obviously tricky because there’s many different factors that are involved in whatever your actual real life, real world score is. Because that one obviously is depending on what kind of folks are coming to your site. You have a global audience, you only have a national audience. And that is a big difference just because the way you built your site to be globally fast is very different than just being in one geography. So, there’s things that obviously impact that in order to ultimately achieve that. But I think the system is certainly here to stay, has been really stable over the last few years. Scoring gets adjusted, I guess, a little bit depending on to make sure that it really represents as close as possible actually it’s going to happen in real world. It’s the whole point of the score. Yeah, got it. So, the score will remain, the top mark will be 100 but the test or the acceptance to get there might change as standards change, etc. Okay, that’s very clear. So, I mean, is there an obtainable goal of getting a perfect score? Like if I’m the fastest, what does that mean? Apart from bragging rights, right? Is there any beyond what you’ve already shared? Is there any other things I should be looking at so I can, before we get into how to do this, there must be some effort to put in there. So, what’s the payback versus the effort to put in there? Yeah, so I think for this, I mean, two things. Empathy for the visitor, I think we talked about a little bit. Okay, how much percentage of your visitors really get a good experience, right? So, number one. So, that I feel like is really, it’s something you can be proud about, right? You say, hey, 97% of the visitors come to our site with fast data experience. Great. The other one is globally. So, the ability that, so it’s like, that’s the UK government, it’s the other side here, but it doesn’t really matter. So, here, for example, this is the site that we’ve built. It shows that globally folks have, it doesn’t matter where they came from, they had a fast experience, right? That’s actually pretty hard to achieve. It’s because of the network latency and other things, you have to make sure that all this is available at the edge, no matter where, in order to do that. Now, the gray areas just means that there was not enough traffic to actually grade that. So, this site here gets maybe 400,000 requests a month. So, it’s only in these geographic areas that folks are visiting the site. In this case, that’s all the data I have, but if you go to UK government, it’s actually a good thing here. So, this is actually globally, almost completely green. There’s some exceptions. Now, again, we have to say, some geographies, it is a little harder, just because the fact that folks obviously don’t have that good infrastructure over there and all the computers’ networks are not great. So, you will respect that. So, particularly, for example, in Africa, it’s really hard to get all of Africa green. It’s being almost unheard of. It’s probably the best you can see here. I don’t think anybody beats the government here. Australia is actually a little bit of a surprise here. It’s definitely possible to get Australia green. So, I’m not sure what happened there, of why that is not the case in this particular incident here. Yeah, but I mean, that’s the point of doing this, right? It’s raising questions about experience that we can go and investigate. And obviously, depending on what your business is, looking at, first of all, the markets you’re in and where the relevance is, and then prioritize those, but then to think about where else other people are visiting from and what their experience is like. So, yeah, another good perspective. Yeah. So, look, we’ve obviously talked about the need, and there’s from bragging rights to monetary impact, there’s a lot of reasons to look into making your site performant fast, if not the fastest. But if it’s so obvious, why isn’t everyone doing this already? So, is there a magic make it fast button somewhere that we can just go and press? I wish, I wish. So, building a site like the one I have here, I showed the results earlier that it also has a lot of score of 100 globally. And it was the site that I mentioned that has like, you know, roughly 400,000 requests, page views per month or so. This site has ads, advertising, it has dynamic data in there. It’s, it loves things. So, this is a regular site, it’s not anywhere special, but it still achieves to do that. So, you ask yourself, how do you do this? So, the first thing you have to do is really budget. I know it sounds like, what do you mean budget? So, in order to achieve the performance goals, you need to know how much can you actually spend on each of the different things in order to actually get to the score 100. So, Ian, so I had this page open here earlier, where I’m showing the score calculator. And it’s also kind of like a good page to think about, to talk about budgets, because you can kind of play with the numbers here and see what happens to the score. So, you can kind of play with the budget, so to speak, right? You can say, okay, what happens if I get an LCP of this, am I still 100 or not? So, the magic trick for this is really, the thing that makes it so important is really total blocking time. Now, again, performance is a myriad of things. I’m not going to go through all details. That alone will take a few hours to talk through all the details, everything we did to get to that, what we do here. But the key aspect is really this, how much is the browser busy with executing things that it downloads before the user sees something? And that’s referred to as total blocking time. So, blocking because the browser is kind of blocked from visualizing the site. And that one is really important. So, you see here, like, if I have 30 milliseconds here, so that in this case for this particular site, the browser was blocked for 30 milliseconds to execute whatever we send them. You know, when you download a site, it downloads HTML, it downloads JavaScript, it downloads CSS, it downloads images, right? It downloads all the stuff and has to kind of make the site out of it. So, in this case, it spent 30 milliseconds doing that. Now, if you put that number up, and I’m playing here a little bit with the thing, and as soon as I hit 100 milliseconds, my score gets to 99. So, you get a little bit here. Okay, so I probably have around, whatever, 40, 50 milliseconds that I can spend doing this. Now, of course, the other metrics also matter. But if you think of, if I’m picking out one, right? So, I think budget as the number one item. Again, I want more details, but you get the idea. So, you have to set yourself a budget for these things. The other is, you have to think of the browser as, again, as a client that is making network connections and is opening things. Everything takes time. And if you want to load it, if you want to load a site in below a second, or around a second or something like that, you don’t have to, again, think of what are all the things that are actually happening or needs to happen in that second. And a popular mistake, if you want to call it that way, or a popular thing that is being done is, folks say, well, you know, I’m going to get the images from here. I’m going to get the JavaScript from there. And I’m going to get the website from here. So, the browser having to talk to different servers in different places is basically something you cannot afford. If you want to build the fastest website in the world, or you have these results here, you basically cannot afford to make connections to multiple other servers. Just that alone takes time, right? And again, can you build one that has three connections? You probably could. There’s all kinds of tricks to kind of do this, but you’re spending your budget on that. So, you basically have to solve this by, okay, how can I avoid that from happening? Is there ways to do that? Now, luckily, there’s simple ways to actually avoid that from happening. So, I think it’s basically a whole slew of these kind of, I guess, budget, plus trying to figure out what am I really doing there in order to actually get to that. And I think that was the exercise that we went through to do that and what it would take to put that into a product. And so, customers could just take the product out of the box and get that performance, I guess, right? So, I think that was the whole aim of this exercise that we were doing. So, you’re obviously putting some focus on the architecture side, the product side, but for people thinking about the coding, the front end experience, you mentioned just there the sources of assets, et cetera, and it’s quite common to see subdomains, et cetera, things like that. So, that’s one aspect of it. But what else should I be thinking about as far as if I’m working on a project, as far as loading order and those types of things to really bump up the scores? Yeah. So, that’s, loading order is a great keyword there, right there. Again, we talked about total blocking time, sense of, okay, how much JavaScript can happen. And it’s all in the order, it’s going to your point, the order is relevant. When you look at the metrics that we’re measuring here, the largest content will paint, or when is the website actually visually there for the user to kind of start reading and understanding where to go next. And is really that initial view. Have you on a mobile phone? That initial view is reasonably small because whatever fits on the screen. If you’re on a desktop computer or even bigger screen, maybe that’s a lot much bigger. There’s a lot more stuff that needs to get loaded in order to actually fill the screen and a lot more content can be loaded. But needless to say, smaller big screens, there’s this initial view that you have. And the other aspect of, I guess, architecting your solution for performance and thinking about performance first when you build something is really thinking about how can I make sure that the browser actually focuses on either rendering or preparing, everything gets downloaded, really for that initial view. I know the page that you’re actually visiting or the app that you’re loading might actually have a lot of more stuff underneath that is not visible at the time of the initial view. And it’s fine if that gets loaded a little later because, again, the user doesn’t really see that unless it starts scrolling. But typically, people don’t scroll in the first second of loading a page. They scroll at second number five maybe, second number four or five. And by then you’ve already loaded the site, you can start loading the rest of it. But this idea of really order, the load order and focusing on the things that are actually relevant for the first view is one of the other, I guess, key ingredients in order to achieve that. Yeah, and then you’ll comment around budgeting before that comes down to what do you prioritize as far as what should you attack first, right? So if it’s a quick win to go and defer some of the loading of the page because you want that viewable area to load super fast and that impacts the score higher than other areas, then you do that first and then move on to something else, right? Correct, yeah. So this idea that you’re really trying to make sure that the browser is not loading things that are actually not necessary for the initial view, that’s first and foremost. I think that’s the easiest one. I know a lot of folks doing this already today, right? But then even go as far as images that are lazy loaded and stuff like that. These techniques have been around for a while. You need to apply all of them. There’s no way to get to the score. But it still might not be enough, right? So you need to really focus on maybe some interactive items that are in the view. Of course, when you initially load them, they might not be interactive in the sense of you’re just visually seeing them, but nobody’s clicking on it yet and then you can make it interactive later. So again, these are tricks, not cheating, right? But it’s just really making sure focusing on the initial experience, the visitor sees what to do next, and when they’re actually on the interactive side, you had enough time to load these things so the user doesn’t really feel like it’s late or it’s coming in late. But at least they don’t have to wait until everything’s rendered in the background and then becomes visual. Five or ten seconds later. Yeah, that’s great. Cedric, you’ve shared a lot of insights, but as we kind of wrap this session up, what are your top three things? What should be people thinking about as takeaways to go and actually do, if not today, in the next few days? Yeah, so I mean, assessment of your own kind of scores and work that you’ve done and kind of looking at this, I think that’s always good. So PageSpeed Insights is a good place to start. Go to PageSpeed Insights and get your current assessment. Use the Trio site to get a little bit of a history on how things are going. Is it improving? Is it not improving? And then, of course, the Lighthouse score itself gives you suggestions of how to improve the site. Some of them are really useful to follow and to do that. That won’t get you to 100, but it will improve the current site that you have. If you do really plan to build a site that has a 100 Lighthouse score, if you want to have the fastest site, you might have to dig a little deeper and maybe rebuild your site, but with that in mind from the beginning. So it’s kind of tough to, I mean, we found, again, there might be ways. I’m not saying that we figured it all out. We tried to kind of retrofit existing sites. It’s kind of tricky. So that’s why we ended up saying, you know what, we kind of like a new approach for that. And the other thing, the reason is, obviously, Adobe is a product company, so we’re thinking of how can we productize things like that. So if you think of when we deliver the product and it has 100 out of the box, we need to have budget left for the customers to add their things. Right. Like you can, we basically need to deliver product that is even faster so that then customers can start adding their things. And they’re still at the end of when they’re done with the project and added everything they wanted. It’s still 100. So there’s an extra margin that we have to add for a project. So I think that’s extra tricky. But the other aspect of that that I might want to say is it’s, again, it’s not one thing. It’s lots and lots and lots of small things that makes it all up. They all have to be correct. And in order to do that. Right. So it’s a lot of, basically, that’s what it comes down to. But we obviously think it’s a super interesting challenge. It’s rewarding. And I think it’s great to see if the experiments that we’ve done so far where, again, the customers, these are real life sites that we built. It’s not just, I think, real life things that we built for experimentation purposes to kind of figuring out how far can we push the thing, adding personalization, experimentation, adding all this stuff into it. If it’s still keeping the score in order to really see how far can we push that, we can have all those people visiting that site getting a good experience. I think that’s ultimately what we’re after. And I was seeing the actual business results after that. So the extra, I guess, dollars that our customers can make. But again, there’s not just one way of doing it. Maybe that’s maybe, I know some people have asked me, maybe that’s a good kind of closing statement. There’s many ways to build sites that are fast. There’s not that many ways to build sites that are the fastest. So there’s not, you know, it’s like, you make choices about technology. There’s lots of ways and you can get to a fast site. If you want to have a site that is the fastest, there’s just a few ways to do that. And I think it’s an interesting challenge. And we’re obviously looking forward to having a discussion in the ecosystem and the community here of how can we more establish that. And people kind of learn about how to do this so that it doesn’t become like a rocket science project to do this. Yeah. And the only thing I’d add is that, going back to your initial discussion around how it reflects on the business. Set yourself some targets. Disable what does it look like if we increase performance by a score by 10 and set a goal as far as does it actually see an impact to the bottom line. And that will help you get attention internally to prioritize this, get the resources and support you need. We just know that this factually works. You increase performance, you get a better business outcome. So, you know, test and learn and build on top of that as you work towards that score. Cedric, we’re out of time. Really great learnings here. So first of all, thank you for joining on the show and sharing your words of wisdom. You’re welcome. Thank you. It was a pleasure. Can we look to get you back in the future for some, you know, deeper details on this and many other things that you’re thinking about? Sure. Sure. Absolutely. I mean, next up is Summit. I know we just wanted to talk about that. So obviously Adobe is going to have a Summit. So I don’t know, you want to talk about, give us a little bit of a feel here? Yeah. So check out summit.adobe.com. If you haven’t heard about Adobe Summit before, it is the event to be at. So Cedric will be there on stage presenting on all the things that’s in his head, where we’re taking the products. It’s high attendance from peers across the industry and it’s in a fun place in Las Vegas as well. So, you know, if you want to work out where is the number one place to be to stay in touch with what’s happening. And Cedric, it’s a whole range of your broader team, right? It’s product managers, it’s engineering teams. We’ve got hands-on labs right up to architecture sessions and, you know, even some sneak peeks and roadmap items as well, right? Correct. Yeah. We’re actually going to have a lab on like how to build the fastest site in the world. Yeah. Yeah. There you go. Hands on it. You can tap him on the shoulder and asking questions. Great. And of course, you know, you reach out to your Adobe team if you want to find out more. Of course, they’ll put you in contact with the right resources and we obviously have account teams right around the globe. And of course, come here to Experience League. There’s always something new here, tutorials, live streams like the one we have today. Talk to, you know, other community members and, you know, share and learn from, you know, what other people are doing different projects. So Cedric, again, thank you. Thanks everyone for joining us today and let’s wrap up there. Thanks everyone. See you next time. You’re welcome. Thank you.
Watch the video above to view this live stream event, where Adobe experience delivery experts discussed what to consider, and what steps you can take to boost performance.
Have questions about it? Continue the discussion on this topic on the Adobe Experience League Community post.