新西兰trademe网站是什么平台?网页性能怎么样?

大部分说英语的国家都有亚马逊和eBay。在新西兰,我们有TradeMe-一个网上拍卖和分类广告网站,新西兰人可以在其中买卖普通物品,汽车和物业。如果可以相信这些数字,那么几乎每个新西兰人都有一个TradeMe帐户。我认为,TradeMe是现代新西兰文化的重要组成部分,这并不为过。

早在2016年,TradeMe宣布它正在开发一个新的“智能手机优化”响应式网站,该网站最终还将取代台式机网站。然后在2018年中旬,他们宣布将新的响应式网站推出给实际用户。作为一个好奇的开发人员,我想尝试一下新的TradeMe网站性能。在使用手机(诺基亚7 Plus)上的新网站几周后,我对盯着加载微调器花了多少时间以及UI交互的呆滞感到沮丧。所以我又回到了旧的网站。

TradeMe

这让我感到困扰,因为我知道其他TradeMe体验很快。为什么这个新网站这么慢?我想深入研究,因此我借此机会进行了详细的性能评估。

定义测试参数

当我评估网站的性能时,我想做的第一件事就是设定基准-用户对这个网站有什么期望?在大多数情况下,使用竞争网站作为基准是有意义的。当我们提高新闻网站的效果时,我们以《卫报》和《金融时报》为基准,因为它们是业内最快的两个网站。但是,使用eBay或Amazon作为TradeMe的基准是不公平的,因为它们都是拥有数十万开发人员的数十亿美元公司。相反,我使用的是旧版本(但速度要快得多)的TradeMe Touch网站作为基准。

我下一步要做的是找到一些代表用户体验的性能指标。鉴于TradeMe主要由买家(而不是卖家)使用,因此我专注于视觉完整性(何时可以看到要购买的东西?)和交互性(何时可以滚动并出价)。这两件事都可以通过WebPageTest轻松衡量:

  • 我通过使用hero元素时间(当前隐藏在heroElementTimes标志后面)来查找加载主图像的点,从而测量视觉完整性。
  • 我使用WebPageTest的“交互时间”度量标准来测量交互性,该度量标准被计算为主线程5秒钟未被阻塞的时间点。

最终参数是测试配置。我想在移动数据连接上模拟中端智能手机的性能,因此对于所有这些测试,我都使用以下WebPageTest配置:

  • 测试地点:澳大利亚悉尼-EC2
  • 浏览器: Chrome
  • 连接: 3G(1.6 Mbps / 768 Kbps 300ms RTT)
  • 模拟移动浏览器: iPhone 6/7/8
  • CPU节流: 2.6(使用threshold_cpu标志指定)

我通过SpeedCurve运行了所有这些测试,该引擎在后台使用WebPageTest。我这样做是因为SpeedCurve简化了运行多个测试以及比较不同页面版本之间的数据的过程。它还具有一些漂亮的图表和视图,可以更轻松地解释数据。

基准

首先是旧的TradeMe Touch网站。在下面的屏幕截图中,您可以看到突出显示了两个指标:“第一个交互式”和“最大图像渲染”。该页面在7.2秒时被认为是交互式的,并且主图像在14.9秒时被渲染。交互式时间对于中档移动设备来说还不错,但是大多数用户不会为等待主要的内容等待近15秒钟而已。我知道我说过,我不会将TradeMe与资源更丰富的竞争对手进行比较,而只是作为参考:eBay上的类似页面在5.3秒时呈现了主要图像。

新西兰trademe

现在,让我们看看新网站的性能如何:互动时间为11.6秒,主图像的渲染时间为30.4秒。难怪我对使用这个新网站感到沮丧!从好的方面来说,我们可以从这次回顾中学到很多好的性能课程。因此,让我们进一步深入。

trademe新西兰

找出性能瓶颈

主线程活动

引起我注意的第一件事是这2秒的片段,其中主线程忙于评估JauaScript。在这2秒钟内,浏览器没有执行任何其他操作。没有布局,没有绘画,甚至没有任何网络请求。

trademe 开店当我打开网络视图时,很明显是由什么引起的:浏览器正在评估刚刚下载的716KB JauaScript。此数字是通过网络发送的字节,并不代表此JauaScript的真实大小。一旦解压缩,这些JauaScript文件的大小将超过2.7MB。(提示:在Firefox DevTools的“网络”选项卡中,您可以选择同时显示“已传输”和“大小”列,以便既可以看到网络上的字节,也可以看到原始的未压缩资源大小)。

trademe开店

这2秒只是冰山一角。在页面完成加载时,已经下载了2.2MB以上的JauaScript。这将扩展到浏览器必须解析,编译和执行的超过5.1MB的未压缩代码。根据Chrome DevTools中的Coverage工具,即使在页面加载期间也从未执行过3MB的代码。

延迟的主要图片请求

第二件引起我注意的事情是,对主映像的网络请求甚至要在30秒标记后才开始。在195个请求中,它是第107个请求。在主映像之前会下载其他17个大映像,这会很快用尽此模拟移动连接的有限带宽。

一些性能实验

查看瀑布图和剖析JauaScript包很有趣,但是我们真正想从性能评估中得到的是一系列可行的任务,并对每个任务将如何影响网站的性能进行粗略估计。我获得此列表的最喜欢的方法之一是通过手动进行一些优化并衡量其影响来运行一些A / B性能测试。

优先加载主映像

明显的瓶颈之一是到目前为止,通过页面加载下载的主映像。我们可以通过优先处理主映像来改善用户体验。我分两步模拟了此优化:

  1. 准备主映像的缓存。尽管在现实世界中这不可能严格实现,但效果应类似于用于<link rel=preload>尽快请求主图像。
  2. 阻止所有其他图像请求,以使主图像不会争用网络带宽。

