Staying off the rocks: using Lighthouse to build seaworthy progressive web apps

前言

看标题的中文直意是 “远离岩石: 用灯塔去构建适于航海的PWA”, PWA和航海, 灯塔有什么关系呢? 灯塔是位于海岸、港口或河道的一种塔状发光航标, 用以指引船舶航行或指示危险区的建筑物. 用这个 great model 来推崇这个工具的意义是最好不过了.

Lighthouse is an open-source, automated tool for improving the quality of your web apps.
May 19 2017, 12:30PM - 1:30PM

Lighthouse 是一个自动化测试工具, 用 Lighthouse 来更好的指引及提升高质量的 WEB APPS.

首先介绍一下三位人物:

Paul Irish Paul is a contributor to WebFundamentals @Google
Brendan Kenny Lighthouse Bulb Installer @Google
Eric Eidelman Engineer @Google working on Lighthouse, Web Components, Chrome, and the web

Lighthouse History

Lighthouse 1.0 - 2016

Lighthouse 1.0

早在 2016 年 Paul Irish 在 Debugging The Web (Chrome Dev Summit 2016) 已推出了一些关于 Lighthouse 的雏形, 不过功能还不够完善, 只是较少的提到了它.

Lighthouse 2.0 - 2017

Lighthouse 2.0

而在今年 Google IO 2017 上, Brendan Kenny 与 Eric Eidelman 带来了全新的 Lighthouse 2.0, 以 Lighthouse 作为主角, 全面的阐述了它的强大功能. 还比如他们很高兴的是, 重新设计了 Fancy new LOGO.

这篇文章主要按照 2.0 来认识 Lighthouse.

Lighthouse 2.0

内容主要围绕前面图片提到的四个大版块来介绍, 另外本文记录的时候, Lighthouse 已是 V-2.2.1

1. Progressive Web App
2. Performance
3. Accessibility
4. Best Practices

1.Progressive Web App, 就是大家一直说的 PWA. PWA 其实是一个审计标准, 按照一个 PWA Checklist 来审计你的 WEB APP 是否符合更现代化, 体验更高的 APP. 就是像 W3C 制定了一些书写标准一样, PWA 也是有它的一些标准, 一步步完善了这些标准, 那么你的 APP 就是 PWA. 下面一张图列举了几项 PWA 审核标准:

PWA Checklist

2.Performance 顾名思义就是应用程序的性能了, Lighthouse 为审计性能提供了一个 Metrics 度量标准. 及下面五张图依次代表的非常有意思的 第一次的Paint. 页面加载前后.

第一次渲染, 或在模糊的第一像素初始化的时候, 能够加载一个背景, 背景颜色, 顶部导航UI 等一个最最最基本的帧.

First Paint

第一个内容的绘图, 比如告诉用户正在 Loading, 说明加载已启动

First Contentful Paint

第一个有意义的绘图, 比如一个假的内容占位

First Meaningful Paint

此时, 从视觉上, 外观上, 看起来近乎接近于加载完成的样子

Visually Ready

最后, 生命周期结束

Fully Loaded

3.Accessibility 是可访问性, 适用于任何人的、无障碍的沟通.

Victor Tsaran

Victor Tsaran, a Technical Program Manager at Google, who is totally blind.

上图是一位全盲Google技术主管, 链接文章记录了他对于提高 Accessibility 的一些经验问答, 而且文章也阐述了什么是 Accessibility.

4.Best Practices 最好的实践, 在这里会给出一些建议, 帮助构建现代化的 WEB APP 和一些预防可能造成性能的陷阱. 这些审计不会影响得分但是非常值得一看.

How to use Lighthouse ?

提供了三种方式方法去使用 Lighthouse

1.Chrome扩展插件

method 1

2.Node CLI, Node 6+

method 2

1
2
3

npm install -g lighthouse
# or use yarn:
# yarn global add lighthouse

3.安装Chrome Canary, 使用工具栏的 Audits and Run.

Audits

Extending Lighthouse
writing custom audits for your own site

Lighthouse 更帅的扩展, 开发者可以写自己的审计, 或者说自动化测试. 只需三步:

Custom Audits 01

效果图如下:

Custom Audits 02

On the roadmap

On the roadmap

Good stuff

NPM:

1	npm i -g lighthouse

Chrome Extension

Git Hub

Docs/Audit References

DevTools Protocol References

PWA CheckList

视频资源:

Debugging the web (chrome Dev Summit 2016)
Staying off the rocks: using Lighthouse to build seaworthy progressive web apps

最后, 附上我的博客检测做总结

Fancy

Lighthouse 自动化测试开源工具 - 2017 Google IO

FEATURED TAGS

FRIENDS