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

取得 PushSubscription 並儲存至伺服器後，自然會觸發推播訊息，但我明目張膽地略過了其中一個步驟。要求使用者授權傳送推播訊息時的使用者體驗。 很遺憾，很少網站會認真考量如何向使用者要求權限，因此我們先來簡單看看良好和不良的使用者體驗。 我們發現了幾種常見的模式，可在您決定最適合使用者和用途的做法時，提供指引和協助。 在使用者明顯感受到好處時，要求他們訂閱推播通知。 舉例來說，使用者剛在網路商店購買商品並完成結帳流程。網站就能提供最新的運送狀態。 這種做法適用於多種情況：

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

決定何時使用 polyfill 可能很難，但使用基準功能有助於回答這個問題。詳情請參閱本指南！

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

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

ruby-align 現已納入 Baseline

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

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

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

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

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

Emscripten 中的 WasmFS 和 mimalloc 功能，可大幅提升分配和 I/O 效能。本指南將說明這些功能如何在某些情況下，將速度提升 10 倍以上。

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

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

簡短說明

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

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

使用 Web Payments 進行付款交易時，第一步就是探索付款應用程式。瞭解如何設定付款方式，並讓商家和客戶能夠透過應用程式付款。

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

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

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

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

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

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

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

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

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

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

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 中標準化。 Browser Support Source

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

概略說明如何在生態系統中採用 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() ，如果沒效，就試試

瞭解如何從 JavaScript 匯入及組合各種素材資源，以便在瀏覽器和軟體包中順利運作。

說明如何建構無障礙分割按鈕元件的基本總覽。

瞭解如何使用 CSS 模組指令碼，使用與 JavaScript 模組相同的語法匯入 CSS 樣式表。

透過一行程式碼，在內建的 HTML 表單輸入內容中使用品牌顏色。

說明如何建構回應式且無障礙開關元件的基本總覽。

一組用戶端提示標頭可讓網站在要求時選擇取得使用者的媒體偏好設定，讓伺服器可基於效能考量內嵌正確的 CSS。 CSS 媒體查詢，尤其是 使用者偏好媒體功能 (例如 prefers-color-scheme 或 prefers-reduced-motion )，可能會對網頁需要傳送的 CSS 數量，以及使用者在網頁載入時的體驗，造成 重大影響 。 請將重點放在 prefers-color-scheme

說明如何打造回應式且易於存取的導覽標記元件，方便使用者瀏覽您的網站。

瞭解如何將以其他語言編寫的多執行緒應用程式導入 WebAssembly。

媒體串流是一種可從伺服器持續傳遞多媒體內容的方法，在內容已分割成個別的資料區塊後，透過 DASH 和 HLS 等通訊協定，在播放期間，可透過特定順序要求將多媒體內容合併為個別資料區塊。

媒體架構具備專屬開放原始碼和開放原始碼，其核心是一套 API，可支援針對各種容器格式和傳輸通訊協定播放音訊和/或視訊。

透過離線直播建構 PWA 是一大挑戰。本文將說明為使用者提供高品質離線媒體體驗的 API 和技術。

瞭解數位版權管理概念，以及透過 Clear Key 或 Widevine 加密功能，從原始移動檔案傳輸至為 MPEG-DASH 或 HLS 封裝的加密媒體所需的指令。

說明如何建立動態及可設定色彩配置的基本總覽

載入網路字型時，您現在可以調整縮放比例，將文件字型大小正規化，避免在切換字型時發生版面配置位移

在行動裝置上提供電腦版顯示大小的圖片，可能會消耗多 2 到 4 倍的數據。與其 a "one-size-fits-all" 改用不同尺寸的圖片，為不同裝置提供不同尺寸的圖片。

本文說明將網站體驗指標最佳化的 CSS 相關技巧。

即日起，我們將在許多 Chrome&#39 網路工具介面上推出 CLS 更新內容，包括 Lighthouse、PageSpeed Insights 和 Chrome 使用者體驗報告。

這些看似微不足道的 CSS 選取器語法會有很大的影響。

我們全新推出的六期漸進式網頁應用程式訓練課程現已上架，包含一系列新程式碼研究室，教你如何建構可靠、可安裝且支援的 PWA。

根據使用者偏好提供的媒體功能、容器查詢，以及新螢幕類型 (例如折疊式螢幕) 的媒體查詢，將使我們能夠適應新世代的回應式網頁設計。

讓網站從依使用者代理程式字串遷移至新的 User-Agent Client Hints 的策略。

Thomas Steiner&#39；在 2021 年 Google I/O 大會講座中，標題為「Excalidraw」和「Fugu：改善核心使用者歷程

本文將列出您可以用來保護網站的最重要安全性標頭。這些資訊可協助您瞭解網站式安全性功能、瞭解如何在網站上實作這些功能，並在需要提醒時提供實用參考資訊。

Service Worker 可使用靜態匯入的 ES 模組匯入額外程式碼，做為 importScripts() 的替代方案。

說明如何為電視、手機、電腦等裝置建立回應式水平捲動檢視畫面。

今天我們要介紹 Lighthouse、PageSpeed 和 DevTools 中的新工具功能，以協助您找出網站能提升網站體驗指標的成效。

瞭解如何在將傳統同步語言編譯為 WebAssembly 時，叫用非同步網頁 API。

開發人員可以使用「視窗控制重疊」功能自訂已安裝 PWA 的標題列，讓應用程式的 PWA 感覺更像應用程式。

第三方指令碼或 "tags" 可能是網站效能問題的來源，因此也是進行最佳化的目標。不過，在開始最佳化您新增的代碼之前，請先確定您沒有最佳化自己不需要的代碼，甚至不需要 #39 最佳化。本文將說明如何評估新代碼的要求，以及管理和審查現有代碼。

