Yeoman

Grunt 和 Gulp 任務，用於效能最佳化

2014 年 3 月 4 日

效能延遲可能影響使用者的 參與度、體驗 和 收入。很幸運，Google 的「讓網路更快速」團隊建議了一組最佳實務 規則，用以保持網站精簡、快速的運行順暢。其中包括壓縮 CSS 和 JavaScript 等資源、最佳化圖像、內嵌和移除未使用的樣式等等。

如果您擁有對伺服器的完全控制權，那麼對於 PageSpeed 有一個優秀的 模組，用於 Apache 和 Nginx，其中包含可用於許多任務的過濾器。但是，如果您沒有控制權或者覺得模組並不適合您，那麼對於您可能已經使用的工具，就有許多建置任務可以更精細地補強控制。

下文指的 Grunt 和 Gulp 任務是 Yeoman 團隊在我們的專案中經常使用的。我們盡力讓這個清單保持重點，並且排除不再提供太多價值的先前建議，但這裡有許多方法可以協助您將網頁及其資源的大小保持在最小值。

注意：Yeoman 的 Grunt 和 Gulp 網頁應用程式產生器包含用於最佳化圖像和串接與壓縮 HTML/CSS/JS 的任務。我們覺得這是一個良好的基準，但是本文將涵蓋更進一步的任務。

壓縮和最佳化圖像

平均網網頁大小現在已經超過 1.5MB，其中大部分是圖像。我們的目標是維持圖像大小盡量小，以縮短使用者等待資源載入所需的時間。

透過適當的壓縮與格式取得平衡，仍然可以在不盡量縮短載入時間的情況下，將圖像作為網頁的一部分傳送。這對於使用行動裝置、有資料傳輸限制或連線速度較慢的使用者非常重要。

Grunt

為什麼要有兩個任務？這裡有兩者的絕佳 細目。選用最適合您的那一個。

Gulp

注意：Etsy 發現，只要在他們的行動裝置網頁上 新增 160KB 的圖像，他們的跳出率就會增加 12%。如果您無法減少網頁中使用的圖像，至少也要透過最佳化器執行這些影像。

為 <picture> 元素產生具反應能力的圖像

如果您有視覺上可以在多個裝置之間靈活變換的反應式網站，您會想要採取一些策略，讓影像也能靈活應用。

提供過大的影像給瀏覽器可能會 影響 呈現和載入效能，但當過大的影像被傳送至瀏覽器時，受到影響的可不只這些指標而已。

這就是我們需要反應式影像的原因之一，而看到 srcset 讓人很興奮，希望會全面實作 <picture>，它已經在 Chrome Beta 中了。

有許多 Grunt 任務可用，可以協助在您的建構程序中產生多解析度影像。

Grunt

此外，如果您只需要調整尺寸很大影像的大小，可以使用 grunt-image-resize。

注意：Tim Kaldec 對反應式影像的研究 提出，採用反應式影像策略可以大幅減少圖片大小，最多可達 72%。雖然現在還為時過早，無法採用與瀏覽器相容、符合規格的反應式影像做法，BBC 與 Guardian 已成功使用 Imager.js。

縮小 SVG 影像

使用編輯器建立的 SVG 檔案通常包含大量重複資訊（例如：中繼資料、註解與隱藏元素等）。這種內容可以安全移除，或轉換成更小的型式，而不會影響正在呈現的最終 SVG。

Grunt

Gulp

產生雪碧圖

Grunt

Gulp

將影像轉換成 WebP

WebP 是最近推出的影像格式，提供網路上的影像無失真壓縮與有失真壓縮。WebP 無失真壓縮影像比 PNG 小了 26%，WebP 有失真壓縮影像比 JPEG 小了 25-34%。這樣的節省相當可觀，很巧的是，Grunt 和 Gulp 都提供了編碼成 WebP 的任務。

Grunt

Gulp

注意：來自 WebPageTest 的這份 測試 顯示，相較於 JPEG，WebP 編碼影像由於檔案大小較小而能更快完成載入。Chrome 網路商店 發現 從 JPEG 改用 WebP 後，平均能節省 30% 的位元組，每日減少了好幾個位元組的頻寬。

打造支援多款瀏覽器的 SVG 雪碧圖

Grunt

Gulp

我們認為使用 Data URI 內嵌圖片如今已成為反模式，因為它們在 行動裝置上的效能很 差。

縮小 CSS

縮小會清除檔案中不必要的空格、換行、縮排和字元，這些在執行階段通常是不必要的。壓縮 HTML、CSS 和 JS 可以改善剖析、執行和下載時間。針對 CSS，我們建議使用

Grunt

Gulp

移除未使用過的 CSS

