瞭解 Web 平台資訊主頁，以及如何查詢其 HTTP API，取得已達到基準的功能資料，以便為開發工作流程建構工具。

隨著 Core Web Vitals 的重要性越來越高，網站擁有者和開發人員也越來越重視效能和關鍵使用者體驗。雖然 Google 提供許多工具協助您評估、最佳化及監控網頁，但使用者往往對各種資料來源，以及有效運用網頁的方式感到困惑。本指南提出整合多項工具的工作流程，並闡明這些工具在開發過程中的執行位置和方式。

瞭解 2025 年 2 月期間的各種基準資料。

ruby-align 現已納入 Baseline

發布日期：2025 年 2 月 20 日 穩定下載大型 AI 模型是一項艱鉅的任務。如果使用者無法連上網際網路或關閉網站或網頁應用程式，就會失去部分下載的模型檔案，並必須在返回網頁時重新開始。使用 Background Fetch API 做為漸進式增強功能，可大幅改善使用者體驗。 Browser Support Source 背景擷取 API 要求應用程式 註冊服務工作者 。

瞭解 rel=prefetch 資源提示與使用方法。

瞭解如何找出並修正版面配置位移。

「累計版面配置位移 (CLS)」是一項指標，可量化使用者在網頁內容突然改變的頻率。本指南將探討最佳化 CLS 的常見原因，例如沒有尺寸或動態內容的圖片和 iframe。

CSS 的 scrollbar-color 和 scrollbar-gutter 已在所有主要瀏覽器引擎中推出，因此已納入新基準。

這份「Baseline」月報的第一期內容，涵蓋 2025 年 1 月 Google 和網頁開發人員社群的「Baseline」相關動態。

WebAssembly 垃圾收集和 Wasm 尾端呼叫最佳化功能現已在所有主要瀏覽器引擎中推出，並列為新基準。

本文介紹「最大內容繪製」(LCP) 指標，並說明如何評估這項指標

Promise.try 現已在所有主要瀏覽器引擎中推出，因此可供新基準使用。

簡短說明

發布日期：2024 年 1 月 13 日 您可以使用 AI 建構許多令人驚豔的專案，包括經典機器學習模型和較新的大型語言模型 (LLM)。有了大型語言模型，電腦就能產生新內容、撰寫摘要、分析文字情緒等等。過去幾年，使用者有機會使用 Gemini 和 ChatGPT 等應用程式，這些應用程式會運用進階自然語言處理 (NLP) 技術，與使用者進行對話。 Google 開發人員專家 Christian Liebel 曾撰文說明如何使用 LLM 在網站或網頁應用程式中加入聊天機器人。 本系列課程將說明：

你' 被跟上 #34;don' 請封鎖主要執行緒

CSS 遮罩可讓您選擇使用圖片做為遮罩圖層。也就是說，您可以使用圖片、SVG 或漸層做為遮罩，不必使用圖片編輯器，就能創造有趣的效果。

web-features 資料集、Web 平台狀態資訊主頁、基準狀態小工具等等！回顧 2024 年的基準。

本文將說明延遲載入功能，以及延遲載入影片的選項。

模組預先載入功能可讓您提前以宣告的方式載入 JavaScript 模組。

為了改善使用者體驗，您必須瞭解使用者與表單的互動方式。瀏覽器自動填入功能在這項流程中扮演重要角色。瞭解如何收集及分析使用者在表單中使用自動填入功能的資料。

有害內容偵測功能可保護使用者，並打造更安全的線上環境。在第二部分，我們將學習如何建構用戶端 AI 工具，以便偵測並減輕有害內容的來源。

本文將介紹「總封鎖時間」(TBT) 指標，並說明如何評估

一系列 Chrome 認為可改善網站效能和網站體驗核心指標的最佳做法

逐步指南，說明如何細分 LCP，並找出需要改善的關鍵領域。

網站健康狀態良好的重要指標

瞭解如何在實際環境和實驗室環境中評估網站的網站體驗指標。

CSS 內容瀏覽權限屬性現已成為「基準新推出」。

網站體驗核心指標門檻的研究和方法

您已查看欄位資料，發現互動速度偏慢。下一步是進一步瞭解如何手動測試這些互動，並找出這些互動背後的原因。