DataTransfer 物件會保留在拖曳作業期間拖曳的資料。其可存放一或多個資料項目，每個資料項目也可以包含一或多個資料類型。本文說明 DataTransfer API 的各項功能。

WebOTP API 現在可以在 iframe 內接收動態密碼。

說明如何建構分割字母和字詞動畫的基本總覽。

以更公平的方式改善 CLS 指標。

網頁程式開發人員滿意度是 Google 專案，目的是收集網頁程式開發人員需求的相關資訊。我們的目標是成為更可靠、更容易預測且互通的網路平台，讓開發人員能投資並信任這個平台，並採用及運用新功能推動平台和業務成長。

說明如何建立包含滑桿和核取方塊的設定元件。

在 JavaScript 中，定義 `this` 的值可能有點難度，這裡&#39 是怎麼做到的...

本章節會介紹一系列有趣的迷你應用程式開放原始碼專案。

本章節詳細說明所有迷你應用程式平台提供的元件。

本章節提供 H5 應用程式和 QuickApp 的背景，這兩款應用程式與迷你應用程式不同。

本章節會說明專案結構、生命週期，以及迷你應用程式組合。

本章節的結論是迷你應用程式系列的結論，也就是跳脫框架思考，再從 G&#39 以外的地方收集意見和靈感，進而在網路上打造更美好的未來。

本章節會介紹針對迷你應用程式進行程式設計的方法。

本章節會介紹各種迷你應用程式平台的標記、樣式、指令碼和更新選項。

本章節範例專案是以 " 程式設計方式，為最小的應用程式進行編碼" 做法的範例專案。

Streams API 可讓 JavaScript 透過程式存取透過網路接收的資料串流，並視需要進行處理。

如何建立與 iOS 和 Android 應用程式類似的分頁元件的基本總覽。

跨來源隔離可讓網頁使用 SharedArrayBuffer 等強大功能。本文將說明如何在網站上啟用跨來源隔離功能。

Origin-Agent-Cluster 標頭會終止對同一網域中其他來源的同步存取權，並會提示瀏覽器以提供來源專屬資源。

新的顯示比例 CSS 屬性現在可更輕鬆地維持圖片和元素中的長寬比。

瞭解如何最佳化輪轉介面來提高效能和可用性。

概略介紹 WebRTC 的歷史、架構、用途與未來。

在大多數情況下， http://localhost 會以 HTTPS 的形式運作，以利開發。不過，在某些 特殊情況 下 (例如自訂主機名稱或跨瀏覽器使用安全 Cookie)，您必須明確設定開發網站的運作方式，以便模擬網站在實際環境中的運作情形。(如果您的正式版網站未使用 HTTPS，請 優先改用 HTTPS )。 本頁面說明如何在本機上透過 HTTPS 執行網站。 如需簡短操作說明，請參閱 mkcert 快速參考資料 。 如要使用 HTTPS 與本機開發網站，並存取

瞭解我們如何改善「累計版面配置位移」指標，並提供意見回饋。

在大多數情況下，使用 http://localhost 進行本機開發作業都沒問題，但在某些特殊情況下則不行。本文說明何時需要透過 HTTPS 執行本機開發網站。 另請參閱： 如何在本機開發環境中使用 HTTPS 。 在本篇文章中，關於 localhost 的陳述式也適用於 127.0.0.1 和 [::1] ，因為兩者都描述本機電腦位址，也稱為「迴送位址」。此外，為簡化操作，我們並未指定通訊埠號碼。 因此，當您看到 http://localhost 時，請讀作

瞭解如何建構回應式投影片側邊導覽版面配置元件。

如何建立回應式投影片側邊導覽列的基本總覽

運用 5 項著重學習技巧來完成一系列測試，瞭解哪項技術最能應對變革。

瞭解 CSS 的 5 種不同置中技巧。

第一次載入效能很重要，但 #39 並非一切。因此，再次載入網站的使用者將利用快取來存取內容，因此必須確保網站執行速度和準確性，才能順利存取內容。

瞭解如何實作跨瀏覽器 Houdini Paint API's，與 Houdini.how 一起探索霍迪尼作品台的世界。

全新模組化工具，可自動收集來自多個來源的效能資料。

協助使用者盡可能快速輕鬆地填寫地址和付款表單，提高轉換率。

使用跨平台瀏覽器功能建立簡易的註冊表單，讓安全、存取和使用起來更方便。

瞭解地址表單的最佳做法。

要求使用者提供透過簡訊提供的動態密碼 (動態密碼) 是確認使用者電話號碼的常見原因。本文將介紹如何建立簡訊動態密碼表單，提供優質使用者體驗。

瞭解付款方式的最佳做法。

協助使用者註冊、登入及管理帳戶詳細資料，盡量減少麻煩。

如何通訊視窗和服務工作站，以執行與效能、快取和離線相關的工作。

網頁工作人員和服務工作處理程序如何改善網站的效能，以及何時使用網路工作程式與服務工作處理程序。

服務工作處理程序如何主動與網頁溝通，以掌握特定事件。

如何在網頁與 Service Worker 之間建立雙向通訊管道。

網頁應用程式現在可在擷取指標事件時，停用滑鼠加速功能。

瞭解如何在網路上建立與 Instagram 限時動態類似的體驗。

說明如何在網路上發布類似 Instagram 故事體驗的基本簡介。

本文將介紹如何在內容管理系統中採用載入屬性。

"same-site&#34 的定義已改為包含網址配置，因此，現在網站 HTTP 和 HTTPS 版本之間的連結會視為跨網站要求。預設升級至 HTTPS，以免發生問題，或是繼續閱讀相關說明，瞭解需要哪些 SameSite 屬性值。

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