在使用 CSS 框架（例如 Bootstrap、Foundation 等）的專案中，您通常不會使用所有可用的樣式。使用 UnCSS 移除各網頁中未使用的樣式，不要將完整的框架發佈到生產環境。某些開發人員發現樣式文件大小最多可減少 85%。

Grunt

Gulp

注意：開發人員常問的問題是，UnCSS 或移除未使用的 CSS 的流程是否也能運用在動態注入到網頁中的樣式。答案是「可以」。UnCSS 與 PhantomJS 並行作業才能做到這一點。開發人員發現，針對典型的 Bootstrap 網頁，儲存量約在 10-120KB 之間，而 UnCSS 也適用於其他的框架。

內嵌式 CSS

如果針對特定網頁的外部 CSS 資源很小，您可以直接在標記中內嵌這些資源，以減少其他要求。採用此方法內嵌小型 CSS，讓瀏覽器能繼續呈現網頁。

Grunt

Gulp

合併媒體查詢

這不是 PageSpeed 建議的方法，而是讓您可以將比對的媒體查詢合併為單一的媒體查詢定義。我們發現這有助於處理由預處理器產生的 CSS，這些 CSS 可能會使用巢狀媒體查詢。

Grunt

Gulp

JavaScript

縮小、壓縮 JS

Grunt

Gulp

RequireJS（透過 r.js 最佳化）

Grunt

Gulp

縮小 HTML

Grunt

Gulp

簡單串接

Grunt

Gulp

一般檔案/資料夾壓縮

Grunt

Gulp

Zopfli 壓縮

Zopfli 壓縮演算法是一個開放原始碼壓縮函式庫，其在最大壓縮的情況下所產生的輸出通常比 zlib 小 3-8%。最適合用在資料僅壓縮一次，然後多次透過網路傳輸的應用程式。

Grunt

Gulp

注意：Google Fonts 切換為使用 Zopfli 時，字體平均縮小約 6%，有些情況下甚至縮小 15%。根據 Ilya Grigorik 的說法，以 Open Sans 為例，縮小幅度超過 10%，轉變為比較快的呈現和載入時間。不過，相較於 JPG，Zopfli 影像的解碼時間可能較長，因此在決定是否使用 WebP 時，應衡量對您來說重要的指標。

內嵌關鍵路徑 CSS

關鍵路徑代表網頁中用於呈現「上方折頁」內容的程式碼和資源，也就是當使用者載入網頁時，第一眼會看到的內容。PageSpeed 建議內嵌關鍵路徑 CSS，以提升效能。雖然 mod_pagespeed 等工具在此方面極具效率，而以其他工具最佳化關鍵路徑則較困難。

您可以使用 PhantomJS 搭配 speedreport 中的折頁上方腳本，瞭解哪些 CSS 位於折頁上方，然後手動最佳化這些 CSS。

注意：Paul Kinlan 寫了一個 瀏覽器書籤小工具 用於估計網頁中「頁面摺疊上」的 CSS，這也值得研究。

Asset 管線（自動處理所有最佳化）

在「需要密切注意的工具」清單中是 AssetGraph。

AssetGraph 將專案視為一組圖形問題，其中節點被視為資產（HTML、CSS、影像、JS），而邊緣則是它們之間的關聯（影像標籤、錨點標籤、指令碼標籤等）。

因為 AssetGraph 能夠判斷專案資產之間的關聯，所以它可以自動執行開發人員原本可能想要親自完成的許多常見效能最佳化。這種機制特別適用於較小的專案，而且目前也持續開發支援較大型專案的部分。

Grunt

Gulp

Gulp 使用者應該直接使用 AssetGraph。

基準測試

以下基準測試工作適合整合為持續整合的一部分。儘管下列工作目前只適用於 Grunt，你可以使用 gulp-grunt 從 Gulp 執行 Grunt 工作。我們建議

  • grunt-pagespeed - 極佳，可以自動檢查你的 PageSpeed 分數，當作持續整合的一部分。
  • grunt-topcoat-telemetry - 取得 Telemetry 的流暢度、載入時間和其他統計資料，當作持續整合的一部分。這可能有助於你設定與 TopCoat 使用的類似的效能基準測試儀表板
  • grunt-wpt - 針對 WebPageTest 分數進行的持續整合
  • grunt-phantomas - 針對要求、回應、載入第一個影像/CSS/JS、onDOMReady 等項目的回應時間。

架構最佳化

Grunt

Gulp

雜項

結論

效能延遲可能會對使用者的參與度、體驗和收入產生影響。花點時間嘗試各種效能最佳化工作，找出能為你的專案提供什麼實際的好處。

拜更快速的體驗所賜，造訪你網頁的訪客將會更快樂，而更快的網路對所有人都有利。

~ Addy Osmani

感謝 Sindre Sorhus、Pascal Hartig 和 Stephen Sawchuk 的審閱

« 檢視更多貼文