瞭解 2019 年 I/O 大會新推出的三項網頁效能。
在 2019 年 Google I/O 大會的「大規模速度」演講中，我們宣布了三項希望未來一年可以改善網站效能的三件事。
Lighthouse 現已支援效能預算
LightWallet 是 Lighthouse 的新功能，可支援效能預算。效能預算為網站效能製定標準。更重要的是，可在傳送前輕鬆找出及修正效能迴歸問題。
Light Wallet 適用於最新版 Lighthouse CLI，而且只要幾分鐘就能設定完畢。詳情請參閱這些 操作說明。
不確定要將多少預算設為多少嗎？歡迎試用實驗性效能預算計算工具，以產生與 LightWallet 相容的預算設定。
瀏覽器層級圖片和 iframe 延遲載入功能供網路使用
網頁通常包含大量圖片，導致資料用量、page-bloat 和頁面載入速度變慢。其中許多圖片都是畫面外，使用者必須捲動才能查看。
目前，您必須使用 JavaScript 程式庫解決延遲載入圖片的問題，但這可能很快就會變動。今年夏天，Chrome 將推出 loading 屬性支援功能，將標準化的 <img> 和 <iframe> 延遲載入發布到網路。
loading 屬性可讓瀏覽器延遲載入畫面外圖片和 iframe，直到使用者捲動畫面附近為止。loading 支援三個值：
lazy：適合延遲載入的候選文字。eager：不適合延遲載入。立即載入。auto：瀏覽器會判斷是否要延遲載入。
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
「使用者捲動附近時」的確切經驗法則由瀏覽器往上移。一般而言，我們希望瀏覽器先擷取延遲圖片和 iframe 內容，再進入可視區域。
loading 屬性是在 Chrome Canary 中透過旗標實作。在啟用 about://flags/#enable-lazy-image-loading 和 about://flags/#enable-lazy-frame-loading 標記的情況下，您可以在 Chrome 75 以上版本中試用這個試用版。
延遲載入功能的寫入功能提供更多詳細資料。
Google Fonts 現在支援將字型顯示做為查詢參數
我們宣布現在可以在實際工作環境中，透過顯示查詢字串參數，為所有 Google Fonts 提供 font-display 相關支援：
https://fonts.googleapis.com/css?family=Lobster&display=swap
font-display 描述元可讓您根據網頁字型的載入時間，決定網頁字型的顯示或備用方式。它支援多個值，包括 auto、block、swap、fallback 和 optional。
以往，如要從 Google Fonts 指定網路字型 font-display，唯一的方法就是自行代管字型，但這項變更可省去這項工作的麻煩。
Google Fonts 說明文件已更新，將 font-display 納入預設程式碼嵌入 (如下所示)。我們希望這可以鼓勵更多開發人員試用這個令人興奮的附加功能。
這個示範以介紹 Glitch 搭配多種字型系列使用。您可以試用開發人員工具網路模擬，瞭解 font-display: swap 的影響。
觀看更多內容
此外，我們還介紹了多項實際工作環境個案研究，探討如何使用進階效能模式改善使用者體驗。其中包括利用圖片 CDN、Brotli 壓縮、智慧型 JavaScript 提供及預先擷取功能加快網頁載入速度的網站。觀看演講瞭解詳情 :)