本文將說明 Baseline 的起源故事、Google 的參與情形，以及 WebDX 社群群組的擁有權。

瞭解如何最佳化使用瀏覽器和上一頁按鈕時，立即載入的網頁。

CSS 巢狀結構功能大幅提升！

瞭解如何利用偵錯資訊為成效資料歸因，以便透過 Analytics (分析) 找出並修正使用者實際的問題

本文將介紹「首次輸入延遲時間」(FID) 指標並說明如何測量。

瞭解如何使用 Google 工具，將 Core Web Vitals 與廣告收益建立關聯。

@property 對 CSS 效能有何影響？

在瀏覽器中儲存資料的選項有很多種。哪一個選項最符合你的需求？

這篇文章將介紹載入屬性，以及如何使用載入屬性控制 iframe 的載入作業。

探索建議和非建議的方法，建構重複使用相同網域的多個 PWA，同時具備優缺點。

互動式逐步教學課程：瞭解如何建立一個伺服器，用於管理推播通知訂閱，以及將網路推送通訊協定要求傳送至推送服務。

優質或優質的漸進式網頁應用程式為何？

變更 PWA 網頁應用程式資訊清單中的圖示、捷徑、顏色和其他中繼資料。

漸進式網頁應用程式安裝標準。

網頁應用程式資訊清單是一個簡單的 JSON 檔案，可向瀏覽器說明網頁應用程式的行為。

瞭解如何根據指令碼 Nonce 或雜湊部署 CSP，藉此防範跨網站指令碼攻擊。

本文可協助網頁開發人員根據指定裝置選擇合適的硬體 API。

瞭解如何使用相關來源要求，允許在各網站上重複使用密碼金鑰。

選取合適的圖片格式，是在網站上提供最佳化圖片的第一步。這篇文章可協助你做出正確的選擇。

這篇文章將說明載入屬性，以及如何運用這個屬性控制圖片載入。

您可以運用自訂指標，評估並最佳化網站特點和網站體驗。

瞭解如何將 Web Vitals 資料傳送至 Google Analytics 4 資源，並匯出資料以便在 BigQuery 和 Looker Studio 中進行分析。

本指南將概述要求使用者授予相機、麥克風和位置資訊等機密功能存取權時，網站可採用的最佳做法，盡量減少不必要的提示，並禁止存取這類功能。

瞭解 Cookie 通知對成效、成效評估和使用者體驗的影響。

網頁開發人員可以自訂媒體通知，並回應媒體相關事件，例如透過 Media Session API 搜尋或追蹤變更。

使用 tabindex 屬性明確設定元素's 分頁位置。

在研究室中重現緩慢互動，以便最佳化您的網站's 與下一個顯示的內容互動，您需仰賴現場資料請參閱本指南，瞭解如何操作。

本文將介紹「第一個位元組時間」(TTFB) 指標以及評估方式。

瞭解如何調整提示，讓不同的大型語言模型、模型和模型大小達到你偏好的結果。

本文將介紹「與下一個顯示的內容互動」(INP) 指標，並說明其運作方式和評估方式，並提供改善建議。

description：使用 light-dark() 函式定義對使用色彩配置做出反應的顏色。

本指南是以想要使用 WebAssembly 的網頁開發人員為目標對象，您將會瞭解如何運用 Wasm 將大量 CPU 的工作外包，藉此執行一個實例。

在 CSS 格線中，「grid-template-columns」和「grid-template-rows」屬性可讓您分別定義行名稱，以及追蹤格線欄和列的大小。支援這些屬性的內插功能可讓格線版面配置在狀態之間流暢轉換，而不是在動畫或轉換的中點。

瞭解如何透過 Gamepad API 控制網路遊戲。

inert 屬性是全域 HTML 屬性，可簡化如何移除和還原元素的使用者輸入事件，包括輔助技術的焦點事件和事件。

依賴方可以檢查 AAGUID，判斷密碼金鑰的來源。瞭解運作方式。

以名為 ExampleScript 的合成玩具語言範例，瞭解如何使用 Binaryen.js API，在 JavaScript 中編寫 WebAssembly 模組並進行最佳化。