互動式逐步教學課程，說明如何建構用戶端來訂閱推播通知、顯示推播通知，以及取消訂閱使用者來自推播通知。

概略介紹推播通知的定義、使用方式和運作方式。

如何追蹤網站的離線使用狀況，協助撰寫網站需要改善離線體驗的原因。

示範如何運用高效能技巧製作複雜而精美的動畫。

SXG 是一種傳遞機制，可以讓資源不受傳送方式影響，可以同時驗證資源來源。

最小、最大和取值範圍提供了強大的 CSS 功能，讓您不必編寫多餘的程式碼，即可打造回應式樣式。本文將介紹如何控制元素大小、維持適當的間距，以及如何使用以下受眾支援的 CSS 數學函式實作流體字體排版。

新的邏輯屬性縮寫和 Chromium 的新內嵌屬性。

製作良好的動畫是良好的網路體驗核心。這篇文章將說明為何某幾類動畫的成效優於其他類型。

確認 Service Worker 知道在要求部分回應時，該如何處理。

如要提升 CSS 動畫的效能，請盡量使用變形和不透明度的 CSS 屬性，並避免任何會觸發版面配置或繪製作業的行為。

攝影機上的平移、傾斜和縮放功能最終都可以在網路上控制。

來源試用是用來測試全新或實驗性網路平台功能的方式。第三方來源試用能讓嵌入內容的提供者在多個網站上試用新功能。 來源試用 是測試全新或實驗性網路平台功能的方式。 來源試用通常只能以第一方的方式進行，也就是僅適用於一個註冊的「來源」 。如果開發人員想在其他嵌入其內容的來源上測試實驗功能，則這些來源都必須註冊來源試用，每個來源都有專屬的試用權杖。這並不是可彈性調整的方法，以測試內嵌於多個網站的指令碼。 第三方來源試用能讓嵌入內容的提供者在多個網站上試用新功能。

卸離視窗是一種常見的記憶體流失類型，特別難以找出並修正。

瞭解如何為應用程式打造簡易的離線體驗。

而在 CSS 中使用剪輯功能，可以幫助我們擺脫設計框架，讓所有內容變得像箱子一樣。使用各種基本形狀或 SVG ，就能建立裁剪路徑。然後將您不想顯示的元素部分刪掉。

使用 CSS 自訂「`」或「`」元素中的數字或項目符號顏色、大小、類型。

將使用者要求重新導向至 /.well-known/change-password 至變更密碼網址，讓使用者能比以往更輕鬆地更新密碼。

註冊網頁式付款應用程式後，即可接受商家的付款要求。本文說明如何在執行階段自動化調度管理來自 Service Worker 的付款交易。

註冊網頁式付款應用程式後，即可接受商家的付款要求。本文說明如何在執行階段自動化調度管理來自 Service Worker 的付款交易。

應用程式語言不靠螢幕閱讀器，如何降低使用的障礙？

瞭解如何使用 WebAssembly，以安全且符合慣用的做法，將以其他語言編寫的程式庫帶入網路。

CSS 內容顯示屬性可略過轉譯畫面外內容，提升網站內容轉譯效能。本文將說明如何使用 auto 關鍵字，運用這項新的 CSS 屬性加快初始載入時間。您也會瞭解 CSS 容器規格和其他內容可見度值，以便進一步控管內容在瀏覽器中的顯示方式。

Async Clipboard API 簡化了易於使用權限的複製及貼上程序。

請考慮將參照網址政策設為「strict-origin-when-cross-origin」。這項政策會保留大部分的參照網址's 實用性，同時降低跨來源外洩資料的風險。

瞭解如何使用各種元件在 Android 應用程式中轉譯網頁內容。

公告團隊在開發 PWA 時，對服務工作人員的瞭解。

瞭解如何設定 Lighthouse CI 並整合至開發人員工作流程。

為 Google 帳戶帶來更優異的安全性和更優質的使用者體驗。

瞭解如何直接在 CSS 檔案中導入語意輸入、備用值等導入 CSS 自訂屬性。

瞭解如何為客戶註冊網頁式付款應用程式 #39；瀏覽器。您也將學習如何偵錯。

在 Service Worker 快取和 HTTP 快取層中使用一致或不同的到期邏輯的優缺點。

利用 A/B 測試，評估網站速度對業務指標的影響。

瞭解如何調整網頁式付款應用程式，以配合網頁付款功能，並提供更優質的使用者體驗。

瞭解如何修改 Android 付款應用程式，以便在商家透過 Payment Request API 要求使用者時，提供使用者選取的運送地址，以及聯絡資訊。

瀏覽要求是指您在導覽列中輸入新網址，或點選網頁上的連結時，所產生的 HTML 要求。服務工作處理程序能大幅影響效能：透過 Service Worker 即可直接回應，不必等待網路，就能確保導覽服務穩定快速、彈性。

Chrome 使用者體驗報告 (舊稱 CrUX) 是公開資料集，內含數百萬個網站的實際使用者體驗資料。與研究室資料不同，CrUX 資料實際上來自現場選擇加入的使用者。

本文重點介紹幾行功能強大的 CSS 行，分別處理一些嚴重繁瑣的事務，並協助您建構完善的現代版面配置。

從 Chrome 第 84 版開始，ResizeObserver 支援名為 device-pixel-content-box 的新方框測量方法，以實體像素測量元素和#39;s 尺寸。這對於轉譯完美像素圖像十分重要，特別是在高密度螢幕中。

這個 3 天線上社群活動公告的重大新聞和最新消息摘要，以及未來區域活動的相關提醒。

