Beyond fast with new performance features

(bright ambient music) - So you’ve heard the benefits of Core Web Vitals, but what are we working on to make meeting those thresholds easier? In the next 10 minutes, we’re gonna take a whirlwind tour of features to help you make your pages faster. I’m Jake Archibald, and this is Beyond Fast. First up is the CSS properties, content-visibility and contain-intrinsic-size. What do these do? Well, when you load a page, the browser tries to be smart about how much it paints. For example, it won’t put effort into drawing things that are way outside the viewport until you scroll towards it.

00:36 - However, the browser has to do a load of layout work to figure out what’s inside the viewport and what isn’t. This is because an element maybe at the very end of the document, but positioned at the top or some deeply nested element could be positioned outside all of its parents. These are things that CSS just lets you do. So to figure out the size and position of one element, you genuinely need to know the layout of its siblings, its parents, its parents’ parents, their siblings, their children, like basically you need to know everything. But now there’s an easy way to avoid that. Let’s start with these content areas.

01:08 - We’re gonna give them a content-visibility of auto. This means the browser can skip the layout of the children while the container is outside the viewport. But skipping that layout means the container loses its height. So we use contain-intrinsic-size to set a fallback content size for the element. This lays the containers out as if they had a single child that’s zero pixels wide and 500 pixels tall.

01:28 - Now zero pixels, that might sound weird, but because the container is block level, it stays full width. While we’re at it, we do the same with our smaller heading elements, this time giving them a fall back height of 60 pixels. And now when the page loads, it does a full layout for everything in the viewport. So that’s the top heading there and that first content area. But that’s it, it skips the rest, making things much faster.

01:52 - Then if the user scrolls down, the other areas of the page will be laid out just in time. All the layout shifting you see here is happening outside the viewports. The only thing that users might notice is an update to the scroll bar. And of course, a much faster load time. But how much faster are we talking here? Well, I tested this out on the HTML spec and it took the layout time down from 50 seconds to 400 milliseconds. And that’s an amazing saving. But remember the HTML spec is a 12-megabyte document, so this is quite an extreme case.

02:23 - But even on normal sites, you can make hundreds of milliseconds of saving with very little change. Measure it with your own content and see the difference. That’s the high level. For more details see the web.dev article that is linked in the description. But the good news is this shipped in Chrome 85. And of course that includes the other browsers that use the Chromium engine. Other browser engines are thinking about it too, in particular, there’s positive signals from Firefox. But using it today won’t break other browsers so your users can benefit from it right now. Okay, next up is the font metrics override descriptors. Now that might sound like something Captain Picard would activate to stop the Enterprise exploding, but this CSS feature tackles a longstanding frustration when it comes to text rendering. Have you ever gotten your layout looking exactly as you want it in one browser only to try it in another and find out the text is ever so slightly misaligned? Well, this is because font layout information can come from a variety of different places within the font itself.

03:21 - Some fonts use all of them, but use different numbers and sometimes browsers and operating systems disagree on which numbers to use. Thankfully, a new CSS feature tells the browser to ignore all of that in favor of the font metric override. Actually, can we just call them f-mods? Like this is supposed to be a short video. Okay, here are the f-mods. So now the texts are given font size, I can say 73% is the ascenders and 25%… Actually this is a bad example ’cause it doesn’t have any descenders. Let’s go for textgjy. Cool.

03:58 - So 25% is the descenders and finally 2% is shared between the gaps at the top and the bottom. And now this will be fully consistent in all browsers that support f-mods which is currently Chrome 87. But wait, what does this have to do with Web Vitals? Well, the quickest way to get texts on the screen is to display it using a fallback font straight away, and then swap to the web font once it’s downloaded. But different metrics between the fonts can cause a massive layout jump when the swap happens, we can fix this with f-mods. By adjusting the metrics of the fallback font, we can reduce the change in layout caused by the font swap.

04:36 - Like I said, this is in Chrome 87, see the description for more information and links to demos. We also wanna find ways to handle other differences between fallback fonts like different letter whips. But we’ll talk more about that when things are more concrete. Okay, next feature. Ever been browsing around the web reading a really interesting article, seen a link, clicked it and thought. “Yeah, okay, but I wanna go back to the article.” Well meet the back button.

05:06 - Okay, we’ve had that from the start, but it used to involve reloading the previous page from scratch. Okay, that was still pretty fast and that’s actually because I optimize my site really well and it’s a really simple site, but you can still see the problem here. This bit of the page is enhanced with JavaScript. And when we go back, you can see it having to reload and re-execute. If the page involves a lot more JavaScript, it’ll take longer.

