 Thank you very much. Thank you for joining me. If I'm squinting, it's because I cannot see. These lights are extremely bright. So, I have to apologize for that. Anyhow, let's get going because I do have a lot of material to go through. I just want to say good morning, Dom. This is something that I do every day for the five of you who probably follow me on Twitter. This looks familiar. And I also do want to say that I'm happy to be here in D.C. First time, so I was pretty stoked. Thank you. Or what we like to call at work, EC2 US East 1. It's one of our zones. I just thought that was cool. So, D.C. home of the Washington Nationals who used to be the Montreal Expos, by the way. Any Canadians? Thank you. D.C. home of the Washington Mystics, WNBA. I was actually going to try to go to this game tomorrow, but they won $100, so I'm not going. Speaking of NBA, once the home of Michael Jordan, when he played for the Wizards, for some of you who remember that. Also, birthplace of Bill Nye. I did not know that. Shout out to the science guy. Also, the birthplace of the man who invented the internet. I think we all remember that. Mr. Al Gore. I thought that was funny. But, you know, he did pass through this thing that is known as the Gore Bill. And the Gore Bill pretty much led to some, I think, some significant moments in history. I think they funded the NCSA, I think, in Illinois, which eventually led to Mosaic. All right, for some of you who might remember that. But let's bring it to today. Today is August 25th, 2023. I'm trying to do some quick math in my head, which is, I think, 31 years, 8 months, and 17 days ago. I am good at math, by the way. And, but, you know, back then, the internet was a little different than it is today. And, you know, back then, some of our concerns were like, yo, is my U.S. robotic motor working? You know, I'm trying to get online now. You know, we had that phone, that little sound and stuff. But I remember having one of those, by the way. But, you know, after all these years, today, in August, in 2023, there are things that we really pay attention to, like user experience, you know? And this is what we're going to talk about today, to an extent. But, you know, what is user experience? You know, can we sort of like, you know, it's like an intangible, right? You can't really touch it, taste it, feel it. But, you know, we try to measure it. And we're going to get into that today, because user experience also, to an extent, covers web performance. You know, and at work, we tend to look after web performance. And again, we're going to talk about that today. So, you know, with the progression of the web performance that we're trying to measure, you know, we had performance APIs that came from what I believe is the greatest application on Earth, which is the browser. Not much happens without it. And then, you know, we had, you know, some metrics that we started to look at, like NAVTIME APIs. You know, I used to really hang around and play with those numbers and whatnot. But that led to some more metrics. And they start to look like this, all right? First contentful paint, time to interactive, largest contentful paint, speed index, one of my favorites. Total blocking time, CLS, time to first byte, first input delay, interaction to next fate. That is a nonnet of metrics that we sort of take a look at these days. But we're going to really focus on a few. Largest contentful paint, cumulative layout shift. That's a mouthful. First input delay and interaction to next paint. So, I want to welcome everyone to my presentation today, which is Corel Vitals 2023. User experience and performance evolved. It's my first time at WorkCamp US, so I'm pretty stoked to be here. Merci. You're much too kind. And, you know, you might sit back and wonder who's this skinny guy with a funny last name. Oh, you got that one. My name's Henri. Yes, French is my mother tongue. I can be fine on socials at Henri Elvetica, so that's Twitter mostly, Blue Sky, LinkedIn, MasterDont and a few others. I work at Catchpoint, where we handle a lot of things. And I specifically take care of a website experience and I get to work on this amazing tool called Webpage Test. I'm from the greatest city on the planet, Toronto, Canada. Oh, come on now. Not Toronto, Kansas, because there is a Toronto in Kansas, I didn't know. And as was mentioned earlier, I'm a bit of a distance runner, and I tend to share this information through socials using hashtag devshoorun. But, you know, shout-outs to designers who run too. That's my next hashtag. Okay, thank you. So, let's get going. Corbett Vitals, who's familiar with Corbett Vitals here? Show of hands. Amazing. So, Corbett Vitals turned three this year. Been around three years. And, yeah, I know, right? And, I mean, they've been very important, because I think they've opened up the opportunity to sort of talk about Web performance and user experience to a larger community. And for those who are not familiar with the Vitals, the definition is as follows. Corbett Vitals is an initiative to provide unified guidance for quality signals that are essential to delivering a great user experience on the Web. Again, that's going to be recurring. It's going to be the refrain of today's talk, great user experiences. And, you know, like I said earlier, how do you measure a user experience? Again, it's nothing that you could touch or feel, but you just know when you've had a bad one, right? So, you know, we talk about using metrics when it comes to the user experience and when it comes to performance as well. And metrics, what are metrics? Metrics are sort of like a unit of measurement, all right? And we are going to talk about measurements because you have to measure. We talk, again, in my space and Web performance, measurements are essential to what we do. And in fact, we say this all the time, you cannot improve what you do not measure. Once again, you can improve what you don't measure. I'm a distance runner. I know what I used to run. I know what I'm running now and I know what I want to run eventually, right? So I live off my watch. So we're going to look today at some performance data, data that's about the Web, and we're going to also talk about Wordpress, all right, sort of comparing the two. And we're going to feature some data from this incredible repo called the HTTP Archive. Is anyone familiar with that? Don't raise your hand, sir. I know who you are. Anyone familiar with that? All right. I believe they have a booth here. Google has a booth and you could talk to, I think his name is Rick Viscomi, who's actually in the front row. Shout out to Rick. So you want to talk to him. But I'm also going to feature data from the ROM archive, something that Akamai put out, and also the crux or the Chrome experience report, all right. Anyways, let's get into some of this data because it's actually kind of fun. So let's look at data about the Core Web Vitals, all right. So I'm basically painting a picture. So on the Web, 41% or almost 42% of sites across the Web have good Core Web Vitals. Now, what does that mean, Ahri? Well, this is what it means. They have good LCP, they have good CLS, and they also have good FID. I'll get into these acronyms in a hot minute, but it's large content from paint, cumulative layout shift, and first input delay. On WordPress, all right, 32% or almost 33% have good Core Web Vitals. So a little bit of a dip, no problem. Let's look at largest content for paint data. So now we're going to look at these Core Web Vitals individually. On the Web, 53.5% have good LCP. Okay, so we have a baseline. WordPress sites, 39%. Okay, we're good. We're going to keep moving. Now we'll look at the CLS, the cumulative layout shift. On the Web, 75% of the sites have good CLS. All right, cool. Let's keep it moving. WordPress, 76.56%. Cooler. Let's keep it moving. And now let's look at first input delay. On the Web, it's 94%, which is obviously awesome, and WordPress, 97%, which is fantastic as well. Now I'm going to look at a non-core vital, but this is going to come back to us a little later. Time to first byte, which is also an important metric that is not a Web vital, but it is something that's indicative of the Web experience we're potentially going to have. The first amount of bytes that come down the wire, super important. On the Web, it's just about 41% who have good TTFB, which is basically 700 milliseconds or faster. On WordPress, drumroll, please. 21.39%. Okay, so now we know what's going on. We can all exhale. We've gone through some data. We've painted a picture of what is happening. Now let's get into the details, and we're going to talk about, again, the largest content for pain to really get you to understand what that's all about. Now it's about visual completeness of the load process. So when you're holding your device in your hand, you're like, okay, I see stuff loading, but what is happening? Am I getting something to show up on the screen in the viewport? And that is very important. So it looks at the biggest element on the screen and is it showing up? Now this is the actual definition. By the way, I'll be sharing my slides a little later and probably in the WordCamp Slack. But it's about measuring perceived load speed because it marks the point in the page load timeline when the page's main content is likely loading. All right? So like the large images, your hero images, et cetera, these are things that we look at. It looks at, pardon me. And in terms of measurements, okay, anything that loads in two and a half seconds or faster is thumbs up. So 2,500 milliseconds. Now between that and 4,000 milliseconds, which is four seconds, it's kind of like me. It's kind of all right, but could be a little better. And greater than four seconds, you need some work. All right? And just keep in mind, this is the main content of the page that we're loading. You may have heard like this sort of like old stat that three seconds you start to lose your users around 50%. Keep that in mind. Now, also something that I want to mention, the largest contentful paint at a 70% rate is an image. All right? So often enough, at 70%, the image content that comes, shows up in the viewport is likely going to be your LCP. That's going to come back a little later that we'll talk about that. And it's the metric that most of the time developers struggle with. All right? Because it's kind of hard to manage. There's a lot going on. You know, I say use the platform because again, I'm going to bring this back a little later. There are a lot of things within the platform on the browsers that have changed for us to get a successful LCP score. And again, it's going to come back. Let's talk about the cumulative layout shift. It's about page stability. What do I mean? You know, sometimes you're on your device and you hit enter and you see something loading, but it's bouncing around. There's stuff popping up. You're like, your button's just like, come on, sit still for a second. That's what the CLS takes a look at. You know, this is the definition basically. And again, I just want to provide that in case you want to give it a good read. But you know, it's for measuring the visual stability because it helps quantify how often users experience unexpected layout shifts. I'll give you a true story here. I don't drive anymore, but I miss it. And I've been meaning to buy a car. And there's a site online and every time I go in to see, hey, you know, maybe the car of my dream is sitting there waiting for me and I hit enter. And I literally stepped back for a second because I want the page to settle down. Like it really jumps around and I'm like, dude, you guys need to fix this. But that's what the CLS is all about, to make sure it's not jumping around. And by the way, it used to be called the jank index. No, that's serious. You can go back online and find it because they didn't know what to call it. They're like, your page is janky. So we'll call it the janking index. And speaking of index, this is how it's measured. So anything 0.1 or below is good. Between 0.1 and 0.25, or 0.25, pardon me, is me. And 0.25 and greater is, well, needs work. And you know, the ultimate score here is zero. Your page is still. And let's talk about first input delay. Now this is where interactivity comes around. Interactivity, which is extremely important to the web right now. First input delay by definition. And you know, we're looking at responsiveness. You know, you want to buy your Taylor Swift tickets and when you hit buy, you want that to work. Or maybe you don't. Apparently no Swifties in here. I don't know. Oh, I heard it. So that's what we're talking about when we talk about interactivity. All right. Now, here we have a timing score again. We want that button to work in 100 milliseconds or less. Between 100 and 300, it's kind of mediocre. And 300 or more needs work. Now, you might remember that early on, FID is the metric that the web in general and WordPress in general was passing or flying colors. Any educators here, former teachers, anything? Yeah. You know, when you have a room full of students that are getting 97% all the time, you're like, they're either cheating or this exam was not the right one. So in this case, the exam was not the right one. And in the research, and again, core vitals three years, they've been collecting data trying to understand what is best. They realized that FID was probably not going to be the right test for it because it basically was kind of like a measurement on that first click. And they're basically striking FID eventually. It's still there, but by next year, it'll be no more. It's going to be replaced by another metric called the interaction to next paint. And I put that little, oh my God, someone said it. Yes. Sorry. I'm embarrassed. I used to be a chem major. Oh, anyhow, because it was experimental for a year. Earlier this year, they kind of announced that, you know, they're going to move forward with staging it and making it official. And next year by March, I believe, May or March, I think someone's going to correct me here. May or March? March. March, it's going to be an official core vitals. And the reason why, because they realized that the majority of the time spent on the page was post, sort of like that initial click, all right? And they felt that they were not capturing the experience that they were supposed to. And again, by definition, it observes the latency of all interactions a user has made with the page and reports a single value which all, or nearly all, interactions were below. So you want to keep that in mind. Now, again, this is just a screenshot of when it was announced earlier this year because they had spent a year sort of like letting developers kind of play around with it and to see what was going to happen. This is a screenshot from Annie Sullivan, a wonderful person at Google, sort of like the lead around the speed team. And I threw that in because I actually had a talk the very next day on this very topic, so I thought that was kind of interesting. But again, the timing metrics are going to be as follows as the FID. 100 milliseconds are better, awesome. Anything between that and 250, OK, 300, OK, and then 300 more needs work. So, now, why are we doing all of this? Why are we measuring all of this? Why are we looking at all these metrics? Well, I'll tell you why. Bringing it back to this date, which is, again, August 25th, 2023, we are sort of like in modern times of the web. But these really got going for these sort of calculations. Around November 2016, does anyone, does that ring a bell for anyone? Oh, wow, correct. I completely forgot about that. I'm trying to block it out, right? This is when the web was being roughly when the web was being accessed at a greater rate on mobile devices than desktop. So for the first time, this is how it was registered. And you have to remember as well that this is not going to turn back ever. I mean, I don't see at any point where we're going to sort of be predominantly on desktop again. It's likely not going to happen. And this is something you absolutely want to keep in mind, because desktops and mobile devices are absolutely different. And let's look at some data again to sort of prove the point. For example, this came from Akamai, Premier CDN, good people out there, and the RUM archive. On their networks, this is what they're seeing. 63% of traffic is on mobile. 6 out of 10, easy. Here's a data point from the HP archive. 10% of sites get more mobile traffic than desktop. Again, proving the point that you have to make sure that you keep in mind that people are accessing your content on mobile first, if not exclusively. And then another data point that I love, the top 1 million through 1,000 sites are being accessed at a rate of 82% or more on mobile. So again, I think I've driven the point home that we are in a mobile space. And I like to remind people that there are two mobile users, iPhone users and clowns. Oh, we have clowns in here. I'm sorry. So, but this is an important point, the one sort of old document that sort of Facebook had floating around. That's actually a library that they had. I think it was called, oh my God, it's going to come back to me. But they realized that, you know, Android phones were being released, say, like in 2015 with 2010, 2008 parts. You know, through the research there. And you know, Android basically made the sort of like flooding the marketplace. You know, inexpensive phones that look fine, that did most of the work that you needed to do, but they were not powerful devices. Let me take this clown off the screen. I'm sorry. But like I said, you know, you get some data, this comes from the good people at Akamai again. What they're seeing is it's a 4 to 6 ratio. You know, 40% iPhones, roughly 60% androids. So something that you want to keep in mind as well. And something else that I'm going to bring up as well that is not a core web vital, but is being tracked. All right. Is anyone familiar with rage clicks here? Okay. If you're not familiar with it, you just don't realize you've been doing it a lot. But this is actually being tracked. And it's actually being tracked by some people, some of the sponsors here. I spoke to one yesterday. And it's really about, you know, again, the interactivity issues. You know, you're trying to hit the buy button because you want those Taylor Swift tickets. And you know, there's a kind of like, you know, definition for it. You know, the amount of times you're hitting the button within a certain area. And but again, this is being tracked. And we're also seeing that when the CLS, cumulative layout shift and IMP are both so-so to poor, you're getting a surge in rage clicking. And that's leading to a poor user experience. Now, ultimately, and this is a fantastic quote that I'd like to bend you around. Page performance is now parts-proof. You know, we do the measuring. Perception, you know, is it loading and all user experience? By the way, if you ever want to use that quote, it's a fantastic one because it's mine. Open source, you could use it all day. Just want to mention that. But it's not over. Let's go back and look at some of these metrics. Okay. So we looked at the main ones I want to mention, largest content for the CLS, the IMP and FID. But I do want to spend a little bit of time on the time to first buy. Because again, if you remember, it was one that WordPress sites in general was kind of struggling with. But this is also where I'd like to introduce the idea of the WordPress core performance team. The statement came out on Twitter fall of 2021. And I caught it from the corner of my eye. And I was like, hey, what's going on here? This is totally cool. I'd love to keep in touch and see what's going on. See how I can help. Any members of the core team in the room, because I know there's one for sure. I spoke to him. I see a hand here. Maybe one in the back. Apologies if I can't see you because the lights are crazy. But they've been doing fantastic work. And I just definitely want to give them their flowers, as we like to say around my block. And when the blog post came out and sort of listed some of their goals, this is essentially what the opening statement was. So what problems are we trying to solve? Well, we know that users do expect and prefer fast experiences. That's natural. And we know that research around fast websites lead to better user experiences. Absolutely. Increased engagement, for sure. And again, these are things that you absolutely want on the web, especially if you're into that e-commerce, right? Benefit to SEO, for sure. Increased conversions and obviously things like being more economical and ecologically friendly. That's a completely different talk. But these are important points. Now, some of the work they've done has been on the TTFB, the timed first byte. And in a blog post, they described on how they've made the improvements from 5.6 to 6.2. And I quote Andre, who's not here, by the way. I pinged him to see if he would be, but on Twitter I messaged him. 6.2 is the first major version that improves server-side performance across the board. And he was talking about specifically timed first byte. He wrote a long blog post about that. And again, speaking of more improvements, here's another tweet whose author is here, by the way. Shoutouts, Felix. You know. 6.3 beta, improvements in LCP. And this is again extremely important. Why? I think I mentioned earlier that the largest contentful paint is one of the metrics that developers tend to struggle with. There's so much involved in the LCP. And it's one of the more important ones because it's the one that indicates what is going on. Like, is there something loading on the page? And that is the main resource that is loading in the viewport. So any improvements there are like major thumbs up. And for those who follow things like performance scores, this sort of matters. And of course, they are also responsible for the performance lab plugin. Okay, a lot of great work has gone into that. And specifically, more recently, I think in 2.6, yes, Felix? The version? 2.6? The performance plugin version? Okay, cool. I just didn't want to get heckled by the front row guys. WebP uploads. So I know once upon a time, some discussions about whether or not WebP would be an important format, well, support across the board on the browsers. You can get some very well-compressed images. And these things matter, especially around the LCP, because you don't want to see a late-loading resource that's then even a sizable one, like a PNG or poorly optimized JPEG. And they also, there's going to be fetch priority support. And again, this will matter as well for the LCP because you'll be able to indicate the priority of a particular resource when it's loading. Very important. So this is fantastic work. Shout-outs to the core team. Because ultimately, performance, it's more than speed. People talk about like, oh man, click, click. How fast was it? It is more than speed. I like to think there's a lot of discovery involved in performance and web performance specifically. You know, we do a lot of auditing. We look at waterfalls and data and metrics all the time, and we're looking for answers to particular bottlenecks. And in the process, we make discoveries all the time. You know, resources that see, you know, whatever, insignificant, but somehow there's a connection and we see what's creating the bottleneck. I like to sometimes compare web performance to say like a crime scene, because you see like, oh, there's like a knife here and there's a blood splatter on the wall. Like, are they connected? We try to figure that out. And the last year, or for a while and even forever, I believe that performance literacy is extremely important. And I realize it's not the easiest, but performance literacy will really expand how you look at the web and how things are being loaded. You know, it's not always about how to do the work. It's knowing what work needs to be done. So the ability to look at a particular metric and say, hey, that's like a little high right there. So here are potentially three areas I should look at right away. All right? And a few, like last year I think we did this, we launched like a free course, you know. We did this to, we wanted people to be enabled to be able to sort of look at metrics and understand what they mean. And, you know, it's like seven or eight modules. You could polish this off in a weekend if you want to, or take your time. But the point is that we believe that performance literacy is going to benefit you and wherever you work. So, you know, you can scan that. If you want to, I'm going to share the link again on Twitter for sure. But by all means, and again, it's completely free. And ultimately, what this will do is, again, bring you up to speed to modern web performance. You know, we are not talking about stopwatches anymore. You know, it's that intangible user experience. But once you understand how it works, it'll benefit you again. So, I do want to thank you for spending a little bit of time with me to look at some NASA slides. You can find me on socials again at this, at Henri Elvetica. And one more thing. I don't have a black turtleneck. I am... I think it was mentioned earlier. I run a couple of meetups. But I do some streaming as well. And I spoke to a couple of companies yesterday. If you work in the web performance space, I'd love to talk to you. And because I'm actually putting together a stream with people from the WordPress community that work in performance. And I'd love to hear about what you're working on, how you're solving it, and if you'd like to jump on a stream with me, I'd be delighted to have you as a guest. And that's it. So, thank you very much for your time. I don't know if I have time for a Q&A, but I'm here. Merci. Five minutes. So, apparently there's five minutes for a Q&A, which means you have one minute. Now I'm playing. Okay. I mean, if you're shy, I'll be outside walking around looking for breakfast, because I missed it this morning. In three, two, one. All right, I tried. All right, thank you.