音訊/視訊擷取功能一直是網站開發人員長久以來的「聖杯」 。多年以來，我們都必須依賴瀏覽器外掛程式 ( Flash 或 Silverlight ) 才能完成工作。 Come on! HTML5 可解決這個問題。雖然不明顯，但 HTML5 的興起也帶來了裝置硬體存取權的激增。 地理定位 (GPS)、 Orientation API (加速計)、 WebGL (GPU) 和 Web Audio API (音訊硬體) 都是很好的例子。這些功能非常強大，可公開高層級 JavaScript API，這些

「<model-viewer&gt」網頁元件可讓您以宣告的方式在網頁上使用 3D 模型。

瞭解如何在 WebAuthn 中使用「userVerification」

瞭解為何 RUM 資料可能會顯示與 CrUX 不同的網站體驗核心指標數據。

重點在於打造多元包容且易於存取的網站。至少六個身心障礙可供改善的領域有六個：視覺、聽覺、行動能力、認知、語音和類神經網路。

第三方指令碼提供各種實用功能，讓網路更生動。瞭解如何最佳化第三方指令碼載入，降低對成效的影響。

瞭解如何禁止使用者建立新的密碼金鑰 (如果使用者與密碼管理工具中已有密碼金鑰)。

IndexedDB 基本概念指南。

值得您立即使用、功能強大且穩定的 CSS。

瞭解如何最佳化「第一個位元組時間」指標。

主機、網站和來源有何不同？什麼是 eTLD+1？本文將說明。

瞭解可搜尋的憑證，以及如何打造符合用途的使用者體驗。

使用者會注意到網站和應用程式是否運作不佳，因此最佳化轉譯效能至關重要！

當元素'內容矩形大小變更時，`ResizeObserver` 會通知您，以便您進行相應的回應。

想要提高網頁載入速度，最好的方法就是減少整體下載大小，盡可能減少並壓縮剩餘資源。

本文說明如何使用 OffscreenCanvas API 提升網頁應用程式的圖形算繪效能。

本文將介紹「首次顯示內容所需時間 (FCP)」指標，並說明該如何評估這項指標

本文提供內容傳遞聯播網 (CDN) 的完整總覽。此外，本文也會說明如何選擇、設定和最佳化 CDN 設定。

實用開發人員指南，瞭解使用者登出網站時的處理方式。

本文將介紹「互動準備時間」(TTI) 指標，並說明該如何評估

擷取優先順序 API 會指出資源與瀏覽器的相對優先順序。不但能最佳化載入，還能改善網站體驗核心指標。

關於 :user-valid 和 :user-invalid 虛擬類別，以及如何使用這些虛擬類別來改善輸入驗證的使用者體驗。

瞭解業務決策者和非開發人員如何改善網站體驗核心指標。

瞭解將 Base64 編碼和解碼套用至字串時的常見問題，並加以避免。

子格狀檢視可讓您共用格線，讓巢狀格線對齊祖系和同層級。

在現今的數位世界中，線上廣告是我們享有的免費網路的重要一環。不過，如果廣告導入方式不當，可能會導致瀏覽速度變慢，使用者因此感到不耐煩，進而降低參與度。瞭解如何有效載入廣告，不影響網頁速度，確保使用者體驗流暢，並為網站擁有者提供最佳收益機會。

瞭解什麼是程式碼涵蓋率，並探索四種常見的評估方式。

決定需要測試的項目和可排除的項目。

決定要測試的內容、定義測試案例和決定優先順序。

以使用者為中心的成效指標，才能讓使用者瞭解並改善網站體驗，是相當重要的工具。

瞭解預先載入回應式圖片的新功能，確保絕佳的使用者體驗。

根據使用者喜好調整字型的方法

探索如何將不同的測試類型結合成適合專案的合理策略。

讓我們從基本概念開始吧！探索兩種一般測試模式和三種常見的測試自動化類型。

您應該定期稽核資源，確保每項資源都能帶來更優質的使用者體驗。

mkbitmap C 程式會讀取圖片，並依序套用下列一或多項操作：反轉、高傳遞篩選、縮放和閾值。每項作業都可個別控制及開啟或關閉。本文說明如何將 mkbitmap 編譯為 WebAssembly。

簡介 WebAssembly (有時縮寫 Wasm)、可攜式二進位程式碼格式、可執行程式的對應文字格式，以及軟體介面，以促進此類程式與主機環境之間的互動。