05:32 - The layout may even shift around as elements are added to the page. But let’s try that again in the latest Chrome. As before, I followed the link, but this time Chrome automatically keeps the previous page in memory, but it’s frozen to stop it processing and monitoring in the background. This means when we navigate back, it’s ready, instantly. And that’s in Chrome 86 on Android for cross origin navigations and Chrome 87 for same origin navigations.

06:02 - This is also a gradual rollout, so not all users will get the feature at once. Also it’s worth mentioning that this feature has been in other browsers such as Firefox, Safari and even Internet Explorer for years now. It’s been difficult for us to integrate it into Chrome strict multi-process architecture. And let’s just say in this instance, we’ve been fashionably late. There are some gotchas too. Using particular web features prevents this optimization and this list differs between browsers and browser versions.

06:30 - In many cases, you can work around it by deactivating the feature just before the user navigates away using the page hide events and reactivating it when they navigate back using the page show events. Check the link in the description for all of those terms and conditions, I guess. All right, next up is portals. Portals are a new HTML element that lets you load a page and render it inside the current page. Here’s one, I’ve scaled it down a bit and given it a border. Okay, I know what you’re thinking, this is IFrames, but it’s not the same. For instance, portals aren’t interactive.

07:05 - If a user clicks this, they’re clicking the portal elements not the page inside the portal. Okay, I know what you’re thinking this is IFrames, but worse. However, portals come with their own advantages. For one, they can be activated either by clicking them or calling this method. When a portal is activated, it becomes the top level page that as usual changes the URL bar. It’s similar to a regular navigation except we had the page pre-rendered ready to go so it was really, really fast. But let’s try that again. And rather than have the portal sitting clumsily in the middle of the page, we’ll move it out of view and wait for the user to click the article link. When they do that, we’ll animate the portal, then activate it. With a little clipping and coordination, we can use this to create rather pleasant navigation transitions. But that’s not all, check this out. This is the same page as before, but I’ve added a button to share the article with an external service.

08:02 - The user clicks it and confirms they want to share it and that’s it. But what actually happened there, let’s run through that again but with code. First up, do you use a tap to share button. The article site creates a portal to the sharing service then adds it to the page and activates it. Now, example.com is in charge, the URL has changed. But the user doesn’t see this blank page because example.

com uses the portal activate event 08:30 - to get a portal to the previous page and add it to the document. To make it clear it isn’t interactive, they blur it and add their own UI over the top. Although it looks like a model on top of the article, the sharing service is in full control here. They can trust interactions with this dialogue and the user, they can confirm that from the URL bar. They know who they’re dealing with. Now, the user clicks, yes, and the sharing service captures that event, uses animations to bring the article back into focus and then activates the portal to the article and that gives it control of the tab once again. You can see the URL has changed.

09:09 - Not only can portals create navigation transitions, they can create flowing user interactions between sites. And that’s in Chrome behind the flag. Which flag is it behind? Well, we might change that between me recording this and it going on YouTube. So see the description for details and links to more information. We’re really interested in feedback on this feature. It’s fair to say we’ve been talking about portals as a new thing for a couple of years now, but we really want to get this right especially in terms of privacy.

09:40 - For instance, when one site contains an IFrame to another site, browsers are moving to a model where the embedded site won’t have access to its standard set of cookies and other storage. This prevents the two sites exchanging information about you, so it’s a privacy win. Of course Chrome will provide the same protection when it comes to portals. But there’s an extra challenge here. If that portal activates, it’s now the top level page so it no longer needs those storage restrictions. We need to figure out the best way to handle this.

10:06 - So the site can react to the change in storage and update its content and how it has access to things like login state and user preferences. Solving this problem will also let us do more with pace pre-fetching and pre-rendering across sites in a privacy preserving way. Check the description for more details on that. In fact, instead of thinking of portals as different IFrames, you could say they’re more like pre-render tags that you can display. Okay, that’s the future, but what about the present? Often the quickest and easiest way to improve the performance of your page is to ensure important content loads early.

10:38 - The preload and pre-fetch tags do this and they’re well supported enhancements. We also have the Quicklink library, which automates pre-fetching content that’s likely to be needed in the next navigation. Newegg use this, and they saw a 50% increase in conversions and page navigations that were four times faster. I mean, that’s huge. See the description for links to the library and more information on pre-fetch and preload. And that’s everything I wanted to show you today. Like I said, a bit of a whirlwind tour.

11:06 - I don’t know if I’ve mentioned the links in the description yet, but there are links in the description to further information about these topics. So if you’re interested in further information about these topics and you like clicking links and descriptions, be sure to click the links found in the description to further information about these topics. Where are these links I hear you ask? There in the description. What kind of information is in these links? Further information. What should you do with these things? Well, they’re not gonna click themselves, are they? So go on, give them a click. (bright ambient music) .