I/O ’18 筆記 / Web performance made easy

優化網站效能變容易了! — Addy Osmani & Ewa Gasperowicz, Google I/O 2018

Image for post
Image for post

讓網頁越趨笨重遲鈍的是什麼?

  • Chrome 團隊分析 HTTP Archive 的數據發現,網頁的整體大小中位數落在 1.5 MB,其中圖片就佔了 800 KB,JavaScript 則是 350 KB,以致 15 秒才能載入完成並進行互動操作。

使用者如何評估速度?

  • 75%:網站載入頁面需要的速度
Image for post
Image for post

運送少一點東西!

  • 開發者雖然知道效能很重要,但有時候在進行優化時會感到一頭霧水
Image for post
Image for post
Image for post
Image for post

Lighthouse 新的稽核規則

  • JavaScript 啟動時間

修正網頁效能問題就像畫一隻馬一樣容易

Image for post
Image for post

Google I/O 戲院網頁範例 (演講專用)

Image for post
Image for post
  • Lighthouse 效能分數只有 23

第一個效能挑戰 — 不必要的資源

  • 運送少一點東西,較少的資料位元組
Image for post
Image for post

不稱職的快取策略

  • 短的快取生命週期時間會影響重複拜訪網頁的體驗

移除不必要的資源並且別發送兩次(以上)的解決方案

  • 自動化的 minify 工具/服務:UglifyJS、Cloudfare、mod_pagespeed

第二個效能挑戰 — 未使用的 JS & CSS 程式碼

Image for post
Image for post
  • 沒用到的 JS 程式碼也會讓頁面載入緩慢
Image for post
Image for post
  • vendor.js 有 95% 的程式碼沒有被使用到

從關鍵路徑移除未使用的 JavaScript & CSS 程式碼的解決方案

  • DevTools 的 Code Coverage 面板

第三個效能挑戰 — 臃腫的網頁

Image for post
Image for post
  • 有些現代網頁實用的內容並不多

lighthouse 可偵測極大的網路傳輸資料

Image for post
Image for post

JavaScript 打包檔稽核工具

  • Webpack Bundle Analyzer
Image for post
Image for post

第四個效能挑戰 — 等到天荒地老的 JavaScript 啟動時間

Image for post
Image for post
  • JavaScript 是最昂貴的資源(執行成本最高)

瀏覽器如何處理 JavaScript

Image for post
Image for post
  1. 必須先經過網路傳輸下載 JS

範例網頁的 JavaScript Boot-up time 偏高,1.8 秒

Image for post
Image for post
  • 原因是 app.js 裡 import 了每個頁面的 JS 模組,導致一大包檔案

快速 JS 的解決方案

  • 四個階段都保持速度:下載、剖析、編譯、執行

第五個效能挑戰 — 未優化的圖片:

  • Oodle Lab 範例網頁在前景、背景使用許多圖片,在 Lighthouse 三個圖片相關的稽核檢測皆未通過
Image for post
Image for post
  • 忘記優化圖片品質、沒有正確調整尺寸、若考慮其他圖片格式可以得到一些改善

圖片優化工具

動畫 GIF 的問題

Image for post
Image for post
Image for post
Image for post
  • Oodle Lab 範例網頁的 GIF 轉換成影片格式可減 80%+ 檔案大小

Carousels 時常載入不必要的圖片

  • 另一個常見的問題是 off-screen images,螢幕外的圖片
Image for post
Image for post
  • LazySizes 不只追蹤圖片可視度,也具備在接近可視範圍時的 pre-fetch 功能,也提供 IntersectionObserver 整合

別傳輸未優化或不必要的圖片給你的使用者

  • 優化圖片 (圖片品質)
Image for post
Image for post
https://images.guide

第六個效能挑戰 — 資源探索與遞送延遲

  • 瀏覽器對每個 byte 的傳輸權重是不同的
Image for post
Image for post
  • 範例網頁大量使用 Google web font,使用 preconnect 對字體資源的網域進行「預熱」可以節省 300 毫秒 (DNS Lookup, TLS handshake, etc.)
<link rel="preload" as="font" href="webfont.woff2" type="font/woff2" crossorigin="anonymous">
Image for post
Image for post

幫助瀏覽器儘早遞送關鍵資源的解決方案

  • critical origin: preconnect

實驗性功能:Priority Hints

Image for post
Image for post
  • 透過全新的 importnace 屬性提示瀏覽器該資源的優先權重,可指定的值有:low, high, auto
Image for post
Image for post
  • 背景圖片設為 low, Carousels 圖片設為 high,在緩慢 3G 網路環境有兩秒的差異

問題:當 Web Fonts 載入時,文字看不見

Image for post
Image for post
  • 使用 font-display: swap 修正問題

Web Font 載入策略的解決方案

  • font-display: swap 或 optional

NOTE: Zach leatherman 曾撰寫專文探討,不建議使用 optional,他推薦 swap 或 fallback https://www.zachleat.com/web/preload-font-display-optional/

問題:禁止轉譯的 JavaScript (Render-blocking scripts)

  • 外部 CSS 樣式表會禁止轉譯首次畫面繪製

關鍵渲染路徑優化

Image for post
Image for post
  • 將第一個畫面的 CSS 樣式 inline 到 style tag
Image for post
Image for post

減少禁止轉譯的 JS & CSS 的解決方案

  • inline 關鍵樣式 (第一個畫面) 到 <head>,並預先載入或非同步載入其他的樣式

Oodle Lab 範例網頁優化前後對照

Image for post
Image for post
  • source code: https://github.com/google/oodle-demo

企業網站案例研討 — Nikkei (日本最大媒體公司)

Image for post
Image for post
  • Nikkei 的優化細節成果

One More Thing — 機器學習 + 網站效能

Image for post
Image for post
  • 適用傳統網站的作法,prefetch 最可能瀏覽的下一頁網址
Image for post
Image for post
  • 適用 SPA 的作法,prefetch 最可能瀏覽的下一頁對應的 route JS bundle
Image for post
Image for post
Image for post
Image for post
  • 新的開源專案 Guess.js: https://github.com/guess-js
Image for post
Image for post
  • 紅色標示代表最常被瀏覽,黃色次之。

結語

改善效能是趟旅程,許多小改變方能促成豐碩成果

Written by

期許自己常保學習熱情的軟體工程師。 https://about.me/afutseng

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store