WebPageTest Live_ E-Commerce Challenges with Guest Scott Jehl
(00:07) Tim: Hey, Scott, there we go. I forgot to add you back to the thing.
(00:12) Scott: Are we live at the moment?
(00:14) Tim: We are live. So anything you say can and will be used against you probably or something like that.
(00:19) Scott: All right.
(00:21) Tim: It is really nice to have you on man. So, yeah, for anybody who's like not, aware, Scott, joined webpage test started, Monday started working on stuff, been super, super excited to make it happen.
(00:39) Scott: Yeah, this is great. It's a tool that I've used for. I don't know how many years, it's really fun getting to work on it and be part of the team now.
(00:51) Tim: I mean, that was kind of my thing too, right. Like I used that for, I don't know how long, like at least a decade it's a little older than that, but, yeah, so then like getting to work on it was super cool.
(01:01) Scott: Yeah, Definitely.
(01:04) Tim: Awesome. So yeah, and so, of course, it makes sense to have you, jump on and it's also, I think probably welcome for folks. I know we did the one with Chris Coyer, but other than that, I think it's been my mug the entire time. So they're probably just really happy to have somebody who's not Tim and it should, cut down on the sound effects and random noises that I make too. Now that there's somebody to talk to. And I have to--
(01:25) Scott: Is there a sound effects board that.
(01:27) Tim: There is not a sound effect. I make the sound effects with my mouth. We don't need a board here, Scott. OK. Awesome. So I think, so we talked a little bit beforehand, like I, so, the last one that we did, we did like this whole donut thing, for the first time, which I thought was kind of nice, which was a way of sort of just, highlighting something that we saw in the community that we thought was cool from a performance perspective. So last time it was, I'm a big fan of NPR's text-only site. I think that's really cool. So I thought we could kind of start with that. And I think you and I chatted a little bit beforehand about a couple of things, that kind of came up, I guess, that got chatted about recently on, Twitter and, stuff like that, that I thought were worthy of at least calling a little bit of attention to--
(02:17) Scott: Some performance, community updates, hot topics.
(02:20) Tim: Yeah, yeah, yeah. A little bit of hot topics, a little bit of, a little bit of drama on one of 'em, but we need that. I'm not really into the, I'm not much of a drama person.
(02:28) Scott: No, this isn't a drama show.
(02:31) Tim: Thanks Man. That's good. No, it's not, if it gets dramatic, we have problems here. Yeah. So if I can, I'm just going to show zoom in though on a couple of things. So what's not, this whole thing was on Twitter and this is less to me, the interesting between I'm less interested in sort of the next versus Astro thing and more so the highlighting of what Astro itself was doing. So this kind of came up, somebody had rebuilt their blog using Astro, which I have not played around with much. But their homepage route dropped from 138 K to 7.6 K. the all posts dropped a ton as well. You can see it gets out onto the screen really quick here. Like Astro got this whole concept apparently of trying to get that zero K kilobyte client-side, JavaScript out, as the default. And I think that's pretty sweet.
(03:21) Scott: Yeah. Yeah. It seems like a really neat pattern, kind of deferring, where you apply the JavaScript on the page until it's needed, I guess.
(03:31) Tim: Yeah. Yeah. And I guess because you and I chatted, we haven't played with this yet. Like neither one of us have kicked the tires on this. I know you had
(03:37) Scott: Disclaimer.
(03:39) Tim: Yeah. You had a disclaimer which was around the accessibility stuff, right? Like there was something that oh yeah,
(03:45) Scott: No I meant disclaimer, as in, I have not done tinkering with Astro myself either. But no, I was asking kind of, open-endedly on Twitter this morning about it though. I'm just sort of curious, if anyone, has dug into any potential, accessibility kind of pitfalls drawbacks of, waiting to, apply JavaScript to portions of the page that aren't, in view, so to speak yet. And I wanted to follow it up real quickly with a, to be clear, I don't know of any issues, but in the past, we've seen, patterns like this, right. Where we defer parts of the page or behavior or whatever may be images from loading until they're quote-unquote visible. And, whatever that means kind of varies from, technique to technique. But, sometimes that has had accessibility impacts that weren't expected, like the content visibility, was it, CSI property, which is, I think, fixed now. Right. But originally--
(04:58) Tim: Is, yeah. So that's Marcy Sutton wrote a really good post about that. Like, when it first kind of popped up, which is, content visibility, this-- the ability to skip, element rendering work to kind of speed up the initial display of a page and stuff like that. And, she pointed out, yes, some accessibility concerns with the update is that it sounds like they took care of it, which is great. But I guess to her point here too, like it's the lesson that still kind of stands. Like just as we said, plenty of times on the Twitch thing, it's not like performance for the sake of making things faster, you're doing it because you're hoping that provides a better user experience and right. That means you have to balance it against things like accessibility as well and make sure that you're not, ignoring that.
(05:41) Scott: Yeah. And I guess, some concerns that I would think of just upfront would be, whether or not parts of the page are visible, in, like a cited user sort of context might be different than other ways you might be able to reach elements on the page, through assistive technology. So, just making sure that things are meaningful if you happen to, access parts of the Dom that aren't necessarily enhanced yet. And again, I haven't really tinkered with this framework, so it's more of a question, but I think, just in general, these patterns. Yeah. I think they're really neat. And I was curious about it.
(06:26) Tim: I think the trend is nice to see. I like the, coming right out with like building it with less client-side framework. Another thing that popped up, was the avenue from view talking about, they had like an MPA mode, a multipage app, which I still think is a little bit of a weird name, but multi page app, which is basically a traditional website, invite press, which is basically a static site generator. So now you're using that flag like it just strips out all that it zero KB by default. So it changes it so you're kind having to add the client side stuff and generally speaking, I just like the trend of frameworks competing on performance, and yeah. Little Java script we can ship. Yeah. I think that's awesome So that we thought was a donut-worthy, celebration is like that trend. I think that's cool. So I think we were going to talk about, some e-commerce stuff, right. Tis the season.
(07:23) Scott: Yeah. Yeah. I think that's a pretty good performance topic. A lot of common issues that are, relevant to e-commerce sites specifically.
(07:33) Tim: Yeah. And so yeah the thing too is right. This is the right time to the year to be doing it because like everybody with e-com is they're getting close to that code freeze season, where, they don't want to ship out new features and stuff for fear of breaking things. Because the holiday season is huge. Right. For digital commerce stuff. And so you got, yeah there's that. And then the other thing is like this time of year when I was doing consulting, I don't know if it was similar. Cause I know you did a lot of perf consulting and, and work like that too. but I would always get an influx of inquiries kind of around this time because you'd get your companies that either wanted to sort of make these last-minute, fixes in performance before the holiday season hit or folks who were taking the code freeze opportunity to do things like some performance work behind the scenes and stuff like that.
(08:24) Scott: Yeah. Changes the priorities of what you get to work on and suddenly the main part of the site is frozen. So you can start to hit the backlog.
(08:32) Tim: Yeah. You don't have to be as feature-driven for a little bit. And there's even, I've heard, like I know some shops will even do things like disabled the majority, if not all of third party resources and stuff like that, just to sort of limit the risk, during the holiday season as well.
(08:47) Scott: Yeah. Yeah. I recall some clients in the past, having certain, landing pages, I guess that were, sort of free to edit throughout the holiday season, but it was not necessarily tied to the same data sources anymore. So it was more of like a manual process. And editing raw HTML kind of brings up whole new, entirely different challenges for performance, like getting the markup right. Because a lot of the like images, for example, responsive image markup can be pretty tricky, to write by hand.
(09:22) Tim: Yeah, yeah. And it gets it can be long too wasn't there actually, there was somebody I want to say and I'm blanking on it. So somebody, if Chad knows what I'm talking about, I thought somebody had posted something recently that showed like basically an image with just a ton and ton of different variations inside the responsive, aspect of it. So it kind of really created this massively bloated HTML, and I love the, I remember going through the whole responsive images, standards, debacle feels like a, maybe an app square. It was an intense period of time, but like going through that whole thing and I really like how it ended up, but yeah now there's the balance and the nuance of like how many different sizes and variations and when they do to get applied and stuff like that.
(10:06) Scott: Right. Yeah. And which format to use versus, between picture and image and source for example.
(10:15) Tim: Yeah. And then there's also like, one of the things we see a lot too, from the lazy loading perspective, because loading is sort of a native attribute that was only very recently added is a lot of JavaScript-driven stuff. Oh, Matt man. Hi Matt. yeah. So, Matt dug it up. Yeah. This is the thing. so there's a whole like I think they dove into basically in this post, this whole idea of like, I don't know how many different sizes and stuff were there, but it was ridiculous.
(10:46) Scott: Yeah, I guess at a certain point you have, a markup that starts to compete with the image size.
(10:52) Tim: It's an upper limit. Yeah. What are some of the other e-com stuff that you walked into walk into?
(10:58) Scott: Yeah. Well, images are a big deal and you mentioned, lazy loading, I think, that's sort of, that's another one of those viewport-related challenges. Where unexpected things can happen. Like loading equals lazy, applied to a bunch of images down the page, maybe those images, aren't avail-- like for example, a friend of mine was taking screenshots of full height pages recently and all of the images were gone.
(11:25) Tim: As you do.
(11:27) Scott: Right. So maybe that's not a big concern for the average user, but it's interesting how these optimizations have little ripples like that. But yeah, I guess, images are a big deal. One of them that I was thinking about, pertains to more like, layout stability and having, width and height attributes on your images, that's become kind of back in good practice. We pulled those off for responsive images a number of years ago and now they actually help right. For providing a sort of box to draw for where the image will be, while it's still loading. And, that helps keep the page stable while the image hasn't loaded yet. Right. So I've seen a lot of, cases where, landing pages on e-commerce sites don't have those attributes yet and you get a lot of jumpiness, as the page is loading in.
(12:24) Tim: That's a pretty common one. It's probably the most that and dynamic content like banners or ads are probably the most common CLS issues that I see. Right. Like with profiling standard.
(12:36) Scott: Banner pushes everything down.
(12:39) Tim: Yeah, exactly.
(12:41) Scott: Yeah. And I think, you had a show recently that talked about client-side AB testing and third-party grips, but that's a big layout stability issue too, right. I mean, it's, first of all, just a delay of seeing anything at all that's usable, but sometimes, there can be a mismatch in sizes of what, the layout had before and after the change and you get, things moving around. Yeah, those are some that, come to mind. I mean, there's always the classic, blocking scripts and styles and, I think a lot of e-commerce sites, especially ones that are sort of in that classic dynamic, database kind of driven, stack, just have piles of scripts and styles, you add plugins and they-
(13:37) Tim: Yeah. It's a big challenge for that architecture, especially on a lot of the e-com platforms, because like the way they work, if you're propping up the site through one of these sort of pre-bake systems is, you're often pulling in sort of installing apps, installing themes, installing all the stuff and with everything you install, most of them probably are defaulting to that render-blocking status. It seems so it's a pretty common thing.
(14:01) Scott: Yeah, yeah. Yeah.
(14:01) Tim: Well do you want to, I mean, we looked, so we looked ahead, we just grabbed a couple of webpage test runs of some random e-com sites that looked like they had interesting stuff. So the caveat is that neither Scott nor I have actually like deep analysis of any of these yet we just literally spent maybe 30 seconds on each run just to be like, is there something interesting to look at? So maybe we pull up a few and just see if we can find some of the examples. Cause I think there are some examples of some of the stuff we've talked about and then how it's impacting them, maybe what we would do to address it if that works.
(14:33) Scott: Yeah. And also probably, some good examples out there. I haven't looked at the ones that you pre ran.
(14:40) Tim: Scott I sent them to you like 5 minutes ago. That's fair. So we do get a request down there too. Oh, maybe what, what is that one? Quince.com.
(14:59) Scott: Okay.
(15:02) Tim: Well alright. We might have to give that a shot. See. All right. So what is Quince? Just really quick just to see if it's something we should runoff on the background here.
(15:13) Scott: Is it one Quince?
(15:14) Tim: Oh is it one quince? Did I do it? I thought it was this one.
(15:17) Scott: Got it. Yeah.
(15:20) Tim: Oh maybe it is one quince. It is this one quince. Like, okay. Yeah, we can run that in the background. Oh, man.
(15:28) Scott: Nice little. What is it? A clothing retail.
(15:32) Tim: Looks like it's a high quality. Yeah. Yeah luxury essential clothing.
Yeah. All right. I always like the minimal I'm a really boring like I like the minimalist plain color clothes typically. So I kind of it'll work for me. All right. I'll run that in the background here while we're kind of looking at one of the other ones, then that's an extra live special I like it.
(15:56) Scott: Yeah.
(15:57) Tim: What else do you want to start with Etsy?
(15:59) Scott: Oh, Etsy. Well, they're great.
(16:01) Tim: Etsy is great. Etsy has like, for those who haven't like known like Etsy has a long history of being really involved in performance, actually webpage tests as well. and for years, like when they did velocity conference, like you just kind of expected You'd have like a handful of talks from Etsy engineers talking about all the cool stuff they were doing. And that's kind of continued now, I know with the team that they've got over there, Sergey and Katie Sealer-Miller and a bunch of other folks have done like some great work. There was a whole thing where they transitioned from React to Preact recently, which was cool. They do. So I thought we'd look for them just at the homepage here. Ran a test on
This is cable. I'm sorry. Desktop mobile. This is mobile. Yeah. Tim can't talk. This is emulated G4, on a 4G network. So this is their mobile view. and there's like one thing that jumped out right away that I thought was good as if we jump to the median run, is this like, there are only two render-blocking resources and they're both DCSS here, but nothing like none of the JavaScript, none of the third-party stuff, none of that is loaded in a blocking way at all. Which I thought was like, you don't see it as often.
(17:29) Scott: Doesn't really happen by accident. There's some good optimization work going on here clearly.
(17:36) Tim: Yeah. And the other thing I didn't notice until just now is this like where the CSS line is up here in the HTML. Like it's not actually waiting for the entirety of the HTML to get back, which is nice.
(17:47) Scott: I'm looking at the comments here. Error message. Okay.
(17:54) Tim: Oh, error message in Chrome Tim, what do we. I think it's because I'm not logged into my, I'm just not logged into my profile or something like that. It's okay.
(18:04) Scott: On the browser Chrome. Got it.
(18:06) Tim: What's that?
(18:07) Scott: Right on the browser Chrome.
(18:08) Tim: Yeah. Yeah. Up in that corner there. So I was going to see like, is this coming through? It is H2. I was just curious if they were pushing anything, but it doesn't look like there's push being used here. I don't see any headers or anything like that from that end. So they must just be kind of flushing that out. Huh. Or at least getting like that initial bit of the HTML, like the head markup or whatever, and then letting the browser kind of make some requests from there, which is nice.
(18:40) Scott: Yeah. Yeah. , That's nice to see kicks off. When the first darker blue is in there right?
(18:47) Tim: Yeah. It's a nice head start. Right? Cause like when the, for those like who aren't familiar, like the darker blue is when the content is being downloaded, the lighter blue is when it's queued up. And so, yeah, we've got this tiny little slice coming up in front and that's enough to let the browser get ahead, start on grabbing the CSS, looks like it starts to find an image and request that, from a separate domain at the time. But all of that head start occurs, before the final HTML comes out, which is nice.
(19:15) Scott: Yeah. That's cool. Yeah. That looks good. Nice tall, slim, waterfall.
(19:22) Tim: Yeah. That's what we'd like to see. Like even this fairly, they've got like a fairly clear divide in the waterfall. I'll zoom out because for once, it's actually easier to see zoomed out, but like this chunk right up here, which is like, they're getting stuff out, getting rendered early. This seems to be all like fonts, images, JavaScript, CSS. And then all the third-party stuff is pretty well pushed off actually until that's that second sort of wave, which is nice though. Because it happens after page content and all that jazz.
(19:55) Scott: They're getting a lot of images downloaded pretty quickly too. I wonder if, they have some responsive images, in the markup
(20:03) Tim: They might. None of these are very big, like 20K 21K 15K. Yeah. Those are pretty. We can look, we have the technology take a look. Well, that's a, here we go. Hold on. Where's the actual image here.
(20:25) Scott: There's a video I guess.
(20:27) Tim: Yeah.
(20:28) Scott: Oh yeah. Those all look like videos.
(20:30) Tim: Okay. Let's find an image. Oh, so this is just, I mean it looks like a static image unless there's something going on. There's nothing like responsive
(20:45) Scott: Could be a smaller image across all viewpoints.
(20:48) Tim: Maybe. Yeah. Maybe they're just kind of going with the small formats and stuff there, which is yeah still smart. Good stuff. Okay. The one thing that--
(20:57) Scott: Desktop here
(20:58) Tim: What's that?
(20:59) Scott: But you were looking at a kind of a--
(21:01) Tim: That's a valid point, Scott. Thanks for keeping me.
(21:05) Scott: It wasn't my point. I saw it in the com.
(21:09) Tim: Oh nice. All right. Well you, yeah. Thanks, Tia. Appreciate that. Good call. Good call. Let’s have a look. So these were all video or no, there is now we've got an image here this oh, okay. So they probably are doing some sort of dynamic stuff. Like if you look at the attributes here, see there's a data source. And a data was processed. Both of those kind of suggest that there may be some Java, although it's caught right away. If this was one of those images that comes back here, maybe that was a later on in the waterfall. But that suggests almost JavaScript gets involved.
(21:48) Scott: Sometimes it can be, a swap to show a different source on hover, maybe a zoomed-in source depending on how they're using it. But yeah, I think you're right.
(21:59) Tim: Yeah. We can definitely see some video stuff happening there.
22:02) Scott: Some degree of JavaScript involved here. Cause again, those data attributes. Yeah. Kind of a free-form thing. Do what you will with them browser doesn't do anything by default.
(22:15) Tim: Now the one thing that, so, the start render and the largest contentful paint looked really good. Right? Like very few in the critical rendering path, getting stuff out really nice. A cumulative layout shift had a little bit. And this one, I think jumps into one of the issues that you were talking about. Cause if we jump in, look here like where these shifts are occurring.
(22:37) Scott: Yeah. Maybe some, some width, and height attributes, although--
(22:41) Tim: A little bit of font down here, but this is the big one is all image-related.
(22:45) Scott: Yeah. Yeah. So that could be a lack of width and height attributes. It could be that the images are being, their sources are being set by JavaScript. Any number of things like that. But I would assume maybe starting with, the attributes would at least draw a little box, for where the image will one day sit whenever it is.
(23:08) Tim: Yeah. At least put like a placeholder on the HTML themselves. We can go back to Chrome table JavaScript and just see not it's it is there in the markup, so yeah. It's just missing those height and width attributes.
(23:26) Scott: Yeah. That could get that could do a lot. Especially since its right at the top of the page, the First thing you see.
(23:35) Tim: So the nice thing about that too though, is I always like the, width height one, I think it's, we see it a lot, like we said, but it's also like usually a pretty straightforward thing to address. And then in the case of like their site here, that is 0.184 of the 0.187 total score that they have on CLS. So like instantly you get some width and height attributes on there. The CLS score goes from being kind of in that needs improvement range here to being really good.
(24:01) Scott: Yeah. Yeah. Yep. Ideally, low effort and big impact kind of change to make.
(24:10) Tim: Ideally. Yes.
(24:11) Scott: That looks good. So, what other sites did you--
(24:19) Tim: I was going to say if there was some, we can jump off to another one here. So Costco was another one. Because there were a couple of interesting things that jumped out on this. So this is a PDP page. So product display page, again the mobile view, but it is this one. So if I could do a fresh page load, eh, so you can see kind of, well it's jumping around on me because for, cause just cause it can. There’s a lot of movement and I don't know if it's like remembering state or no, here we go. Okay. So not too bad. Although at the end there's still another little shift there kind of at the end.
(25:07) Scott: Yeah. Not as easy to see from that view, maybe a film strip would strip a little better.
(25:17) Tim: Let's do a film strip. I always like the film strip. All right. We'll put, kind of that 0.1 seconds. Like I'm just curious, what is your, we've never actually seen Scott's flow on this. Do you start at the film strip?
(25:31) Scott: I really, yeah. I almost t feel like an upcoming design change could be to make that a little more visible. Like the link to the, I just love the film strip feature. Yeah. I mean, it's always like, when I did, agency work, this was like the go-to view. Because it's so easy to, communicate what's going on in this metaphor. Where there's like a series of images like you're watching a movie of the page load. So yeah, this is one of the places I like this feature more than just looking at the numbers.
(26:09) Tim: That's fair. I mean, I like the lineup as well. My favorite part is the being able to scan and, and kind of line up that red bar to see exactly where and like the film strip, like when something snaps.
(26:20) Scott: Yeah. Down below in the waterfall. Yeah. Yeah. And that's really handy when you notice, a blip like maybe a layout shift that's pretty dramatic happens, then you can go down and try to figure out what happens in the waterfall at that moment. Yeah. It's really handy. Yeah.
(26:39) Tim: So like, for example, if I look at the waterfall, there looks like there is a shift over here, that's that orange dotted line at about 6.5 seconds or so. So if we come back, but yeah, so the film strip makes it pretty obvious that it's, image-related. You can see where the shift, we've highlighted the box or the shift occurs an image pops up, which wasn't there before.
(27:03) Scott: yeah. So once again, I think we've got a similar scenario with this one. Where there's no aspect ratio drawn for the image, where it's going to sit in the layout when it, eventually loads. So maybe width and height could be what they need here.
(27:23) Tim: It also looks like it might be there's something going on too with this. So the other thing with like the lining up, right is being able to see like these little pink chunks, there's some big chunk of JavaScript execution from this script that kicks off right before that shift, which doesn't necessarily mean that this script is like loading the image. Cause I think it's the know one of these things that's being queued up before it looks like, but there is something about that script in this case, like it is in the body-parser blocking, which means that whenever the browser gets to it, it's blocking things off. So something in the way that's loading in this case too, is sort of delaying the appearance of that image potentially.
(28:05) Scott: Yeah, yeah, yeah. It could, someone mentioned in the comments that, sometimes CSS could be, responsible for some of those delays to, animations. Yeah. But I think you're right here. There's a clue going on with that pink chunk right there.
(28:22) Tim: Yeah. And both Sergey and Matt pointed out, there is a lot of pink, which is that's over like this section over here, which is Dom content loaded. So there's a lot of work happening during the course of that event. Like we've got a really thick, like almost a, I mean, let me extend how long this runs out. If I can. That’s like 2 seconds where Dom content reloaded or related work. And usually, that's like, things like JQuery or something like that where was everything kind of waiting for that queue up?
(29:05) Scott: You see those chunk JS there it's like your web pack, separation.
(29:13) Tim: Yep. Yep. So they've got some web pack stuff going off breaking these little chunks here. Yeah. I'd be curious to see, I'm going to keep this one open because it wouldn't be a Twitch without me ending with like 30 tabs open. But I'm going to jump to, just out of curiosity, sort of the processing breakdown. Okay. So we got like 6.2 seconds spending on function stuff, the evaluating the script 4.29 and 89. Let's do the total blocking time view actually. I think that's what I actually want. I'm just curious to see like the attribution for a lot of this work. So a lot of it is first-party stuff.
(30:01) Scott: Yeah. And then react right there was that. Yeah.
(30:04) Tim: Yeah. I look like it. Yeah. If we go back, I've got that little JavaScript, detector thingy running in the browser and we've got bootstrap JQuery, JQuery, UI react, modernizer a whole bunch of stuff kind of running, but yeah. So we've got some Java, probably some JQuery legacy like yeah. Legacy as I'm saying legacy cause I'm assuming they're migrating to react is why that's kind of there. But yeah, probably some of that handling this and then
(30:35) Scott: Yeah. That's typical. Or sometimes JQuery comes in with, a widget like a reviews tool or live chat, something like that.
(30:45) Tim: And then what, whatever JS Navar Is, that's a,
(30:53) Scott: It's a ship JS.
(30:56) Tim: It's a, what? Ship JS?
(31:00) Scott: Are you looking at line 207?
(31:02) Tim: Yeah. Yeah. Okay. I thought you were like, there was like a pun involved or something and you were doing like a.
(31:10) Scott: Sorry.
(31:11) Tim: That's alright. No, it's good. So here's this Dom content loaded stuff It looks like it's the Dom content loaded is specifically, look at this, RWD responsive web design status assets and all that.
(31:33) Scott: It's responsive design's fault. I'll file a bug with Ethan.
(31:41) Tim: I'll have to tell Ethan He messed it up. All right. So that's kind of interesting though. So it is a lot of like stuff that probably first party they can clean to take care of a lot of the extra work that's happening on this page.
(31:54) Scott: Yeah, Interesting.
(31:59) Tim: The other thing too though, always is interesting to see is I think that OCSP validation check is always interesting. I think like I think it came up last of time on the NPR site as well, but that's that extended validation certificate. and so anytime that's there like the browser has to go and make sure that everything is okay and they don't need to, everything is valid and secure and whatnot. But it does mean that then the SSL negotiation process always goes, it gets long so you can see how it lines up and it's pushing off that SSL for the main HTML in this case to be 777 milliseconds.
(32:42) Scott: Yeah. It's significant.
(32:43) Tim: Yeah. It's a good chunk.
(32:47) Scott: Yeah. But there's a lot of good things going on here. Like we mentioned the JavaScript, but at least it's deferred, all that stuff is happening after the page is visible. So it's likely blocking interactivity for a couple of seconds in there.
(33:08) Tim: Yeah, they're also doing similar. Like you can also see the first little sliver of HTML that comes across and suddenly, the browser is able to queue up a bunch of stuff like yeah. Little chunks nice there, nothing delayed or waiting there.
(33:20) Scott: All good things.
(33:20) Tim: Yeah.
(33:23) Scott: Okay. Yeah. Good job Costco
(33:27) Tim: All right. Do we have the one that was running in the background? Do you want to just, this one is completely, we have seen nothing from this.
(33:35) Scott: It's a mystery. Yeah,
(33:35) Tim: it is. Let's look at it. Okay.
(33:37) Scott: Let's see. LCP has some high timing as we look at it.
(33:45) Tim: Yep. Now first contentful paint is fast. Like that's pretty quick. But yeah, the LCP gets pushed out a little bit
(33:52) Scott: And it looks like we've got a modal blocking majority of the view.
(34:01) Tim: Which maybe, yeah. Let’s jump to run seven and do our film strip view since that's where Scott likes to operate. I'm good with that. Okay. Rockey is now hereby band, from any further streams, unfortunately assigning things to Tim automatically is not encouraged. Yeah, no, actually the ability to do a waterfall, zoom on a mouse wheel would be kind of nice. There are actually a few things I'd like to. Scott and I might have been chatting a little bit yesterday, in fact about some waterfall-related stuff. Maybe we were talking about it.
(34:41) Scott: So many ideas.
(34:44) Tim: Yeah.
(34:45) Scott: Yeah. So I mean, immediately looking at this, like you said, the first content shows up pretty yeah. Pretty snappy 1.3 seconds. That's good.
(34:54) Tim: In fact, there's no blocking, no render-blocking resources here that I can see, unless there is one bug in the render-blocking signal for Chrome that was fixed. But I don't know if-- like we have to do a little additional plumbing to kind of clean it up, where preloads were marked as non-blocking even if they were loaded in a blocking lane. So maybe some but no, I guess, no, it's not though. I was going to say that. But then if I look at, when everything occurs, all of these things get downloaded after we get something onto the screen, so no, they're not render-blocking, so no, that's great.
(35:40) Scott: Yeah, that looks great.
(35:40) Tim: That's rare to see you do not see usually like zero is not a, very common thing to front-run into not even CSS.
(35:49) Scott: Yeah. Suspicious
(35:50) Tim: Means well suspicious. Yeah. Or awesome. My guess is y'all got this in line, huh? Yep. Right there is our CSS inline right into the page.
(36:04) Scott: Nice. Yep.
(36:08) Tim: Yeah. That's always cool. Because then you're not like having to go out and grab it. It's just kind of there in that initial HTML, which is cool to see too.
(36:17) Scott: Yep. Better than a whole second round trip while you already have content that you could render. So that's great.
(36:24) Tim: And it sounds like this is one it is built on Gatsby with Styled components is what we're doing. All right. Yeah. That's looking really good.
(36:34) Scott: So yeah. What happens later in that, film strip? Because upfront it looked pretty good. Yeah.
(36:40) Tim: Yeah. To get to the LCP thing what's happening with that.
(36:44) Scott: Okay. So we have little, what was that around two seconds. Yeah. Some more content coming in.
(36:53) Tim: Yeah. So if we go down here, All right. So our initial display doesn't seem to be JavaScript dependent in any way, like nothing is blocking that, but maybe at this point, A tiny little bit of Java, the tiniest little bit of JavaScript execution right there in the bottom. And there's also a couple that may be coincidental. But a few JavaScript files that do line up right before that occurs.
(37:21) Scott: Yeah. So it might be, might be useful to look at the source, the HTML source and in this sort of case. And see, maybe the, there are some tags that are actually standing in the way of that thing that, right around two seconds starts to, yeah. It might be hard to view this cause it's pretty optimized though.
(37:44) Tim: So in dev tools, instead of like, if we went to the elements, we'd see everything after JavaScript got applied. So instead we can kind of open this up in the sources panel and do our-- I guess this would be, It's fun.
(38:17) Scott: Think if you start left. Yeah. Okay.
(38:19) Tim: And then pretty print it.
(38:20) Scott: There you go.
(38:23) Tim: Much nicer.
(38:24) Scott: All right. Right. I always like, film strip, and just the raw HTML for me I'm just old school, I guess, but I like starting here. See happening.
(38:38) Tim: Do You still do alert debugging Scott?
(38:40) Scott: Yeah. As long as alert is supported because it's threatened right now. They might remove it on us.
(38:53) Tim: I saw that. Yes. Yeah. But I think at the moment that's like a third party eye frame thing, but yeah, that was some hot drama. Okay. So we have like a lot of little script stuff there.
(39:07) Scott: Yep. But I'll inline.
(39:10) Tim: Yeah.
(39:13) Scott: And a bunch of preloads for fonts and some web pack scripts that'll come later and we've got rendered HTML, which is great.
(39:26) Tim: Yep. So that would be our, kind of logo and header stuff up there. If we go back to the waterfall, I think that's what, yeah. So, and this is that initial stuff that comes out, right. The logo, the little hamburger menu, the notice across the top, that's probably all of that. Some responsive images and lazy loading attributes.
(39:55) Scott: So yeah. It's just curious, to figure out what's delaying that first chunk of content in the body of the page from, showing up styled like it does around two seconds.
(40:09) Tim: Yeah. It's not jumping out. Were you seeing anything in the market that was signaling it to you?
(40:13) Scott: Not yet. I don't know if we even got that far down yet. Did we? We're still,
(40:21) Tim: Well, I mean, at this point we're at the--
[Inaudible40:25]
(40:27) Scott: Oh, okay. Yeah. Yeah.
(40:30) Tim: And none of that shows up on that initial view, which is interesting.
That's all unless that's tucked away I see I'm missing the mega menu, so that's probably tucked away kind of in this thing. Okay. So maybe we didn't go far enough, Megamenu.
(40:51) Scott: And here we're 8,000 lines of HTML in so luxury, there you go.
(40:58) Tim: Yeah. Okay. So here is where we're getting this stuff that did not show up in that initial view.
(41:03) Scott: I'm impressed. You founded that quickly.
(41:05) Tim: Thanks, man. Yeah. So I am not actually interestingly seeing anything like above it that it seems to insinuate that things should be blocking.
(41:20) Scott: Yeah. So maybe not an element, a script or a link that's blocking it necessarily.
(41:27) Tim: There's definitely some script work though because if you disable JavaScript, it comes out pretty much like right away. It's a good debugging tip. Yeah. Yeah. So maybe something's going on. And again, we could probably look at let's do, let's do it. We're going to jump back check out the.
(41:57) Scott: Going to go back to, the film strip?
(41:59) Tim: No, well, I've got the film strip open. What I want to look at here is just take a quick look at the actual, Chrome timeline and the view it's right there Tim. and just see if there's anything that jumps out to Happening on the main thread for these scripts.
(42:23) Scott: Hmm. Like right around 1.9 Seconds was it?
(42:30) Tim: So this is kind of where [Inaudible42:39 ] some HTML, blah, blah, blah, blah, blah, More HTLM parsing, Layout work, which I think if we looked back at the film strip view for this, did we see layout work right around there? Not really. Just a teeny tiny bit upfront.
(42:59) Scott: But that's still around first paint, right? Like 1200.
(43:04) Tim: Yeah. That's about right. That's true. You're right. Time recalc stay. So this one here which is one of the inline ones it looks like. So it's getting to a point where it's just one of those things that are sitting inside the HTML here we, can see the parse HTML starts at around 928, 928. So this function is whatever triggers kind of in before there here's our largest contentful paint.
(43:45) Scott: Yeah. Interesting. Yeah.
(43:49) Tim: Something a little funky script related with the way one of those things are loaded is causing that to push out a little bit further than we'd like to see it, but Okay. [Inaudible44:02] anything else jumped out on this one. What’s that?
(44:05) Scott: Yeah, we didn't quite get to the bottom of that one, but, you were saying it was visible if you disabled JavaScript.
(44:15) Tim: I mean, we could poke around at it more if you want. I'm trying to figure out what it would be that would be hanging up on that.
(44:21) Scott: No, and I mean, we have a lot to cover here. We were in the film strip. Cause we had a pretty big jump in, layout stability.
(44:31) Tim: I think we did. Yeah. Let's put on the layout shifts highlighting, just see what's going on there.
(44:44) Scott: Well. There was space for the image. That was nice.
(44:46) Tim: Yeah. That's nice. It is preserved. That's good. Did we not? Where was our layout shown? Oh, no, we kind of right at the end.
(44:54) Scott: Yeah. I think it's going to be that modal overlay, right?
(44:57) Tim: Yeah. Okay. Probably. Yep.
(44:59) Scott: Yep.
(45:00) Tim: Yep. That's what that is.
(45:01) Scott: Yeah. So that's going to ding sites with a pretty high CLS score.
(45:10) Tim: They've been working on that. I thought like somebody correct me in the chat if I'm wrong, but I thought that there was significant work because I think the modal was one of the things I don't know. I thought I remember hearing the modals was one of the things that they were going to try to workaround. Although I'm going to be honest with you. Like I wouldn't want them to, like, it feels like that CLS if it is actually supposed to be a measurement that helps from the user experience. Like, it should measure that in my opinion, but I seem to recall something like that.
(45:36) Scott: Yeah. I remember reading about, a little back and forth over, how it would impact, search ranking kind of signals, I guess over the years. And I remember for a client, there was, a difference between a full screen modal and one that, takes up part of the screen when it first loads and there was a discrepancy there, I don't know where it's at, that would be worth looking into, but at least in webpage test right now it has a pretty high, CLS so.
(46:14) Tim: Yeah.
(46:15) Scott: Yeah. Getting that to, just from a user experience perspective, getting that, that modal to show early on, if it needs to show would be a nice thing. Because you can imagine starting to use the page and then being interrupted by it.
(46:30) Tim: Yeah. It's always, I think most of those have probably been on the receiving end of something like that, which is always a little. Yeah. Anything else jump out at you on this one or?
(46:40) Scott: No, I mean those, those two things were interesting. What else have you got?
(46:44) Tim: What else have we got? All right. All right. Right. Let’s see.
(46:49) Scott: We had what J crew was one
(46:51) Tim: You had looked at, I think you had pulled up a PDP page though, right?
(46:55) Scott: Yeah. Both. So this is the homepage and I didn't look at these looks like this One is a high CLS too potentially.
(47:04) Tim: Now this is a desktop view.
(47:07) Scott: Okay. Yeah. Largest Contentful paint is quite high. What was that? 17 seconds? And this is on a fast connection.
(47:15) Tim: Pull this up by the way. If anybody hasn't had the pleasure of doing one of Sergey's like meetups, events like the meet for speed stuff. They're always very good. So sounds like that is, tonight.
(47:27) Scott: Nice. Yeah.
(47:28) Tim: Need to check that out. All right. So sorry, you're going back to your J crew thing here.
(47:33) Scott: Yeah. So we've got about 18 seconds on that largest contentful paint and this is on desktop.
(47:40) Tim: This is on desktop. On a cable connection. Yeah.
(47:42) Scott: Yeah. Hmm.
(47:46) Tim: Let's go back to your film strip view actually here so the other thing here like this.
(47:55) Scott: Oh wow. Okay. Yeah.
(47:57) Tim: This is a big time to first bite.
(47:59) Scott: That almost looks like a blip, like maybe this is atypical.
(48:06) Tim: It does. However, if you look at all the waterfall, I know these are only three runs, but like we're looking at three runs we've got all three of them, at least. So maybe it's something that's going on at the time that we're testing, that's delaying on the back end, that's totally possible.
(48:25) Scott: 8 seconds, right? To be clear of, waiting. Yeah. Waiting just for HTML download.
(48:33) Tim: Yes.
(48:34) Scott: Okay, and it looks like its server work step, right? The connection steps are pretty quick.
(48:40) Tim: Yeah. The connection steps are like DNS and SSL are super quick here. In fact, if you could look off of the, the third party stuff down here is all pretty quick. Comparatively. So it is something related to yeah the J crew server. They are also using like where is it?
(49:09) Scott: Is the HTML enormous?
(49:14) Tim: It is, I mean it's yeah, it's big, but it's not like massive, massive. I've seen worse.
(49:23) Scott: And the download was pretty quick. It's that waiting period.
(49:29) Tim: Yeah. And so if you look, actually they are using the server timing header, which I really like, the server timing header, it doesn't get enough love, but so that's like the, for anybody who hasn't seen it, the server timing API, lets you add basically server timing, headers, to the request to be able to detail like you can measure like, how long it takes at different steps or in this case they've got one, for example, that's indicating that it was a, hit at the CDN cache layer. Then what's interesting is so they're seeing, it looks like there's a CDN cache hit. However edge, one of the edge servers, presumably it looks like they've got a few things in place here. The duration there is like nine seconds. So this is
(50:14) Scott: Yeah. So, it may not be J crew's fault. Right,
(50:17) Tim: Right. It may actually be one of the services they're using behind the scenes here.
(50:20) Scott: Yeah. Yeah. But that's okay. So that's a bottleneck to check out.
(50:25) Tim: Yeah, for sure.
(50:26) Scott: Yeah. What about, those later downloads are pretty lengthy as well. 8 seconds. Yeah. All this stuff, the scripts. So that could be that same edge server.
(50:45) Tim: Yeah. And it is, I mean, again, there's an edge header server timing header into kicking the edges, taking a very long time. So somewhere on the CDN level or edge server level, as long as that metric is like, because the thing with server timing is you are kind of instrumenting that yourself, or the CDN or sever. So as long as that's accurately measuring, there's something in the chain there where it's having some trouble.
(51:09) Scott: Yeah. Okay.
(51:11) Tim: It almost sort of blocks out anything else that you see because you have such, you know what I mean?
(51:15) Scott: Right, right. Yeah. Good example of when the problem is, server-side.
(51:24) Tim: I think what is the rule it's like 80% front end, 20% server-side. But in this case, it is clearly-- Yeah. There's a couple of shifts later once stuff does get onto the screen.
(51:44) Scott: 20 seconds. Yeah. I wouldn't be surprised if this is resolved already. That's a pretty big delay.
(51:53) Tim: Yeah. Maybe. Well, it's, what’s that?
(52:05) Scott: Oh, go ahead.
(52:06) Tim: I was just going to say it is, I think about an hour. So I don't know if you wanted to try and dive into one more or if we wanted to hop off and.
(52:12) Scott: I'm up for it or yeah. Did we get any more, questions in the--?
(52:18) Tim: We get a couple, so this one like does or can webpage test use the server timing, headers, maybe a feature request? That does sound like a good feature request. Yeah, we don't like we expose it in the request dialogue, but there's nothing specifically we're doing other than that right now.
(52:32) Scott: That'd be really nice.
(52:36) Tim: Yeah. And I think anytime like we can, like something like that, just bring a little bit more visibility to it as always. It’s helpful to help promote it, but it's also, I think usually, things like the thing that I get excited about with server timing or a lot of the other metrics is that once they're out there, and you start to see visibility in tools, you usually start to learn things that you weren't aware that were problems before. So yeah.
(52:59) Scott: Interesting. Yeah. That's a great idea.
(53:01) Tim: This is entirely possible. It is possible that the server is complaining because it sees the webpagetest stuff in the user agent. Maybe, maybe, we could test that.
(53:23) Scott: It's a good question. Yeah.
(53:25) Tim: That's a good Question. Yeah. Cause we are signaling somewhere. It gets passed along at some point, they can identify that it's webpage test. Yeah. Okay. Maybe. This is just cold and rude. I'm just trying poor J query.
(53:48) Scott: Oh no, nothing but love for JQuery.
(53:52) Tim: Scott, you worked on JQuery.
(53:54) Scott: I did. I was on the JQuery team. And then I was on the JQuery UI team and then JQuery mobile. Yeah. A number of years there.
(54:04) Tim: Nice.
(54:04) Scott: Yeah. Yeah. Good community.
(54:08) Tim: Yeah. I've got fond. I mean we use JQuery sometimes on the webpage test site still. Yeah, fond memories of JQuery.
(54:20) Scott: Yeah. All right. So yeah. Was that the only question? Let’s see here.
(54:27) Tim: You see anything else.
(54:30) Scott: Scrolling through?
(54:34) Tim: Sometimes I miss, I get a little heads down and like just, looking at stuff and so miss anything.
(54:42) Scott: Yeah. Interesting.
(54:45) Tim: What's that is that a question about J query itself? We’re splitting it up now?
(54:51) Scott: Oh, towards the end here.
(54:59) Tim: That is a question about JQuery itself. Do they? There was at one point something I vaguely recall where you could break it out into pieces maybe.
(55:10) Scott: I'm not on the team these days and I'm not tightly familiar with where it's at, but I know, when I left, a number of years ago, it was very modular at the time. I'm, pretty sure you could, set up your own build and get a much smaller version of it. I can't speak to it today, but I'd be surprised if that has changed.
(55:33) Tim: Yeah. If it went backward or anything like that. I'd be surprised too. Yeah. Could we recall? I think I remember when that came out, but it's been a while.
(55:44) Scott: Yeah. I think you had to use at the time, the build tools would let you opt-in or out of things. I don't know if there's anything easier than that, but. Anyway, shout out to JQuery. Yeah. Okay. Well I think just, from these test trends, we were able to see, some common bottlenecks, like we were talking about.
(56:13) Tim: The images thing that you talked about. Some of the third party stuff, kicking rearing its head too, like saw some third party stuff kind of coming to play in the block for the one that Navar stuff.
(56:27) Scott: Yeah. Yeah, definitely some image problems, with.
(56:34) Tim: It's a common one. I mean, that's like, and I know we said, or I said like the height, width kind of thing, is kind of an easy fix, but there's actually a lot, usually, these sites have a really complicated image pipeline is not uncommon to run into. So like there are some challenges I don't want to, like, I want to go back and revisit that and not say, make that sound overly simple or anything like that. There can be some significant challenges to get it right,
(56:58) Scott: Right. Yep. Yeah. Sometimes, the image is hosted somewhere else. It's not very easy to get those, those width and height attributes, dynamically. And maybe it's not even worth the effort, compared to the savings, but as long as you can do that cost-benefit analysis. Yeah. But, it seemed like most of the CLS issues we, saw were image-related.
(57:27) Tim: Which is pretty common. Like I said, I think there was one tiny font one on one of 'em, but it was so small that it wasn't really worth like zeroing in on too much. It was the image that was 99% of it.
(57:41) Scott: Yeah. And the LCP ones, similarly seem to be an b image, I mean, e-commerce sites, you end up with a big image at the top often, so, not a big surprise there, but--
(57:51) Tim: Would you say that those, like, just, I mean, if we're going to try to like, like put a nice little bow. Like for folks, if you've got the e-commerce stuff site and you're looking at, what are those things that you should absolutely be focusing on? It seems like, would you say that like images and third party stuff would be shooting right to the top of the list for initial fit priorities in most cases?
(58:16) Scott: Yeah, I think so. I mean, all the sites that we looked at had HTML delivered for the content, which is a, trend that is continuing to, improve, right. For a while there, we were delivering pages that were just an empty body, tag with a dividend, and populating the whole thing, client-side, everyone noticed the problem. I think now we're seeing a lot less of that. Even, with the same tools that were being used to make those kinds of sites, react in those kinds of frameworks in the past are all doing it a lot better now. So, we didn't run into any of that kind of stuff, and yeah, true examples. That was good.
(58:55) Tim: I kind of expected to actually. But yeah, even in the case of something like the, Gatsby driven site that we saw, that initial stuff was in the markup, there was a little bit of delay for JavaScript executing, but, it doesn't look like JavaScript was dynamically, like building out the Dom and like you were passing an empty shell down or something like that.
(59:13) Scott: Yeah.
(59:14) Tim: That's always nice to see.
(59:16) Scott: Yeah. Didn't you even see a lot of, upfront blocking scripts and styles, more and more, these tools are actually giving us workflows that are in lining things, automatically, CSS, as we saw in a lot of these, examples, good practices are more and more just becoming common. So it's, it's really good to see for random sampling.
(59:38) Tim: True. Yeah. But I mean, you're right. I mean, that's the promise or the whole like hope, I guess, with, things like next or next, or really any of those kinds of, approaches, to building sites and stuff like that. Whereas if they can, most people, if a lot of folks are starting from those, if we can have like perform a default baked into those kinds of things, then the outcome is like you said better because a lot of that stuff can be automated. A lot of that stuff can be built-in. You don't have to think about it. That's why I really like, going back to, I guess the beginning, like the idea of like the vice press thing with the zero K starter. In theory, at least the Astro build thing [Inaudible1:00:20] in general, how it defaults to basically all of that stuff. It's good.
(1:00:27) Scott: The good practices are the default pattern. Yeah. It's important because we saw the impact of making the default pattern be sort of like the dynamically generated thing for a while. And how people will go with the default pattern and it had a negative impact, on user experience. So yeah, it's a good trend.
(1:00:53) Tim: Yeah. Defaults are definitely something you can't underestimate the importance of those things. People stick with them. Anthony, like for folks who I can't actually copy-paste, apparently I literally cannot copy this URL. Anthony ran the test without the web page test user agent, and apparently got very different results.
(1:01:16) Scott: We were tricked live.
(1:01:19) Tim: What's that?
(1:01:20) Scott: They, tricked us live.
(1:01:22) Tim: Yeah. They did. Nice. Well, thanks for its-- I always like it when, I think honestly I love that when the-- I've said it before, but with the chat and everybody kind of chiming in and stuff, it's always is awesome. I like, I get to learn from all y'all, dropping stuff in, or like some of y'all catch things like this very quickly when I'm, fumbling over it. I appreciate that. It's Awesome.
(1:01:42) Scott: Yeah. Yeah. So if you see something funky on a site that you don't own, it's worth checking.
(1:01:47) Tim: Definitely.
(1:01:49) Scott: Maybe it's a user agent thing. Yeah.
(1:01:51) Tim: Cool. All right. Well, so I think we're out of time. I got a, but Scott, thanks for coming on.
(1:01:59) Scott: Thanks guys for having me
(1:02:01) Tim: Make this a thing where Scott shows up,
(1:02:03) Scott: I'll wait for the invite and the reviews.
(1:02:06) Tim: One of these times I'll invite you and then I just won't show and then you just have to do it.
(1:02:11) Scott: I'll figure out an agenda. All right. All right.
(1:02:13) Tim: Perfect. Awesome. And thanks everybody for jumping into really appreciate it.
