Browser Support for Performance Metrics

[00:00:00]
>> Todd Gardner: Let's talk about browser support. All right, this is interesting because not all browsers support all of these, and you can't necessarily have the full picture if you only measure one thing. So before I get into it, we're not actually talking about browsers, we're gonna talk about browser engines.

[00:00:17]
Because these things are all implemented in browser engines not the browsers themselves. So there's three browser engines that we really care about here. We care about Blink, WebKit and Gecko. Blink, obviously the biggest one. So that's Chrome, that's Edge, that's Opera, that's Samsung, that's Brave, that's Arc, that's what a lot of people use.

[00:00:37]
WebKit is Safari, Mobile Safari, and strangely Chrome on iOS is also WebKit. At least for now, this might be changing here soon, Apple locked down the ability for which browser engines can be installed on iOS to only be theirs. Because they didn't want other people to go and screw up the browsing experience.

[00:00:59]
So if you installed Firefox on iOS or Chrome on iOS or any other browser on iOS, it was really just a wrapper around Safari, it wasn't its own thing. And so for this purposes, you have to think of Chrome if it's operating on iOS isn't really Chrome, it's WebKit.

[00:01:19]
And then Firefox is based on one called Gecko, okay? Here is the breakdown of how this works. So across the top we have Blink, WebKit, and Gecko. On the left are all of the metrics that we talked about and then which things are supported. The legacy metrics, the ones that have been around forever, obviously we're all good.

[00:01:41]
Everything is fine up here at the top. Where this breaks down is right here on the Core Web Vitals, not just these Core Web Vitals, here, here and here, LCP, CLS, and INP. And the problem here is that WebKit does not support any of them. So Firefox supports LCP, but not the other ones.

[00:02:05]
And so if you're measuring the Core Web Vitals, which you absolutely should for your SEO. Because Google is the thing and you need to make Google like you, you're actually not measuring Safari at all. It's not reflective of your Safari users. No zero Safari users have sent you a Core Web Vital metric, you've never gotten one.

[00:02:27]
So your Core Web Vitals could be great, but the user experience on Safari could still be crap. You don't know, because you can't measure those specifically. Now, what you can measure, you can measure TTFB, you can measure FCP, so those are great. You can still know that those things are fast across browsers, and you can build custom metrics for any one of them.

[00:02:51]
They both support the performance API, mark, and measure. They just don't support the logic built into the Chrome Web vitals. They're not technically web standards, they're just something that Google has done. So you just need to be aware that that data is not reflecting Safari. So if we look at market share of these browsers, the big problem here, I mean Chrome is clearly big and Edge and Samsung and Opera are all blink as well, so like a big portion of the internet is already covered by this.

[00:03:24]
The problem is Safari. The problem is that a lot of people use Safari. Safari is built into a lot of devices, a lot of high-end devices. And if you're building an e-commerce store, they tend to be, frankly, higher value users. They tend to be the people who spend more money, tend to have iPhones, tend to have iOS devices, right?

[00:03:47]
Apple devices are more expensive to begin with. It's a weird signal that this is somebody who's already willing to spend a lot of money on technology. They might be willing to spend more money on other things too. So generally, we care a lot about those Safari users, but we don't always get the best metrics for them.

[00:04:07]
What do we do about this? Frankly, I don't know. There's not a good solution for this. We capture the Core Web Vitals. There's a lot of good reasons to do it. You should totally do those things, but you also just need to periodically test things out on Safari.

[00:04:23]
We don't have good automated metrics to do this. You just need to make sure your site doesn't suck on an iPhone. That's a few generations old to make sure that normal people can use your site. There's not a good way to programmatically get all of that data other than just testing it yourself.

[00:04:42]
So that is the end of our measuring section. What we're gonna get into next is we're going to talk about testing and tools. We're going to talk about the common tools of web performance and how we go about getting this data and interpreting it, specifically some statistics about it.

[00:04:57]
Then we're gonna talk about setting a proper corporate performance goals for your site. And then we're gonna spend a lot of time at the end of the day talking about metric by metric. Here are tactics you can use to improve TTFB. Here are tactics you can use to fix CLS.

[00:05:13]
And I mean this, for the people who are watching the video on Frontendmasters.com. I mean this as an index for you. You should probably go through it once to know what they are, but once you know what metric you need to improve for your website, go to that section and look at those tactics.

[00:05:32]
Because you don't necessarily need to do everything for your website. You shouldn't do everything, it's a waste of time. Focus on the metrics that your site sucks at and do those tactics to make your site better.