瞭解 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 提供及預先擷取功能加快網頁載入速度的網站。觀看演講瞭解詳情 :)