使用跨平台瀏覽器功能，建立安全、無障礙且易於使用的登入表單。

使用跨平台瀏覽器功能，建立安全、無障礙且易於使用的簡易登入表單。

瞭解如何逐步強化 Progressive Web App，使其在所有新式瀏覽器中仍然具有實用性，同時在支援新網路功能的瀏覽器上提供進階體驗，例如檔案系統存取、系統剪貼簿存取、聯絡人擷取、定期背景同步、螢幕喚醒鎖定、網路共用功能等。

如何針對個別網頁或整個網站的 SEO 問題進行偵錯。

如何透過 Background Sync 和 Push API，透過 Workbox 實現靈活彈性的搜尋體驗。

使用 和 標記將媒體檔案嵌入網頁中。

文字片段則可讓您在網址片段中指定文字片段。造訪含有這類文字片段的網址時，瀏覽器可以強調和/或讓使用者註意到網址&#39。

告訴瀏覽器廠商您在特定裝置或平台上發現的問題，是讓網路平台更加完善的關鍵！

瞭解如何使用網頁技術實作特定平台的應用程式模式，讓你的漸進式網頁應用程式看起來更像 "real&#34。

RAIL 模型能讓設計人員和開發人員穩定地鎖定對使用者體驗影響最大的效能最佳化工作。瞭解 RAIL 模型訂立的目標和準則，以及你可以使用哪些工具來達成這些目標。

Quicklink 程式庫會在閒置期間預先擷取顯示連結，以加快後續網頁載入速度。

擷取中繼資料是全新的網路平台功能，可讓伺服器防止自己受到跨來源攻擊。

使用 CSS 建立版面配置時，必須格外小心，別讓使用鍵盤瀏覽的使用者無法產生負面體驗。

整理網頁動畫即將更得心應手。

瞭解如何調整 Android 付款應用程式，以配合網路付款功能，並提供更優質的使用者體驗。

瞭解商家如何整合付款應用程式、付款交易如何與 Payment Request API 搭配運作，以及 Web Payments 的功能。

Web Payments 的目標是提供流暢的線上付款體驗。瞭解運作方式和優點，並做好整合付款應用程式與 Web Payments 的準備。

Chromium 80 在 macOS 上採用系統 UI 字型粗細迴歸功能。Chromium 第 83 版值得期待，以及後來解決後解析度出現的全新超級超支，絕對值得你期待。

建構可靠的 PWA 商業案例。瞭解適當的投資時機，以及如何衡量成效。

應用程式捷徑可讓使用者快速存取幾項常用動作。

Chrome's 和其他瀏覽器詳細資訊' 計劃移除 AppCache。

結合不同安裝方案的最佳做法，提高安裝率，並避免平台競爭和競食效應。

永久儲存空間可協助保護重要資料，避免資料遺失，並降低資料遺失的風險。

CommonJS 模組非常動態，可避免 JavaScript 最佳化器和組合對其執行進階最佳化。

有些網路 API 會增加 Spectre 等旁路攻擊的風險。為降低這類風險，瀏覽器提供一個選擇採用的隔離環境，稱為「跨來源隔離」。瞭解為何需要使用跨來源隔離，以便使用強大的功能，例如「SharedArrayBuffer」、「performance.measureUserAgentspecificMemory()」和高解析度計時器。

瞭解如何使用「about://tracing」和 Chrome 開發人員工具中的 **WebAudio** 擴充功能，在 Chrome 中分析網路音訊應用程式的效能。

瞭解 Next.js 和 Gatsby 如何改善建構輸出內容，盡可能減少重複程式碼，並提高網頁載入效能

"same-site"和 "same-origin"經常被引用，但通常誤解。本頁將說明其功能以及不同之處。

有些網路 API 會增加 Spectre 等旁路攻擊的風險。為降低這類風險，瀏覽器提供一個選擇採用的隔離環境，稱為「跨來源隔離」。使用 COOP 和 COEP 即可設定這類環境，並啟用「SharedArrayBuffer」、「performance.measureUserAgentspecificMemory()」或高解析度計時器等強大功能，同時提升精確度。

瞭解如何在實際工作環境中評估網頁的記憶體用量，以便偵測迴歸。

在一篇 web.dev 工程團隊撰寫的第一篇文章中，瞭解我們如何建構網站，包括如何使用 Eleventy 和 Web 元件。

色彩配置 CSS 屬性和對應的中繼標記可讓開發人員為網頁啟用使用者代理程式樣式表的主題預設值，例如表單控制項、捲軸和 CSS 系統顏色。同時，這項功能會防止瀏覽器自行套用任何轉換。

如何確保網站的核心功能隨時可用、易於存取、安全、方便使用、容易找到且運作快速。

如何判斷伺服器&#39；快速修正瓶頸、改善伺服器效能，以及避免迴歸問題。

瞭解如何改善色彩和對比度，讓網頁更易於存取。

務必在行動裝置或觸控螢幕裝置上使用互動元素，確保互動元素周圍有足夠的空間。這麼做可協助所有人，尤其是行動不便的使用者。

我們知道這個版本

隆重推出 Trusted Types：透過這個瀏覽器 API，現代網頁應用程式可防止 DOM 型跨網站指令碼攻擊。

如何在 Android 應用程式中開啟漸進式網頁應用程式。

透過最佳化轉譯週期，Chrome 83 可以在預先載入選用字型時消除版面配置位移。與 font-display: (選用) 搭配使用時，可有效確保自訂字型不會產生資源浪費。

如何建立採用 SXG 擴充功能的傳輸層安全標準 (TLS) 憑證、安裝用來產生 SXG 檔案的工具，以及設定 nginx 以提供 SXG 檔案。

