State of the Mobile Web

[00:00:00]
>> Maximiliano Firtman: Another problem, and we are still talking about problems, not solutions, another problem is how we typically underestimate the mobile space. And that's not new, we have been underestimating the mobile space for a while, I know that because I've been focusing on the mobile web since 2003, 2004, so before the iPhone.

[00:00:23]
At first, I'm not sure if you remember this, but at first, we were creating mobile sites like m.cnn.com, so we were making a separate website. Then at one point, the iPhone appeared and we say, we don't need to do anything. So then we were just doing desktop websites and then, we'll let the user zoom in and out over the website and then we realize now that's not good that's not a good experience.

[00:00:49]
So then we move into responsive design, but we didn't think about performance. And I'm not sure if you know this, but if you have three media queries, three different CSS files for, let's say, simplifying, dekstop, tablets and phones. You have three CSS files. Every device will load the three CSS files, even if the media query is false.

[00:01:12]
So every device by default is loading all the files. And we were thinking about that, so then users on slow 3G networks at the time, we're downloading CSS file for desktop and CSS file for tablets that was completely useless. So, and now we are underestimating mobile in many different way.

[00:01:33]
We can say today safely that the mobile space is iOS and Android. We might have some small sparks of some other things for some special markets, but most of the time, it's iOS and Android, which is okay. But what about browsers? Are we talking about Safari and Chrome?

[00:01:52]
Is that in house, so if I try on my on my Mac on Safari and Chrome on a small window with an simulator. Is that good enough to say that it works properly on mobile devices? So, what are the browsers that are actually having some market share? So, let's go and see some information really in action.

[00:02:14]
So, there are a couple of websites that you can use to get information about the current scope of the browser market share, but one is gs.statcounter.
>> Maximiliano Firtman: That's global stats from a start counter, where actually you can see, this is the browser market share worldwide on April 2023.

[00:02:37]
63 is Chrome, then we have Safari, Edge, Firefox, Samsung Internet browser. Have you ever tried your website on a Samsung Internet browser just see how it looks like, how it works, what's the performance? And that's desktop plus mobile. But I can go and edit this chart and select only mobile.

[00:03:00]
Even I can unclick tablets as well, so focusing only on the problem of mobile devices, okay? I can also select by region, so you can see how this is different on different regions of the world, even countries, view chart. And now we will see that we have users on Opera.

[00:03:20]
We have users on UC Browser. Have you ever tried UC Browser? And by the way, UC Browser is taking a lot of users worldwide because of some regions such as Asia, here is 3%. Also in the U.S., so UC Browser is a Chinese browser that is also available in other countries.

[00:03:41]
India, have you tried? Probably not. Yeah, of course that Chrome and Safari are important, but you still have 4% of user 3, 2, 1 on other browsers, that we don't care. But you say, well, but that's like ie. Well, if you're paying for ads, you will have then 20% of those users accessing your website on those browsers, so it's not 002% of your users.

[00:04:15]
Is it still 20%, 15% of your mobile users? So, we should get the right information, also there are other sources of information. Cloudflare has just released also a Cloudflare Radar. I don't remember the URL, but we can Google that, Cloudflare Radar. Radar.cloudflare.com, where you can see current traffic trends.

[00:04:43]
You can search for, I think that in adoption and usage, we have top browsers and user agents. So yeah, you can see it's Chrome, Safari, and Edge, but you can filter these also by region. You can say, let's say, India.
>> Maximiliano Firtman: You can see that now it's 90% Chrome, 3% Safari, 1% Firefox, and you can change that, of course, this is the traffic from Cloudflare.

[00:05:12]
Every information here is like a subset of the whole Internet, but it will give us an idea, okay? There is another thing that is important that sometimes, these charts, these stats, are not actually showing us. These little guys here, Facebook, Instagram, can also be TikTok, but it depends on the OS.

[00:05:39]
What is the problem with Facebook or Instagram? I'm not sure if you are users of those meta apps. What happens when you click on a link on those apps?
>> Speaker 2: Do they have their own dedicated browser?
>> Maximiliano Firtman: Yeah, they have their own browser. And they don't appear on those stats as a separate browser.

[00:05:56]
In fact, meta has just created a name for it, it's a Facebook mobile browser, even on Instagram. That's the name they have. They're not registered to the OS as a browser actually. But they have their own inner browser. And when you are browsing a website, or web app, on those social networks, you are using a different engine that is not the same engine as the browser on that device.

[00:06:25]
So have you ever tried your website there? The performance, the abilities, is everything working properly? So, today, around 7% of global smartphone traffic come from the Facebook or Instagram app. This is coming from a mobile report, there is an updated version as well of that report. They create a report every three months, I think.

