Aurora 新功能'

Kara Erickson
Kara Erickson
X

Chrome 的 Aurora 計畫結合了 Chrome 與開放原始碼 JavaScript 架構和工具，可改善使用者的網路體驗。如果你是 Aurora 新手，請參閱簡介貼文，進一步瞭解我們的使命和做法。

由於我們自 2021 年起就尚未發布產品藍圖，因此想與你分享 2023 年即將到來的精彩計畫。

近期專案重點

過去幾年來，我們一直與 Next.js、Angular 和 Nuxt 等架構合作，針對網站體驗核心指標進行最佳化調整。以下是自上次更新以來的重要功能。

圖片

圖片通常是效能問題的來源。Google 一直與架構相關人士合作採取下列做法，確保立即取得最佳做法，讓開發人員在使用我們合作的架構時，依預設以最佳方式提供圖片。

角度圖片指令

我們發布了 Angular 架構的穩定映像檔指令 (適用於 Angular 15)，並且特別向後移植至 13.4 和 14.3。這個指令會預設啟用原生延遲載入功能、為優先圖片加上 fetchpriority 提示，並自動為回應式圖片產生適當的 srcset 屬性。

影響：在使用映像檔指令前後，Lighthouse 實驗室測試在 Land's 品質確保環境執行。在電腦上，他們的最大內容繪製 (LCP) 值從 12.0 秒降低為 3.0 秒，LCP 下降 75%。

幻燈片比較：網站一 (含原生圖片標記) 與網站二 (附 Angular 圖片指令) 的比較。

如要進一步瞭解這個指令，請參閱使用 Angular 圖片指令最佳化圖片的網誌文章。

更新日期：next/image

我們也與 Next.js 團隊合作更新圖片元件，以使用原生延遲載入和 fetchpriority HTML 屬性等新的瀏覽器功能。自 13 月 13 日起，系統會預設提供新版本。

影響：我們的合作夥伴 Leboncoin 改用新版 next/image，使部分網頁的 LCP 提升多達 60%。

網頁字型

網站字型最佳化可能難以正確執行，因為這牽涉到縮減字型資源的傳輸大小。網頁字型也可以大幅影響頁面的累計版面配置位移 (CLS) 指標，而且要避免因字型切換而造成版面配置位移，要耗費大量心力。幸運的是，我們與相關架構合作，讓網頁程式開發人員能夠更輕鬆地執行這項工作。

改善 Next.js、Nutxt 和 Vite 中字型備用工具的工具

我們推出 Next 13 的新功能，可在載入時調整網頁備用字型的尺寸，讓字型更符合網頁字型。這可減少與字型相關的 CLS。我們與 Nuxt 團隊分享方法，成為 nuxtjs/fontaine 模組和 fontaine Vite 外掛程式 (兩者都使用相同的基礎演算法) 的靈感來源。

影響：合作夥伴 Vox Media 在使用這項功能後，成功在部分網頁中，成功將 The Verge 中的 CLS 降低至 0。

詳情請參閱產生改良後的字型備用架構和字型備用架構工具的網誌文章。

「nuxtjs/google-fonts」模組

我們與 Nuxt 團隊合作，推出一個模組，以便最佳化 Google Font 的效能。該模組會自動下載並自行代管 Google 字型，避免額外的伺服器往返作業，而且也支援字型內嵌選項。

第三方指令碼

第三方 JavaScript 是效能問題的潛在來源，並可能影響與下一個顯示的內容 (INP) 互動等指標，因為這些指令碼排程的工作可能會延遲使用者互動執行。

第三方指令碼專用的 next/script 元件

我們為 Next 12 以上版本建立了指令碼元件，預設會在補充水後載入指令碼，以免在載入期間封鎖重要路徑。它還提供整合 Partytown 的網路工作站模式，可將指令碼完全移出主執行緒。

影響：在 Lighthouse 研究室測試中，CareerKarma 在啟用工作站模式的情況下使用 next/script component 後，LCP 降低了 24%。

呈現 LCP 即興的膠片比較

詳情請參閱最佳化 Next.js 中的第三方指令碼載入作業網誌文章。

其他

我們與架構開發人員的合作關係不會因為改善網站體驗核心指標。同時，我們也致力於利用更多新功能，讓開發人員更容易開始使用尖端的網路平台功能。

容器查詢 polyfill

我們更新了容器查詢 polyfill，以便支援更多 CSS 功能並改善效能，預計為 1.0 版。

詳情請參閱我們的網誌文章：Inside the Container Query Polyfill。

極光接下來要做什麼？

我們在 2023 至 2024 年間推出了幾項令人期待的專案，旨在協助架構開發人員最佳化網站體驗核心指標。

未來一年，我們的重點放在：

  • 適用於 Next.js 和 Nuxt 的第三方包裝函式元件：包裝函式元件能以最適合 LCP 和 INP 的方式載入熱門的第三方程式庫。只要將元件標記拖曳至 DOM，即可載入第三方 (而非指令碼標記)，架構會選取最合適的載入策略。詳情請參閱 RFC。

  • Angular SSR 和水耕開發人員體驗：我們一直在 SSR 和水分專案的 Angular 團隊密切合作。我們著重於提升開發人員使用 SSR 的體驗，讓更多應用程式充分運用 LCP 優勢。敬請密切留意 SSR DOM 操控功能的官方 RFC。

  • Angular 圖片指令和 nuxt/image 功能：我們為 Angular 規劃了更多令人期待的功能，例如自動預先連線提示產生、能協助從基本 <img> 元素轉換、<picture> 元素支援和預留位置的遷移工具。我們也會向 Nuxt 團隊諮詢 nuxt/image 的多項新功能。

  • INP 研究 (跨架構)：由於與下一個繪製互動 (INP) 將於 2024 年取代首次輸入延遲時間 (FID)，因此我們擴大支援，改善架構中的 INP。這包括分析架構中 INP 問題的根本原因，並盡可能為架構使用者建立內建解決方案。

  • 速度計 3：我們也協助導入新一代基準化工具 Speedometer (加速計) 來呈現 2023 年的現代網路架構環境。

掌握最新資訊

只要將到達網頁加入書籤，就能隨時掌握 Aurora 團隊的最新消息、科技講座和網誌文章。您也可以在 Twitter 上追蹤我們：