如何使用 nginx 取得及提供 SXG 檔案，以及預先擷取子資源的挑戰。

使用媒體查詢功能傳送最小所需圖片，這項技術通常稱為回應式圖片。

其他部門如何協助貴公司提升網站速度最佳化專案的成效。

從 Chrome 第 81 版開始，當頁面版面配置變更時，捲動工具會保持貼齊狀態。換句話說，您不再需要新增事件監聽器來強制重新調整位置。

瞭解如何使用 Web Packager 提供 Signed Exchange (SXG)。

使用 beforeinstallprompt 事件為使用者提供自訂、流暢的應用程式內安裝體驗。

WebXR Hit Test API 是一款增強網頁&#39；擴增實境技術，讓您能夠將虛擬物件置於實景中。

Chrome 79 版已推出網頁版。以 WebXR Device API 為基礎，這項功能推出時是擴增和虛擬實境的基礎。本文是系列文章的第二篇，聚焦於影格迴圈，此為 XR 工作階段中圖片的顯示部分。其他瀏覽器即將支援 WebXR Device API，包括 Firefox Reality、Oculus 瀏覽器、Edge 和 Magic Leap's Helio 瀏覽器。

如果您已使用 WebXR Device API，您將會很高興瞭解這項技術，但現在不太容易學習。輸入 WebXR 工作階段的步驟大致相同。執行影格迴圈的執行程序大致相同。這兩種設定的差異在於，可透過擴增實境正確顯示內容。

瞭解 Chrome 如何投資多項開放原始碼工具，推動 JavaScript 生態系統發展

介紹漸進式網頁應用程式 (PWA)，以及與其他網頁應用程式區分的三大要素。

如何在 Workbox 中註冊路徑，讓漸進式網頁應用程式可以與平台專用應用程式一起顯示，在系統層級的分享 UI 中就能顯示。

可遮蓋圖示的這種格式可讓您進一步控制設定，讓漸進式網頁應用程式使用自動調整圖示。可遮蓋的圖示在所有 Android 裝置上都能呈現良好效果。

It&#39；使用者關閉網頁或應用程式時，經常會有未提交的數據分析或其他資料。網站會使用同步對 XMLHttpRequest() 的呼叫來保持網頁或應用程式開啟，直到資料傳送至伺服器為止。這麼做不但會影響使用者體驗，還會忽略更有效的資料節省方式。為瞭解決這個問題，Chrome 第 80 版會導入最近的規格變更。

模組工作站可將昂貴的程式碼移至背景執行緒，輕鬆解除封鎖主執行緒，同時保有標準 JavaScript 模組在人體工學和效能方面的優勢。

瞭解自動調整載入模式、如何實作，以及 Facebook、Tinder、eBay 和其他公司如何在實際工作環境中使用自動調整載入功能。

瞭解速度工具的最新進展，包括新的成效指標、PageSpeed Insights 和 Chrome 使用者體驗報告 (CrUX) 更新內容，以及 Web Almanac 網路生態系統分析結果的深入分析。

瀏覽器' 的主要執行緒過度處理。透過網路工作人員移出主要執行緒的程式碼，就能大幅改善應用程式&#39、可靠性和使用者體驗。

問卷調查作答者對各種圖片最佳化技巧發表的留言。

在這個程式碼研究室中，瞭解如何建構推播通知伺服器。

Next.js 如何透過路徑預先載入加快導覽速度，以及如何自訂。 本文將說明 Next.js 中的路由運作方式、如何針對速度進行最佳化，以及如何自訂路由以符合您的需求。 在 Next.js 中，您不需要手動設定路由。Next.js 採用以檔案系統為基礎的路由，因此您只需在./pages/ 目錄中建立檔案和資料夾即可： 如要連結至其他網頁，請使用 &lt;Link&gt; 元件，就像使用舊版 &lt;a&gt; 元素一樣： 當您使用 &lt;Link&gt; 元件進行導覽時，Next.js

如何透過程式碼分割和智慧載入策略，加快 Next.js 應用程式的速度。 本文將說明不同類型的 程式碼分割 ，以及如何使用動態匯入功能加快 Next.js 應用程式的速度。 根據預設，Next.js 會將 JavaScript 分割為各個路徑的獨立區塊。使用者載入應用程式時，Next.js 只會傳送初始路徑所需的程式碼。當使用者在應用程式中瀏覽時，他們會擷取與其他路徑相關聯的區塊。以路線為基礎的程式碼分割作業可盡量減少一次需要剖析及編譯的指令碼數量，進而縮短網頁載入時間。

瞭解在 Next.js 應用程式中支援 AMP 的好處和取捨 AMP 是一種網頁元件架構，可確保網頁快速載入。 Next.js 內建 AMP 支援功能。 本指南首先簡要說明 AMP 如何確保快速的網頁載入速度 ，接著說明 在 Next.js 應用程式中支援 AMP 的不同方式 ，最後協助您 決定最適合自己的做法 。 本指南的目標對象是已決定使用 Next.js，但不確定是否要支援 AMP 的網頁開發人員。 AMP 有兩種主要策略可確保速度： 在 Next.js 中使用 AMP 的方法有兩種：

Next.js 會處理 React 應用程式中的許多最佳化作業，因此您不必 Next.js 是一個有特定偏好的 React 架構，內建多項效能最佳化功能。這個架構背後的主要概念，是透過預設納入這些功能，確保應用程式啟動並維持最佳效能。 這份簡介將概略介紹架構提供的許多功能。這個系列中的其他指南會更詳細地介紹這些功能。 雖然 Next.js 預設提供多項效能最佳化功能，但這些指南旨在進一步說明這些功能，並說明如何運用這些功能打造快速且效能的使用體驗。 一般來說，React

