衡量移动Safari浏览器的网络性能

1,558 阅读8分钟

今年到目前为止,除了一个客户外,我所有的客户都在关注谷歌即将到来的网络指标更新。 这个逆潮流而动的客户很好,不仅仅是因为这给了我一些不同的关注点--他们对自己的网站在iOS上的表现更感兴趣。这对我来说特别有趣的是,iOS版Safari浏览器与Chrome浏览器是完全不同的球赛,而且不是很多人倾向于关注的东西。因此,我将与你分享一些提示,如果你需要做同样的事情,你应该做同样的事情,让它变得更容易。

为什么iOS会被忽视

谷歌对科技行业有着相当严格的控制:它制造了迄今为止最流行的浏览器,拥有最好的开发工具,以及最流行的搜索引擎,这意味着网络开发者花大部分时间在Chrome浏览器上,他们的大部分访问者都在Chrome浏览器上,他们的很多搜索流量将来自谷歌。一切都非常以谷歌为中心。

当然,新的Vitals公告更加剧了这一点,根据该公告,来自_Chrome_用户体验报告的数据将被用来帮助和影响排名。

简而言之,很容易看出为什么Safari被冷落了。

为什么这是个问题

当你不考虑Safari浏览器的时候,你就放弃了你所有的iOS流量。所有的流量。iOS上的每一个浏览器都只是Safari浏览器的一个包装。iOS版的Chrome?它是带有你的Chrome书签的Safari。每一个iOS的流量都是Safari的流量。

简而言之,很难理解为什么Safari会被冷落在一边。

这不是谷歌的错,而且我一直希望苹果能让其他浏览器进入他们的平台,但这似乎不可能很快发生。因此,我们只能使用Safari浏览器。我们可能还没有测试。

为什么这不是一个巨大的问题

值得注意的是,总的来说,同样的页面在iOS的Safari浏览器中的表现要比在安卓的Chrome浏览器中的表现好--苹果手机通常比安卓的同类产品要强大得多。此外,在偶然的情况下,iOS的使用我们通常认为拥有更好基础设施的地区密切相关。这意味着iOS设备的速度往往更快,并且在 "更快的地区 "被发现。

同样的页面,同样的连接速度,同样的地区,同样的发布年份,不同的设备。

但是,我不能只是模仿吗?

不能。

你将需要...

无论好坏,我都是一个iPhone和Mac用户,所以我在门外就有了很好的设置。如果你没有iPhone,好吧,你会努力去测试iPhone。但对Mac的额外需求恐怕会成为许多人进入市场的障碍。

但是!不要害怕!这并不代表着我们就会被淘汰。这并不是非Mac用户的终点。继续阅读。

用WebPageTest进行测试

到目前为止,WebPageTest很容易,毫无疑问,是网络性能方面最重要的一个工具。 没有它,我的工作就无法进行。我不能夸大它的重要性。它是至关重要的。

因此,可以想象我是多么高兴地报告说,它有一流的、真正的iOS设备支持!

真正的iOS设备--不真实的!

这将为你提供一个非常详细的瀑布--还有很多--你可以一次又一次地回去参考。

然而,有两个关键的注意事项。

  1. 这些设备都在美国,如果你的典型客户是在巴尔干地区,那就没有帮助。
  2. 数据是静态的,这不一定是一个缺点,直到它是--DevTools使我们能够更快速和互动地工作,在我们做出改变和调整时做出反应。

不过,对于任何想在iOS上开始剖析网络性能的人来说,这都是一个了不起的起点。事实上,这也是WebPageTest在你现在正在阅读的这篇文章之前一个月才改进和撰写的内容

在Safari的DevTools中测试

除了用WebPageTest获取良好的基准数据和更多的永久性数据之外,我们真正想做的是与网站进行互动,并略微实时地检查网站。值得庆幸的是,如果你有一台Mac和一台iPhone,这将是非常简单的事情。

将你的iPhone设置为开发设备

**注意:**这个步骤和它的子步骤是可选的,但强烈建议。

将您的iPhone插入您的Mac并启动Xcode。一旦它被打开,进入_Window_"_Devices and Simulators_并在出现的窗口中寻找您的设备。

确保任何与运行iPhone作为开发设备有关的选项或警报被启用。说实话,在这个视图中,除了解锁我的手机和也许重启一两次之外,我从来没有真正需要做更多的事情。只要我看到这么多,我就能保证下一步的工作......

网络链接调节器

说实话,我甚至不能相信我会告诉你这个......这太酷了。现在,在iOS的_设置_应用程序中,你应该找到一个新的_开发者_选项。

在那里,你应该找到一个叫_网络链接调节器_的工具。这为我们提供了非常准确的网络节流,通过一些方便的预设,或者你可以配置你自己的。这意味着,即使你连接到办公室的wifi,你仍然可以模拟较慢的(非常现实的)连接速度。

启用网络检查器

接下来,在iOS上的Safari设置中,前往 "高级"并启用_Web Inspector_。就这样了!你就可以开始了。

这将允许你的桌面版Safari检查你的iPhone的Safari实例的当前标签。

从你的Mac检查你的手机

现在打开Safari浏览器。我知道,你已经有一段时间没有打开它了,所以点击⌘⎵并输入_Safari_。前往_开发_,在下拉菜单中寻找你的设备。

...就这样了。这真的是它。你现在正从Safari的桌面DevTools检查你的手机。

只要你的手机保持解锁状态,并且相关的网页处于激活状态,你就可以像在桌面上一样检查iOS设备。很好!

当然,这篇文章的重点是性能分析,所以让我们移到_网络_标签。如果你已经习惯了Chrome的_网络_标签,那么,我很抱歉。

遗憾的是,在文章及其截图中,我了解到已经没有办法在Safari中禁用ServiceWorkers了。 这意味着截图中的数据都不是特别有趣,但幸好我们不是在这里对我的网站进行分析。

下面是我的iPhone在节流连接的情况下是如何处理我的网站的。 在Chrome和Safari的工作方式上有一些真正令人着迷的差异,即使在这么小的范围内也能看到。这真的有助于将测试每个平台本身的重要性带回家,并解释了为什么你不能简单地在Chrome的DevTools中模拟iPhone。

但是!话虽如此。Chrome的DevTools比Safari的要好得多,所以我们不妨利用这个优势,对吗?

从Safari的_网络_面板中导出HAR(Http ARchive)文件,并将其保存在你的桌面上,直到你在合适的地方买了一台新机器。接下来,打开Chrome浏览器和它自己的_网络_开发工具面板。 在这里导入HAR文件。

在Chrome的高级DevTools中查看Safari的网络数据。

这很关键。Safari捕获的数据比Chrome少,这是个问题。仅仅在Chrome的DevTools中打开这个文件并不能使数据本身变得更好,但它确实让我们能够更好地审视它。基本上,这只是在Safari浏览器提供的数据上的一个更好的工作流程。

如果你想知道更多关于如何最好地使用DevTools进行性能测试,我很快就会和Smashing杂志一起举办一个研讨会,这将使你成为DevTools专家。你仍然可以抢到票

为什么要这么做?

由于iOS的速度普遍较快,而Vitals则完全以Chrome为中心,而且大多数新兴经济体都以Android为主导,因此在iOS上测试性能似乎是多余的。事实上,这是一个相对安全的假设,如果你在Moto G4上速度快,你在iPhone上也会快得惊人。但是,考虑到iOS的普遍性,意识到目前可能是一个完全的盲点是很明智的。

虽然它不太可能成为你的默认程序,但知道如何做是很重要的。现在你知道了。

还在为生命体征担忧吗?请给我写信。离5月份的更新还有一段时间。