百度页面性能监控和优化实践_SEO教程自学网

 xiaolong   2020-11-01 11:18   27 人阅读  0 条评论
seo自学
百度页面性能监控和优化实践_SEO教程自学网 SEO优化教程 第1张
作者 | 冉叶兰
嘉宾 | 尹立
在移动互联网时代,由于设备资源受限、网络不稳等因素,Web 性能优化显得尤为重要;而从用户感知的首屏指标建立到关键耗时路径拆解和优化,都有类似的经验可以借鉴。

本文采访了百度 App 内核和搜索优化技术负责人尹立,他为我们介绍了百度页面性能监控和优化实践,百度针对 H5 页面的首屏性能所采取的措施,以及在搭建性能监控体系时遇到的难题。

在即将于 7 月 24 日 -25 日举行的 GMTC 全球大前端技术大会 (北京站) 上,尹立将作为专题出品人带来“性能优化与监控”专场。届时将邀请在全链路监控、性能优化方向有丰富经验的技术专家带来分享。通过全链路监控前端、后端、客户端整个通道,寻找用户未到达场景下主要流失原因,拆解用户到达场景下的性能瓶颈,优化整个关键耗时路径,提升产品服务稳定性和速度。

以下为采访内容。

https://mmbiz.qpic.cn/mmbiz_png/XIibZ0YbvibkUWGSfbaRMQUgX48GzLiaicymy0ECoY618gd7RibbXFNbyMaYaUwp3mf5NQFyiaFQsFvFa5pZjBIqmwfA/640?wx_fmt=png");background-position: center center;background-repeat: no-repeat;background-attachment: initial;background-origin: initial;background-clip: initial;background-size: 100% 100%;overflow-wrap: break-word !important;box-sizing: border-box !important;"> InfoQ:你是怎么理解“性能优化”的?

尹立:

  • 响应速度快慢直接影响到用户体验好坏和客户转化高低,业界也有很多案例证明 H5 页面加载速度越快,用户流失越少,客户转化越高的结论。

  • 随着业务的迭代、功能的增加,性能一般会呈现下降趋势,现阶段移动端 App 和 H5 页面内容和功能越来越复杂、启动卡顿、加载页面耗时,以及点击响应慢这几大问题会变得越来越严重。

所以基本的思路是“业务不停,优化不止”。

 InfoQ:百度针对 H5 页面的首屏性能采取了哪些措施?

尹立:

H5 页面的加载过程耗时可以拆分为四个阶段:端容器创建、发起网络请求、服务端处理以及内核对页面解析布局渲染。针对这几个关键耗时阶段,百度持续对 H5 页面进行首屏性能优化,也把优化方案通过 GMTC、技术公众号等渠道分享给大家,主要包含四个方面:

  • 客户端优化

WebView 首次创建耗时优化:对于 Android 端加载自研内核的 App 来说,冷启动创建 WebView 着实是一笔不小的开销,而且这部分操作原生都是在 UI 线程执行,同时会带来用户感知卡顿,需要把 WebView 初始化任务拆分成更小单元,让每个小单元之间尽量做到后台线程并行加载或 UI 线程异步化。同时,端容器创建与网络请求也要尽量做到异步和并行,避免容器创建耗时多,阻塞网络请求。

  • 网络层优化

通过可视区域预先加载落地页的主文档和关键子资源,在用户真实访问页面时,就不用再等待主文档的网络加载,可以直接进入内核的主文档解析流程,整体上看减少了资源的加载耗时。

  • 服务端优化

分 chunk 优化,对于后端策略重、耗时多的服务进行分 chunk 处理,优先返回公共 JS 和 CSS 关键子资源给浏览器,浏览器内核可以优先解析和渲染这部分资源,优化整体流水线。

  • 渲染引擎优化

百度 T7 内核实现了一套首屏优化算法,尝试提前触发 H5 页面布局和绘制,使得页面绘制内容尽快达到屏幕高度,充满首屏,提升用户首屏感知速度。

 InfoQ:百度在搭建性能监控体系期间遇到过哪些难题?是怎么解决的?

尹立:

产品 | 百度搜索推广“优化中心”产品新上线

近日,百度搜 索推广新推出了"优化中心"产品, 提供一站式个性化的推广解决方案,辅助投放调优,助力投放效果与效率双提升。 本文分别从 产品介绍、操作指南、优秀案例、产品QA 来详细介绍百度搜 索"优化中心"产品,内容整理自产品手册,来源百度营销中心,文

,seo自学课程,
  • 建立用户真实感知的首屏性能指标

浏览器渲染网页主要包含五个流程:浏览器发起网络请求和收到 HTTP 数据、浏览器 HTML 文档解析、浏览器执行 JS、浏览器布局以及浏览器绘制上屏。

前端 JS 只能监控前面三个流程,会忽略浏览器布局和绘制的耗时,在 PC 浏览器上后两个流程耗时比较稳定,相对也较小,用 JS 的监控方案基本可以得到页面的加载速度。百度之前的监控体系也是这么做的,但是移动端浏览器在布局和绘制上耗时比 PC 端要大得多,尤其在异步绘制极端情况下布局和绘制占到整体耗时的 50% 以上,如果沿用 PC 这套监控方案就会出现较大偏差。有段时间发现一个问题,就是线上 JS 监控到的首屏速度非常快,但是用户反馈百度搜索速度很慢,两者相矛盾。

