Written by Harry Roberts on CSS Wizardry.
Table of Contents
- Why iOS is being overlooked
- Why this is a problem
- Why this is not a big problem
But can I not just imitate?
- You will need…
- Test with WebPageTest
- Test in Safaris DevTools
- Set up your iPhone as a development device
- Network Link Conditioner
- Enable Web Inspector
- Examine your phone from your Mac
- Set up your iPhone as a development device
- Why worry?
So far this year, all but one of my clients have been concerned about Google’s upcoming Web Vitals update. The customer who opposes the trend is fantastic, not least because it has given me something a little different to focus on – they are more interested in how their site performs on iOS. What makes this particularly fun for me is that iOS Safari is a completely different ball game than Chrome, and not something many people tend to focus on. So I want to share with you a handful of tips to make it a little easier if you should need to do the same – and you should do the same.
Why iOS is being overlooked
Google has a pretty tight grip on the technology industry: it’s by far the most popular browser with the best DevTools and the most popular search engine, which means web developers spend most of their time in Chrome, most of their visitors are in Chrome, and much of their search traffic comes from Google. Everything is very Google-centered.
This is of course exacerbated by the new Vitals announcement, whereby data from Chrome The user experience report will be used to help and influence rankings.
In short, it’s easy to see why Safari is being left out in the cold.
Why this is a problem
The moment you do not consider Safari, you turn your back on all your iOS traffic. All. Every browser available on iOS is simply a wrap around Safari. Chrome for iOS? This is Safari with your Chrome bookmarks. Every bit of iOS traffic is Safari traffic.
In short, it’s hard to see why Safari is being left out in the cold.
This is not Google’s fault, and I have long wished that Apple would let other browsers on their platform, but it does not look like that will happen in the near future. So we are only stuck with Safari. We probably will not test that.
Why this is not a big problem
It’s worth noting that the same page will, by and large, work better in iOS Safari than it would on Android Chrome – iPhones are generally far more powerful than their Android counterparts. Further, and coincidentally, iOS usage is strongly correlated with regions that we generally find to have better infrastructure. This means that iOS devices tend to be faster and are found in ‘faster regions’.
But can I not just imitate?
You will need…
For better or worse, I’m an iPhone and Mac user, so I’m pretty well set up outside the gate. If you do not have an iPhone, yes, you will struggle to test an iPhone. But the extra need for a Mac will be a barrier to access for many, I’m afraid.
But! Fear not! That’s not the end of the line for non-Mac users. Read on.
Test with WebPageTest
WebPageTest is easily, without a shadow of a doubt, the most important tool when it comes to web performance. I could not do my job without it. I can not exaggerate its significance. It’s vital.
So imagine how happy I am to report that it has first-class, genuine iOS device support!
This will give you an amazingly detailed waterfall – among many more – that you can go back and refer to again and again.
However, there are two important reservations:
- The units are in the United States which does not help if your typical customer is based in for example Balkan.
- The data is static which is not necessarily a disadvantage before it is – DevTools allows us to work much faster and more interactively and respond to changes and tweaks as we make them.
Still, this is a great starting point for anyone who wants to start profiling web performance on iOS. In fact, this is something that WebPageTest has improved and written about just a month before this article you are reading right now.
What we really want to do, in addition to capturing good benchmark and more permanent data with WebPageTest, is to interact with and inspect a site a little more real-time. Fortunately, if you have a Mac and an iPhone, this is remarkably straightforward!
Set up your iPhone as a development device
NB This step and its sub-steps are optional but highly recommended.
Connect your iPhone to your Mac and turn on Xcode. Once opened, go to
Window » Devices and simulators and look for your device in the resulting window.
Make sure any option or warning related to running your iPhone as a development device is enabled. True, I’ve never had to do more in this view than unlock my phone and maybe restart it once or twice. As long as I see so much, I can guarantee that the next step will work …
Network Link Conditioner
I honestly can not believe I’m telling you this … it’s so cool. Now, in iOS ‘ Settings app, you should find a new one Developer possibility.
In there you should find a tool called Network Link Conditioner. This gives us very precise network control via a number of convenient presets, or you can configure your own. This means that even if you are connected to the office wifi, you can still simulate slower (and very realistic) connection speeds.
Enable Web Inspector
Then go to Safari Settings on iOS Advanced and activate Web Inspector. That is it! You’re good to go.
This allows your desktop version of Safari to inspect the current tab in your iPhone’s Safari instance.
Examine your phone from your Mac
Open Safari now. I know you have not opened it in a while, so strike
⌘⎵ and type Safari. Go to Develop and keep an eye on your device in the drop-down menu.
… And that’s it. It really is. You are now inspecting your phone from Safari’s desktop DevTools:
As long as your phone remains unlocked and with that web page active, you can inspect the iOS device as on the desktop. Nice!
Of course, the whole point of this article is performance profiling, so let’s move on to Network fanen. If you are used to Chrome Network loss so, yes, I’m sorry.
Here’s how my actual iPhone on a throttle connection handles my website. There are some really fascinating differences between how Chrome and Safari work, visible even on a scale as small as this one. It really helps emphasize the importance of testing each platform individually, and explains why you can not just emulate an iPhone in Chrome’s DevTools.
But! That said. Chrome’s DevTools are far, far better than Safaris, so we might as well use that to our advantage, right?
Export the HAR (Http ARchive) file from Safari’s Network panel and save it
on your desk where it stays until you buy a new machine
a sensible place. Then open Chrome and its own Network DevTools panel. Import the HAR file here.
This is the key: Safari captures less data than Chrome, which is a problem. Just opening this file in Chrome’s DevTools does not make the data itself any better, but it does allow us to interrogate it much better. It’s basically just a much nicer workflow to the data provided by Safari.
If you want to know more about how to best use DevTools for performance testing, I will soon be holding a workshop with Smashing Magazine and it will make you DevTools experts. You can still get tickets.
Since iOS is generally faster and Vitals is completely Chrome-centric, and most growth economies are Android-led, it may seem superfluous to test performance on iOS at all. In fact, it is a relatively safe assumption that if you are quick on e.g. a Moto G4, then you’re lightning fast on an iPhone. But still, given the widespread use of iOS, it is wise to be aware of what may currently be a total blind spot.
While it is unlikely to become your default process, it is important to know how to do it. And now you do.
Are you still worried about Vitals? Throw me a line! There is still some time for the May update.
☕️ did this help? Buy me a cup of coffee!