檔案系統標準引進了來源私人檔案系統 (OPFS)，做為頁面來源的私人儲存空間端點，且對使用者隱藏，可選擇存取效能經過高度最佳化的特殊檔案。 來源私人檔案系統受到新式瀏覽器的支援，並由 Web Hypertext Application Technology Working Group ( WHATWG ) 在 檔案系統 Living Standard 中標準化。 瀏覽器支援 資料來源 提到電腦上的檔案，你可能會想到檔案階層：檔案以資料夾分類，你可以透過作業系統的檔案總管瀏覽。舉例來說，在

如何在網頁應用程式安全顯示使用者控管的內容。

概略說明如何在生態系統中採用 AVIF 技術，以及 AVIF 對靜態圖片和動畫的執行效能和品質可為開發人員帶來哪些助益。

瞭解如何最佳化網站's 與下一個顯示的內容互動。

只瞭解 Baseline 中的部分功能。

輸入延遲時間會大幅增加總互動延遲時間，並對網頁 INP 造成負面影響。本指南將說明什麼是輸入延遲時間，以及如何縮短等待時間以加快互動速度。

使用 JavaScript 轉譯 HTML 與轉譯伺服器傳送的 HTML 不同，後者會影響效能。本指南將說明差異之處，以及您可以採取哪些做法來維持網站轉譯成效，特別是在會評估互動的地方。

DOM 大小較大，可能影響互動速度是否快速。進一步瞭解 DOM 大小和 INP 之間的關係，以及當網頁含有大量 DOM 元素時，該如何縮減 DOM 大小以及其他限制轉譯工作的方法。

載入指令碼時，瀏覽器需要一段時間才能完成評估，因此可能會拉長工作執行時間。瞭解指令碼評估的運作方式，以及如何避免在網頁載入期間造成長時間工作。

透過 WebAssembly 在瀏覽器中執行由 PHP 提供的完整 WordPress

本文將介紹「累計版面配置位移」(CLS) 指標，並說明衡量方式。

WebAssembly 感謝 WebAssembly 新推出的網路工具。

漸進式網頁應用程式可以提交至應用程式商店，例如 Android Play 商店或 Microsoft Store 等。

運用來源地圖改善網路偵錯體驗。

值得您立即使用、功能強大且穩定的 CSS。

在 CSS 中計算正弦、餘弦、正切等值。

requestVideoFrameCallback() 方法可讓網頁作者註冊新的視訊影格傳送至合成器時，在轉譯步驟中執行的回呼。

一系列與 Google Developers 專家 (GDE) 計畫成員的訪談內容。

讓我們使用範圍限定的自訂屬性和 background-clip，製作動畫漸層文字效果 前往 CodePen 並建立新的筆記。 建立文字的標記。我們來使用標題，標題中包含「Speedy」這個字詞： 接著，讓我們為 body 提供較深色的 background-color ： 提高文字的 font-size 使用 clamp 讓它回應式： 為要使用的顏色建立兩個自訂屬性。使用這些顏色將 linear-gradient 套用至 background ，並旋轉 90 度：

這篇網誌文章說明瞭媒體應用程式的全新模式集合。

看這款 Chrometober 的捲動式書本來就此改變，分享有趣又令人恐懼的秘訣和技巧。

瞭解如何建立可自動調整且可存取的工具提示自訂元素，基本總覽。

密碼金鑰可讓網站更安全、更容易使用及設定密碼。本文說明如何設計使用密碼金鑰進行無密碼登入機制，同時滿足現有的密碼使用者需求。

密碼金鑰可讓網站更安全、更容易使用及設定密碼。本文將說明如何允許使用者建立您網站的密碼金鑰。

概略說明如何建構色彩自動調整、回應及存取的懸浮動作按鈕 (FAB) 元件。

瞭解如何根據網站體驗核心指標調整網頁字型。

一系列與 Google Developers 專家 (GDE) 計畫成員的訪談內容。

概略說明三種工具和技巧，可用於測試及驗證設計的無障礙色彩對比。

讓我們使用範圍限定的自訂屬性和 animation-timing-function 製作動畫 CSS 載入器 前往 CodePen 並建立新的筆記。 為載入器建立標記。請注意內嵌自訂屬性的使用方式： 您也可以使用產生器 ( Pug ) 設定行數： 為我們的載入器提供一些樣式： 使用絕對定位和 calc 與 transform 的組合來定位線條： 根據 --index 套用不透明度： 讓一切運作起來！ 請注意，您必須使用 steps(var(--count)) 才能獲得正確的效果 ✨ 完成！🎉

