Progressive Web App Audits (15)

什麽是 Lighthouse Audits?

Lighthouse 是一套整合在 DevTools 中的开放原始码检测工具，用来检测效能、可靠性、SEO、PWA 等指标是否符合。

以 PWA 来说主要会分成三大部份去审核

1. 网站效能与可靠性

• 透过手机浏览效能
• 页面无法离线使用且没有离线後备页面

2. Installable

• 是否采用 HTTPS
• 是否在 start_url 页面有引入 Service Worker
• manifest 没有符合相关安装规范

3. PWA 最佳化

• 所有连结合资源都有 redirect 到 HTTPS
• 配置 App 的启动萤幕相关设定
  • name 有设定
  • background_color 正确
  • icons array 中至少有 512x512 px PNG 图
• 针对网址列的 theme color，meta 也要记得 <meta name="theme-color" content="#317EFB"/>
• 内容大小是否符合手机装置大小不会破版
• 设定 并设定 width 跟 initial-scale
• 提供停用 JavaScript 的相关後备内容
• 提供 apple-touch-icon

Progressive Web App

简单讲一下配置过程，其实只是需要 https 环境并加入以下配置，然後撰写相对应的 manifest.json 档。

<link rel="manifest" href="/manifest.json" />

网站效能与可靠性

网站效能上主要有两大考量，大多可以透过快取解决

• First Meaningful Paint (FMP): 主要内容要多久才出现
• Time to Interactive (TTI): 网站可以操作

可靠性，也和刚刚说的快取相关，本来要去 server 拿的资料变成快取在浏览器的储存空间中。

透过实作 service worker 来处理储存的快取，可以想像成做一个 Client 端的 response cache，这样就不需要每次都向 Server 要东西。

Cache

查了一些快取相关资料後，发现这篇关於cache的写得很详细。

• 常用又不太需要更改的函式库改成使用 CDN 取得
• 有使用 Webpack 的话需要把这些函式库加入 externals 并透过 ProvidePlugin 给命名
• lodash 这类工具包可以只引用部分

externals: {
    jquery: 'jQuery',
    lodash: '_',
  },
plugins:  [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      _: 'lodash',
    }),
]

效能 (Performance)

1. SPA 可以加入 server render
2. webpack 的话可以使用 Code-splitting
3. 有使用格线系统像是 bootstrap 可以做 custom build 来减少 css 载入时间
4. 图片的 lazy load

不过有个问题就是当某些情境下还是会需要高解析度的图片如何处理?

• 後端自动处理图片成各种解析度，透过规则来取用
• 使用较新潮高压缩比的格式