基于这个问题,百度采用自定义的首屏监控指标 FSP(First Screen Paint),意思是页面绘制首次超过屏幕高度时的速度。这个指标就包含了从浏览器发起请求,一直到页面首屏绘制上屏的时间点,也是从用户体验真实感知出发建立的性能指标。

  • 业界通用标准还未建设完成

为了测量用户真实感知首屏性能,Chromium 陆续推出了很多标准,主要有 FP(First Paint)、FCP(First Contentful Paint)、FMP(First Meanful Paint)、LCP(Largest Contentful Paint)。目前还没有哪一个指标能兼容所有的场景,比如,在有骨架屏场景和页面高度很小,与 WebView 等高时,上述指标很容易出现问题。为了更精确地建立业务首屏性能指标,前端最好能与浏览器内核结合起来制定规则,如果没有自研内核的协同,可以综合采用 Chromium 提出的上述指标,看看哪个指标适合自家业务。

 InfoQ:渲染引擎布局算法存在哪些性能问题,又是如何解决的?

尹立: 移动端浏览器渲染引擎是从 PC 浏览器继承和发展过来的,PC 端跟移动端差异比较大。因为 PC 端屏幕尺寸更大,渲染引擎衡量标准要看整个页面加载完毕的耗时,而在移动端屏幕更小,相比整个页面加载完成,首屏的快速展现对用户来说更加重要。当前 Chromium 的渲染引擎对首屏指标评估做了不少改进,确定了不少标准,正如前面提到的 FP、FCP、FMP、LCP,前端可以监控首屏绘制情况,对首屏展现没有帮助的资源尽量延后加载和处理,加速首屏展现。但是浏览器在渲染算法上加速移动端首屏展现做得还不够,所以国内一些浏览器渲染引擎就基于 Chromium 做了特殊改进。例如,百度的 T7 内核就在减少 Dom Parser 的前后台线程切换、预测页面首屏高度提前触发页面 Layout 方面做了优化,达到提升首屏速度的目的。从线上数据验证来看,该优化可提升近 10% 的首屏速度,收益还比较可观。

 InfoQ:目前,百度性能监控体系的优化效果如何?

尹立: 经过两年多对 H5 速度的优化,包括搜索业务逻辑耗时优化、页面内部跳转优化、内核渲染引擎优化、网络层耗时优化等,百度 App 搜索落地页速度整体优化 30% 以上。

 InfoQ:下一步将怎么发展?

尹立:

  • 到达率指标建设

业界评测 H5 速度的指标有很多,包括前端监控、客户端监控和内核监控,这些都是基于用户看到页面后的速度评测,其实漏掉了用户未看到页面的场景,这个场景很可能是由于网络异常,渲染失败或用户等待时间长而离开了,这部分数据是速度指标监控不到,而往往又是非常重要的,直接影响服务对用户是否可用。所以针对该场景,我们需要增加一个到达率的指标,可以定义为,用户看到首屏的 PV / 用户发起请求的 PV。我们往往重点关注用户未到达的场景,可以用公式(1- 到达率)计算未到达率。

  • 页面卡顿率指标建设

页面首屏加载速度已经被业界广泛接受,在业务开发迭代过程中都会关注对首屏的速度影响。把首屏展现不需要的耗时资源推迟到首屏绘制完成后加载执行,这样就会导致首屏绘制完成后的一段时间内,内核线程非常繁忙,此时对页面进行操作滚动时就会出现抖动和卡顿。针对这个问题,我们需要建立一个卡顿率的指标,可以定义为,卡顿耗时总和 / 用户浏览总时长,其中卡顿耗时定义为超过阈值的长任务耗时总和,根据历史经验,UI 线程中长任务阈值定义为 30ms,内核渲染线程长任务阈值定义为 50ms。

 InfoQ:作为性能优化与监控专场的出品人,您目前关注哪些大厂的性能优化实践呢?

尹立:Chromium 在开源社区有巨大影响力,当前 Android 端国内外移动端浏览器引擎基本都是基于 Chromium 开发而来,国内的大厂一般站在巨人的肩膀上,基于 Chromium 来做定制和二次开发,针对首屏速度和卡顿率进行优化,目前从用户使用数量和技术持续积累综合上看,腾讯的 X5 内核、阿里的 U4 内核和百度的 T7 内核影响力比较大。

 嘉宾介绍

尹立,百度 App 内核和搜索优化技术负责人,2014 年加入百度,负责百度 App 渲染引擎 T7 内核的研发和优化工作,推进 Web 页面浏览速度和流畅度大幅度提升;随后负责百度 App 搜索全流程速度和体验优化,建立用户可感知的速度和体验指标,并完成全链路监控、拆解和优化;曾就职于 Intel 公司开源技术中心,负责 Chromium/WebKit 开源社区 HTML5 支持和优化工作, 2014 年被 Google 公司和 Apple 公司分别任命为 Chromium 和 WebKit 开源社区 Committer。

 活动推荐

GMTC 全球大前端技术大会(北京站)2020,目前 8 折 优惠,购票限时立减 960 元!联系票务经历鱼丸:13269078023(同微信)

详情可扫描下图二维码或点击【阅读原文】

百度页面性能监控和优化实践_SEO教程自学网 SEO优化教程 第2张

,SEO教程自学网
本文地址:http://www.seonmb.com/post/841.html
版权声明:本文为原创文章,版权归 xiaolong 所有,欢迎分享本文,转载请保留出处!

评论已关闭!