PWA 效能稽核完全指南 運用 Lighthouse 評估漸進式指標並優化可靠性

什麼是 PWA 稽核與 Lighthouse？

PWA 稽核 (PWA Audit) 是指透過自動化工具對 Web 應用程式進行全面檢測，以確保其符合效能、可靠性、可安裝性與無障礙等關鍵指標的過程。而 Lighthouse 則是 Google 開發的最核心工具，整合於 Chrome 開發者工具（DevTools）中。它能模擬行動裝置環境，測量如 First Meaningful Paint (FMP) 與 Time to Interactive (TTI) 等使用者感知效能指標，並針對 Service Worker 註冊、HTTPS 安全性及 Web App Manifest 配置給出具體改進建議。進行 PWA 稽核是確保網站能提供原生級流暢體驗、並成功觸發瀏覽器安裝提示的必要步驟。

Web App 的效能會直接影響使用者體驗，也會決定用戶是否願意持續使用您的站台。在進行 PWA 效能優化 時，小編建議大家應優先關注使用者的感知效能。透過 Lighthouse 使用建議 與檢核清單，我們可以更快速地定位並優化站台瓶頸。

在開始優化前，有幾個核心觀念值得注意：

• 載入時間越長，跳出率越高。
• 參考 RAIL (Response, Animation, Idle, Load) 以用戶為中心的效能模型。
• 善用 PageSpeed Insights 與 Chrome User Experience Report。

什麼是 Lighthouse Audits？PWA 品質檢測核心工具

Lighthouse 是一款整合在 Chrome DevTools 中的開放原始碼自動化工具，專門用來提升網頁品質。它能針對效能、無障礙、SEO 與 PWA 等指標提供完整的檢測報告。

在 PWA 稽核教學 中，主要會將審核分為三大核心面向：

1. 網站效能與可靠性

• 透過手機瀏覽效能。
• 頁面無法離線使用且沒有離線後備頁面。

2. Installable (可安裝性)

• 是否採用 HTTPS。
• 是否在 start_url 頁面有引入 Service Worker。
• Manifest 是否符合相關安裝規範。

3. PWA 最佳化

• 所有連結與資源都有 redirect 到 HTTPS。
• 配置 App 的啟動螢幕相關設定：
  • name 有設定。
  • background_color 正確。
  • icons 陣列中至少有 512x512 px PNG 圖。
• 針對網址列的 theme color，meta 也要記得 <meta name="theme-color" content="#317EFB"/>。
• 內容大小是否符合手機裝置大小不會破版。
• 設定 <meta name="viewport"> 並設定 width 跟 initial-scale。
• 提供停用 JavaScript 的相關後備內容。
• 提供 apple-touch-icon。

選修優化項目

除了上面幾項必修以外，還有幾項選修可以參考優化：

• 提供無障礙 (A11y) 的設計。
• 做好 SEO 讓 PWA 更容易被搜尋與取用。
• 滑鼠、鍵盤、觸控都要能夠操作，避免手機瀏覽器的下拉更新影響操作。
• 優化詢問權限（如：地理位置、通知）的方式。

PWA 效能優化與可靠性策略

網站效能主要有兩大核心衡量指標，在 PWA 效能優化 的過程中，建議優先處理：

• First Meaningful Paint (FMP)：使用者看到主要內容所需的時間。
• Time to Interactive (TTI)：網站從載入到可以進行穩定互動的時間。

可靠性也與快取機制密不可分。透過實作 Service Worker，我們可以將原本需要從 Server 拿取的資源儲存在 Client 端。

提升可靠性的快取 (Cache) 最佳實務

查了一些快取相關資料後，發現這篇關於cache的寫得很詳細。

• 常用又不太需要更改的函式庫改成使用 CDN 取得。
• 有使用 Webpack 的話需要把這些函式庫加入 externals 並透過 ProvidePlugin 給命名。
• lodash 這類工具包可以只引用部分。

1
2
3
4
5
6
7
8
9
10
11
12
13

// Webpack 配置範例
externals: {
    jquery: 'jQuery',
    lodash: '_',
  },
plugins:  [
    new webpack.ProvidePlugin({
      $: 'jquery',
      jQuery: 'jquery',
      'window.jQuery': 'jquery',
      _: 'lodash',
    }),
]

效能 (Performance) 優化手段

1. SPA 可以加入 Server-side Rendering (SSR)。
2. 使用 Webpack 的 Code-splitting。
3. 針對格線系統（如 Bootstrap）做 Custom build 以減少 CSS 體積。
4. 圖片的 Lazy load 與使用新一代格式（如 WebP）。

PWA 離線瀏覽實作：提升極端環境下的可用性

當用戶安裝過後，多少會預期能夠離線使用。優質的 離線瀏覽實作 應確保打開時不會是一片空白。

針對未被快取的頁面：

• 提供適當的相關提示。
• 提供 Skeleton Screen 的設計畫面，減少焦慮感。

實作上，當 Service Worker 這個網路代理小秘書有做好設定，原則上就可以快取圖片、影片等資源到本機端（如 IndexedDB）。

離線儲存

當決定好哪些功能要支援離線使用時，就會需要將資源儲存在本機端，瀏覽器提供:

• IndexedDB
• NoSQL storage system

開發者需要注意的是何時進行資料的撈取及更新，像是處理用戶從離線狀態恢復有網路時的情境轉換。

支援安裝到手機

既然叫 Web App，就要讓它能不透過瀏覽器視窗執行，並獨立出現在工作管理員中。只需在 HTTPS 環境加入以下配置並撰寫 manifest.json：

1

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

跨瀏覽器支援與 Resilient Web Design

Jeremy Keith 提出了 Resilient Web Design 的概念，這對 PWA 非常重要：

• 即使遇到錯誤，App 應能反應並照常運作。
• 漸進式增強：HTML 提供基礎功能，CSS 和 JS 屬於加強體驗。

例如一個表單：

1. HTML Form + Submit 是基礎。
2. 加入 Ajax 送出與欄位驗證是進階增強。

推薦拜讀 Jeremy Keith 的 Resilient Web Design。

FAQ：PWA 稽核與優化常見問題

Q1：為什麼我的 Lighthouse PWA 分數很高，但還是無法安裝？

A：Lighthouse 指標是參考值。真正的「可安裝性」還取決於瀏覽器的特定策略（User Engagement Heuristic），例如 Chrome 要求使用者在頁面上必須有一定長度的互動時間（通常是 30 秒以上）才會觸發提示。

Q2：FMP 與 TTI 哪一個對 PWA 體驗更重要？

A：兩者皆重要，但 TTI（可互動時間）對於 App 感官至關重要。如果使用者看到了畫面（FMP）但點擊按鈕卻沒反應，會造成極差的體驗。在 PWA 中，應盡量減少執行昂貴的 JavaScript 任務以縮短 TTI。

Q3：如何處理高解析度圖片在離線快取時造成的容量負擔？

A：建議採用「響應式圖片」策略。在快取時僅預快取較低解析度的版本，高解析度版本則在網路連線且使用者需要時再進行按需快取。

• ← 上一篇
• 下一篇 →