什麼是 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

不過有個問題就是當某些情境下還是會需要高解析度的圖片如何處理?

• 後端自動處理圖片成各種解析度，透過規則來取用
• 使用較新潮高壓縮比的格式