阅读 1132

前端性能优化指南[3]--为什么要关注 Web 性能?

说到 Web 页面的性能,很多人都要拿 Native 的页面来对比了,确实原生页面的性能比 Web 页面的性能要好很多,但是不能快速迭代也是原生应用的一个痛点。两方都在寻求平衡点,客户端同学一直在寻找合理的热更新机制,Web 前端同学一直在寻找让页面性能体验接近原生应用的方案。

同时这几年还出现了 React Native、Weex 这些流行的跨端技术,除了使用一套代码能同时运行在三端(Android、iOS、 PC)的好处之外,还能拥有像 Web 页面快速迭代的能力和接近原生应用的性能体验,但是这类技术在对 Android/iOS 的 Native View 的封装过程中,存在很多难以逾越的障碍,例如双端一致性问题、难以实现复杂样式问题等。

再后来,又出现了当前很火的 Flutter 跨平台技术,解决了  React Native 和 Weex 难以解决的多端一致性问题,渲染性能优于 Web 应用,但 Flutter 上层采用 Dart 语言,没有利用到前端最强大的 JavaScript 生态,社区还不成熟。

对于前端开发者来说,虽然是在这个移动端主导的时代,但很多公司 Web 页面的开发还是占据主要部分。当然,不管是使用哪种渲染引擎,渲染性能和体验是有差异,但加载性能使用的方案大体相同。

既然还是有很多的 Web 页面需要开发,那 Web 页面的性能也是我们需要面对的问题。但是话说回来,为什么要优化性能呢?做这个事情有什么价值呢?

🏖直观感觉 & 用户体验

我们先来看一组 Bad Case 和 Good Case,从左到右直观感觉是越来越好的。

  • 第 1 张, 基本不可访问
  • 第 2 张,白屏时间较长,还没有加载中的提示,性能不好体验也不好
  • 第 3 张,性能不好,但通过增加有趣的动画填补白屏时间提升了感知性能,体验还可以
  • 第 4 张,我们完全看不到白屏和加载中的状态, 性能体验棒棒的

等待页面呈现的过程容易让用户焦躁,好的情况下会有短暂的加载过程,糟糕的情况下网站完全不可访问,我们从直观感受上就能知道,我们自己作为用户,也经常会因为页面糟糕的性能放弃下一步操作,即使用户愿意等待,也给用户带来了不好的产品使用体验。

单纯从站在服务好用户的角度,我们需要去重视我们的产品给用户带来的性能体验,让我们开发的页面不仅可用、易用,还要让用户爱用。

📖 数据支撑 & 业务价值

作为一家盈利性公司,特别是电商网站,除了站在服务好用户的角度,网站的性能体验对于业务价值的影响也值得探索。

在 WPO stats 这个网站中有很多通过优化性能带来业务价值的案例,我们来挑选几个看看这些案例使用了哪些优化方案,又带来了怎样的业务价值。

案例一

Furnspace 是个在线家具和家居装饰配件售卖网站,网站中有大量高质量的图片导致网页加载速度很慢。

为了解决图像加载而又不牺牲图像质量的问题,通过使用图片引擎 ImageEngine 识别用户的屏幕、视区尺寸、屏幕分辨率、操作系统和图像文件类型等信息实时调整、转换和压缩图像,给用户传输合适尺寸和质量的图像,从而加快图像的显示速度。

最终,Furnspace 减少了 86% 的图像加载,从而减少了 65% 的加载时间。改进后的用户体验帮助 Furnspace 的线上购买转化率翻了一倍,跳出率降低了 20%,移动收入增加了 7%,SEO 也得到了显著改善。

案例二

法国优惠券网站 radins.com,因为在页面中添加大量第三方JavaScript, 平均每个页面需要发出 600 个请求,大小在 2 到 6MB 之间,需要 20 到 45 秒的加载时间。

他们采取了一系列优化措施,包括:

  • 将无用资源移除、将内联 JS 和 CSS 移除;
  • 缩小 JavaScript;
  • 图像压缩和大小调整;
  • 将首屏 CSS 内联;
  • 非首屏图像延迟加载;
  • 去除 CSS 背景图像;
  • 字体使用优化,使其符合浏览器支持的正确格式;
  • 使用 Gzip/Deflate 压缩;
  • 域名分割


为了实现更好的移动端性能,还使用了谷歌推出的 AMP 技术。最终,Radins.com 将 Speed Index 提高了 51%,转化率提高了 12%。

这些案例用具实的数据证明了 Web 性能优化对用户体验和业务指标的影响。

所以无论是站在服务好用户的角度还是站在公司利益最大化的角度,我们都应该关注和重视页面的性能。

👑 基础设施 & 体验分层

性能体验好不好需要从多个方面来评判,仅拿所有用户的平均性能值来度量是不合适的,我们可以分为这几个维度来衡量:

  • 应用程序(淘宝、京东、拼多多)
  • 客户端渲染引擎( Webview、Weex/React Native、Flutter)
  • 终端设备性能(低端机、中端机、高端机)
  • 通信网络(2G、3G、4G、5G)
  • 通信协议(HTTP/1、HTTP/2、HTTP/3)


对于同一个网站,用户使用的是移动手机还是 PC 浏览器访问,使用低端机、中端机还是高端机,用户访问时的网络状态是 2G、3G、4G 还是 5G,网站使用的通信协议是 HTTP/1、HTTP/2 还是 HTTP/3,性能体验也会有很大不同。

随着终端设备、通信网络、通信协议这些基础设施的发展,拥有这些高端配置的用户访问页面的性能体验会好很多。如果你手里是一台 iPhone 11 pro 或者华为 P40 pro,你应该很少会感觉到页面慢的问题。

所以当我们关注页面的性能时,也需要考虑这些基础设施,对用户体验进行分层。在电商人口红利快要见顶的当下,我们需要挖掘的潜力用户正是那些用着中低端机、处在信号不佳的偏远地区、基础设施配置较差的人群。你也许会发现,拼多多对于网页的性能优化做的比较好,因为它的首要目标群体正是这样的用户。

👓 立足当下 & 展望未来

当下(现在是 2020 年),全世界只有少部分人在使用高端机型,大部分人手里还是中低端机,5G 手机也才刚刚开始走入人们的视野,也只有 Google 使用了 HTTP/3,而且还是谷歌版本的 HTTP/3(QUIC),与官方的 QUIC 存在着较大的差异。

所以,在大部分人还没有拥有这些高端的基础设施之前,在网页渲染引擎还在热火朝天的发展中时,优化 Web 页面的性能还是需要面对的事情,至少在很多人的面试过程中还需要面对 🤣🤣。

不过我们可以畅想下未来,当 5G、HTTP/3 全面普及的时候,当渲染引擎可以如丝般顺滑的绘制页面的时候。

未来还有太多的可能性,比如现在人工智能的发展,也许有一天,人工智能可以帮我们解决页面性能的问题,而不需要我们想方设法的去提升页面性能。

📝 小结

好啦,今天偷个懒,用标题来总结下文章的内容吧~

  • 直观感觉 & 用户体验
  • 数据支撑 & 业务价值
  • 基础设施 & 体验分层
  • 立足当下 & 展望未来

💫 思考

三连问:你关注过你开发的页面的性能吗?有想过为什么要优化它吗?如果你老板问你为什么要做性能优化,你是说你的直观感觉还是用数据说话呢?


😇 系列篇