结果如下:

公制 原版的 优化 区别
主图像渲染 30.4秒 21秒 9.4秒(30%)

查看原始页面和优化页面的胶片确实显示出速度快得多。

推迟加载第三方资产

尽管大部分阻止资产属于TradeMe,但仍有大量第三方内容正在下载-约350KB,其中大多数是JauaScript。将第三方内容推迟到页面加载的后期,可以通过优先安排第一方内容来改善用户体验。我通过阻止来自所有第三方域的请求来模拟此优化。结果如下:

公制 原版的 优化 区别
第一次互动 11.6秒 9.5秒 2.1秒(18%)

呈现服务器上的页面内容

不幸的是,新的TradeMe网站既不能在未启用JauaScript的情况下工作,也不能在离线状态下工作,即使利用了缓存服务工作者。原因之一是页面内容是由JauaScript提取和呈现的,而不是包含在初始文档响应中。在服务器上呈现一些基本内容,不仅使页面可以脱机使用或不使用JauaScript,还具有显着的性能优势,因为浏览器可以在完成下载其他页面资源之前就开始呈现内容。

我通过创建具有预渲染内容的静态版本的页面来模拟此优化。我还将<script>标签移动到主要内容下方,以防止它们阻止呈现。由于此版本在不同的环境中运行,因此我调整了数字以解决后端时间的差异。结果如下:

公制 原版的 优化 区别
标题渲染 21.2秒 5.7秒 15.5秒(73%)
主图像渲染 30.4秒 11.7秒 18.7秒(61%)

像主要的图像优化测试一样,查看原始页面的胶片和优化页面的胶片显示了该优化的影响。请注意,由于我更改了<script>标签的位置,因此First Interactive在该测试中不具有可比性。

庆祝的理由

在效果评估中,过于专注于网站出错的原因太容易了。我一直喜欢尝试找出网站做对的事情。

缓存可以改善重复访问的体验

在首页加载时,传输了超过4.2MB的数据。在随后的页面加载中,由于使用了缓存服务工作程序和明智的缓存头,因此该数字更像是570KB。

代码拆分可实现

尽管捆绑包很大,但看起来好像已经实现了代码拆分。建议进行代码拆分,以确保您的用户仅下载他们需要的代码。代码拆分可能很困难,但是已经在TradeMe上进行设置的事实应该减少了优化JauaScript交付所需的工作量。

推荐建议

在代表性设备和网络上进行测试

建立良好的用户体验需要大量的同理心,而获得同情心的最简单方法之一就是以与用户相同的方式使用产品。拿起中端的Android手机或Intel Celeron笔记本电脑,看看您的产品在这些设备上的感觉如何。与用户使用相同设备的好处在于它们很便宜-通常比许多开发人员使用的MacBook Pro便宜10到20倍。

渲染服务器上的核心内容

我一直倡导具有良好的核心经验。如果您不熟悉核心体验的概念,请按以下方式定义。核心经验应由以下五点组成,按重要性顺序排列:

  1. 页面内容。
  2. 使页面可访问所需的标记。
  3. 最小的样式使内容易于阅读-网格,版式等
  4. 最小化页面品牌的样式-徽标,颜色。
  5. 在适当的地方增强页面的方法。

核心经验应该只是这些东西。其他一切都是增强。

如果您了解渐进增强功能,这听起来可能很熟悉,因为拥有核心经验是进行渐进增强功能的前提。良好的核心体验不仅使用户可以在几乎任何设备或浏览器上查看您的产品,还可以极大地提高页面性能。TradeMe就是一个很好的例子,我的实验显示呈现核心内容的时间减少了15-19秒。

预载重要资源

即使浏览器在加载页面资源方面变得越来越聪明和更好,但它们仍缺乏了解哪些资源对用户是最重要的。幸运的是,开发人员可以为浏览器提供一些提示,以<link rel="preload">用于启动某些资源的加载。这是加快主图像和动态内容加载的好方法。除预加载资源外,即将发布的Priority Hints API还使开发人员能够importance在资源上设置标志。

减少运送的JauaScript数量

JauaScript是2018年的热门话题。到目前为止,它是导致网络用户体验下降的最大原因-如果您还没有读过Addy Ospani的2018年JauaScript书籍,那么我建议您这样做。

在过去的几年中,Web开发人员生态系统已经突飞猛进。借助npm和Webpack之类的工具,创建交互式用户体验并将其捆绑以在Web上交付比以往任何时候都更加容易。不幸的缺点是,创建性能不佳的大型JauaScript包比以往任何时候都容易。目前,JauaScript问题还没有简单的答案。开发人员今天要做的最好的事情就是保持勤奋,并在开发的便利性和用户体验之间取得平衡。

使用绩效预算

在您甚至开始进行项目之前,请为自己设置关键用户体验指标的预算,例如First Interactive,Hero Element Render Time和JauaScript包大小。密切注意您的预算,并始终解决可能超出预算的问题。性能预算已成为性能间视工具的事实上的功能。我们在英国广播公司使用SpeedCurve的绩效预算来设定绩效目标,并在预算超出预算时收到警报。

结论

我希望这对如何进行绩效评估有帮助。以后我会做更多的事情,因此,如果您认为我应该重点关注这一部分审查,或者您希望我审查的特定网站,请告诉我!

原创文章,作者:老男孩,如若转载,请注明出处:http://www.haomaner.com/1657.html

发表评论

电子邮件地址不会被公开。 必填项已用*标注