🏗 L is for Literacy

Good afternoon. Good morning, folks. You could be in a lot of different places right now, but you're here with me. So thank you for joining. Let me tell you a quick story. I recall once upon a time when I was getting into performance and I thought to myself how amazing it was. There was all these books, all this documentation, all these videos I used to watch, and I had such a great time. This was a little while ago. And today, you know, performance is actually a little bit more complicated, a little bit more detailed, and there's a lot of stuff to read and study. So, you know, a lot of this sort of like academia will help you become a better dev really at the end of the day. So today, that's what I'm going to talk about. So welcome. Welcome to. Uh. There we go. My presentation that I'm calling "L is for literacy". It's part of my campaign to increase performance literacy all along. It's been very interesting watching people sort of ask around like, Hey, where do I learn about this stuff? Well, I'm here to help you out. I've been delighted that my team at Web page, Tess and myself are going to be part of your performance. Pedagogy? Pedagogy. Pardon me? I'm French. So, speaking of Web page test, let me introduce myself. My name is Henrie. You can find me on socials @henrihelvetica everywhere and Web page test. You can find us r@ealwebpagetest. We have all the information you need with regards to performance, but we'll talk about that in a hot minute. And when I'm not dealing with performance, I'm actually out there running, trying to perform better as a runner, actually. And I share my runs on Twitter at #devswhorun. So L is for literacy. Shall we start? I think we should. Let's start with the letter A. A is for async. Now would you believe that it's an incredible attribute that's going to allow you to sort of help along and manipulate or not so much manipulate, help you sort of decide what to do with JavaScript. In this case, we're going to be able to still download JavaScript while HTML is parsing, but once we download the whole script, it will execute on spot. It will help you out with some performance at that point. I'll give you some links in the slides that I'll share later and you'll be able to read up about it. Now let's go to B. B is for broadly, let me quote an engineer that I heard say this once the foundation of the whole internet is data compression, CSS, HTML, JavaScript, SVG, they all have to be compressed. That's how the internet works at its best. It's a bit of an update to gzip and you'll be able to read about that as well. Now let's move to C. C stands for Core Web Vitals, a trio of metrics that's been introduced actually two years ago. The second year anniversary happened last week, actually May 5th. And it's there to sort of gauge your user experience as well as performance. Large, Largest Contentful Paint, FID and CLS. We'll get into those a little later. But did you know that only 39.6% of the about 8 million sites on the Web right now have good core web vitals. We need to improve that. But there's something you should know. D stands for defer. And I'm going to quote a gentleman by the name of Steve Souders when he said prefer defer. Now what does defer do? Defer is another attribute that you can use to again help out with JavaScript execution. I'm going to go back to this slide right here to give you an idea of what happens. Once again, you'll be able to download and parse the HTML without interrupting it. But you're you're going to execute at the end, or at least after the HTML has been parsed. Again, something that you want to use, especially when you have these social plugins that somehow will be bad actors in your page. Render links coming up. E. Now, E, once upon a time I used to say that E stood for exit data, something that you want to get rid of. But in this case, e will stand for emissions. Would you believe that performance, or at least in the performance space? We're starting to take a closer look at emissions right now? Very important as the resources that we end up using and sometimes not use are actually creating CO2 emissions. We have a fantastic blog post on the web page blog by a gentleman by the name of Chad who went into details. I'll share that link as well. F. F this time, I used to say that, once upon a time, actually I used to say that F stood for the front end, because that's where all the challenges lie. But today F stands for fetch priority and another attribute that's going to help you deal with some of the resources that we're loading onto the page because, you know, the browsers are very smart into sort of handling what should be a priority and not. But sometimes we want to get a little bit more granular and letting them know that a particular resource is an absolute priority. And that's what the fetch priority is there for. Again, you'll be able to read about it in the links that I'll share. Now, G. G. Once upon a time. G. I would say stood for gzipping. Again, when it comes to compression, we absolutely need it. But today G is going to stand for Gif. That's right. This I know what you're saying, the soft G and I'm saying this specifically because the author of the format, the Gif format, passed away recently. So this is an ode to Mr. Steven Wilhite. We appreciated your work. And yes, Gif, it's the soft G, just like the creamy peanut butter. Let's go. All right, let's get to the possibly greatest letter in the alphabet, which is H. Obviously, H stands for HTTP, Hypertext Transfer Protocol. Specifically, I'm going to talk about H 2 and H3. There are both upgrades from the long standing H1.1 that I mean, did a lot of good work for us, but we had to improve that. H2 came around which introduced multiplexing and a number of other things, and H3 is now on its way into greater adoption. Can I give a shout out to Lucas? Lucas Purdue, who's actually on the working group, who also works at Cloudflare. Shout out to Lucas. But let me give you some quick statistics here. Pardon me, 68.9% of requests. Are H2 on mobile. So that's very good. Believe it or not, there's still a little bit of H1.1 out there. I've noticed this in my audits using Web page test, quite surprising, but it's all good as long as we're progressing towards a better and faster future because this is about performance. Another data point H3 is supported on 13.9% of mobile. That's also good on our way to a better and faster web. Let's keep moving. So we are looking at the letter I now. What would I stand for? I will stand for images, specifically image optimization. You know, in the last few years, images have become extremely important and quite complicated in their management. That's why there's a proliferation of image management companies out there that are helping you do the heavy lifting now. You know, the image tag turned 25 last year. Big deal. Images have been around for a little while and over at Web page test we actually have an integration that will show you if you can actually squeeze a little bit more compression out of your images. We'll talk about that a little later. Links coming up. Let's keep it moving. J. Now, J, once upon a time stood for Jack and today it still stands for Jack. Jack is sort of, I guess, a term that we use to describe a layout shift. So today the, you know, in a Shakespearean English, layout shift is what we use to describe CLS. And that is another metric in the core web vital. Now, layout shifts are generally just a very bad UX pattern, so you want to avoid them. And unfortunately there's quite a bit of it out in the web. But I will say this 70.6% of the Web has good CLS, which is community, a cumulative layout shift, which is good, but we can still improve it. Let's keep it moving. The letter K. K stands for – drum roll, please – kilobytes. Now, when it comes to the web, kilobytes is something you absolutely want to avoid as much as possible. Why? Well, you know, the majority of the Web is being accessed on mobile. That's something you should know. And mobile, you know, the delta between devices is quite large. So not every not every device is going to be able to handle all that page weight. Now let's get into some data points. At the P 75, the page weight on mobile is almost four megs. Now, that's something you want to keep in mind because again, that could be due to some image optimization and as well as potentially, you know, the liberal use of some of these frameworks out there that are loading you up with a lot of JavaScript may not be the best either way. Keep the page weight as low as possible. Let's keep it moving. L. Now this is called L is for literacy, but I'm going to say that L is going to stand for LCP, which is largest contentful paint, which is also one of your core web vitals and in fact is one you're more important metrics that you want to keep an eye on. Um. LCP. A little challenging, quite often enough, due to bad image management and in fact out of the three core web vitals is the one that is sort of the least successful successfully implemented by developers. And in fact, here is a data point. Only 53.4% of the Web right now has good LCP, which is a little disappointing. And as that saying that the, uh, the balance is a failure, but it's the fact that we should be able to improve that, which is why we have things like fresh priority, which is why we also have things like image optimization, because quite often enough the images are the ones that are causing the bad LCP. I'm going to post some video links that you'll be able to see and some great talks that, uh, that discussed this very topic. Now, just give me a second here. Pardon me. M what could M stand for? Well, I'll tell you. You know. I'm a runner, as I mentioned. And when I'm about, uh, you know, trying to perfect the craft, I only know when I'm getting better, when I'm measuring my times. So. M is going to stand for measuring. If you don't measure, you'll never know if you're improving. That's the bottom line. Or ultimately you can't improve what you can't measure. Which is why, you know, measuring your or the metrics that we take a look at are very important because they will indicate to us if we are making some improvements. So make sure that you measure. N. N will stand for navigation timing API. Now, this is one of the earliest metrics that we employed, and it provided a wealth of data to measure page loads. And you know, it's still about, you know, we don't mention it as much as we once did, but it is still something that you can go check out right into your browser, see what's going on, and you can make some assessments of your page load using this API. So it's something that's worth checking out, especially if you're in your sort of early beginnings of web performance. Let's move on. Ah, yes. O, what could O, stand for? Well, I'll tell you. O stands for offline. Now, you might think to yourself, what is offline all about? Well, you know, there's how could I put it? If you have a subway in your in the city you live in. There's a use case to have apps work offline. First of all, you have to realize that a cell connection is full of challenges. And in fact, there's nothing quicker than a resource picked right from the cache. So having an app work offline is actually quite ideal. Now, there was an example, actually quite a long time ago where I think it was Jeep, the Jeep Company, something like that. They had a site that actually worked offline. So they were just helping you with some I don't know if you went camping or something like that, but it was really interesting because the idea that you would be out in the woods might also mean that you may have some low connectivity. And low connectivity is always going to be one of the biggest challenges when it comes to the Web. So if you have an app working offline, it's all the better. So O will stand for offline. Go check it out. P. Now, what could P stand for? Well, in this case, P is going to stand for preloading. Now, what is preloading all about? Akin a bit to fetch priority, preloading will indicate to the browser what you'd like to see come down the pipe as early as possible. What do you mean? Well, we know that there are certain resources that you want to make sure load up nice and early. So, for example, if you know you have a resource or an image that's going to be in the viewport along your critical rendering path, you may want to make sure to preload that resource so that you have a good user experience. You know that the browser will make sure that that resource is nice and ready for the page load and the layout to take place. So preloading is also very important. Just make sure that you don't use it too liberally because then it can get a little crazy. Let's keep it moving. Sorry about that. I'm just going to do this. There we go. And we are going to now proceed to the letter Q. What could Q stand for? Well, I'll tell you. Q stands for QUIC, Q U I C. I mean, I could actually ask Lucas to join me who I shouted out earlier because he's on the working group. But what is QUIC all about? Well, it's not a protocol. It works hand in hand with H2, you know, it is meant to improve latency. There was discussions about zero RTT meaning round trip times that are like almost down to an absolute zero, which is kind of impressive when you think about it. But QUIC is something that is absolutely part of the future of web performance, especially as you see H 3 or much more of H3 come along. So this is something that you want to keep in mind. You read up on it for just curiosity's sake now. R. R is a fantastic letter, actually. R could stand for so many things. Once upon a time I used to say R stood for responsive images, but R stands for request. The first thing I'd want to see is, you know, the quickest request is the one never made. That's a little side note. But the real significance of the letter R is Request Map. Request Map is an amazing application that's been integrated into Web page test, by the way, where you can actually look at the requests of a page and where things are coming from. It's actually pretty amazing. And in fact, I'm going to show it right now on the screen. Just give me a second here. Um, as you can see here, this is a data viz representation of what is actually taking place. And you can see like the main requests, I mean the main HTML making all the requests, but then you see all these additional requests taking place somewhere, third party, which I'll talk about in a hot minute, but that is all coming from request map. Fantastic application. Go check it out if you can. I'll provide the links. S stands for Speed Index. One of my favorite metrics, actually, and I'll tell you why, because ultimately it's called the speed index, but it calculates the visual completeness of a page or the speed at which it's visually complete. It's a metric that you'll see as part of the, uh, I believe, six metrics that you get when you do a, say, lighthouse audit. But in Web page test, actually, we also provide that reading, but in much more detail, greater depth. So let's look at something like this. So as I mentioned, speed index is really how quickly your page can be visually complete. You can have two pages load at the exact same time, but one will be much more visually complete than the other much sooner. Which makes it which gives it a better speed index. Look it up. It's not as simple as I mentioned right now, but generally you could get a feel for it once you sort of wrap your head around the fact that some pages content just comes up faster than than others. And that was the speed index. Let's move on to the letter T now. T. I used to say T stood for throttling, but this time I'm going to say T stands for third party. I know, T, third. I know I can hear the boos already. But third parties are extremely important because as I mentioned actually in the Request Map example, the letter R, you can have some third parties a.k.a bad actors, doing some funny things. So for example, ad networks, you might sign the dotted line and say, okay, cool, I'm going to have some ads, yadda yadda yadda. My page. There are third parties, but they may make some calls that you're absolutely, absolutely unaware of. And next thing you know, your site is loading up a ton of or megabytes of sort of unwanted resources, giving it a suddenly a massive page weight and also providing possibly a poor user experience. Third parties are something you absolutely want to keep an eye on and request map actually is going to help you do that. So it's a fantastic application, as I said earlier. Let's keep it moving. Oh, there we go. Let's go to the letter U. U is going to stand for user timing API. Once again, one that is sort of like still quietly out there. You can actually lay out some marks along your application and just measure parts of the application where you feel there's some latency or things are suddenly becoming slow. The applications gone to have a smoke break. I don't know what's going on, but user timing API is going to be good for that. It's still out in the wild being used a little bit more, should I say, not as obvious to use as as other tools out there. But it is still a very robust API to give you some very precise and detailed measurements as to what's going on at your application and and when you have questions, obviously. And as I round things up. V. V, in this case, is going to stand for velocity. Let me tell you about velocity. Velocity, or should I say Velocity Conference? Velocity was a conference that took place from the good people at O'Reilly, and it was actually a performance conference from start to finish. Every conversation taking place at Velocity was about performance. I was able to learn quite a bit from their resources that they shared. In fact, you can actually go on YouTube right now and watch a lot of the keynotes that they've had over the years at the O'Reilly Channel. If you just search velocity, I'll provide the link. But it was amazing and I do miss it. But there are some other conferences out there, but a lot of us got to meet at Velocity and it was a good time. So that's a V for velocity. Let's keep it moving. W. What could w stand for? I don't know. Oh yeah. Web page test. The greatest tool for measuring performance on the planet? I don't know. Did I just say that? Yeah, it did. Honestly, it provides a wealth of metrics that you knew about, some you didn't, and absolutely more that you didn't know you needed. And it's used by a lot of great people out there who are deeply invested in performance, webpagetest.org. Go give it a shot. I mean, I'll talk about it afterwards, but it is a fantastic tool. But I'm going to do a part two of W and this is something very important as well. W also stands for Waterfall. The ability to read a Waterfall chart is incredible. It will unlock, unlock amazing powers. And to be able to understand a waterfall and how a resource is being loaded and what exactly is happening, you have that. That's like half your performance journey. I just want to make sure that I'm not being pinged here. Um, so understanding a Waterfall, I'm telling you, is just phenomenal. And if you ever get a chance to sit down and really try to figure out a Waterfall, that is mostly that's like half your performance journey, as I mentioned right there. So give yourself, uh, a good, uh, amount of time to go check it out. And I should have brought this up earlier. But again, to be able to read this and understand exactly what's happening is priceless. So let's keep it moving. X. X stands for experience. Yeah, I know. Boo – but specifically user experience and ultimately performance is a user experience journey. We're trying to improve the user experience so people aren't throwing their phones as, uh, oh my God, Tami Everts would say. She called that a particular metric, I think like throwing the phone. But user experience is very important in dealing with performance. And as we improve performance, we usually improve user experience. They go hand in hand. Y? Y stands for Y-slow. It's in this for the historical fans out there. Um, Y-slow is an early tool out there being used in performance. Pretty interesting. Um, go check it out if you can. It's kind of neat. And Z, Z stands for Zopfli. Now, Zopfli is another compression algo used in images. A little dated right now, it's a little slow, so you probably don't hear about it a lot because part of performance is about being able to compress, but compress fast on the fly. But you go check it out. Z O P F L I, Zopfli. And that's it. The only other thing I want to mention and I forgot to do that in the first place. When I introduce myself, I do run some meet ups. You could catch me running the performance meet up if you're interested, ping me. I also run the Jamstack meetup if you're interested in that, ping me. But what I also want to mention is this week I have an incredible stream taking place. On Thursday. It's actually going to be a Twitter space. It's at the top of my Twitter page, I guess a core vital special. Like I said, core vitals turned to last week, May 5th, myself and Sullivan, Barry Pollard and a few of the people actually I'm trying to get confirmations from, but that's going to be amazing. So if you want the alpha and omega of corporate vitals, come check me out on the 12th. As I mentioned, Web Page Test. Get yourself a free account. I did say that. Get yourself a free account and discover what you've been missing in your life in terms of performance. Metrics for days, and you'll be able to improve your page like you never thought you could. At Web Page Test, We have an amazing YouTube channel, so go check it out. We do live audits and we have other content out there that I know you will be enjoying. So please take a look. Oh, my God. I think I'm out on time. And, um, I mentioned that I do curate events or help curate some, and this is one of them right here. Lazy Load is a conference performance taking place in June 10th and 17th. Go to web directions. Lazy Load. You'll see all the guests this year. I believe we have some guests from I believe Cloudflare this year. I have to double check, but I think we do either way. That's it. My name is Henri. You can find me on the Twitter socials, whatever. It's called Elon's new app. I don't know. At Henri Helvetica. And please give us a follow @ralwebpagetest. We share a lot of performance info and that's really it. Mercy for your time. Cloudflare, shout outs, everyone, Dawn, Rita, man, everyone I forgot to mention. I'm sorry. I can't think right now. All right. Thanks again.