Henri: [00:00:04] And at some point I want to kind of mention that we love speed is having their conference next week. So I was just like, Oh man, I totally forgot about that. And I love the fact that I'm watching myself in a separate screen, its pretty amazing.
Tim: [00:00:19] It's always kind of surreal. So folks as they're starting to join in here in a couple of seconds and we'll start seeing a few folks jump on.
Henri: [00:00:34] See the page populate.
Tim: [00:00:36] Yeah. Exactly.
Henri: [00:01:04] All right. I get it now. I'm like watching myself doing weird stuff. I guess I should look at the chat.
Sia: [00:01:14] Is my mic working. I'm not seeing anything.
Henri: [00:01:19] Yeah, I can hear you. I can see you. So I think everything is good there. And Scott's in the chat.
Tim: [00:01:27] Rock on.
Henri: [00:01:28] Yeah. Ok. So I got it now. All right.
Tim: [00:01:36] Should we give rolling like for anybody who's, you know, jumping in now are going to be kind of watching like after and stuff like that. There's two new faces on the stream, which is doubly exciting. N, that's the right math. It's been a day. It's double exciting. So, yeah, I'm super excited this week to have Henri and Sia you both on. Henri actually join the web page test team for anybody who hasn't caught yet. Which we could not be more excited about. Hopefully you're not regretting that decision yet.
Henri: [00:02:12] Not yet. You know, but I don't plan to either. But no, thank you. It's been super awesome. You know, it's very interesting actually. I've been telling a few people who have, you know, sort of taken time to listen. But you know, some of my earliest memories of just perf and even web page test specifically was that time years ago, I don't know if you remember but we actually met at velocity and you were doing a workshop with Pat.
Tim: [00:02:46] Yeah, you crashed Pat, nice workshop. I remember this.
Henri: [00:02:48] Completely. You know, I just kicked that door open. I was like, what's going on here? So, you know, it's a bit of a full circle moment. So I was super excited to join. And yeah, I think we're going to have a lot of fun.
Tim: [00:03:04] Yeah. Looking forward to it. And like you said, it could not be happier to have you on the team. So it's just a perfect fit for you. I think like all this stuff, all the work that you've done for the community over the years to have you sort of now officially doing community work and heading that up here web page test is just hard to imagine a more natural fit for you but yeah.
Henri: [00:03:28] Yeah. You know, it does feel good. You know, I think the opportunity to sort of have these conversations with the community at large. And I've said this before, I don't think perf has been in a better place ever in terms of just opportunities to learn, you know, exactly what's going on in the community as well, the sort of opportunities, the sort of like set up, you know, potential sort of events, you know, from meetups to conferencing and just in general having the sort of like perfect evangelism, you know, around the world, really, because I think, you know, we have opportunities to do that and take web page test with it as well. So I think it's going to be pretty awesome, dude.
Tim: [00:04:15] Likewise, rock on.
Henri: [00:04:18] The one thing I want to say before we go any further. This is my, you know, sort of like official public mea culpa for calling you a Sacramento Kings fan.
Tim: [00:04:28] Yeah. You know, I don't know how many people are NBA fans, but I found that very insulting.
Henri: [00:04:34] My apology. So back story, I was just kind of tweeting out that we're going to have this dream today. And then I mentioned that he was a Kings fan and he's not a Spurs fan, but I was watching a Kings video and it just kind of came out like that, so my bad. You got to blame YouTube for that.
Tim: [00:04:50] It's fine, honestly. If anything, I'm just excited that I learned that people watch King highlights. I didn't know if that was something. And then Sia, hi.
Sia: [00:05:03] Hi.
Tim: [00:05:04] So we have tried, I mean, for like a while tried to make this work. We've been wanting to get you on the stream for quite a bit because, I mean, there's just so many awesome things that you're doing in the community in terms of research and work and just the writing that you do as well. And we're kind of going to get into a little bit of that today. But you've also been on like as a guest. I mean, like in the chat room, I don't know how many of these streams, quite a few of them, if not all like, yeah. So it's awesome to have you on.
Sia: [00:05:32] Yeah, thanks. I'm glad to be here. Although I've missed several lately because of the move, but I'm happy to be back. So this is fun.
Tim: [00:05:39] We were just chatting about that before, like you're writing a chapter for the Web Almanac, which we'll get into in a second. Which you know, I did last year. I remember the wildness that comes with that. How much work that is. It's a lot. And in the midst of that you're relocating and trying to get all set up with everything there. And that is a chaos. That's chaos.
Sia: [00:06:01] Yeah. And a hurricane kicked it all off. So it was like extra chaos.
Tim: [00:06:05] Yeah. And then in the midst of all this too. Like, I guess could you introduce yourself to the folks who maybe aren't as familiar with you yet?
Sia: [00:06:12] Sure. Yeah, my name is Sia Karamalegos. I am a web developer and I guess performance engineer, self-described. I love both building things but also making them more efficient. And I used to be based in New Orleans. And I just moved to Durham, I was just a little tired of the hurricanes and their power outages associated with them.
Henri: [00:06:40] You know, you can say the truth, you hate the Pelicans.
Sia: [00:06:45] Yeah, I never really watched the Pelicans. I will be honest about that.
Henri: [00:06:49] There you go. Now you get to watch the Tar Heels, I guess.
Sia: [00:06:53] Yeah. I went to different university, so it's still not even. Yeah, there's not really. You think for me, sports wise here.
Henri: [00:07:02] It's all good. But yeah, you know, as you mentioned you are about making things a little bit more efficient and you're also involved in the [Jam] community, if I'm not mistaken.
Sia: [00:07:15] Yeah. I also co-organized the 11E Meetup and I really failed yesterday because my electrician was here like doing all the things all day long, turning power on and off and it totally just left my mind. And I was supposed to meet up.
Tim: [00:07:36] I feel like everybody has at least one thing, right. Like one meeting or one meetup or something that they were, I mean, if you have just one frankly it's amazing. But over the last couple of years, everybody's got at least a few of those stories, right.
Henri: [00:07:48] The last couple of weeks I almost missed our company all hands. So, you know, I feel you. I came back from coffee to like a bunch of DMs like, where are you? I'm like, I'm here, what's up? But you know, let's talk about the Almanac, though. And as Tim mentioned, I was actually part of the Almanac last year as well, and I absolutely know what it's like, especially in that last little stretch, what I called I think the Bell Lab, I was in there.
Henri: [00:08:18] I was in the slack saying, Hey everyone, I know it's a tough moment right now. It's like two nights before but hey, let's get going and it's almost done. So it is quite a monumental task to put together and to write. And by the way, shout out to Rick Viscomi, who's on vacation right now.
Sia: [00:08:42] Big shout out to him.
Henri: [00:08:43] Yeah, big shout out to Rick, who's I guess one of the principles editor in chief's of this amazing project. But it is quite the task from the writing to actually even getting the research done and X, Y and Z, all the people that have sort of like crunched the data and just put it out there for you guys to interpret and put together. So big shout outs to all the writers who are involved in that project.
Tim: [00:09:16] So I mean for a step back like if you aren't familiar with the Almanac, right. I don't know how many chapters were in it this year, does anybody know?
Henri: [00:09:24] I think it's like twenty six, you know, between twenty four and twenty six or something like that.
Tim: [00:09:29] Ok. Right. So twenty four. And so each of this is year three. And for each of these years, like anybody who's familiar with HP archive, you know, all that data which is run on millions and millions of URLs for three years now, people from the community get together and they do all this work. Like they're querying this massive data set like, well I guess taking a step back you're first kind of figuring out like what you want to look at, querying this massive data sets to see what kind of those insights you can bring out and then trying to vet that data, make sure it's legit. Dive into it. Write a whole chapter about a specific slice of the web like it is a thing. And then it ends up being this mammoth resource each year, which is awesome. And Sia, this year you did the perf chapter which is unsurprisingly always one of my favourites.
Sia: [00:10:20] Yes, I did the performance chapter which was awesome. You did the JavaScript chapter last year I think?
Tim: [00:10:26] Yeah. I did the JavaScript chapter last year.
Sia: [00:10:28] And Henri did page wait, maybe.
Henri: [00:10:30] Yes, I did. Skinny me did page wait.
Sia: [00:10:33] Barry did third parties both this year and last year and he does a lot on the core team too.
Tim: [00:10:39] Yeah. He does a ton and Barry's usually in that. He's one of those folks, too. Is he here today?
Sia: [00:10:44] Yes, he is.
Tim: [00:10:44] Yes, Hey, Barry, there he is. Yeah, Barry always heavily involved there. It's a thing. Sia I think like we were kind of hoping, I think to probably talk a little bit about, Oh I see an issue here as well. Wrote the JavaScript chapter. Yeah, we've got like a little author pow-wow thing happening and it's awesome. Yeah. And I think we can probably at some point try to get more folks on to like different authors and stuff. It'd be interesting to get those kind of highlights from their slices, which I think is kind of what we wanted to talk to you Sia. Like a little bit maybe about like maybe the process and stuff like that but really just kind of give you like what did you find out that was interesting and kind of dive into it and have a chat about all that?
Sia: [00:11:26] Yeah, sure. So anyone can actually write. So this is my dog. Whenever I start talking on cause he wants to join, so he gets in my lap.
Tim: [00:11:39] You said the dog's name is Harry, right?
Sia: [00:11:41] Yeah, this is Harry. She is too big to get up here, she's over there.
Henri: [00:11:45] Harry, put it on camera or something. So it could just be the four of us.
Sia: [00:11:49] I know, right. You hear disgruntled grunts in the background. That's the other dog.
Tim: [00:11:55] Scott had his cats on one stream and I thought that was well received. So yeah, I mean, like we could do an animal cam each time.
Sia: [00:12:02] Dogs of web page test. Yeah. So anyone can write. So anyone who's tuning in, if you're interested in writing, you can also be like an analyst, which you help do the SQL queries. I don't know if you have ever showed like Big Query and how to actually look into web page test data.
Tim: [00:12:19] Not on the stream, no.
Sia: [00:12:22] That was really cool. And then you can also be a reviewer and an editor. Although editors are more like, you know, people English language editing type skills and reviewers more for reviewing content. You can be any part of that team and you just join up in the beginning. I actually thanks e Runyon, that's always welcome. There might be a form out already to express interest for next year maybe.
Tim: [00:12:54] It doesn't surprised me. It is really like an annual like I mean, it is a year round thing, right. Like getting all the contributors lined up, doing all the work and stuff. It's the thing which is why Rick is on vacation now. Its like he gets his little bit of time after the almanac is out and then boom, you know, he's sucked back in.
Sia: [00:13:10] So much work. Yeah. It kind of starts with getting the team and then you write an outline. You have to come up with, if you have any custom queries that you want run or custom, what is the term? This is really Barry section. He should talk about this. If you want custom analytics run when they do the big web page test run, then you have to come up with those scripts. And then once the web page test run, I'll go through you do your queries and the analysis and write the chapter review and edit. The whole process and there's the interest form, thank you Barry. And so the performance chapter. Yeah, I had been meaning to get involved for a while because I also just wanted to learn I had never dived into the data before and I was just really interested in kind of learning how it's all set up through Big Query.
[00:14:11] And we do two main data sets. One of course is all the web page test data that's run once a month now for the top eight million-ish URLs. And then the crux data which is the Chrome user experience report. And that's limited data because it's the rum data basically from real user interactions on chrome. And both of those are really interesting and we run lots of queries and I was able to do a lot of analysis. So I learned how to do it. And now I can, you know, it's like once you start querying the data, you come up with more questions and you want to query more and more and eventually you have to write the chapter. But like now I can just do other things when I want to answer some particular question.
Tim: [00:14:56] I'm glad I'm not the only one who has that problem. Once you query it you would just want to query more and more and use like if I keep splicing it in smaller and smaller subsections because I don't know, like in my experience, that's where like the really interesting stuff comes out is once you really start to dive into it and splice and dice.
Henri: [00:15:12] I've said this before, but you know, I think the really interesting part of just performance in general is sort of like the investigative nature of the work, right. And you know, as you create this query potentially and you know, you have like all this data that you can start to parse and then you're like, Hey, this is bizarre and you might have like one this, you know, offhand and nominally. And then you're like, OK, let me tweak this query and, you know, dive into this section of the results that I just got and you find some other stuff. And next thing you know, you're like, Oh my God. And I think that's super interesting. And you know, as I've told Rick and you know, anyone else, like, there's such a storytelling nature to queries and by default, the almanac. And that's why I think it's an amazing set of writing that takes place. So I mean, when you sort of start to see that you're like, Oh man, this is just absolutely amazing.
Tim: [00:16:15] So yeah. I think like if we kind of walk through some of the highlights, I guess from what you would follow, I think it would be really interesting. So you focus primarily on the C core web vitals right on this round.
Sia: [00:16:28] Yeah, mostly. And then a few things I picked up. Because I don't know about you but I feel like FID is like one of those things, it's just not that interesting. I feel bad saying it, but they're also working on a better responsiveness metric. It's just boring. It's too good, right. So I did pull in, I think I did. I'm forgetting total blocking time, which is only from web page test. And then I also grab some web page test data for largest content-ful paint element as well. There's like a deeper dive in there and it's like probably the performance is there's so many things you could dive deeper and deeper on. And I was like, I just don't have the time. It's already so long. So I just did the LCP element this year. Maybe next year, someone can add in like, you know, more data on CLS.
Tim: [00:17:22] Yeah, to see where the shifts are kind of coming from and stuff like that.
Sia: [00:17:25] Yeah. I think that would be interesting.
Tim: [00:17:27] Well, maybe we could start I guess with the FID since you kind of jump right to it.
Sia: [00:17:31] Yeah. Well, this is the least interesting.
Tim: [00:17:37] We'll start with the least interesting and go for there. But honestly, I think the fact that it's the least interesting makes it interesting and weird, twisted way, right. Like I think the core of vital stuff I think is super impressive. I think it's been a great motivator for perf like Henri you were mentioning at the beginning, like how many people are focused on perf today that weren't in it. CWV is a huge part of that. That being said, like I do think first input delay was and it was one of those things that you couldn't have seen that coming necessarily from the beginning. But if there is a misstep in core web vitals, it's FID right. Like FID is a bit of a fibber.
Sia: [00:18:15] Right because it doesn't. Yeah. You might still have a problem if you have a good FID.
Tim: [00:18:21] I think your data shows pretty well, right. Like so you've got for the first input delay stuff. So this is the breakdown of what the first input delay, performance by device and connection type here.
Sia: [00:18:31] Yep. And then, yeah, keep going. Also does by rank and then I jump to TBT which has like a, let's just get a little more info on this.
Tim: [00:18:44] Yeah. FID looks great. I'm glad you pulled in a TB total blocking time because that's supposed to be your synthetic proxy. And it's like if you're looking at first input delay what, it looks great. And then you look at the actual amount of time that the main threat appears to be blocked and not so great.
Sia: [00:19:03] You're, right. Big old Red Bar.
Tim: [00:19:05] So hopefully, I think you mentioned that they're looking at a new metric. I think that's the event [tiny] API, which hopefully kind of will bring a little bit better realistic perspective of what's actually happening there.
Sia: [00:19:17] But if you want to do most interesting, at least for me personally. This isn't necessarily what I think other people are going to find the most interesting. It's actually has to do more with and I'll explain a little bit more. It actually has to do more with what I think is the impact of WordPress on performance. And you can see this in the ranking data and in the data between both the performance chapter and the CMS chapter. And I think I started mentioning this early on, maybe in the original by rank.
Tim: [00:19:53] So this is high level performance core vitals by rank, which we can see that like the top thousand URLs.
Sia: [00:20:01] Yeah, I didn't do it there. So maybe in the first like TTFB. Yeah, now go up to the rank part. Yeah, CMS adaption, because like it started lining up and this actually really reminded me of the time I was several months ago and someone was like, Oh, like lazy loading has been adopted natively, native image laid easy loading, sorry my English is bad. It's not my first language. The adoption was really high. But then like I think LCP went down and I was like, Oh, well maybe because they saw that WordPress adopted it and I was like, Oh, it's probably like a naive implementation of it. And so like every single image is lazy loading and sure enough, that's what they realize. And then when they made that less naive, like the performance of the whole web got better.
[00:20:56] And the reason why I find this not just interesting but I think it's impactful. And maybe I should have written more about this. But the more we can do to like make performance like smarter default and just like easier because it is a lot to learn, like web development, web development performance accessibility. Like I would love for performance to be like as baked in as possible and then people would make their websites more accessible. I would love for that to be a problem to happen. And so this is cool to me because I think it kind of shows like the power of that [framework].
Tim: [00:21:32] Yeah. So for these graphs, what we're seeing pretty clearly here for the TTFP in particular, right because that's where we're looking at is that top one thousand has about thirty percent, thirty two percent good and that trails down the further and further into the tail of the web, you go. And then I see you broke down the CMS adoption by rank to sort of compare and contrast a little bit. And it looks like CMS adoption increases as you hit that tail, right. So that's where it kind of that connection is coming between the two.
Henri: [00:22:00] And that's amazing. And I get back to the idea of investigative work. And you start to align, you know, these dots or these graphs and you start to see patterns. And that's when you can start to dig into some areas that you didn't realize may have been impactful in some of these results. And then that will expose like you'd mentioned, something like WordPress. That's like, Hmm, you know, I see these patterns, WordPress and LCP, whatever it is that we were looking at and you start to superimpose them and you can start to do this like, hey, you know there is a bit of a challenge here. And I'm going to go off course for like a half second. Just to mention like this is the kind of stuff that potentially WordPress core engineers are looking at.
[00:22:54] And this is potentially again, I'm not saying this is what they looked at, but you know, when the announcement came from that group of core engineers from WordPress who are like, hey, we're starting a performance team. So I know for a fact, I've been in the chat, they've been talking about, you know, the almanac a bit and looking at some of the results. And this is the kind of data that I'm sure they already had but others can kind of see and say, hey, you know, maybe there is a bit of a challenge here and maybe I should be on top of what's going on with my site and whatnot.
Sia: [00:23:28] Although the ranking data is new this year. So some of these insights are all new this year, like across each chapter for ranking. So they might not have seen all of this yet or not knowing their full impact by rank. But yeah, the other two charts kind of showed how WordPress has like the super majority of or plurality of share for CMS. Sorry, I was like, Let me be accurate in my words. And then at least in the case of TTFB, it's like not performing so great. But there's other metrics that they do. And so it's like every team. It's not to be judgmental. We all have things we can work on and things that we're good at, at the moment.
Henri: [00:24:13] Certainly. And this is dating from a couple of years. I remember Rick had put out a little bit of a document on the discussions and it was around WordPress. And it was sort of, you know, back then, you know, core web vitals was like, OK, maybe not as dialled in as it is right now. But you know, the patterns were there and I think it's something that you know, and we're probably going to find out next week as well because two things, the state of the word.
Sia: [00:24:49] Is that next week.
Henri: [00:24:50] Pardon me.
Sia: [00:24:53] Is that a jam stack Toronto event or [crosstalk]?
Henri: [00:24:56] State of the word is kind of like a state of the union for WordPress that Matt does. And so they're going to talk about what they're doing specifically in general at WordPress. They're probably not going to touch on performance so much which I actually asked because the team is new and they're still kind of like [give them a chance] exactly. They're sort of like figuring out how they're going to roll that out. But also I'm actually going to take a look at or listen to some of the engineers as I'm doing a WordPress performance special next week. I'll put the link in the chat for anyone who wants to attend but you'll be able to hear from some of the engineers who are working on it. So I'm excited about that to see what they have to say.
Tim: [00:25:43] So there's two things I think that come kind of come out of the breakdown that you did here with the CMS thing. Like I've seen these reports by the way passed around like I know WIX has been really public on Twitter, like sharing these things. Like it's been a good instigator. [cross-talk] But like so there's two pieces of this, right. There's like there is the platforms themselves and seeing this data and being like, All right. So we got some TTFB issues.
Sia: [00:26:12] It's that new core web vital.
Tim: [00:26:14] Yeah. I've got some time to first byte issues. We've got to address that as a platform and stuff like that. But then there's the flip side, the other side of this, which is from the user angle. So like I'm curious, Sia on like your perspective on, you know, if performance by default we know is kind of like we need those platforms to be doing it from a user or developer perspective, you know, how do you factor that in when you're making those sort of technology decisions? Should people be doing it? What are they? Should they be looking at to kind of get a feel for that?
Sia: [00:26:47] So what developers and users, sorry.
Tim: [00:26:52] Sorry, developers. If I'm choosing which tech stack I'm going to go after or which CMS in this case or anything like that. You know, how much of those defaults matter and what should I be looking at? Like is it the default CWV stuff or what?
Sia: [00:27:08] Yeah. No, that's a really good question. I don't know if I have a perfect answer for that. I was that person that purposely never learned WordPress, so I wouldn't have to do any WordPress. So I don't know specifically like how much, I do know there's some things that you are going to be limited by your platform but then there's other ways you can always like overcome that. So it's not always the whole platform but the platform can like really mess you up in some things or make it a lot harder. Like for a TTFB, I don't think if you're actually hosting through WordPress, like you can't do anything about that. If you have your own server, you can start doing that, but you're also probably just going to be slower in your own server. I'm also trying in my head, like we've been talking about CMS. But in my head I'm also thinking about like frameworks.
[00:28:02] So when you're not using a CMS too, like that's a big decision, right. And the kind of content you're having this is that you're responsible JavaScript discussion we always need to have. Like whether we need a framework and then which framework and then what are the implications of those frameworks? And it's just kind of giving back to that thing. But I do like how the Chrome team has that Aurora initiative or sub team, that's to work with frameworks to try to help them be faster. And they've done a lot of work with next.js. And that doesn't mean that next.js is your perfect choice though, right. Like if you're writing a blog or a static page or like a landing page, you probably don't need react.
Tim: [00:28:44] It made me think of your comment on the next reminded me. I hope I don't get Zack Moore Twitter [cross-talk]. I saw this yesterday from Zack on Twitter, and I think he muted reply to this. So sorry Zack, if you get more now. But like next posted like this is how easy it is to make the index.js.
Sia: [00:29:03] I know what they're saying, but like, don't have to do that.
Tim: [00:29:06] And then Zack pointed out that it responds, it results in two hundred and twenty eight K as the default, which is like and yeah. So people point it out like, OK, yeah, you're not building like a one page thing with next, you're building these multiple things. But I think to your point about like these defaults, yeah the defaults matter, right. Fun stuff. So the CMS connection to TTFP was one of your favorite highlights.
Sia: [00:29:34] Actually I think it was some other metric, we noticed that. And so I actually brought it in to each of the sections. So I kind of talk about where WordPress is for the rest of them as well because it can influence that ranking.
Tim: [00:29:47] Sure. Ok. nice.
Henri: [00:29:52] I'm forgetting who wrote it specifically but I think you worked at WIX. But there was a WordPress specific or subchapter.
Sia: [00:30:02] There's a CMS chapter.
Henri: [00:30:03] Ok, CMS. And within the CMS I think they do highlight WordPress at some point. Now did you two sort of connect, you know, collaborate at any point like, Hey, I'm going to talk about this.
Sia: [00:30:15] Actually like chat. But I it was Rick who had noticed because of course, he looks across all the chapters, you know, or a lot of them at least. And he was like, Oh, there's this funny number over in the CMS chapter. So I looked and like grabbed their chart from their analysis worksheet. But yeah.
Henri: [00:30:34] Yeah. Because I was going to say maybe there might have been some overlap or whatnot.
Sia: [00:30:39] There's a lot of overlap between performance and a lot of the chapters. And then you got to figure out which part you're going to cover versus they're going to cover. And then like, do you actually even write that part?
Tim: [00:30:49] I say, I think with chapters on everything from like third parties and security privacy to some extent, certainly mobile and PWA and page weight and research.
Sia: [00:31:04] [cross-talk] folks. Because the offline numbers were weird.
Tim: [00:31:11] Yeah. Ask about that like in your chapter.
Sia: [00:31:15] It was really that numbers were tiny but they were really interesting. So I tried to like reinforce that they are a tiny part. But like if we want to talk about that tiny part we try to put in some explanations on those and we talk with Damien, is that his name, the chapter writer but also a few folks on the Google PWA team about some of this stuff?
Tim: [00:31:40] Sia, can you walk through that. Because I thought that was interesting reading it. But could you walk through like that service worker offline thing what you saw and like what the hypothesis is there?
Sia: [00:31:49] Yeah. It's just a hypothesis because it's kind of hard to measure some of this stuff. Like can you walk through it? I will reread this paragraph, [cross-talk] I said. Because I mean it is interesting, right. Like it's off-line but it's a faster TTFB because it's not necessarily like, you know, it's not necessarily time from a server. It can also be time from the cache or the cache storage API or whatever. Its first byte from that location. And there can be some of that like the service worker start-up time. Is that what I wrote in. But there's different things that influence that too. And I don't know, it's hard to say a lot because like I mean, the number of data points in here was like maybe two thousand something.
Tim: [00:32:45] For the off-line stuff?
Sia: [00:32:46] Like eight million. Yeah. Like it was a really small number. I probably mentioned the numbers.
Tim: [00:32:56] Maybe up here by connective affection.
Sia: [00:32:58] Yeah. Two thousand six hundred thirty four total.
Tim: [00:33:01] Yeah. Look at this, point zero two percent.
Sia: [00:33:03] Its super tiny but it's interesting because I think you even did an extra little query another day when someone mentioned it in the web performance slack. And it's just such a small number we can't even, I mean like because more than twenty six hundred sites have service workers too. Also the data is really weird to think about too when it comes to the network connections because this is crux data. And it's like the numerator versus the denominator. This is not representative traffic. It's like of origins that had traffic that were offline.
Tim: [00:33:39] Yeah, you're right. It's a subset of a subset of a subset basically by the time you get down there, yeah. This is actually a good point. I didn't think of this until Pat brought it up. But like this was another one of those things that when people kind of stumbled on it, at first everybody was like Wait what the heck? And it was like, where this situation where sometimes those network fetches were actually faster than returning something from cache, just depending.
Sia: [00:34:04] And also like how they write their service workers like, you know, you can still write it in a way that makes it slower. And then there's other things later on that make it worse. And I'm like, well if you think of service worker apps like maybe a lot of them have like very heavy client side rendering like with JavaScript or something. So it's still slower. It's all this weird stuff that comes involved.
Tim: [00:34:25] Did the perf improvements, was it for multiple metrics or was it primarily, oh no, look it was for [cross-talk].
Sia: [00:34:31] Connection time and then I think it was worse than something else. I forget. Let's look at them all.
Tim: [00:34:36] Where off-line was worse. All right. So, so far we're better. We're a little slower than 4G on LCP which you know, OK.
Sia: [00:34:46] Also here it could be too that when you have something that's offline like maybe it's not actually serving all of the content. So you don't necessarily have that third party like iframe or something that's coming in and popping something down, causing a shift. So it could be that.
Tim: [00:35:02] First input delay. Here we go.
Sia: [00:35:05] This is the worst one. Yeah.
Tim: [00:35:07] We're back to the fibber is the one, no the least interesting is the metrics. No, but that's interesting. I mean, I wonder why that would be then there.
Sia: [00:35:16] I mean, that's what we're like. Well, maybe the websites that actually use service workers are like heavier JavaScript frontend websites. And so the client still has to do all of that stuff.
Tim: [00:35:27] And I guess this can actually kind of make sense, right. So first input delay, it would be that metric where the first time a user tries to interact with the page, what is the delay between basically when I do the interaction and when the browser is able to start responding, which is the big caveat which the new metric will hopefully address is like it doesn't actually tell you how long it takes to respond just the gap between when it can start. But I guess this kind of makes sense, right. So to your point if the pages are a little bit more complex like if that's one of our hypothesis here, which is fair, there's some client side JavaScript that probably has to run and execute. But if it's also served from a service worker and we've seen that it has much faster time to first byte, much faster paint metrics based on your prior graphs, that also means it's going to look probably like it's ready, a lot faster. So if it's looking like it's ready fast like right away and yet we still have this JavaScript execution that has to happen and in theory people might try to interact faster and there we get the bigger FID. So that I think makes a lot of sense.
Sia: [00:36:30] Weird stuff. Yeah.
Tim: [00:36:33] I love this stuff.
Henri: [00:36:34] Let's get to work. It really is, I just, you know, I think there's so much stuff that you can discover and uncover with all of this. I think it's fantastic.
Tim: [00:36:50] So what did you find out for the LCP element?
Sia: [00:36:53] That was going a little bit deeper. Other people have done some of this too like, oh, gosh, why is his name escaping me, the other person that's really big into.
Tim: [00:37:05] Paul Kawano?
Sia: [00:37:07] Yes, thank you. He also did an article on some of this stuff before and I just went a little bit further. So it's kind of interesting to know like, you know, what are the common nodes? And it is interesting to me that it varies from desktop to mobile. But it also makes sense to me because a mobile you have like less screen size. So a lot of times maybe it's going to be, this is my hypothesis. Again like I don't actually know if these were like essentially headings will end up being larger compared to like maybe a hero image or something like that. I know that happens with my blog but my blog isn't every web site. [cross-talk]
Henri: [00:37:47] You know, it comes down to also the insights in discovering what people are doing, what specific details they're providing, say on mobile that they may not provide on desktop, right. So you can start to like read into some of this data. And Paul is a fantastic engineer who puts together these queries and can really extract some stories out of it. And some of his earlier writings even through a discussion. I'm calling a discussion but the discord on H.A. and where he's shared a lot of stuff like, you know, and you extract some of these stories out of this data and like you said, you know, on mobile it might be totally different because people might actually believe it or not, you know, make good decisions, you know, around what to serve. So that, that LCP is nice and conveniently high.
Sia: [00:38:54] Yeah. So to reemphasize, these are just the nodes but that doesn't tell us if there's an image there. So we can actually look to see if there's an image URL. And when you look at that like seventy to nearly eighty percent of the LCP elements had an image associated with it.
Tim: [00:39:13] Yeah. So the image performance being very, very closely intertwined with LCP as a term. Yeah. You don't see the text ones very often. It's usually kind of exciting for me at least when I'm running like a web page test run and I see the text element as highlight. It's almost exciting because it's something different.
Sia: [00:39:30] I think that's my blog because I make my headers so huge for my headings. I want it to be readable. I don't know about you all. But during the pandemic, my eyes have gotten so much worse.
Tim: [00:39:43] Too much screen staring. Yeah.
Sia: [00:39:45] I keep increasing the font size of my websites as if everyone has the same problem with me.
Tim: [00:39:49] My moment of reckoning was at the last eye doctor appointment. And he told me he needed to give me a special glasses with a little magnification for when I'm looking at the screen. And that's painful. That's hurts. That's a harsh. And then this I thought was, this is interesting [cross-talk].
Sia: [00:40:06] Yeah. Because this was the kind of going back to that like, oh, that first naive implementation of native lazy loading that WordPress did. And a lot of people do this so just lazy load every image on the screen but you don't want to do that for things above the fold, especially the LCP element, and about nine percent of them were lazy loaded. I was actual native lazy loading if you include like those classes like lazy sizes puts a class on it. So I counted those two and if you look at some of those popular classes then probably more like 16 percent of the LCP elements were actually lazy loaded. And that just makes it slower, right. Because you're waiting for the JavaScript to be initialized and intersection observer to queue. And then also the priority of the image isn't as high which fun times we can affect that now too.
Tim: [00:41:01] Yeah. We just did a thing for the last stream. If anybody missed it, we had Pat on that went through some priority and some stuff, that was good.
Sia: [00:41:08] Yeah. That was the one I really wanted to go to too. And I think other moving things happen that day.
Tim: [00:41:14] Everything gets posted up on YouTube. So it's all there.
Sia: [00:41:16] I know, I need to [crosstalk]. And then async decode but like I feel like none of us really know the impact of async decode. It just feels like it might, like why would you want to do? I don't know.
Tim: [00:41:31] [inaudible] a little bit about that on Twitter, we're like right now. It's like similar to your offline thing, right where the data point is so small and the connection at this point is very fuzzy.
Sia: [00:41:43] Yeah. That's the one you actually did a query on. I was mixing up.
Tim: [00:41:46] Yeah, that's OK. I didn't remember doing the other one but I also am getting to that point where sometimes I don't remember everything.
Henri: [00:41:51] This also speaks on adoption as well, right. So you can start to look into, you know, that kind of detail. It's like, Hey, you know, we see that we have low numbers here. But, you know, for all the clamoring some developers might, may do. Are they really some sort of using, you know, some of these APIs that are now available? And I know we talked about Paul Kawano, he actually spoke on that, you know, recently where, you know, we looked at, say, some of the new image formats and the ones that people are like, Oh, yeah, I totally need this. I totally need this. And then you look at adoption, they're like, OK, we're not there yet but all good. You know, we're all ready.
Tim: [00:42:33] That one's not ready yet. I was going to say somebody probably did that but that one's not quite what it looks like.
Sia: [00:42:40] Oh, did you say media? [Yeah] Yeah, they're a little bit delayed. That's a big chapter too.
Tim: [00:42:45] It is.
Sia: [00:42:46] Justin mentioned an interesting point in the chat. Like it would be nice if browsers could recognize that, but I think part of this is like we want that image to start loading before we even have like the CSS. So we don't have layout information yet, we want that speculative pre parts or whatever to start downloading that image because it thinks it is going to be viewed. But if it has that loading equals lazy, it's just going to skip over that right at that stage.
Tim: [00:43:16] Yeah. So there's probably some heuristics browsers could do. And I know Chrome does has for years applied. Like when it comes to prioritization, right, like they tend to have more granular prioritization based on the location of content in a screen and things like that. Than what I've seen from Firefox and Safari, they tend to be much more straightforward. So I know there was, you know, Chrome's already done things in the past with priority, you know, depending on where resources are and images and stuff like that. Interesting. Yeah, where it gets interesting is like deciding on behalf of the user to do that lazy loading without any indication from the developer, which is, I don't know, it's like on the one hand, as a developer, I could see the convenience of the browser kind of doing that by default. And for a user, you could probably make the case in many cases that that's going to be better perf.
[00:44:12] But then it also gets back to like there's a trust relationship that has to exist between developers and browsers in terms of the browsers doing what the developers tell them to do and stuff like that. Since we have the mechanisms to up priority or lower priority in different ways, it almost feels like, you know, if the browsers took too opinionated of a stance or overruled any of that, that you start to break down that a little bit. I don't know. And then we did get both Barry and Akshay pointed in by the way that the media chapter is close and the adoption, yeah, performance of new formats is good, Adoption lags behind.
Sia: [00:44:54] Like AVIF?
Tim: [00:44:56] Yeah, very good Josh, that'll solve it. Loading equals best guess. Yeah. No, that gets back to, Sia what you were saying at the very beginning where you're talking about, you know, looking at it from that perspective of the different platforms or the different frameworks or Chrome's work with next and stuff like that. It reminds me there is a talk from Ilya Grigorik around at Perf now a couple of years ago, where he talked about head, torso and tail of the web. And how he came to realize that if you want to move performance on the head, right, that top thousand, it's an entirely different approach. If you're trying to move the torso or the tail.
[00:45:37] And so once we get into the tail and even the torso and trying to get folks to adopt new formats, new standards at scale and stuff like that, then that's where you really need those platforms to double down on it because that's the way that's going to happen. [Exactly] Not everybody is on, like not everybody sits around like hops on the streams and pays attention to all this kind of stuff. That's that head of the web. So that was an interesting breakdown. And Pat with a little bit of clarification, loading auto is basically loading equals best guess. So yeah.
Sia: [00:46:19] Is it double equals or triple equals though?
Tim: [00:46:24] All right. Thanks for jumping on that topic. Yeah, no. I appreciate the double vs triple equals joke. That's nice. It's good. Classic. Awesome.
Henri: [00:46:39] So Sia would you do the writing again?
Sia: [00:46:49] I don't know. I mean, it was a lot of work but I mean, this is one of the bigger chapters too.
Henri: [00:46:55] And could be bigger.
Sia: [00:46:56] I had a lot of reviewers too which was hindsight, probably not great. But it's so hard because it's like, you know, it's just a volunteer thing which is great to have a lot of reviewers. But then you also have like, you know, at least that many rounds of edits that you're doing multiple times and not everyone's happy. [cross-talk]. I know, right. I feel like there weren't enough analysts to really help because, you know, like diving into that, maybe I'll just be an analyst in a future chapter or just do one of the smaller chapters. When I did review a few others and I was like, for example, Kevin [] did a good job on the resource hints Chapter and I was like, Oh man, it'd be so nice to just cover like one small [cross-talk] rather than it's like that infinite. You know, you can drill down infinitely on the complexity of just web performance.
Henri: [00:47:53] Yeah. I mean, again it is such an endeavour and I think we, you know, I know I could speak for a bunch of folks over at Web Page test, you know, thanking you and the team for putting this together because I think it's an amazing project and it's one that, you know, I think most people, if you've not read it, you know, the holidays are coming. Definitely take some time and dive in, you know, just get yourself a little cup of coffee and then sort of like go through the chapters. And one of the best parts and I don't believe people actually know this but I think the queries are available for you to sort of like tweak yourself and sort of like.
Sia: [00:48:37] If you share your screen, you can show them where queries are.
Tim: [00:48:38] Yeah, I was just going to say, I'm going to do that. I don't think they're linked in the description right, there down at the bottom.
Sia: [00:48:43] No, at the very bottom. Yeah. This is every chapter is like this. You can view queries. You can also view the literal spreadsheet we used.
Tim: [00:48:50] Yeah. So I'm not going to lie. I have stolen these queries more than from last year's Almanac or the year before and I wanted to do my own analysis or just riff on it like when I had a slightly different take like over and over again I've gone back to these. I've honestly probably read the queries on the Web Almanac more than I've read the chapters but don't like, that's not meant to be a slight. It's just meant to be like I read the chapters once and then mostly that's it. But then the query is I go back to hundreds of times. So yeah.
Henri: [00:49:18] And that's it. You know, I think the part of the endeavour is to get people to tell their own stories. You know, be able to sort of grab that data and be like, OK, you know what I'm going to dive in, in this area and expand to tell sort of like a greater and more sort of like get a bit more finite information out of it. So I think this is phenomenal. Pardon me.
Sia: [00:49:44] Sorry, I was reading the comment, book of queries coming up.
Henri: [00:49:48] That's actually funny, Jeena. I like that, book of queries.
Sia: [00:49:56] Just read the queries.
Henri: [00:49:59] Yeah, totally. You know, that'd be awesome actually, a good idea. Yeah. And I think we mentioned this in the beginning and you know, see again, thanks for coming on last second. You know, we're going to have like some more formal conversations with more writers from the almanac to sort of like have them come out and talk about, you know, the experience writing and, you know, sharing some of the insights that they were able to collect during this whole process. Obviously we'll have Rick come on after his vacation so he'll be able to discuss his experience and we got you as well Barry. I know you're probably in the chat, saying something.
Tim: [00:50:45] Saying seven hundred and thirty eight queries.
Sia: [00:50:47] [] has a few words to say about it.
Henri: [00:50:50] Yeah, that's awesome. Seven hundred and thirty queries, that's a lot. But yeah, I mean, any sort of closing comments you like.
Sia: [00:51:02] Sorry. I feel like I'm supposed to be insightful right now. Sign up for next year.
Tim: [00:51:13] Yes. Apparently as an analyst, we've gathered is definitely one of those things.
Sia: [00:51:17] No. Well also everything happened at once. Like I had to evacuate for a hurricane. And then like nine days with no power and a heat wave, then like pack up everything and leave and be like, you know, with two dogs in hotels over two months.
Tim: [00:51:35] So maybe the other takeaway is sign up but also don't sign up if you're going to be doing a relocation due to a hurricane and all this other stuff, all at one time. Maybe space those things out.
Henri: [00:51:48] I mean, during the hurricane it would have been pretty interesting to create like maybe a Waffle House index chapter.
Sia: [00:51:56] Yeah, that's true. [cross-talk] website doesn't really work on bad internet connection but you can't actually apply for assistance which you know how much that affects that population. So now are issues of equity due to web performance.
Henri: [00:52:11] Ding, ding, ding, ding.
Tim: [00:52:14] One of these times we'll have to do an entire thing on like some of those resilience and you know, all sort of side of things too. Because I do think I've always found that side of it very fascinating and kind of eye opening way of looking at perf.
Sia: [00:52:28] Yeah. The early days of like the COVID dashboards and stuff like that for people and making those more performant, that was really critical.
Henri: [00:52:37] I mean, that's what really got me into the whole Waffle House index, you know, and I was like, What is that?
Sia: [00:52:43] It's a real thing, yes. [cross-talk]
Tim: [00:52:45] There are people probably in the chat Henri who are wondering what you're talking about.
Henri: [00:52:48] Let me explain. So Waffle House is a chain. It's a restaurant chain that, you know, breakfast and yes, waffles and whatnot. But there are so renowned for remaining open during like big like hurricanes and storms and whatnot that people start to gauge the strength of this sort of like storm by how many Waffle House, restaurants were closed or remained open. So they created this thing called the Waffle House index. And if they're able to operate then, you know, the storm was like, OK, manageable. And real newscast will talk about the Waffle House index, especially in the south which is where we get the most.
Sia: [00:53:44] Did they include which menu the Waffle House is using because they also have different menus based on how bad it is.
Henri: [00:53:50] Ok, I didn't know that one.
Sia: [00:53:52] Whether they have like no power or like it's all sorts. It's really interesting. And then H-E-B in Texas is also well known. They're a grocery store chain but they start preparing. This is nothing to do with web performance but they start preparing their supply chain for these kinds of things and like altering how they serve different locations for that.
Tim: [00:54:10] Actually, I feel like I can bring the whole thing, the whole conversation like full circle to the very beginning with the H-E-B. As a Spurs fan, the H-E-B, that's the only thing that Spurs players ever do commercials for and they're super cheesy and gimmicky, and they're great.
Sia: [00:54:27] How are you a Spurs fan because you're not [inaudible].
Tim: [00:54:31] Probably a conversation for a different one, but yeah.
Sia: [00:54:33] Right. Well, they were like a team. That's why I always liked them.
Tim: [00:54:37] Yeah. I started following them just before that whole happened. And then it was a great run and not so much now but is what it is. Yeah. Got to stick through it. So, yeah. I mean, well, thanks for coming on Sia. And like Henri said, you know, we'll try to bring, I think a few more authors on and kind of get their perspectives because there's a lot of interesting insights both perf and just kind of web in general, the kind of all the way across these chapters. And it'll be interesting I think to draw those connections. And yeah, so we'll be mixing a few of those in with some of the other kind of formats that we've been playing with on this in the past. So yeah. Thanks, everybody for tuning in. And Henri and Sia, Thankyou so much.
Henri: [00:55:15] Absolutely. I just want to make a quick announcement, actually. I think this is probably going to be our second last stream of the year which means the last one is going to involve, I mean I'll come out and said, we're probably going to do a bit of a web page test team AMA or something along those lines. So look out for that. You know, we were talking about the almanac and I'm actually going to reach out to the WordPress chapter author simply because I do want to dive into that conversation. And again I mentioned that I'm going to be speaking to some of the core engineers next week. I left the link in the chat. And the last thing I want to mention is that I don't know if anyone's familiar with the group out of France. We love speed. They do again a performance focused conference more for that part of town.
[00:56:08] Some of the talks might be in English, I believe I'll double check. But I'm going to leave a link to their conference in the chat. Its happening next week. There you go. Thank you very much, Tim. Happening next week and I believe it's pre-registration. Yeah, reverse your seat, etc., etc., etc. It's fun to see some. There we go. And actually yes, you'll have is doing a talk in French. So I have to totally tune in for that. But I do believe they're going to have some English language talks as well, and some of these people have been in the chat with us in the past as well. So yeah, for those curious, go check that out. That's taking place on the 16th next week. So I think that's like Thursday. Boom, there you go and you could follow Sia on Twitter.
Sia: [00:56:52] Actually Henri, you're new to hosting, so you should put your thing.
Tim: [00:56:57] True. You should probably just drop yours in there too buddy.
Henri: [00:56:59] Ok. Well, I guess I'll do that.
Sia: [00:57:02] I got it. Can I do it faster than you, no.
Henri: [00:57:08] You probably can. So I was going to say do it. As you monitors here, it's just a little crazy.
Sia: [00:57:13] I think those are my appliances.
Henri: [00:57:18] That was meant to be.
Tim: [00:57:19] Thanks everyone and thanks everybody for tuning in too. Appreciate it. See you next time.
Henri: [00:57:23] Just cheers.