透過 Web Share API，網頁應用程式可以使用系統提供的共用功能，與平台專用應用程式相同。Web Share API 可讓網頁應用程式將連結、文字和檔案提供給安裝在裝置上的其他應用程式，就像平台專用應用程式一樣。

Chrome 79 版已推出網頁版。以 WebXR Devicer API 為基礎，本次推出同時是擴增和虛擬實境的基礎。本文是系列文章的第一篇，探索基本概念並說明如何進入 XR 工作階段。其他瀏覽器即將支援 WebXR Device API，包括 Firefox Reality、Oculus 瀏覽器、Edge 和 Magic Leap's Helio 瀏覽器。

網站現在可以明確標記 Cookie，以便跨網站使用。瞭解如何標記 Cookie，確保第一方和第三方 Cookie 導入這項變更後能繼續運作。

瞭解 Cookie 的運作方式，以及第一方和第三方 Cookie 的定義。

瞭解快速廣告的價值和考量廣告速度的方法。

使用推播通知，透過精確的即時更新吸引使用者。

在這個程式碼研究室中，您可以瞭解如何要求使用者權限及傳送通知。

在這個程式碼研究室中，瞭解如何透過 Service Worker 管理通知。

使用 WebPageTest 找出並修正版面配置不穩定性問題的逐步操作說明。

功能型手機正在復甦，並且廣受歡迎，特別是在 2G 為常態的新興市場。以下是我們在製作 PROXX 時所學到的經驗，這是一款行動版掃雷遊戲的複製品，可在 2G 功能手機上快速載入。

雖然 CSS 變數很實用，但並不容易使用，因為這類變數可以接受任何值且遭到覆寫，且無法搭配轉換。CSS Properties 和 Values API 級別 1 解決了這些問題。

瞭解如何透過預先擷取資源加快日後的瀏覽速度。

瞭解如何修正網站上的混合內容錯誤，藉此保護使用者並確保所有內容都能順利載入。

當初始 HTML 是透過安全的 HTTPS 連線載入，但透過不安全的 HTTP 連線載入其他資源時，就會發生混合內容。

研究顯示，網路影片可提高參與度和銷售量。即使您尚未將影片加入自己的網站'，也只要過一段時間就大功告成了。

互動式示範影片，說明如何指定 iOS 主畫面應顯示哪個圖示。

網路平台目前對於遊戲開發已相當成熟。採用遊戲設計和營利的最佳做法，是打造現代網路遊戲的關鍵。本文將針對這項目標提供指引。

建構 PWA 時，多來源架構面臨著許多挑戰。探索多個來源的良好用途和惡意用途，以及在多來源網站上建構 PWA 的一些解決方法。

這篇文章將說明如何載入 WebFonts，避免在載入網頁時無法使用 WebFonts 時版面配置位移和空白網頁。

本文章將說明如何縮減網站上使用的 WebFonts 大小，這樣良好的字型排版有助於避免速度過慢的網站。

瞭解如何建立可安裝的漸進式 Angular 應用程式。

瞭解如何避免使用第三方指令碼的常見錯誤，進而改善載入時間和使用者體驗。

建議你使用圖片 CDN 將網站和圖片 #39 最佳化，並降低使用者的資料費用。

瞭解如何使用 Lighthouse 和 Chrome 開發人員工具找出速度緩慢的第三方資源。

這篇文章將說明常見的第三方 JavaScript 類型，以及這些 JavaScript 可能會造成的效能問題。也會提供最佳化第三方指令碼的一般指南。

全新的網路平台功能可讓你輕鬆建構類似內建表單控制項的自訂元素。

在 Lighthouse 的協助下，瞭解最佳化緩慢第三方資源的技巧。

瞭解 rel=preconnect 和 rel=dns-prefetch 資源提示與使用方式。

瞭解如何使用 CSS background-filter 屬性為網路上的 UI 元素加上模糊和透明度等背景效果。

過時的同時重新驗證可協助開發人員在立即載入快取內容與更新間隔之間取得平衡，確保日後使用快取內容的更新。

瞭解如何使用 Angular Component Dev Kit 實作虛擬捲動功能，讓大型清單更具回應性。

瞭解如何使用 Angular's 預先載入的策略來提升應用程式速度。

瞭解如何最佳化 Angular 應用程式' 變更偵測功能，讓應用程式的回應更加靈敏。

瞭解如何使用 Network Information API 根據網路品質調整內容。

程式碼分割功能可讓您加快應用程式速度，但可能會拖慢後續瀏覽速度。預測預先擷取是一種有效率的方式，可透過資料分析功能，聰明地預先擷取使用者接下來可能會使用的內容，以最佳化網路使用率。

瞭解如何使用 Codelyzer 讓 Angular 應用程式可供存取。

瞭解如何使用 Angular Service Worker，在應用程式中預先快取靜態資產。

瞭解如何直接在 Angular CLI 中使用效能預算！

許多裝置現在都支援作業系統寬鬆的深色模式或深色主題。本文旨在說明網頁如何支援深色模式、列出最佳做法，並介紹名為「深色模式切換」的自訂元素，讓網頁開發人員可在特定網頁中，為使用者提供覆寫作業系統層級偏好設定的方法。

瞭解如何讓 Angular 應用程式更加穩定、更可靠、可供偵測、安裝和存取！

瞭解如何使用路徑層級程式碼分割功能，縮減初始應用程式套件。

使用 srcset 自動選擇正確的圖片大小。

本文總結了 Polymer Project 和 Salesforce Caridy Patiño 的 Kevin Schaaf 對 2019 年網路元件的討論。

