成为VIP
提升50分，Trip.com 机票基于 PageSpeed 的前端性能优化实践
原创2022-10-28 18:18·携程技术
前言
网站性能对于用户体验、转化率和流失率、SEO 排名等至关重要，Trip.com 主要用户来自海外，对网站访问性能有更高的要求。能够快速响应的网站通常有机会获取更多流量，并为用户带来更好的体验。
近期我们对 Trip.com 机票站点做了一版性能优化，通过对主要 landing 页面进行系统优化，将页面的 PageSpeed 评分从原本 30 左右提升到 80 分以上。
这里分享在优化过程中的一些经验，将从性能指标、性能测量与优化实践方案三个方面展开，期望可以给大家提供一些思路和参考。
一、性能指标
1.1 性能指标的发展与演进
针对线上项目做性能优化，首先需要有一个确定的可量化的评判标准，用来判断优化工作是否有效。
1.1.1 传统的性能指标以及它们存在的问题
传统的性能指标最典型的是 DOM Ready 时间和页面加载时间（load time）：前者指的是初始 HTML 文档完全加载和解析完成的时间，一般是通过DOMContentLoaded 事件获得；后者指的是整个页面所需的资源（包括脚本、样式、图片等）加载完成的时间，通过全局的 load 事件获取。
普遍存在的问题是：在早先前后端耦合的时代，通过在服务端使用模板引擎渲染出 HTML，能比较好地反映网站性能。后来前端领域的迅猛发展，尤其是随着客户端渲染方案的盛行，以及各种动态技术的大量运用，这两个指标差不多已经失去其原有的意义，无法准确反映性能。
1.1.2 指标和用户实际感受之间的差异
再往后雅虎优化，采用浏览器提供的 Navigation Timing API ，通过 performance.timing 获取从页面开始加载到结束全过程中不同阶段的时间点。用这种方法，开发者可从多个维度去定义一些指标，通过简单的差值计算得到数据雅虎优化，并以此去监控站点性能。
比如在携程现有的UBT（User Behavior Tracking）中基于 Timing API 主要定义了以下 7 个关键指标 DNS、Connect、Request、Response、Blank、Domready 和 Onload。
1.1.3 以用户为中心的性能指标
上述这些指标更侧重于技术角度，跟用户在实际使用过程中的真实感受会有偏差。以此为标准去做性能优化的话，很可能面临的一种场景是，已经把某些特定指标如加载时间的数值大幅减少，但用户体验仍然不佳。基于此，Chrome 团队和 W3C 性能工作组推出了一组 以用户为中心的性能指标，从用户角度更好地去评判页面性能。
这些指标主要包含：
1.2 指标介绍
接下来简单介绍下主要性能指标的具体定义：
1.2.1 FCP
FCP 指标测量的是页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。“内容”可以是文本、图像（包括背景图像）、查看更多
限时特惠：本站每日持续更新海量设计资源，一年会员只需29.9元，全站资源免费下载
站长微信：ziyuanshu688
htebazile
