跳至主要内容

[web] 效能概覽

未閱讀：Web Performance 101

非原創文章，內容整理自：Why Performance Matters @ Google Developers > Web Fundamentals

留意你傳送了哪些資源（what）​

要打造高效能的應用程式很重要的是去監控你傳送了哪些資源給使用者，你可以透過 Chrome 開發者工具的 Network 面板。一些建議如下：

  • 如果你有使用 UI 的框架（例如 Bootstrap 或 Foundation），問問自己這是不是必須的。由於 CSS 是轉譯是會阻塞的資源，因此過大的 CSS 框架或導致轉譯速度顯著變慢。
  • JavaScript 的套件非常方便，但並非總是必須，如果沒有太大的需求，可以試著用輕量化套件來取代龐大的套件，例如用 Zepto 取代 jQuery、用 Preact 取代 React。
  • 並非所有的網站要需是 Single page applications（SPAs），因為它們通常會使用非常多的 JavaScript。JavaScript 是網頁上最昂貴的資源，它不只需要被下載、還需要被解析、編譯、然後執行。

留意你如何傳送資源（how）​

傳送資源的方式對於使用者能否有快速的體驗有很大的影響：

  • 升級到 HTTP/2，HTTP/2 中設法解許多 HTTP/1.1 上的效能問題，像同時發送請求的限制、以及缺乏 header 的壓縮。

  • 使用資源提示（resource hint） 來加快資源的傳遞。rel=preload 可以讓瀏覽器更早開始下載一些重要的資源；rel=preconnecct 則是另一個可用資源提示。

  • 當今的網站都需要傳送許多的 JavaScript 和 CSS，過去在 HTTP/1 的情況下，很常把許多檔案打包成一支樣式或 Script，因為這麼做可以提生效能。但到了 HTTP/2，同時發送多個請求是很有效率的，因此考慮使用 webpack 的 code splitting 來指定該頁面需要下載哪些檔案來使用，把 CSS 拆成許多小的樣版、或以元件分類的檔案，只有在需要用到它們時，再把它們載入。

留意你傳送的多少檔案（how much）​

下述是一些建議來限制你傳送了多少檔案：

  • 最佳化文字資源檔案：透過最小化（minification）可以移除不必要的空白、註解等等，能夠有效減少檔案的傳輸量。因此記得使用 uglify-jS 這類工具，它還會簡短變數和方法得命名。SVG 也是文字資源，因此可以透過 SVGO 這個工具達到最佳化。
  • 設定你的伺服器來壓縮資源：透過壓縮可以有效減少傳送給使用者的資源大小。其中最受人使用的就是 GZIP 這個壓縮格式，特別是針對文字資源檔案，但對於圖檔（例如，JPEG, PNG, GIF, WOFF, 等等）因為它們已經被壓縮過，因此沒有太大幫助。
  • 最佳化圖檔：確保你的網站傳送最小的圖片檔案。
  • 響應式地傳送圖檔：根據不同的裝置尺寸，透過 srcset 屬性或 <picture> 來傳送不同大小或不同解析度的圖檔。

資料來源​