Lighthouse 現已支援效能預算。這項功能「LightWallet」，只要 5 分鐘就能完成設定，並提供網頁資源大小和數量的 Feedvack。

自 Chrome 53 版在 Chrome 53 版中推出，在 Chrome 68 版中推出 Payment Handler API 以來，也對相關規格進行了幾項變更。本文摘要說明這些更新，並會繼續累積 API 變更。

證明網站改善後產生的收益，但排除了行銷廣告活動等外部因素。

只要在 Chrome 網址列中使用全新的安裝按鈕，即可輕鬆安裝漸進式網頁應用程式。

瞭解網站效能對電子商務漏斗不同部分的影響

對許多網站開發者來說，與服務工作站合作是初衷且不熟悉的做法。這篇文章提供了一些訣竅，幫助您構思意見。

如何鼓勵安裝漸進式網頁應用程式及最佳做法。

如何鼓勵安裝漸進式網頁應用程式及最佳做法。

圖片佔據大量視覺空間，是網站上下載位元組的大部分內容。請使用新功能政策來辨識超大型圖片。

瞭解如何診斷高成本、避免使用者互動的工作。

瞭解如何使用 Critical 擷取關鍵 CSS 並內嵌重要 CSS，同時縮短轉譯時間。

瞭解如何使用重要 CSS 技術縮短轉譯時間，以及如何選擇最適合專案的工具。

在 2019 年 Google I/O 大會中，我們推出了三項新的網頁成效計畫，希望可以為所有人改善使用者體驗。

PROXX 是做為 PWA 建構的類似踩地雷遊戲。這項功能適用於各種裝置，且隨著裝置功能越強大，視覺效果也會逐漸提升。

瞭解如何用 SameSite 屬性標記第一方和第三方使用的 Cookie。您可以使用 SameSite' Lax 和 Strict 值強化網站安全性，以加強防範 CSRF 攻擊。指定新的 None 屬性後，即可明確標示要跨網站使用的 Cookie。

是否適合用相機搜尋您的網站？

使用 Network Information API，根據使用者的連線品質調整提供給使用者的資產。

新提議的 Portal API 可讓您採用簡便的前端介面，同時自訂轉場效果，讓使用者順暢瀏覽內容。本文將說明如何透過入口網站實際操作，改善網站使用者體驗。

在本程式碼研究室中，瞭解 Brotli 壓縮如何進一步降低壓縮比率和應用程式整體大小#39。

在 2019 年 Google I/O 大會中，web.dev 團隊的成員推出了許多更新項目，包括經過重新設計的設計、更多 Lighthouse 文件，以及全新的網誌。

實際效能會因使用者人數、裝置、網路連線等因素而異。在本文中，我們將介紹可協助您收集研究室或實際資料來評估網頁效能的工具。

速度是很重要的，但這個意思究竟是指什麼？網站速度飛快代表什麼意思？

品牌若能加快速度，往往會迅速發現結果。在這篇文章中，我們會探討如何提供快速流暢的體驗。

根據預設，Create React 應用程式包含網頁應用程式資訊清單。修改這個檔案後，您可以變更應用程式在使用者裝置上安裝時的顯示方式。

response-window 是一種程式庫，可讓大型清單有效率地轉譯。

Workbox 內建於 Create React 應用程式，提供預設設定，在每次版本時預先快取應用程式中的所有靜態資產。

React.lazy 方法可以運用動態匯入功能，輕鬆在元件層級將 React 應用程式分割為元件。可與 Suspense 搭配使用，向使用者顯示適當的載入狀態。

response-snap 是第三方程式庫，可將您網站上的網頁預先轉譯成靜態 HTML 檔案。這可改善應用程式的首次顯示時間。

response-axe 是一個程式庫，用於稽核 React 應用程式，並將任何無障礙功能問題記錄至 Chrome 開發人員工具控制台。eslint-plugin-jsx-a11y 是 ESLint 外掛程式，可直接在 JSX 中識別並強制執行多項無障礙規則。若搭配使用這兩項工具，可以提供完善的稽核方法，以便找出並修正應用程式中的無障礙問題。

React 是開放原始碼程式庫，可讓您更輕鬆地建構 UI。這個學習路徑將說明生態系統中的各種 API 和工具，供您考慮運用，提升應用程式的效能和可用性。

在本程式碼研究室中，您將瞭解如何預先載入及預先擷取資源，藉此改善網頁效能。

偏好減少動作媒體查詢會偵測使用者是否已要求系統盡量減少使用的動畫或動作量。適合要求或偏好最小化動畫的使用者；舉例來說，患有骨骼疾病的人通常會偏好讓動畫盡量縮小

瞭解如何透過最佳化關鍵轉譯路徑，以及改善首次內容繪製 (FCP) 為目標，延遲不重要的 CSS。

Intersection Observer v2 新增了一個功能，不僅能夠觀察每段路的交叉路口，還可偵測交叉元素在交集時是否可見。

根據使用者的裝置需求和功能建立網站。

可建構的樣式表可讓您輕鬆建立樣式，並將樣式分發至文件或陰影根，不必擔心支撐。

在應用程式中實作邏輯和算繪的建議。

隨時注意效能預算的最佳方式是自動進行。瞭解如何選擇最符合貴公司需求與目前設定的工具。

以最少設定來定義效能預算，並搭配 Travis CI 使用套裝組合，在開發工作流程中強制執行預算。

瞭解如何設定效能預算，並隨時與 Webpack 搭配使用。

你與#39；為了快速達成目標，現在可運用 Lighthouse 機器人在 Travis CI 自動化執行效能測試，確保作業速度飛快。

如何將 WebAssembly 整合至這項設定中？在本文中，我們會以 C/C++ 和 Emscripten 為例，說明這個解決方案。

