712: Lazy Loading the Web With Scott Jehl  🔗 **Source:** [712: Lazy Loading the Web With Scott Jehl](https://share.snipd.com/episode/8df3acba-3ea5-4691-9084-fac372f87687) ## Highlights - **Platform Level Lazy Loading Uses IntersectionObserver** - Lazy loading defers fetching a resource until it's needed, typically when it intersects the viewport via IntersectionObserver. - For video and audio, loading=lazy now uses the same intersection-based heuristic browsers already use for images and iframes. Transcript: Chris Coyier In fact, it's just rolling out, which we could sum it up and just say what it is really simply. It's just lazy loading for video and audio, like literally the angle bracket video and audio tags, right? Somehow that just didn't work. I would imagine there's probably a decent amount of those tags already on the internet that just assumed that it did. Right, right. But it doesn't, actually. Probably auto-competes already. Yeah. Yeah, totally. But that didn't work. And it does now. And thanks partially to you, perhaps other Squarespace people, I don't know who was ever involved, but that's pretty cool. Lazy loading is freaking huge. I'm glad we got it on images first. That probably has an enormous impact because there's images all the hell over the web. And probably most of them should have it. Scott Jehl Yeah, most, I mean, basically any that are not, you know, in the main area of the viewport when the page loads. Which is hard to know a little bit. It is. You need some kind of heuristic for that. Chris Coyier So what is lazy loading anyway, though? Just so people know what I mean. I think a lot of us just know it loads, but lazily. Scott Jehl But what really does it mean? Yeah, I mean, that's pretty much it. Deferring when a resource is fetched until it's needed is kind of like, I think, a broad way to scroll down to it, right? Chris Coyier It's like in the viewport. Scott Jehl Yeah, although it could be even more than that. It's really when it intersects with the viewport ([Time 0:01:34](https://share.snipd.com/snip/d7853d05-457f-4d87-8f05-59a0ffc5324a)) - **Native Lazy Loading Preserves Markup And RSS** - Native lazy loading at the platform level replaces bulky JS libraries and edge-case hacks. - That means you can include many video elements in static HTML and they'll only fetch when visible, preserving RSS and markup semantics. Transcript: Chris Coyier Yeah, how great is that? Obviously, that's how it should work. Really great. Saves a tremendous amount of bandwidth. We're practically eco-warriors, you know, saving the world. Scott Jehl It's funny, like the window that browsers use varies, right? So like Chrome and Firefox, if you compare the two, have different outlooks on prioritizing bandwidth usage versus making sure that an image is going to be visible as soon as it scrolls Into the viewport, right? So like one's more aggressive than the other. Chris Coyier With that intersection, like if you're scrolling down pretty fast, it might be like, ah, I see what's going on here. Let me get a fetch going for that image right away, because we're trying to make a good user experience too. Right. You know, and I find that browsers do a good job. I don't have any like, yeah, horrible. Scott Jehl Yeah. But it was surprising, you know, in doing the because we did the browser implementation work as well for Firefox and WebKit. We've contributed. Chris Coyier Yeah, we'll get to that. That's amazing. Because there's a whole story to that, I think, that we could weave into here. It is interesting to me. So, iframes have it too. Like, images got it. ([Time 0:05:02](https://share.snipd.com/snip/0abc0e74-4e16-44c2-9320-afe9b994aae1)) - **Control Video Fetching With Preload** - Use the video preload attribute to control how much video data the browser fetches: auto, metadata, or none. - To mimic lazy loading pre-spec, set preload="none" and trigger loading via IntersectionObserver when the element becomes visible. Transcript: Scott Jehl Well, I mean, as far as other performance attributes like that, your initial question, video had some already. It wasn't lazy loading specifically, but it has this, this attribute called preload, which, you know, is kind of a load. That was like the extra aggressive? Yeah, it sort of lets you decide what should be preloaded. So the default is basically leave it up to the browser. It's called auto. So preload auto, which tends to be, you know, some browsers are pretty aggressive. They'll download most or all of the video. And that's pretty costly. Default setting. And then you can limit that. So you can say preload equals metadata. And that's just like, just load enough of this video to maybe draw the poster frame, you know, like figure out the dimensions of it. If you only have a video to work with and there's no poster image. Chris Coyier Oh, so even the, like the, if didn't tell it the width and height, they would figure that out too. Scott Jehl Yeah, but you get the same sort of scenario as images. If you don't have an aspect ratio, it'll kind of snap into the, you know, layout shift. Yeah, okay. Using the poster or the video size. So, yeah, you definitely still want to do that somehow width and height, just like images. Good practice. Chris Coyier Do that. Good. I'm glad they're buddies in that way. Do the same thing. Yeah. Scott Jehl But then the third value for that was none. So preload none means just don't load any of the video data. And that's sort of like lazy loading. Even if it's in view, right? ([Time 0:08:52](https://share.snipd.com/snip/397e1daf-a2f0-4acd-89c3-ebbc84b0da52)) - **Resurrecting Responsive Video From Browser History** - Scott and colleagues resurrected previously-implemented responsive video features from Firefox Git history to reintroduce media attributes. - They fixed merge conflicts, iterated with browser teams, and Chrome landed a spec-compliant implementation within days. Transcript: Chris Coyier But to me, that story starts with, and I'm sure to you too, the fact that you've done this before. And it was perhaps before your Squarespace days, but it's really cool that you're able to bring it to them now. And I applaud the effort. Good job, you and Squarespace. But there was a time, and I think everybody was a little bit like, oh, dang, Scott, way to flex, you know, where you thought that videos should have, like images do, like we were just talking About, videos should have responsive formats too. And there was this weird thing where like Safari used to have it. And then I don't know, maybe the spec wasn't done or something. So they just ripped it out. And that felt weird. You're like, of all things that should have alternate sources, it's something that might be 100 freaking megabytes, you know, like if I could ship one that's two instead, wouldn't That be like, uh, 50 times better? Like, so we should have this and it didn't. And I think that bugged you or something. And so not only we're vocal about it, but we're like, you know what I'm going to do? I'm just going to like download freaking gecko or however, whatever the terminology is there. And I'm going to run it and I'm going to add the code and you did it before there was cloud code. So that sounds hard. All right. Scott Jehl I'm going to issue a ton of caveats here. But yeah. Yeah. So first of all, thank you. That was awesome. And you blogged about that process. It was really cool to see that on your, I think it was on CodePen or one of those blogs. But anyway, yeah, that was, that was really interesting. You know, background wise, I come from, well, originally graphic design major, right. And kind of self-taught into web dev. I don't have formal training in like C++ and all that. So a lot of this was unknown territory to me. This feature was previously a standard. So like when the video element landed in HTML5. It was a spec at one time. Yeah, it was in the spec. Source elements would have a media attribute, right? So you could put media queries. And not only was it standard, but it got implemented cross-browser. Chris Coyier Oh, source meaning S-O or whatever it is. Right. So you could put those within. I don't see it that often these days. Maybe you do because you're so involved. But you could put those in between open bracket, in the video tags to describe these things. Absolutely, yeah. Scott Jehl So you could use it to say, do type selection, like here's a WebM source with a type of video. So if the browser supports it, it'll take you. If it doesn't, it doesn't. Call back to this one, it's MP4. You can also put media attributes on each source element. And that gives you, you know, say you want to serve a vertical video for like a YouTube shorts kind of thing versus, oh, they're on a laptop. Let's serve the wide format, you know, same video, different formats. Yeah. So you can use responsive video for that. So that was through the source tags, but did those just get nixed entirely? So around the time we had the responsive images community group, right? And we were planning the picture element and source set sizes. We used video and it's like source media usage. Chris Coyier You're like, look at this, they're doing it right. Yes. Scott Jehl We used it as precedent and said, this is a great model. We want to follow this for the picture element. And there's a lot of blogging about the details of this, but basically that wasn't widely agreed upon. And the spec owners actually removed media attributes from source elements in video because they actually didn't think it was a good precedent, right? It was already supported in browsers. It was already standard for years. But they removed it from the spec around the time we were trying to, you know, plan how picture would work. Meanwhile, picture did land with that feature, right? And that's how we know responsive images to work today, right? Like picture with source and media, kind of the core of the, yeah. But anyway, when the spec changed. Chris Coyier So now video can point at that, like a total Ouroboros freaking eating its own tail thing. Be like, look at this implementation. Scott Jehl Exactly. So it came back around. I mean, the, it was removed from the spec, uh, two browsers, Firefox and Chrome removed their support and there's not a lot of precedent for features pulling from the HTML spec. You know, the spec's supposed to be forever. So this was unusual. But with exceptions, it happens. And it did happen. So yeah, I mean, a number of us were just like, hey, that was a good feature. So I blogged about it, issued Tracker, commented about it. And it was just kind of like quiet for a while. And then I don't know what changed exactly. But at some point, Simon Peters at Mozilla chimed in. He's like, I think we're into this. And then someone at Apple was like, yeah, let's do it. And suddenly it was like, oh, okay, we're going to bring it back. So, yeah, I mean, I guess to summarize my involvement on the Mozilla side, I was really fortunate in that there was, you know, Git history for this feature that used to work in Firefox. And I just went back. Oh, I can see why trying to caveat it. Chris Coyier Cause you're not like, I'm going to write this from scratch. You're like, I'm going to yank this out of GitHub. I had to fix some things. Yeah, sure. Scott Jehl You know, it didn't just drop right in. There were merge conflicts. Chris Coyier Yeah, come on. Scott Jehl But no, I mean, you know, largely it was a relatively straightforward thing to bring back. I remember, you know, talking to people at Chrome at the time and it took them a matter of days to add theirs back as well. ([Time 0:20:40](https://share.snipd.com/snip/296dc01a-4c20-4bb2-97c3-95ad15512e53)) - **Hack Week Launched A Standards Push** - During Squarespace Hack Week a four-person team split work across spec, tests, and prototype browser builds to push lazy loading for video. - Some teammates built local WebKit and Firefox patches to inform spec decisions. Transcript: Scott Jehl One about this process that we went through for this new feature, which is lazy loading video. And then a second post that's like aimed more at web developers. Like here's how you use it, right? Yeah, yeah. I see that. Chris Coyier There's the story one and the how-to one, which is cool, which is cool, yeah. Yeah, thanks. Scott Jehl So yeah, I mean, the story one was, we have a semi-annual Hack Week, and you can work on what you want, you know? And I thought, you know, it would be neat to see if we could take a stab at some more standards work, particularly something that would benefit Squarespace websites. So lazy loading video, a lot of Squarespace customers use video. No surprise there. So yeah, that was sort of the impetus for it. And I think the post gets into detail about the process, but in the in the week of, um, hacking at it, we made pretty good process, uh, progress rather to the point that we were like, what Chris Coyier Was your entry point? Scott Jehl Like, well, I'm going to do the thing again, where I mess with the browser build. We kind of, so we, we, I guess we started on all aspects at the same time. We had enough people involved. There were four of us. And some were interested in, you know, all of us web engineers, not browser developers. But, you know, some had a proper background with like, you know, C++. It had maybe been a while. But those were the teammates who were eager to download a browser source and see how it builds and what's involved in writing a patch. Oh, they were into that idea. Chris Coyier Yeah, and ([Time 0:30:33](https://share.snipd.com/snip/f4eaa34a-8dc5-4c87-9acb-3098cb53d42d)) - **Use Web Platform Tests To Move A Feature Forward** - Write Web Platform Tests (WPT) for a proposed feature to accelerate browser adoption and spec acceptance. - Tests should assert fetch behavior, loading events, and state changes rather than relying on timers. Transcript: Scott Jehl So those are two of them. Another one, you need tests, right? So web platform tests are the suite of unit tests that every browser checks out and runs as part of their build. And if a feature is in the standard, it's got to be tested, right? They got to be able to verify that their implementation works right. So as part of it, you need to. Chris Coyier What a miracle that that exists, too, because it didn't forever, right? Like, I don't know when the first year that was rolled out, but my gosh. Scott Jehl No, it's a relatively recent thing to become sort of a community effort. I think it was Boku that kind of spearheaded that. I could be wrong, but I'm pretty sure that's right. Yeah. So it's a massive project. And I got to say, really fun. Like if you're a web developer who's looking to get involved in web standards work and you're like, you know, looking for a good first commit, right? Like go to web platform tests and see how these work because they're literally, I mean, for one thing, you will gain familiarity with the way a feature works just by writing tests about It, you know? Because you're going to want to use the event handlers that are available to that element. You don't want to just rely on timers, right? Like page loads, five seconds later, what's it look like now, you know? You don't want fl things like that. So everything in there is, you know, it's written according to, okay, like in our case, we've got a video element that's display none when the page loads and it's loading equals lazy. And then we verify that it didn't fetch any video. That's the first test. And then make it display block. Make sure that it fires a loading event. You know, those kind of things. So if you know web standards, if you know vanilla JavaScript, you can write web platform tests. You know, it's not browser work. Yeah. Chris Coyier What are they,, or what, what's the thing? Oh gosh. Uh, I don't know. But there's assertions, I'm sure. WTServe is all I would hit for the commands. Scott Jehl Um, but it's really nice. Like, you know, you get the, um, the local server running, uh, the test suite, And then you can, uh, you can search for tests using certain file name, like, you know, strings, I guess. So like I could find all the tests for video really easily and run just those. Yeah. Nice. Chris Coyier Yeah. Scott Jehl Yeah. Yeah. Chris Coyier So you, yeah, you got to make sure you didn't break the other ones too, which is not. Yeah. Yeah. So, um, yeah. ([Time 0:34:51](https://share.snipd.com/snip/abe81ad4-43f7-402f-8a8c-ecf40bafcfeb)) - **Community Contributor Jumpstarted Chromium Implementation** - A third-party Chromium contributor, Helmut, implemented loading=lazy for media within days by reusing the shared WPT test suite. - His quick implementation accelerated the feature's path toward shipping in Chrome. Transcript: Scott Jehl Chrome, however, Helmut, one of the Chromium code owners, decided to jump in. Third-party developer, doesn't work for Squarespace, but was really jazzed about this feature. And he's like, let me do it. I can build this one. Helmut has this great resume of other changes he's landed in Chromium. And he was really quick to get a fully spec compliant implementation into Chromium within a day or two. It was really impressive. But those tests were already there. Chris Coyier The tests are shared, right? You don't have to write Chrome-specific tests. That's the point. Scott Jehl Yeah. So he was able to pull our test suite from web platform tests, which before the spec landed, the tests were actually able to merge. And you can do that by giving them this tentative status. So they test for a feature that's not standard yet. And then once the standard lands, you send a pull request to remove the tentative status. ([Time 0:42:32](https://share.snipd.com/snip/592ef1fc-954e-4086-949a-8761e724aeb1)) - **Poster Alt Text Fixes Accessibility Gap** - Accessibility for video posters was overlooked: posters had no dedicated alt text mechanism. - Adding an image child with alt provides a proper accessible name separate from video-level ARIA or caption tracks. Transcript: Scott Jehl But yeah, Poster has a limitation in that you can only point to one image source currently. So it's not responsive as we would know image and video to be. Chris Coyier So if you want it to look really good on a really big screen, you're going to give it a 2,000 pixel image or something and then you're stuck with that on the smaller screen, that kind of thing? Yeah, so it's limiting. Scott Jehl It's also, you know, images have, uh, have gotten a lot of features in the last decade or so for controlling like cross origin, you know, cores behavior on the image tag, um, decoding Async versus sync, uh, fetch priority, all these things that images can do, right. That like poster is, poster is starting to show its age. Right. And it can't be responsive. And maybe, maybe my favorite part about this problem or most important, it's, there's no accessible name for it. Right. So like when, when the poster is showing, how do you describe that image? Right. You can, you can sort of like, you can have descriptive qualities the video for accessibility, but the poster has never had a proper description. Chris Coyier Like descriptive qualities for the video. How do you do that? Scott Jehl You just put stuff inside the video? Well, you can do ARIA label, ARIA described by. Oh, sure. Okay. And then, you know, there's other qualities. But that's talking about the video, not the image. And also, you know, you've got subtitles. There are other, like, caption tracks that when the video is playing that provide alternate or provide text. You know, if you need subtitles, that sort of thing. Yeah, yeah. So there's a lot of accessibility features in general. But, yeah, Poster has been kind of underpowered. So again, another punch list for the video element. ([Time 0:51:42](https://share.snipd.com/snip/316fed2f-faf2-493d-a163-d78f3c4674b3)) - **Make Video Posters Responsive And Accessible** - The video poster attribute is outdated: it can't be responsive and lacks an accessible name. - Proposal: allow an image child inside video (with srcset and alt) to act as a responsive, accessible poster. Transcript: Scott Jehl Of like, you can have descriptive qualities the video for accessibility, but the poster has never had a proper description. Chris Coyier Like descriptive qualities for the video. How do you do that? Scott Jehl You just put stuff inside the video? Well, you can do ARIA label, ARIA described by. Oh, sure. Okay. And then, you know, there's other qualities. But that's talking about the video, not the image. And also, you know, you've got subtitles. There are other, like, caption tracks that when the video is playing that provide alternate or provide text. You know, if you need subtitles, that sort of thing. Yeah, yeah. So there's a lot of accessibility features in general. But, yeah, Poster has been kind of underpowered. So again, another punch list for the video element. I filed this ticket about a year ago around the same time. This one is to make Poster, the Poster attribute, responsive and accessible by introducing this new idea of a child image element that could. Poster source set? Well, that is one avenue, right? You could take the avenue of like adding new attributes like poster source set, poster sizes. Yeah, but no, this is a child disability thing. Yeah, so this proposal, and to be clear, still just a discussion at this point. It could be this doesn't get picked and something else goes, but we're talking about it anyway. I have a child element, image element inside the video that can control the poster. If it's present, that image element, which could have source set and sizes on it, it can have an alt attribute and it could have a poster parent, sorry, picture element parent. Chris Coyier So it could be a direct child of the of whatever of the video element, then that's the poster, essentially. Scott Jehl Alongside source and track elements. So you could pair it with like, say you've got a couple source elements for the video that are for, you know, landscape and portrait orientation videos. Now you could make a poster. Yeah, that does the same thing. That pairs with those. You can have alt text for the poster itself. So I think it's pretty exciting. I mean, it's kind of cool to have a, a potential, uh, you know, solution that I think is kind of simple, right? Like we already reusing another image that already, or sorry, another already does its thing. Um, but yeah, just taking a look at it. I left a long comment with my team's sort of like, you know, design planning around how we think it should work. ([Time 0:52:49](https://share.snipd.com/snip/ebdb04bf-a0c4-4a86-be2b-7dc4ff39a705)) - **Let Poster Images Inherit Or Override Lazy Loading** - Let poster images inherit lazy behavior from their parent video by default, but allow the poster image to override loading priority. - This supports cases like high-priority thumbnails while keeping overall lazy loading semantics. Transcript: Scott Jehl And your image is not? Then what? That's weird. So at least our planning allows for that possibility. So if you put loading lazy on the video element, then the image can just inherit that laziness for the poster. But if you specify differently on the image, then that'll override. And maybe someone would want that, like a video that the video source lazy loads, but the poster loads at a high priority immediately. Chris Coyier Yeah, just because you want it to be extra fast, even, I don't know, maybe your Netflix and the way people scroll through videos, thumbnails is really fast or something. ([Time 1:02:10](https://share.snipd.com/snip/61756f0c-014d-4c37-867e-48ac05d1d1f9))