[00:06:51]
It's mobile report from ScientiaMobile. So it's a lot, okay? That 7% is coming from social networks. And it's in the other stats that we saw before. They are actually under Safari or Chrome because those systems they don't recognize or they don't separate the real browser from inner browsers.

[00:07:13]
But the inner browser has different capabilities. And they can be slower on the same device. Also, when we are browsing the web with mobile devices, we are using cellular networks. And I know that some of you are thinking, it depends on where you live, we have 5G now, so we don't need to worry about performance anymore.

[00:07:37]
Well, let's see. First, let's talk about real data, about real users. Today, so here we have in black, this is coming from the GSM Association. This is where all the carriers on the world are actually grouped. We have in black, the actual data from December last year and in red, the idea for the future, okay?

[00:08:03]
But we're not there yet, so we will focus on the black part. In terms of 4G, 60% of connections worldwide are 4G. Only 12% are currently 5G, okay? So we still have 30, around 30 on other networks. And this refers per region, we are not going to see all the regions here.

[00:08:31]
I don't wanna bore you with this, but let's focus here on 2022. You will see that, for example, Asia Pacific, we still have 15% on 2G. I'm not sure if you have ever browsed the web with 2G, have you? No, lucky you. But it's not just 2G, we have 3G, but this is real users today, not 15 years ago, okay?

[00:08:59]
Today, that they might be customers of your web app or website. I don't know, it depends on what are you doing. But if it's a global app, a global website, you might have customers there. So CIS, that is kind of the Soviet Union, okay, in terms of the region.

[00:09:15]
It doesn't matter, but that's the region, okay? So it's a lot of ex-Soviet countries. So you also have a problem there, because you can see that almost 5G doesn't exist. So we don't have 5G, it's 4G and 3G mainly and also 2G. Latin America, I'm from Argentina. So this is Latin America, we have a lot of 4G, we don't have yet 5G.

[00:09:39]
Yeah, we still have some users on 2G. Of course, that depends on the country. Yeah, North America without Mexico. They didn't include Mexico here because, yeah, it's Canada and US basically, almost you don't have 2G. In fact in some areas, it's completely disabled at this point. And yeah, you have a lot of 5G, okay, 40%.

[00:10:02]
But it's just here, it is not the rest of the world. But even with that in mind, because maybe you're saying, well, you know what, my solution is for US customers, so I'm focusing on that, maybe that's a possibility. But when we are talking about 2G, 3G, 4G, 5G, within the generations of network connections, most of the time we think of bandwidth.

[00:10:29]
Yeah, that the bandwidth is better, but it's true. But when we are browsing the web, is the bandwidth really important? So forget about the mobile world, think about your home connection. Let's say you have 200 megabits per second, you have a connection, 200. And then you go to 400, you pay more to your Verizon or wherever plan you have, you double the speed, are you going to browse the web faster?

[00:11:02]
>> Maximiliano Firtman: I don't think so. Maybe you will see Netflix better, you will have more connections of Netflix in 4G, Netflix at home, but browsing the web is not going to be really, really faster. Because the problem is not the bandwidth, the problem is the latency. And that's the time delay between when a data packet is sent and when it's received, expressed in milliseconds.

[00:11:28]
In short words, it's the time that it takes for the data to get off your device and get back to your device. So from, in this case your, let's say your phone.to the web server and back, that's the latency, okay? If you're working with gaming, you probably know that better because latency on gaming is really important.

[00:11:51]
But you will see on browsing the web latency is also important, because latency is actually something that will be there on every packet. So every packet that you send, well, I'm browsing the web, I'm not sending data. Well, actually, when you're browsing the web, it's the browser making HTTP requests, and that's sending data.

[00:12:14]
So every HTTP request to get the response will have a latency. And that's currently the latencies, in average, on 2G to 5G. You have in there at the green area. It's a range, so min and max. On 2G, it's pretty bad. So that's why I said lucky you if you didn't have experience browsing the web with 2G.

[00:12:37]
So in this case, when you are connected in 2G, the latency can be between roughly a quarter of a second and a second and a half. So that means you request, one image and the first byte comes after one second for every HTTP request that you have, okay?

[00:13:03]
3G is better, you can see it's better. And of course, 4G and 5G are increasing or decreasing the latency, increasing the experience. So yeah, it's better to have 4G and 5G. So you can see that, yeah, we saw that there are still some users on 2G. But even if we forget about those, and even if we are lucky enough to say, you know what, my users are not even on 3G, for whatever reason.