getwareRelatedApps() API 是一種網路平台 API，可讓您檢查使用者的裝置是否已安裝您的 iOS/Android/電腦版應用程式或 PWA。

在本程式碼研究室中，您可以瞭解如何減少轉譯的程式碼量，藉此改善應用程式的效能。

用戶端提示是一組 HTTP 要求標頭，可用於根據使用者的裝置和網路連線的特性，變更我們提供網頁資源的方式。本文將逐一介紹客戶提示、運作方式，以及這些提示如何讓您網站更快速。

焦點指標 (通常以 "對焦環" 表示) 代表目前聚焦的元素。對無法使用滑鼠的使用者來說，這項指標極為重要，因為這項指標可以幫助他們使用滑鼠指標。

無論任何使用者或身心障礙者，都可以存取具有存取功能的網站，並由最多元化的使用者類型操作這類網站。

為了讓螢幕閱讀器向使用者顯示語音的 UI，有意義的元素必須有適當的標籤或文字替代項目。標籤或文字替代項目會為元素提供可解讀的名稱，這是在無障礙功能樹狀結構中表示元素語意的主要屬性之一。

許多使用者都會仰賴鍵盤瀏覽應用程式，無論是暫時或永久性障礙的使用者，還是使用鍵盤快速鍵提升效率和生產力的使用者，都不成問題。為應用程式製訂完善的鍵盤瀏覽策略，可為所有使用者帶來更好的體驗。

只要使用正確的標題和地標元素，即可大幅改善輔助技術使用者的瀏覽體驗。

只要使用正確的語意式 HTML 元素，就能滿足大部分或所有鍵盤存取需求。這樣一來，您就不必再花時間調整 tabindex，使用者也會更滿意！

您是否曾想過，螢幕閱讀器等輔助技術如何知道要向使用者顯示什麼資訊？答案是，開發人員必須使用語意式 HTML 標記自己的網頁，才能有效使用這些技術。不過，什麼是語意？螢幕閱讀器如何使用語意？

標準 HTML 元素內建鍵盤無障礙功能。建立自訂互動元件時，請使用 Tabindex 確保元件和鍵盤皆可存取。

搜尋引擎是圖書館員的數位版本。這項工具使用完整索引，有助於找出特定查詢的正確資訊。瞭解搜尋的基本概念後，即可協助使用者找到您的內容。

We&#39 就是這樣，您忘了將圖片縮小到網頁。這張圖片看起來沒問題，但會讓使用者感到困擾，而且會使網頁效能降低。

WebP 圖片的尺寸通常小於其 JPEG 和 PNG 版本，通常檔案大小會縮減 25% 到 35%。這麼做可以降低頁面大小並提升效能。

在本程式碼研究室中，瞭解如何使用尺寸屬性，根據使用者和#39;s 可視區域正確調整圖片大小。

為網頁應用程式找出合適的快取策略，需要在載入時取得確切的帳號代碼。建構可靠的網頁應用程式時，網路可以受到各種黑暗力量影響。您必須先瞭解網路漏洞和#39，才能在應用程式中加以處理。

在本程式碼研究室中，瞭解如何使用 beforeinstallprompt 事件讓網站可供安裝。

在本程式碼研究室中，瞭解擷取資源時相同來源政策的運作方式。

您開啟任何網頁後，瀏覽器會要求伺服器提供 HTML 文件、剖析 HTML 檔案的內容，並對任何其他外部參照提交不同的要求。關鍵要求鏈結代表了瀏覽器優先處理及擷取的資源順序。

在本程式碼研究室中，瞭解如何追蹤可能導致網頁無法正確建立索引的幕後 404 錯誤。

在這個程式碼研究室中，您可以瞭解如何根據裝置螢幕大小載入完全不同的圖片。

在本程式碼研究室中，瞭解如何註冊 Service Worker，提升應用程式的可靠性。

未壓縮的圖片會大量載入網頁，並呈現不必要的位元組。執行 Lighthouse 功能，透過壓縮圖片找出可以改善網頁載入速度的機會

傳送大量 JavaScript 酬載會大幅影響網站的速度。與其在應用程式的第一頁載入後，立即傳送所有 JavaScript 給使用者，您應該將套裝組合拆成多個部分，並且在一開始就傳送必要的內容。

PRPL 是一種縮寫，用來說明一種模式，用來載入網頁並加快互動速度。本指南將說明上述各項技巧如何相輔相成，但仍可單獨使用，以獲得成效。

您是否曾在 Imgur 或 Gfycat 等服務中看過 GIF 動畫，在開發工具中檢查此 GIF 只是發現 GIF 真的是影片？原因就好！動畫 GIF 可以說是非常驚人的！只要將大型 GIF 轉換為影片，就能大幅節省使用者人數和頻寬需求。

如要防範攻擊，開發人員必須減少安全漏洞，並在應用程式中新增安全性功能。幸好，瀏覽器在網路上提供許多安全功能，包括 "sandbox" 這個概念。

Lighthouse 搜尋引擎最佳化 (SEO) 會掃描網頁、測試搜尋引擎重視的內容，並提供分數，讓你瞭解有哪些方面需要改善。SEO 十分重要，因為這項工具可以為你帶來更多瀏覽內容的相關使用者。

在這個程式碼研究室中，您可以瞭解如何提供尺寸正確的圖片，進而提升網路效能。

Workbox 是以 Service Worker 和 Cache Storage API 為基礎的高階服務工作站工具包。提供一組可用於實際工作的程式庫，新增網頁應用程式的離線支援。

在本程式碼研究室中，瞭解如何使用字型臉部觀察工具立即顯示文字。