本教學課程說明如何建立網站易於存取的主要導覽功能。你會瞭解語意式 HTML 和無障礙功能，以及使用 ARIA 屬性有時對這些方面造成太大的傷害。

這個實用的 CSS 虛擬選取器可讓您選取強制回應的元素。

針對 Core Web Vitals 將代碼和代碼管理工具最佳化。

介紹一些實用又有創意的清單樣式設定。

以趣味探索的方式，探索如何使用 CSS 重現光學錯覺。

在設計系統和元件程式庫中使用自訂屬性的好處。

瞭解如何使用個別的平移、旋轉和縮放 CSS 屬性，以直覺的方式做出轉換。

瞭解在 CSS 中為邊框加上動畫的幾種方式

BBC 為自家網站推出 HSTS，藉此提升安全性和效能。瞭解意義，以及 HSTS 可為您提供哪些協助。

瞭解監控網站體驗核心指標指標報告後，出現不同數據的原因，以及如何解讀差異。

GDE Enrique Fernandez Guerra 公開 NGO HelpDev 的原始碼。

哪些停止支援 Internet Explorer 是 Maersk.com 的客戶和開發人員。

長久了，HTML5Rocks，這個就是這麼長的意思，很高興聽到你這麼說。

瞭解如何設定第一方 Cookie，以確保安全性、跨瀏覽器相容性，並在第三方 Cookie 淘汰後將服務中斷的可能性降到最低。

Web Audio API 可讓您輕鬆實現影音同步。

圓錐漸層可用於製作有趣的效果，例如這款漂亮的邊框範例。 這個由 Adam Argyle 建立的 CodePen 最初是透過 Twitter 上的這則 推文 分享，說明如何使用 圓錐漸層 建立邊框。 Terry Mun 以創意 分支 Adam 的 CodePen，並建立了這個 CodePen 。將滑鼠游標移至元素上，您會看到漸層變化，這是因為 JavaScript 更新了儲存旋轉角度的 CSS 自訂屬性。 這些範例使用 border-image-source

瞭解在用戶端 JavaScript 環境中，架構和程式庫之間的差異。

在使用 Fetch API 時擷取錯誤。

瞭解使用 JavaScript 程式庫或架構的相關決策。

Google Fonts CSS API 的最新消息，包括運作方式、使用方式，以及該 API 如何有效率地傳送網路字型。

這項資源可協助您快速找到終端機。

GOV.UK 從前端捨棄了 jQuery 依附元件。(可以。)

概略說明如何建構色彩自動調整、回應及無障礙元件。

瞭解瀏覽器預先載入掃描器的用途、對效能的助益，以及如何避免干擾效能。

簡化建構網頁的方式。

如何使用目前的分析工具評估網站體驗指標

網路 Google Developers 專家，說明輔導計畫如何協助他們成為領袖。

分享有關可變字型的實用指南，並附上大量範例。

這個工具由 Josh W Comeau 提供，讓您可以輕鬆建立精美的漸層。

透過一系列對於網頁開發人員的對話，收集了關於重大問題點的深入分析。

查看圖片工具的狀態。

瞭解範圍和在 JavaScript 中的運作方式。

基礎概略說明如何使用 `` 元素，建立可自訂顏色、回應式且符合無障礙設計的迷你和超大型模式對話方塊。

瞭解如何在網路上偵錯媒體播放錯誤。

一系列與 Google Developers 專家 (GDE) 計畫成員的訪談內容。

在初始檢視區內積極載入圖片，並放寬延遲載入其餘圖片，即可改善 Web Vitals，同時減少載入的位元組數。

概略瞭解如何使用 `` 元素建構色彩自動調整和無障礙載入列。

盡可能簡化註冊和登入表單。 儲存登入表單中的憑證，這樣使用者回訪時就不必再次登入。 如要儲存表單中的使用者憑證，請按照下列步驟操作： 繼續操作前，請檢查表單是否包含 autocomplete 屬性。這有助於憑證管理 API 從表單中找出 id 和 password ，並建構憑證物件。 這也能協助不支援憑證管理 API 的瀏覽器瞭解其語意。如要進一步瞭解自動填入功能，請參閱 這篇文章 ，作者為 Jason Grigsby 。 當使用者按下提交按鈕時，請禁止表單提交，否則會導致網頁轉換：