[00:13:33]
When we get deeper in just 4G and 5G that we know is not all the users, this is how it looks like. And the last one, it's a DSL home connection that you might have. You can see that even 5G is worse than a connection that has to do with the medium, okay?

[00:13:56]
It's not the same to be wireless. Also on 5G, yesterday, I've got some information from a friend that is working at a Canadian company and he's working on that part, on connections, on 5G. So I asked him the real latency of 5G, because when you search for the latency of 5G, you typically get theoretical information.

[00:14:21]
Yeah, it can be one second, one millisecond, sorry, not second, one millisecond. Yeah, but that's if the antenna is there, okay? It's not the real world. Well, in the real world, he said that today in North America, so not in every country, in North America, today is around 50, so the average is 50 milliseconds.

[00:14:43]
So compared with DSL that you can get 10, 12, 15, it's still high. Yeah, much better than 3G, I agree, but it's still a problem. And remember, this latency goes on every request that your website is doing to the server because it's an upload, okay, and then you get the response.

[00:15:07]
So Verizon on their website, they say the latency hardly impacts smartphone user experience in advanced 5G and 4G networks. That's a statement from their website. The problem is that, first, that's not completely true. But anyway, not every country has advanced 4G and 5G. They might have 4G and 5G, but not advanced.

[00:15:29]
And we still have 30% of users on 3G or worse. So it's not like we shouldn't care about performance on mobile devices, it's still a problem today. So we still have a performance issue with the mobile web. And that's why we care about this, okay? But networks is not the only thing.

[00:15:51]
We also have CPU and GPU problems. I mean, not a problem, situations that That happens in the real world. Maybe you're thinking but my iPhone is actually pretty fast. So I have a Samsung Galaxy S20 that has a very good GPU from Qualcomm, blah, blah, blah, blah, it compares with my laptop.

[00:16:11]
But that's not the real world. We are not the real world. That's again, that's from yesterday as well, with real users, and it's the median on JavaScript boot up time, so how much time it takes to actually run JavaScript briefly. But the important part here is the comparison between desktop and mobile, okay?

[00:16:34]
And you can see that mobile is much worse. Again, probably not for the phone that you have in your pocket, but that's not our user. We are not our users, okay? So on mobile we have, first that we are typically underestimating how it looks like. We don't try and test on every browser out there.

[00:16:57]
Then we have a latency on cellular networks that sometimes we forget about that. And then we just test our mobile website, and even we test the performance of our mobile website in desktop Chrome with just a narrow window. And yeah, that's not the case because we are probably on Wi-Fi, but that has a DSL or another connection that has a different latency.

[00:17:24]
And then we have CPU and GPU difference on real devices out there. So that's why we get into this 12.5 seconds that we've failed. It's painful, okay, and we need to solve that. That's why we're still talking about web performance. It's been a while since, I mean, the community started talking about web performance, and we still need to push it further.

[00:17:56]
Because when you compare that on desktop, the same metric, you will see it's half. So on desktop, I mean, the problem is still there. We will see if six seconds is okay or not. But on desktop, without changing the websites, it's better, why? Because network is different, the latency of the network is different, and also CPU and GPU is different or is better.

[00:18:24]
>> Maximiliano Firtman: So, other places where you can see that difference. There is another metric that we will cover in a minute. It's called first contentful paint. And you can see that the median is different on desktop and mobile. So mobile is slower by default, so all the metrics by default are worse on mobile devices.

[00:18:47]
And by the way, mobile users are typically more than 50% of the use of browsing the web today. It depends on the website, but it's typically over 50%. So we should care more about that because it's more than 50% and also are the ones that need more help from us to make a better experience.

[00:19:11]
Speed index is also better on desktop, and probably you know what a speed index is, so we will get into that later. And we have a question.
>> Speaker 3: Based on HTTP/2 and having the possibility to have multiple requests without blocking each other, is it still important to think about limiting these due to latency problems?

[00:19:34]
>> Maximiliano Firtman: So the latency on HTTP/2 or 3, or even if there is a 4 tomorrow, is it still there? So the latency is not changing that. We will see that with HTTP/2, and that ability that maybe not everyone knows at this point what that means, will change how we think about some tips and tricks, but it's not changing the latency.

[00:19:54]
So over HTTP/2, even if we are sharing the same TCP connection, every time we send a packet, a TCP packet, from the browser to the server, we have the latency. So HTTP/2 is not improving or changing the latency issue. The latency is still there. It's going to improve other situations such as how many requests you can start at the same time and releasing some client and server resources, but it's not actually affecting the latency issue.