背景
一重要客户抱怨页面加载时间太长，我们肯定立即响应了。开发人员定位是前端的性能问题，也研究出一些优化的方法。下一步就是我们测试人员要能够得出性能度量数据，来衡量性能优化的效果。
工具
后端性能测试，倒是用过JMeter，前端性能测试还是第一次做。首先得找个靠谱的测试工具。
WebpageTest
官方网站: https://www.webpagetest.org/，也是工具的使用页面。它可以测试部署在公网的应用，由于我们是to B的，部署在公司内网，所以这个工具不合适，虽然也可以自己部署，估计要花费比较长的时间，就没有继续研究。
YSlow
官方网站: http://yslow.org/ ，是Yahoo发布的一款插件，可安装在Firefox和Chrome上。雅虎卓越绩效团队已经确定了34个影响网页性能的规则。YSlow的网页分析是基于这34个可测试的规则中的23个。
最小化HTTP请求
使用内容交付网络
避免空的src或href
添加一个Expires或一个Cache-Control Header
Gzip组件
把StyleSheets放在最前面
把脚本放在底部
避免使用CSS表达式
使JavaScript和CSS外部
减少DNS查找
缩小JavaScript和CSS
避免重定向
删除重复的脚本
配置ETags
使AJAX缓存
使用GET进行AJAX请求
减少DOM元素的数量
没有404s
减小Cookie大小
为组件使用不使用Cookie的域
避免过滤器
不要在HTML中缩放图像
使favicon.ico小和缓存
YSlow更主要是性能分析的工具，有性能度量的总体评分，但没有详细的指标数据。
Lighthouse
Lighthouse是Google开发并开源的自动化前端测试工具。运行 Lighthouse 的方式有两种：作为 Chrome 扩展程序运行，或作为命令行工具运行。 Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。 命令行工具允许您将 Lighthouse 集成到持续集成系统。下面主要介绍命令行的安装运行方式。
安装 Node，需要版本 5 或更高版本。
安装 Lighthouse 作为一个全局节点模块。
npm install -g lighthouse
传递 --help 标志以查看可用的输入和输出选项。
lighthouse --help
开源项目，文档比较有限，可能更多的参数使用需要自己看代码了。综合考虑就选它了。
性能度量指标
用户体验是主观的感受，它由一系列指标共同决定，如"First Content Time"， 第一个text或image渲染的时间；"Time to Interactive"，页面完全可交互的时间。
lighthouse的性能度量指标和WebpageTest差不多，数值都是越小越好。
First Contentful Paint marks the time at which the first text or image is painted. FCP measures how long it takes the browser to render the first piece of DOM content after a user navigates to your page. Images, non-white
First Meaningful Paint measures when the primary content of a page is visible. FMP measures when the primary content of a page is visible to the user. The raw score for FMP is the time in seconds between the user initiating the page load and the page rendering the primary above-the-fold content. FMP essentially shows the timing of the paint after which the biggest above-the-fold layout change happens. Learn more about the technical details of FMP in Google's Time to First Meaningful Paint: a layout-based approach.
First Contentful Paint (FCP) and FMP are often the same when the first bit of content rendered on the page includes the content above the fold. However, these metrics can differ when, for example, there's content above the fold within an iframe. FMP registers when the content within the iframe is visible to the user, while FCP doesn't include iframe content.
Speed Index shows how quickly the contents of a page are visibly populated. Speed Index measures how quickly content is visually displayed during page load. Lighthouse first captures a video of the page loading in the browser and computes the visual progression between frames. Lighthouse then uses the Speedline Node.js module to generate the Speed Index score.
First CPU Idle marks the first time at which the page's main thread is quiet enough to handle input. First CPU Idle measures how long it takes a page to become minimally interactive. A page is considered minimally interactive when:
Most—but not necessarily all—UI elements on the screen are interactive, and
The page responds, on average, to most user input in a reasonable amount of time.
Time to interactive is the amount of time it takes for the page to become fully interactive. TTI measures how long it takes a page to become fully interactive. A page is considered fully interactive when:
The page displays useful content, which is measured by the First Contentful Paint,
Event handlers are registered for most visible page elements, and
The page responds to user interactions within 50 milliseconds.
The maximum potential First Input Delay that your users could experience is the duration, in milliseconds, of the longest task.