使用者代理程式字串變更、Chrome 和 Firefox 為減輕影響而採取的策略，以及您可以提供哪些協助。

說明如何打造自動調整式網站小圖示的基本知識。

如果忘記或濫用 Cache-Control 標頭，可能會對網站和使用者的安全性造成負面影響，#39; 隱私。取得高價值網站的推薦。

瞭解如何使用 Emscripten，將 2D 圖形算繪到 WebAssembly 網路上的畫布。

網站健康狀態良好的重要指標

瞭解 gPhoto2 是如何移植到 WebAssembly，以透過 USB 從網頁應用程式控制外部相機。

使用網路錯誤記錄 (NEL) 收集用戶端網路錯誤。

瞭解如何使用最新的 WebAssembly 功能，同時支援所有瀏覽器的使用者。

瞭解如何使用 WebAssembly 和 Fugu API，將與外部裝置互動的程式碼移植到網路。

說明如何建構可自動調整且易於存取的主題切換元件。

瞭解如何在 WebAssembly 程式庫中嵌入 JavaScript 程式碼，與外界通訊。

Oculus Quest 2 是由 Oculus (屬於 Meta 部門) 打造的虛擬實境 (VR) 頭戴式裝置。開發人員現在可以運用 Oculus Quest 2's 多工處理功能，建構及發布 2D 和 3D 漸進式網頁應用程式 (PWA)。本文說明相關體驗，以及如何在 Oculus Quest 2 上建構、側載及測試 PWA。

一窺 Designcember 用來打造節慶日曆風格體驗的流程和工具。

嘗試在網路上重建太陽能計算機，以使用環境光感測器和視窗控制重疊功能進行模樣。

過去，您必須仰賴解決方法和程式庫，才能建立 JavaScript 值的深度副本。平台現已隨附「structuredClone()」這種深度複製的內建函式。

說明如何建構自動調整式和無障礙浮動式訊息元件的基本總覽。

宣布 Chrome 推出 UI 基金，為設計工具、CSS 和 HTML 的使用者提供補助。

概略說明如何建構回應式、自動調整式且易於存取的 3D 遊戲選單。

瞭解如何測量動畫、思考動畫影格的方式，以及整體頁面的流暢度。

2021 年 Chrome 開發人員高峰會所有重要公告的匯報，您可透過連結深入瞭解相關資訊。

試用全新的 Lighthouse API 來衡量使用者流程的效能和最佳做法。

瞭解 PageSpeed Insights 的最新相關資訊，協助您更準確地評估網頁和網站品質，並提升網站品質。

過去三年來，Chrome 持續致力於提供強大的網頁應用程式，讓希望瀏覽器實現無限可能。其中一個網頁應用程式就是 Photoshop直接在瀏覽器中執行軟體就像使用 Photoshop 一樣相當複雜，難以在幾年前實現這個構想。不過，藉由使用各種新的網路技術，Adobe 現在對 Photoshop 的線上版本提供了公開測試版。

概要說明如何建構可自動調整、自動調整和存取的複選元件，來排序及篩選使用者體驗。

瞭解使用 Navigation 和 Resource Timing API 評估欄位中載入效能的基本概念。

新的 Sanitizer API 旨在打造強大的處理器，讓任意字串安全地插入網頁中。本文將介紹這個 API，並說明其使用方式。

本文件說明載入第三方嵌入項目時可以使用的效能最佳做法、高效率的載入技術，以及有助於減少熱門嵌入項目的版面配置位移工具。

針對 SPA 中心、網站體驗核心指標和 Google&#39 的常見問題提供解答，為因應目前的評估限制措施。

preventDefault 和 stopPropagation ：使用時機和各個方法的具體功能。 JavaScript 事件處理通常很簡單。處理簡單 (相對平面) HTML 結構時，這一點尤其重要。不過，如果事件是透過元素階層傳遞 (或傳播)，情況就會複雜一些。這通常是開發人員為瞭解決所遇到的問題，而尋求 stopPropagation() 和/或 preventDefault() 協助的情況。如果您曾想過：「我來試試 preventDefault() ，如果沒效，就試試