提升PWA性能：CSS優(yōu)化指南

本文將探討如何通過CSS優(yōu)化來顯著提升漸進式網頁應用（PWA）的性能。我們將學習如何移除未使用的CSS，內聯關鍵路徑CSS，以及壓縮最終代碼。這些技術同樣適用於普通網站和應用。

關鍵要點:

• CSS優(yōu)化能通過移除未使用的CSS、內聯關鍵路徑CSS和代碼壓縮來顯著提升PWA性能。
• Google開源審核工具Lighthouse可以幫助識別CSS優(yōu)化的機會。
• PurifyCSS等工具可以移除未使用的CSS樣式，減小CSS文件大小。 Critical CSS Extractor等工具可以提取和內聯關鍵CSS規(guī)則，減少HTTP請求數量和瀏覽器解析代碼量。
• 可以通過在DOM就緒後使用JavaScript在頁面末尾加載CSS文件來防止CSS文件阻塞渲染。

示例PWA及審核

為了演示，我們將使用一個簡單的PWA示例（代碼可在GitHub倉庫獲取，或直接訪問線上版本）。該PWA使用未壓縮的Bootstrap v4進行CSS樣式設置，並顯示從靜態(tài)生成的JSON API獲取的一組帖子。

PWA包含以下關鍵元素：

• 清單文件 (manifest.json)：提供瀏覽器關於Web應用的信息，例如名稱、描述、圖標、啟動URL等。
• 服務工作者 (service worker)：緩存應用外殼（顯示用戶界面的最小HTML、CSS和JavaScript）並代理所有網絡請求。
• HTTPS：PWA必須通過安全來源提供服務。

使用Google Lighthouse進行審核

Lighthouse是一款由Google開發(fā)的開源審核工具，可用於改進網站和PWA的性能、可訪問性和SEO。

在Chrome開發(fā)者工具的“審核”選項卡中訪問Lighthouse，輸入PWA地址（例如：https://www.techiediaries.com/unoptimizedpwa/），運行審核並查看報告。

Lighthouse報告中會提供優(yōu)化建議，例如：減少阻塞渲染的CSS、消除未使用的CSS規(guī)則和壓縮CSS。

CSS優(yōu)化：移除未使用的CSS規(guī)則

Lighthouse指出示例PWA中96%的CSS是未使用的。我們可以使用PurifyCSS來移除這些未使用的CSS。

安裝PurifyCSS：npm install -g purify-css

運行PurifyCSS：purifycss styles/bootstrap.css index.html -o styles/purified.css -i

減少阻塞渲染的CSS

我們可以使用Critical CSS Extractor（Chrome擴展程序）提取關鍵CSS，並將其內聯到index.html文件中。

壓縮CSS

可以使用cssnano或csso等工具來壓縮CSS文件。

安裝cssnano和PostCSS CLI：npm install cssnano npm install postcss-cli --global

創(chuàng)建postcss.config.js文件並配置cssnano。

運行壓縮命令：postcss styles/bootstrap.css > styles/bootstrap.min.css

使用JavaScript延遲加載Bootstrap

在頁面末尾使用JavaScript加載CSS文件，避免阻塞渲染。

優(yōu)化後的結果及其他工具

再次運行Lighthouse審核，查看性能提升。

其他可用的工具包括：csso、critical、uncss、purgecss等。

總結

通過移除冗餘代碼，內聯關鍵資源和壓縮CSS，可以顯著提升PWA的性能。

常見問題

本文最後還包含了關於CSS優(yōu)化和PWA性能的常見問題解答，涵蓋了CSS優(yōu)化策略、性能衡量方法、服務工作者的作用、圖片優(yōu)化、常見錯誤避免、PWA的可訪問性、搜索引擎優(yōu)化以及PWA與傳統(tǒng)Web應用的比較等方面。

(注意：由於無法直接處理圖片，圖片路徑保持不變。請確保圖片路徑正確才能正常顯示。)

以上是CSS優(yōu)化工具用於提高PWA性能的詳細內容。更多資訊請關注PHP中文網其他相關文章！