文章數
大型語言模型的優點和限制
發布日期:2024 年 1 月 13 日 這是大型語言模型和聊天機器人的三部曲系列的第一篇文章。第 2 部分說明如何 使用 WebLLM 建構聊天機器人 ,第 3 部分則說明如何 使用 Prompt API ,這兩部分已上線。 大型語言模型 (LLM) 已成為軟體開發的重要構件:LLM 非常適合用於產生及處理自然語言文字,可用於資料擷取、摘要或協助與使用者資料對話等用途。 在本系列文章中,我將討論裝置端 LLM
使用 Prompt API 建構可在本機和離線狀態下運作的聊天機器人
發布日期:2024 年 1 月 13 日 這是 LLM 聊天機器人系列文章的第三篇,也是最後一篇。先前的文章討論了 用戶端 LLM 的強大功能 ,並逐步引導您 在待辦事項應用程式中加入使用 WebLLM 的聊天機器人 。 部分新款裝置會在裝置上提供大型語言和其他 AI 模型。Chrome 建議 將內建 AI API 整合到瀏覽器 ,並在 不同開發階段 提供多種 API。許多 API 都會經過標準程序,讓網站可以使用相同的實作方式和模型,以便達到最佳推論效能。 Prompt API 就是這類 AI
使用 WebLLM 建構可在本機和離線環境中運作的聊天機器人
發布日期:2024 年 1 月 13 日 這是三部曲系列文章的第二篇,主題是 LLM 和聊天機器人。上一篇文章討論了 裝置端和瀏覽器端大型語言模型的優缺點 。 您現在已進一步瞭解用戶端 AI,因此可以將 WebLLM 新增至待辦事項清單網頁應用程式。您可以在 GitHub 存放區的 web-llm 分支 中找到這段程式碼。 WebLLM 是機器學習編譯提供的大型語言模型網頁式執行階段。您可以試試 將 WebLLM 做為獨立應用程式 。這個應用程式受到雲端支援聊天應用程式 (例如 Gemini )
建構可在本機和離線狀態下運作的聊天機器人
發布日期:2024 年 1 月 13 日 您可以使用 AI 建構許多令人驚豔的專案,包括經典機器學習模型和較新的大型語言模型 (LLM)。有了大型語言模型,電腦就能產生新內容、撰寫摘要、分析文字情緒等等。過去幾年,使用者有機會使用 Gemini 和 ChatGPT 等應用程式,這些應用程式會運用進階自然語言處理 (NLP) 技術,與使用者進行對話。 Google 開發人員專家 Christian Liebel 曾撰文說明如何使用 LLM 在網站或網頁應用程式中加入聊天機器人。 本系列課程將說明:
針對長時間工作進行最佳化調整
你' 被跟上 #34;don' 請封鎖主要執行緒
使用 CSS mask-image 屬性為圖片套用效果
CSS 遮罩可讓您選擇使用圖片做為遮罩圖層。也就是說,您可以使用圖片、SVG 或漸層做為遮罩,不必使用圖片編輯器,就能創造有趣的效果。
2024 年基準:推出更多網頁開發人員工具
web-features 資料集、Web 平台狀態資訊主頁、基準狀態小工具等等!回顧 2024 年的基準。
延遲載入影片
本文將說明延遲載入功能,以及延遲載入影片的選項。
預先載入模組
模組預先載入功能可讓您提前以宣告的方式載入 JavaScript 模組。
評估表單中的瀏覽器自動填入功能
為了改善使用者體驗,您必須瞭解使用者與表單的互動方式。瀏覽器自動填入功能在這項流程中扮演重要角色。瞭解如何收集及分析使用者在表單中使用自動填入功能的資料。
第 2 部分:建構用戶端 AI 有害內容偵測機制
有害內容偵測功能可保護使用者,並打造更安全的線上環境。在第二部分,我們將學習如何建構用戶端 AI 工具,以便偵測並減輕有害內容的來源。
第 1 部分:用戶端 AI 技術,對抗線上有害內容
"透過有害內容偵測功能保護使用者,營造更安全的線上環境。在第一部分,我們分享了部署 AI 技術的必要背景資訊,以便在源頭減輕有害內容:使用者的鍵盤。
總封鎖時間 (TBT)
本文將介紹「總封鎖時間」(TBT) 指標,並說明如何評估
Web Vitals
網站健康狀態良好的重要指標
開始評估 Web Vitals
瞭解如何在實際環境和實驗室環境中評估網站的網站體驗指標。
改善 Core Web Vitals 最有效的方法
一系列 Chrome 認為可改善網站效能和網站體驗核心指標的最佳做法
最佳化最大內容繪製
逐步指南,說明如何細分 LCP,並找出需要改善的關鍵領域。
CSS 內容顯示屬性現已成為新版基準
CSS 內容瀏覽權限屬性現已成為「基準新推出」。
比較 LLM 功能與摘要
將 LLM 做為評審技巧,評估不同模型和提示的結果。模型驗證作業將委派給其他大型語言模型,而非仰賴人為判斷。
網站體驗核心指標的門檻定義方式
網站體驗核心指標門檻的研究和方法
手動診斷研究室中的緩慢互動
您已查看欄位資料,發現互動速度偏慢。下一步是進一步瞭解如何手動測試這些互動,並找出這些互動背後的原因。
網站體驗核心指標工作流程和 Google 工具
隨著 Core Web Vitals 的重要性越來越高,網站擁有者和開發人員也越來越重視效能和關鍵使用者體驗。雖然 Google 提供許多工具協助您評估、最佳化及監控網頁,但使用者往往對各種資料來源,以及有效運用網頁的方式感到困惑。本指南提出整合多項工具的工作流程,並闡明這些工具在開發過程中的執行位置和方式。
基準主題
本文將說明 Baseline 的起源故事、Google 的參與情形,以及 WebDX 社群群組的擁有權。
往返快取
瞭解如何最佳化使用瀏覽器和上一頁按鈕時,立即載入的網頁。
使用 CSSNestedDeclarations 改善 CSS 巢狀結構
CSS 巢狀結構功能大幅提升!
First Input Delay (FID)
本文將介紹「首次輸入延遲時間」(FID) 指標並說明如何測量。
偵錯欄位效能
瞭解如何利用偵錯資訊為成效資料歸因,以便透過 Analytics (分析) 找出並修正使用者實際的問題
提升用戶端 AI 的效能和使用者體驗
瞭解用戶端 AI 的優點,包括低延遲、降低伺服器端成本、無需 API 金鑰、提升使用者隱私權,以及離線存取。
將 Core Web Vitals 和廣告收益與 Google 工具相關聯
瞭解如何使用 Google 工具,將 Core Web Vitals 與廣告收益建立關聯。
基準測試 CSS @property 的效能
@property 對 CSS 效能有何影響?
網頁儲存空間
在瀏覽器中儲存資料的選項有很多種。哪一個選項最符合你的需求?
立即延遲載入畫面外 iframe 了!
這篇文章將介紹載入屬性,以及如何使用載入屬性控制 iframe 的載入作業。
網路推送通訊協定
互動式逐步教學課程:瞭解如何建立一個伺服器,用於管理推播通知訂閱,以及將網路推送通訊協定要求傳送至推送服務。
在同一個網域上建構多個漸進式網頁應用程式
探索建議和非建議的方法,建構重複使用相同網域的多個 PWA,同時具備優缺點。
安裝廣告時需要多久?
漸進式網頁應用程式安裝標準。
如何打造優質的漸進式網頁應用程式?
優質或優質的漸進式網頁應用程式為何?
Chrome 如何處理網頁應用程式資訊清單的更新
變更 PWA 網頁應用程式資訊清單中的圖示、捷徑、顏色和其他中繼資料。
新增網頁應用程式資訊清單
網頁應用程式資訊清單是一個簡單的 JSON 檔案,可向瀏覽器說明網頁應用程式的行為。
使用嚴格的內容安全政策 (CSP) 減少跨網站指令碼攻擊 (XSS)
瞭解如何根據指令碼 Nonce 或雜湊部署 CSP,藉此防範跨網站指令碼攻擊。
在網路上存取硬體裝置
本文可協助網頁開發人員根據指定裝置選擇合適的硬體 API。
允許透過相關來源要求,在網站上重複使用密碼金鑰
瞭解如何使用相關來源要求,允許在各網站上重複使用密碼金鑰。
網頁瀏覽器層級的延遲載入圖片
這篇文章將說明載入屬性,以及如何運用這個屬性控制圖片載入。
選擇合適的圖片格式
選取合適的圖片格式,是在網站上提供最佳化圖片的第一步。這篇文章可協助你做出正確的選擇。
自訂指標
您可以運用自訂指標,評估並最佳化網站特點和網站體驗。
使用 Google Analytics 4 和 BigQuery 評估及偵錯成效
瞭解如何將 Web Vitals 資料傳送至 Google Analytics 4 資源,並匯出資料以便在 BigQuery 和 Looker Studio 中進行分析。
網路權限最佳做法
本指南將概述要求使用者授予相機、麥克風和位置資訊等機密功能存取權時,網站可採用的最佳做法,盡量減少不必要的提示,並禁止存取這類功能。
Cookie 通知的最佳做法
瞭解 Cookie 通知對成效、成效評估和使用者體驗的影響。
運用 Media Session API 自訂媒體通知和播放控制項
網頁開發人員可以自訂媒體通知,並回應媒體相關事件,例如透過 Media Session API 搜尋或追蹤變更。
尋找欄位中的緩慢互動
在研究室中重現緩慢互動,以便最佳化您的網站's 與下一個顯示的內容互動,您需仰賴現場資料請參閱本指南,瞭解如何操作。
使用 Tabindex
使用 tabindex 屬性明確設定元素's 分頁位置。
第一個位元組時間 (TTFB)
本文將介紹「第一個位元組時間」(TTFB) 指標以及評估方式。
小型 LLM 實用的提示工程
瞭解如何調整提示,讓不同的大型語言模型、模型和模型大小達到你偏好的結果。
與下一個顯示的內容互動 (INP)
本文將介紹「與下一個顯示的內容互動」(INP) 指標,並說明其運作方式和評估方式,並提供改善建議。
依 CSS 色彩配置相依的顏色搭配 light-dark()
description:使用 light-dark() 函式定義對使用色彩配置做出反應的顏色。
網頁應用程式的 WebAssembly 效能模式
本指南是以想要使用 WebAssembly 的網頁開發人員為目標對象,您將會瞭解如何運用 Wasm 將大量 CPU 的工作外包,藉此執行一個實例。
CSS 動畫格狀版面配置
在 CSS 格線中,「grid-template-columns」和「grid-template-rows」屬性可讓您分別定義行名稱,以及追蹤格線欄和列的大小。支援這些屬性的內插功能可讓格線版面配置在狀態之間流暢轉換,而不是在動畫或轉換的中點。
使用遊戲手把玩 Chrome 恐龍遊戲
瞭解如何透過 Gamepad API 控制網路遊戲。
Inert 屬性
inert 屬性是全域 HTML 屬性,可簡化如何移除和還原元素的使用者輸入事件,包括輔助技術的焦點事件和事件。
什麼是人工智慧?
AI 縮寫經常會交替使用,代表構成 AI 領域的各種技術類型。
倫理與 AI
使用 AI 工具及生成新內容時,必須考量多項倫理考量。
升級網站搜尋功能:運用生成式 AI 取得內容解答
使用 AI 工具及生成新內容時,必須考量多項倫理考量。
認識 Web.dev AI 團隊
認識技術撰寫人員和開發人員關係團隊。
透過 AAGUID 判斷密碼金鑰提供者
依賴方可以檢查 AAGUID,判斷密碼金鑰的來源。瞭解運作方式。
使用 Binaryen 編譯 Wasm 並進行最佳化
以名為 ExampleScript 的合成玩具語言範例,瞭解如何使用 Binaryen.js API,在 JavaScript 中編寫 WebAssembly 模組並進行最佳化。
擷取 HTML5 中的音訊和視訊
音訊/視訊擷取功能一直是網站開發人員長久以來的「聖杯」 。多年以來,我們都必須依賴瀏覽器外掛程式 ( Flash 或 Silverlight ) 才能完成工作。 Come on! HTML5 可解決這個問題。雖然不明顯,但 HTML5 的興起也帶來了裝置硬體存取權的激增。 地理定位 (GPS)、 Orientation API (加速計)、 WebGL (GPU) 和 Web Audio API (音訊硬體) 都是很好的例子。這些功能非常強大,可公開高層級 JavaScript API,這些
模型檢視器> 網頁元件
「<model-viewer>」網頁元件可讓您以宣告的方式在網頁上使用 3D 模型。
使用者驗證深入解析
瞭解如何在 WebAuthn 中使用「userVerification」
為什麼 CrUX 資料與我的 RUM 資料不同?
瞭解為何 RUM 資料可能會顯示與 CrUX 不同的網站體驗核心指標數據。
網頁程式開發人員適用的無障礙功能
重點在於打造多元包容且易於存取的網站。至少六個身心障礙可供改善的領域有六個:視覺、聽覺、行動能力、認知、語音和類神經網路。
載入第三方 JavaScript
第三方指令碼提供各種實用功能,讓網路更生動。瞭解如何最佳化第三方指令碼載入,降低對成效的影響。
Largest Contentful Paint (LCP)
本文介紹「最大內容繪製」(LCP) 指標,並說明如何評估這項指標
如果已有密碼金鑰,系統應禁止建立新的密碼金鑰
瞭解如何禁止使用者建立新的密碼金鑰 (如果使用者與密碼管理工具中已有密碼金鑰)。
使用索引資料庫
IndexedDB 基本概念指南。
2024 年所有前端開發人員都應該知道 5 個 CSS 程式碼片段
值得您立即使用、功能強大且穩定的 CSS。
最佳化首次位元組的時間
瞭解如何最佳化「第一個位元組時間」指標。
網址有哪些部分?
主機、網站和來源有何不同?什麼是 eTLD+1?本文將說明。
可搜尋的憑證深入探索
瞭解可搜尋的憑證,以及如何打造符合用途的使用者體驗。
轉譯效能
使用者會注意到網站和應用程式是否運作不佳,因此最佳化轉譯效能至關重要!
ResizeObserver:it';例如適用於元素的 document.onresize
當元素'內容矩形大小變更時,`ResizeObserver` 會通知您,以便您進行相應的回應。
最佳化文字型素材資源的編碼和傳輸大小
想要提高網頁載入速度,最好的方法就是減少整體下載大小,盡可能減少並壓縮剩餘資源。
OffscreenCanvas - 善用網路工作處理工具,可加快畫布作業速度
本文說明如何使用 OffscreenCanvas API 提升網頁應用程式的圖形算繪效能。
First Contentful Paint (FCP)
本文將介紹「首次顯示內容所需時間 (FCP)」指標,並說明該如何評估這項指標
內容傳遞聯播網 (CDN)
本文提供內容傳遞聯播網 (CDN) 的完整總覽。此外,本文也會說明如何選擇、設定和最佳化 CDN 設定。
良好的登出體驗需要具備什麼條件?
實用開發人員指南,瞭解使用者登出網站時的處理方式。
互動準備時間 (TTI)
本文將介紹「互動準備時間」(TTI) 指標,並說明該如何評估
使用 Fetch Priority API 最佳化資源載入
擷取優先順序 API 會指出資源與瀏覽器的相對優先順序。不但能最佳化載入,還能改善網站體驗核心指標。
:user-valid 和 :user-invalid 虛擬類別
關於 :user-valid 和 :user-invalid 虛擬類別,以及如何使用這些虛擬類別來改善輸入驗證的使用者體驗。
幫助業務決策者改善 Core Web Vitals
瞭解業務決策者和非開發人員如何改善網站體驗核心指標。
JavaScript 中的 Base64 編碼字串細微差異
瞭解將 Base64 編碼和解碼套用至字串時的常見問題,並加以避免。
CSS 子格狀檢視
子格狀檢視可讓您共用格線,讓巢狀格線對齊祖系和同層級。
有效載入廣告,且不影響網頁速度
在現今的數位世界中,線上廣告是我們享有的免費網路的重要一環。不過,如果廣告導入方式不當,可能會導致瀏覽速度變慢,使用者因此感到不耐煩,進而降低參與度。瞭解如何有效載入廣告,不影響網頁速度,確保使用者體驗流暢,並為網站擁有者提供最佳收益機會。
四種常見的程式碼涵蓋率
瞭解什麼是程式碼涵蓋率,並探索四種常見的評估方式。
請就技術層面進行測試
決定需要測試的項目和可排除的項目。
定義測試案例和優先順序
決定要測試的內容、定義測試案例和決定優先順序。
以使用者為中心的成效指標
以使用者為中心的成效指標,才能讓使用者瞭解並改善網站體驗,是相當重要的工具。
預先載入回應式圖片
瞭解預先載入回應式圖片的新功能,確保絕佳的使用者體驗。
透過 CSS 根據使用者偏好設定調整字體排版
根據使用者喜好調整字型的方法
金字塔還是螃蟹?尋找合適的測試策略
探索如何將不同的測試類型結合成適合專案的合理策略。
三種常見的測試自動化類型
讓我們從基本概念開始吧!探索兩種一般測試模式和三種常見的測試自動化類型。
排除不必要的下載作業
您應該定期稽核資源,確保每項資源都能帶來更優質的使用者體驗。
WebAssembly 是什麼?來源為何?
簡介 WebAssembly (有時縮寫 Wasm)、可攜式二進位程式碼格式、可執行程式的對應文字格式,以及軟體介面,以促進此類程式與主機環境之間的互動。
將 mkbitmap 編譯為 WebAssembly
mkbitmap C 程式會讀取圖片,並依序套用下列一或多項操作:反轉、高傳遞篩選、縮放和閾值。每項作業都可個別控制及開啟或關閉。本文說明如何將 mkbitmap 編譯為 WebAssembly。
在新型網頁應用程式中安全地代管使用者資料
如何在網頁應用程式安全顯示使用者控管的內容。
來源私人檔案系統
檔案系統標準引進了來源私人檔案系統 (OPFS),做為頁面來源的私人儲存空間端點,且對使用者隱藏,可選擇存取效能經過高度最佳化的特殊檔案。 來源私人檔案系統受到新式瀏覽器的支援,並由 Web Hypertext Application Technology Working Group ( WHATWG ) 在 檔案系統 Living Standard 中標準化。 瀏覽器支援 資料來源 提到電腦上的檔案,你可能會想到檔案階層:檔案以資料夾分類,你可以透過作業系統的檔案總管瀏覽。舉例來說,在
部署 AVIF 提高回應速度的網站
概略說明如何在生態系統中採用 AVIF 技術,以及 AVIF 對靜態圖片和動畫的執行效能和品質可為開發人員帶來哪些助益。
改善與下一個顯示的內容的互動方式
瞭解如何最佳化網站's 與下一個顯示的內容互動。
目前可用的基準功能
只瞭解 Baseline 中的部分功能。
DOM 大小過大對互動的影響,以及您可以採取哪些行動
DOM 大小較大,可能影響互動速度是否快速。進一步瞭解 DOM 大小和 INP 之間的關係,以及當網頁含有大量 DOM 元素時,該如何縮減 DOM 大小以及其他限制轉譯工作的方法。
最佳化輸入延遲時間
輸入延遲時間會大幅增加總互動延遲時間,並對網頁 INP 造成負面影響。本指南將說明什麼是輸入延遲時間,以及如何縮短等待時間以加快互動速度。
指令碼評估和長時間任務
載入指令碼時,瀏覽器需要一段時間才能完成評估,因此可能會拉長工作執行時間。瞭解指令碼評估的運作方式,以及如何避免在網頁載入期間造成長時間工作。
用戶端轉譯 HTML 和互動功能
使用 JavaScript 轉譯 HTML 與轉譯伺服器傳送的 HTML 不同,後者會影響效能。本指南將說明差異之處,以及您可以採取哪些做法來維持網站轉譯成效,特別是在會評估互動的地方。
改善累計版面配置位移
「累計版面配置位移 (CLS)」是一項指標,可量化使用者在網頁內容突然改變的頻率。本指南將探討最佳化 CLS 的常見原因,例如沒有尺寸或動態內容的圖片和 iframe。
使用 WordPress Playground 和 WebAssembly 建構瀏覽器中的 WordPress 體驗
透過 WebAssembly 在瀏覽器中執行由 PHP 提供的完整 WordPress
Cumulative Layout Shift (CLS)
本文將介紹「累計版面配置位移」(CLS) 指標,並說明衡量方式。
為開發人員提供的新功能 – 由 WebAssembly 提供
WebAssembly 感謝 WebAssembly 新推出的網路工具。
應用程式商店中的 PWA
漸進式網頁應用程式可以提交至應用程式商店,例如 Android Play 商店或 Microsoft Store 等。
什麼是來源對應?
運用來源地圖改善網路偵錯體驗。
2023 年每位前端開發人員應知道的 6 個 CSS 程式碼片段
值得您立即使用、功能強大且穩定的 CSS。
CSS 的三角函式
在 CSS 中計算正弦、餘弦、正切等值。
使用 requestVideoFrameCallback() 對影片執行每個影片影格的有效作業
requestVideoFrameCallback() 方法可讓網頁作者註冊新的視訊影格傳送至合成器時,在轉譯步驟中執行的回呼。
GDE 社群精選內容:Lars Knudsen
一系列與 Google Developers 專家 (GDE) 計畫成員的訪談內容。
快速處理 CSS 的秘訣!動畫漸層文字
讓我們使用範圍限定的自訂屬性和 background-clip,製作動畫漸層文字效果 前往 CodePen 並建立新的筆記。 建立文字的標記。我們來使用標題,標題中包含「Speedy」這個字詞: 接著,讓我們為 body 提供較深色的 background-color : 提高文字的 font-size 使用 clamp 讓它回應式: 為要使用的顏色建立兩個自訂屬性。使用這些顏色將 linear-gradient 套用至 background ,並旋轉 90 度:
媒體應用程式的新模式
這篇網誌文章說明瞭媒體應用程式的全新模式集合。
正在打造 Chrometober!
看這款 Chrometober 的捲動式書本來就此改變,分享有趣又令人恐懼的秘訣和技巧。
建立工具提示元件
瞭解如何建立可自動調整且可存取的工具提示自訂元素,基本總覽。
為無密碼登入建立密碼金鑰
密碼金鑰可讓網站更安全、更容易使用及設定密碼。本文將說明如何允許使用者建立您網站的密碼金鑰。
透過表單自動填入功能使用密碼金鑰登入
密碼金鑰可讓網站更安全、更容易使用及設定密碼。本文說明如何設計使用密碼金鑰進行無密碼登入機制,同時滿足現有的密碼使用者需求。
建構懸浮動作按鈕 (FAB) 元件
概略說明如何建構色彩自動調整、回應及存取的懸浮動作按鈕 (FAB) 元件。
字型的最佳做法
瞭解如何根據網站體驗核心指標調整網頁字型。
快速處理 CSS 的秘訣!動畫載入器
讓我們使用範圍限定的自訂屬性和 animation-timing-function 製作動畫 CSS 載入器 前往 CodePen 並建立新的筆記。 為載入器建立標記。請注意內嵌自訂屬性的使用方式: 您也可以使用產生器 ( Pug ) 設定行數: 為我們的載入器提供一些樣式: 使用絕對定位和 calc 與 transform 的組合來定位線條: 根據 --index 套用不透明度: 讓一切運作起來! 請注意,您必須使用 steps(var(--count)) 才能獲得正確的效果 ✨ 完成!🎉
測試網頁設計的顏色對比
概略說明三種工具和技巧,可用於測試及驗證設計的無障礙色彩對比。
GDE 社群精選:Alba Silvente Fuentes
一系列與 Google Developers 專家 (GDE) 計畫成員的訪談內容。
為網站建立主要導覽
本教學課程說明如何建立網站易於存取的主要導覽功能。你會瞭解語意式 HTML 和無障礙功能,以及使用 ARIA 屬性有時對這些方面造成太大的傷害。
是互動形式嗎?
這個實用的 CSS 虛擬選取器可讓您選取強制回應的元素。
代碼和代碼管理工具的最佳做法
針對 Core Web Vitals 將代碼和代碼管理工具最佳化。
營造彎曲的幻覺效果
以趣味探索的方式,探索如何使用 CSS 重現光學錯覺。
廣告素材清單樣式
介紹一些實用又有創意的清單樣式設定。
Nordhealth 在網頁元件中使用自訂屬性的方式
在設計系統和元件程式庫中使用自訂屬性的好處。
對 CSS 使用個別轉換屬性進行精細的控管機制
瞭解如何使用個別的平移、旋轉和縮放 CSS 屬性,以直覺的方式做出轉換。
CSS 邊框動畫
瞭解在 CSS 中為邊框加上動畫的幾種方式
BBC 如何推出 HSTS 來強化安全性與效能。
BBC 為自家網站推出 HSTS,藉此提升安全性和效能。瞭解意義,以及 HSTS 可為您提供哪些協助。
為什麼實驗資料和實際資料有差異 (以及處理方式)
瞭解監控網站體驗核心指標指標報告後,出現不同數據的原因,以及如何解讀差異。
雙贏局面
GDE Enrique Fernandez Guerra 公開 NGO HelpDev 的原始碼。
Internet Explorer 結尾
哪些停止支援 Internet Explorer 是 Maersk.com 的客戶和開發人員。
改用 HTML5Rocks
長久了,HTML5Rocks,這個就是這麼長的意思,很高興聽到你這麼說。
第一方 Cookie 食譜
瞭解如何設定第一方 Cookie,以確保安全性、跨瀏覽器相容性,並在第三方 Cookie 淘汰後將服務中斷的可能性降到最低。
同步處理網路上的音訊和視訊播放
Web Audio API 可讓您輕鬆實現影音同步。
使用圓角漸層建立酷炫邊框
圓錐漸層可用於製作有趣的效果,例如這款漂亮的邊框範例。 這個由 Adam Argyle 建立的 CodePen 最初是透過 Twitter 上的這則 推文 分享,說明如何使用 圓錐漸層 建立邊框。 Terry Mun 以創意 分支 Adam 的 CodePen,並建立了這個 CodePen 。將滑鼠游標移至元素上,您會看到漸層變化,這是因為 JavaScript 更新了儲存旋轉角度的 CSS 自訂屬性。 這些範例使用 border-image-source
JavaScript 程式庫和架構之間的差異
瞭解在用戶端 JavaScript 環境中,架構和程式庫之間的差異。
使用 Fetch API 時實作錯誤處理
在使用 Fetch API 時擷取錯誤。
選擇 JavaScript 程式庫或架構
瞭解使用 JavaScript 程式庫或架構的相關決策。
提供快速精美網路字型的 API
Google Fonts CSS API 的最新消息,包括運作方式、使用方式,以及該 API 如何有效率地傳送網路字型。
前端開發人員指南
這項資源可協助您快速找到終端機。
GOV.UK 從前端捨棄 jQuery。
GOV.UK 從前端捨棄了 jQuery 依附元件。(可以。)
建立按鈕元件
概略說明如何建構色彩自動調整、回應及無障礙元件。
不要對瀏覽器預先載入掃描器(')
瞭解瀏覽器預先載入掃描器的用途、對效能的助益,以及如何避免干擾效能。
實際評估網站體驗指標的最佳做法
如何使用目前的分析工具評估網站體驗指標
消除差距
簡化建構網頁的方式。
在開發人員社群中尋找勇氣和靈感
網路 Google Developers 專家,說明輔導計畫如何協助他們成為領袖。
現實生活中的可變字型
分享有關可變字型的實用指南,並附上大量範例。
使用 CSS Gradient Creator 快速建立良好的 CSS 漸層
這個工具由 Josh W Comeau 提供,讓您可以輕鬆建立精美的漸層。
深入瞭解常見的網頁程式開發人員問題點
透過一系列對於網頁開發人員的對話,收集了關於重大問題點的深入分析。
使用 images.tooling.report 呈現完美的網站圖片
查看圖片工具的狀態。
全域和本機變數範圍
瞭解範圍和在 JavaScript 中的運作方式。
建構對話方塊元件
基礎概略說明如何使用 `` 元素,建立可自訂顏色、回應式且符合無障礙設計的迷你和超大型模式對話方塊。
在網路上偵錯媒體播放錯誤
瞭解如何在網路上偵錯媒體播放錯誤。
GDE 社群焦點:Nishu Goel
一系列與 Google Developers 專家 (GDE) 計畫成員的訪談內容。
過度使用延遲載入的效能影響
在初始檢視區內積極載入圖片,並放寬延遲載入其餘圖片,即可改善 Web Vitals,同時減少載入的位元組數。
建立載入列元件
概略瞭解如何使用 `` 元素建構色彩自動調整和無障礙載入列。
儲存表單中的憑證
盡可能簡化註冊和登入表單。 儲存登入表單中的憑證,這樣使用者回訪時就不必再次登入。 如要儲存表單中的使用者憑證,請按照下列步驟操作: 繼續操作前,請檢查表單是否包含 autocomplete 屬性。這有助於憑證管理 API 從表單中找出 id 和 password ,並建構憑證物件。 這也能協助不支援憑證管理 API 的瀏覽器瞭解其語意。如要進一步瞭解自動填入功能,請參閱 這篇文章 ,作者為 Jason Grigsby 。 當使用者按下提交按鈕時,請禁止表單提交,否則會導致網頁轉換:
Chrome 和 Firefox 即將支援主要版本 100
使用者代理程式字串變更、Chrome 和 Firefox 為減輕影響而採取的策略,以及您可以提供哪些協助。
打造自動調整網站小圖示
說明如何打造自動調整式網站小圖示的基本知識。
更新 HTTP 快取,藉此提升安全性和隱私防護
如果忘記或濫用 Cache-Control 標頭,可能會對網站和使用者的安全性造成負面影響,#39; 隱私。取得高價值網站的推薦。
在 Emscripten 中在畫布上繪圖
瞭解如何使用 Emscripten,將 2D 圖形算繪到 WebAssembly 網路上的畫布。
其他 HTML 元素
網站健康狀態良好的重要指標
將 USB 應用程式轉移到網路。第 2 部分:gPhoto2
瞭解 gPhoto2 是如何移植到 WebAssembly,以透過 USB 從網頁應用程式控制外部相機。
網路錯誤記錄 (NEL)
使用網路錯誤記錄 (NEL) 收集用戶端網路錯誤。
WebAssembly 功能偵測
瞭解如何使用最新的 WebAssembly 功能,同時支援所有瀏覽器的使用者。
將 USB 應用程式轉移到網路。第 1 部分:libusb
瞭解如何使用 WebAssembly 和 Fugu API,將與外部裝置互動的程式碼移植到網路。
建立主題切換元件
說明如何建構可自動調整且易於存取的主題切換元件。
使用 Emscripten 以 C++ 嵌入 JavaScript 程式碼片段
瞭解如何在 WebAssembly 程式庫中嵌入 JavaScript 程式碼,與外界通訊。
Oculus Quest 2 的 PWA
Oculus Quest 2 是由 Oculus (屬於 Meta 部門) 打造的虛擬實境 (VR) 頭戴式裝置。開發人員現在可以運用 Oculus Quest 2's 多工處理功能,建構及發布 2D 和 3D 漸進式網頁應用程式 (PWA)。本文說明相關體驗,以及如何在 Oculus Quest 2 上建構、側載及測試 PWA。
建築設計
一窺 Designcember 用來打造節慶日曆風格體驗的流程和工具。
設計工具計算機
嘗試在網路上重建太陽能計算機,以使用環境光感測器和視窗控制重疊功能進行模樣。
使用 StructuredClone 在 JavaScript 中進行深度複製
過去,您必須仰賴解決方法和程式庫,才能建立 JavaScript 值的深度副本。平台現已隨附「structuredClone()」這種深度複製的內建函式。
建立浮動式訊息元件
說明如何建構自動調整式和無障礙浮動式訊息元件的基本總覽。
UI 資金
宣布 Chrome 推出 UI 基金,為設計工具、CSS 和 HTML 的使用者提供補助。
建立 3D 遊戲選單元件
概略說明如何建構回應式、自動調整式且易於存取的 3D 遊戲選單。
2021 年 Chrome 開發人員高峰會公告的所有資訊
2021 年 Chrome 開發人員高峰會所有重要公告的匯報,您可透過連結深入瞭解相關資訊。
燈塔使用者流程
試用全新的 Lighthouse API 來衡量使用者流程的效能和最佳做法。
PageSpeed Insights 簡介
瞭解 PageSpeed Insights 的最新相關資訊,協助您更準確地評估網頁和網站品質,並提升網站品質。
往至動畫平滑度指標
瞭解如何測量動畫、思考動畫影格的方式,以及整體頁面的流暢度。
Photoshop' 瀏覽網路的歷程
過去三年來,Chrome 持續致力於提供強大的網頁應用程式,讓希望瀏覽器實現無限可能。其中一個網頁應用程式就是 Photoshop直接在瀏覽器中執行軟體就像使用 Photoshop 一樣相當複雜,難以在幾年前實現這個構想。不過,藉由使用各種新的網路技術,Adobe 現在對 Photoshop 的線上版本提供了公開測試版。
建立複選元件
概要說明如何建構可自動調整、自動調整和存取的複選元件,來排序及篩選使用者體驗。
如何使用 Navigation Timing 和 Resource Timing 評估欄位中的載入效能
瞭解使用 Navigation 和 Resource Timing API 評估欄位中載入效能的基本概念。
透過 Sanitizer API 進行 Safe DOM 操控
新的 Sanitizer API 旨在打造強大的處理器,讓任意字串安全地插入網頁中。本文將介紹這個 API,並說明其使用方式。
使用第三方嵌入功能的最佳做法
本文件說明載入第三方嵌入項目時可以使用的效能最佳做法、高效率的載入技術,以及有助於減少熱門嵌入項目的版面配置位移工具。
SPA 架構對網站體驗核心指標的影響
針對 SPA 中心、網站體驗核心指標和 Google' 的常見問題提供解答,為因應目前的評估限制措施。
JavaScript 事件深入解析
preventDefault 和 stopPropagation :使用時機和各個方法的具體功能。 JavaScript 事件處理通常很簡單。處理簡單 (相對平面) HTML 結構時,這一點尤其重要。不過,如果事件是透過元素階層傳遞 (或傳播),情況就會複雜一些。這通常是開發人員為瞭解決所遇到的問題,而尋求 stopPropagation() 和/或 preventDefault() 協助的情況。如果您曾想過:「我來試試 preventDefault() ,如果沒效,就試試
整合非 JavaScript 資源
瞭解如何從 JavaScript 匯入及組合各種素材資源,以便在瀏覽器和軟體包中順利運作。
建立分割按鈕元件
說明如何建構無障礙分割按鈕元件的基本總覽。
使用 CSS 模組指令碼匯入樣式表
瞭解如何使用 CSS 模組指令碼,使用與 JavaScript 模組相同的語法匯入 CSS 樣式表。
CSS 強調色
透過一行程式碼,在內建的 HTML 表單輸入內容中使用品牌顏色。
建立切換元件
說明如何建構回應式且無障礙開關元件的基本總覽。
使用者偏好設定媒體功能用戶端提示標頭
一組用戶端提示標頭可讓網站在要求時選擇取得使用者的媒體偏好設定,讓伺服器可基於效能考量內嵌正確的 CSS。 CSS 媒體查詢,尤其是 使用者偏好媒體功能 (例如 prefers-color-scheme 或 prefers-reduced-motion ),可能會對網頁需要傳送的 CSS 數量,以及使用者在網頁載入時的體驗,造成 重大影響 。 請將重點放在 prefers-color-scheme
建立導覽標記元件
說明如何打造回應式且易於存取的導覽標記元件,方便使用者瀏覽您的網站。
使用 C、C++ 和 Rust 的 WebAssembly 執行緒
瞭解如何將以其他語言編寫的多執行緒應用程式導入 WebAssembly。
媒體架構
媒體架構具備專屬開放原始碼和開放原始碼,其核心是一套 API,可支援針對各種容器格式和傳輸通訊協定播放音訊和/或視訊。
具備離線串流的 PWA
透過離線直播建構 PWA 是一大挑戰。本文將說明為使用者提供高品質離線媒體體驗的 API 和技術。
媒體加密
瞭解數位版權管理概念,以及透過 Clear Key 或 Widevine 加密功能,從原始移動檔案傳輸至為 MPEG-DASH 或 HLS 封裝的加密媒體所需的指令。
媒體串流基本概念
媒體串流是一種可從伺服器持續傳遞多媒體內容的方法,在內容已分割成個別的資料區塊後,透過 DASH 和 HLS 等通訊協定,在播放期間,可透過特定順序要求將多媒體內容合併為個別資料區塊。
建立色彩配置
說明如何建立動態及可設定色彩配置的基本總覽
@font-face 的 CSS size-Adjust
載入網路字型時,您現在可以調整縮放比例,將文件字型大小正規化,避免在切換字型時發生版面配置位移
使用 AVIF 壓縮網站上的圖片
在行動裝置上提供電腦版顯示大小的圖片,可能會消耗多 2 到 4 倍的數據。與其 a "one-size-fits-all" 改用不同尺寸的圖片,為不同裝置提供不同尺寸的圖片。
網路工具中的累計版面配置位移
即日起,我們將在許多 Chrome' 網路工具介面上推出 CLS 更新內容,包括 Lighthouse、PageSpeed Insights 和 Chrome 使用者體驗報告。
將 CSS 用於網站體驗指標
本文說明將網站體驗指標最佳化的 CSS 相關技巧。
全新 CSS 函式虛擬類別選取器 :is() 和 :where()
這些看似微不足道的 CSS 選取器語法會有很大的影響。
新的漸進式網頁應用程式訓練課程現已推出
我們全新推出的六期漸進式網頁應用程式訓練課程現已上架,包含一系列新程式碼研究室,教你如何建構可靠、可安裝且支援的 PWA。
遷移至使用者代理程式用戶端提示
讓網站從依使用者代理程式字串遷移至新的 User-Agent Client Hints 的策略。
全新回應式:網頁設計在元件導向的世界中
根據使用者偏好提供的媒體功能、容器查詢,以及新螢幕類型 (例如折疊式螢幕) 的媒體查詢,將使我們能夠適應新世代的回應式網頁設計。
安全性標頭快速參考
本文將列出您可以用來保護網站的最重要安全性標頭。這些資訊可協助您瞭解網站式安全性功能、瞭解如何在網站上實作這些功能,並在需要提醒時提供實用參考資訊。
《Excalidraw》與《Fugu》:改善核心使用者歷程
Thomas Steiner';在 2021 年 Google I/O 大會講座中,標題為「Excalidraw」和「Fugu:改善核心使用者歷程
Service Worker 中的 ES 模組
Service Worker 可使用靜態匯入的 ES 模組匯入額外程式碼,做為 importScripts() 的替代方案。
建構媒體捲動元件
說明如何為電視、手機、電腦等裝置建立回應式水平捲動檢視畫面。
使用 Lighthouse 最佳化網站體驗指標
今天我們要介紹 Lighthouse、PageSpeed 和 DevTools 中的新工具功能,以協助您找出網站能提升網站體驗指標的成效。
使用 WebAssembly 中的非同步網頁 API
瞭解如何在將傳統同步語言編譯為 WebAssembly 時,叫用非同步網頁 API。
確保第三方指令碼受到控管
第三方指令碼或 "tags" 可能是網站效能問題的來源,因此也是進行最佳化的目標。不過,在開始最佳化您新增的代碼之前,請先確定您沒有最佳化自己不需要的代碼,甚至不需要 #39 最佳化。本文將說明如何評估新代碼的要求,以及管理和審查現有代碼。
自訂 PWA's 標題列的視窗控制項
開發人員可以使用「視窗控制重疊」功能自訂已安裝 PWA 的標題列,讓應用程式的 PWA 感覺更像應用程式。
使用 WebOTP API 在跨來源 iframe 中填入動態密碼表單
WebOTP API 現在可以在 iframe 內接收動態密碼。
運用 DataTransfer API 打破藩籬
DataTransfer 物件會保留在拖曳作業期間拖曳的資料。其可存放一或多個資料項目,每個資料項目也可以包含一或多個資料類型。本文說明 DataTransfer API 的各項功能。
建構分割文字動畫
說明如何建構分割字母和字詞動畫的基本總覽。
改善 CLS 指標
以更公平的方式改善 CLS 指標。
網頁程式開發人員滿意度
網頁程式開發人員滿意度是 Google 專案,目的是收集網頁程式開發人員需求的相關資訊。我們的目標是成為更可靠、更容易預測且互通的網路平台,讓開發人員能投資並信任這個平台,並採用及運用新功能推動平台和業務成長。
建構設定元件
說明如何建立包含滑桿和核取方塊的設定元件。
對版面配置位移進行偵錯
瞭解如何找出並修正版面配置位移。
JavaScript:這是什麼意思?
在 JavaScript 中,定義 `this` 的值可能有點難度,這裡' 是怎麼做到的...
迷你應用程式開放原始碼專案
本章節會介紹一系列有趣的迷你應用程式開放原始碼專案。
將迷你應用程式程式設計原則套用至範例專案
本章節範例專案是以 " 程式設計方式,為最小的應用程式進行編碼" 做法的範例專案。
什麼是 H5 和 QuickApp?
本章節提供 H5 應用程式和 QuickApp 的背景,這兩款應用程式與迷你應用程式不同。
以迷你應用程式進行程式設計
本章節會介紹針對迷你應用程式進行程式設計的方法。
迷你應用程式標記、樣式、指令碼和更新
本章節會介紹各種迷你應用程式平台的標記、樣式、指令碼和更新選項。
迷你應用程式元件
本章節詳細說明所有迷你應用程式平台提供的元件。
專案結構、生命週期及套裝組合
本章節會說明專案結構、生命週期,以及迷你應用程式組合。
針對網頁程式開發人員的迷你應用程式歸納出看法
本章節的結論是迷你應用程式系列的結論,也就是跳脫框架思考,再從 G' 以外的地方收集意見和靈感,進而在網路上打造更美好的未來。
訊息串:這份指南
Streams API 可讓 JavaScript 透過程式存取透過網路接收的資料串流,並視需要進行處理。
建立分頁元件
如何建立與 iOS 和 Android 應用程式類似的分頁元件的基本總覽。
啟用跨來源隔離功能的指南
跨來源隔離可讓網頁使用 SharedArrayBuffer 等強大功能。本文將說明如何在網站上啟用跨來源隔離功能。
使用 Origin-Agent-Cluster 標頭進行效能隔離
Origin-Agent-Cluster 標頭會終止對同一網域中其他來源的同步存取權,並會提示瀏覽器以提供來源專屬資源。
CSS aspect-ratio 屬性
新的顯示比例 CSS 屬性現在可更輕鬆地維持圖片和元素中的長寬比。
WebRTC 現已成為 W3C 和 IETF 標準
概略介紹 WebRTC 的歷史、架構、用途與未來。
輪轉介面的最佳做法
瞭解如何最佳化輪轉介面來提高效能和可用性。
使用 HTTPS 進行本機開發作業
在多數情況下, http://localhost 會以 HTTPS 的形式運作,以利開發。不過,在某些 特殊情況 下 (例如自訂主機名稱或跨瀏覽器使用安全 Cookie),您必須明確設定開發網站的行為,讓網站像 HTTPS 一樣運作,以便準確呈現網站在實際環境中的運作方式。(如果您的正式網站未使用 HTTPS,請 優先改用 HTTPS )。 本頁面說明如何在本機上透過 HTTPS 執行網站。 如需簡短操作說明,請參閱 mkcert 快速參考資料 。 如要使用 HTTPS 與本機開發網站,並存取
使用 HTTPS 進行本機開發的時機
在大多數情況下,使用 http://localhost 進行本機開發作業都沒問題,但在某些特殊情況下則不行。本文說明何時需要透過 HTTPS 執行本機開發網站。 另請參閱: 如何在本機開發時使用 HTTPS 。 在本篇文章中,關於 localhost 的陳述式也適用於 127.0.0.1 和 [::1] ,因為兩者都描述本機電腦位址,也稱為「迴送位址」。此外,為簡化操作,我們並未指定通訊埠號碼。 因此,當您看到 http://localhost 時,請讀成
意見回饋:如何改善長效網頁的版面配置位移指標
瞭解我們如何改善「累計版面配置位移」指標,並提供意見回饋。
建立側邊導覽列元件
如何建立回應式投影片側邊導覽列的基本總覽
程式碼研究室:建構 Sidenav 元件
瞭解如何建構回應式投影片側邊導覽版面配置元件。
程式碼研究室:在 CSS 中置中
瞭解 CSS 的 5 種不同置中技巧。
在 CSS 中置中
運用 5 項著重學習技巧來完成一系列測試,瞭解哪項技術最能應對變革。
愛你的快取 ❤️
第一次載入效能很重要,但 #39 並非一切。因此,再次載入網站的使用者將利用快取來存取內容,因此必須確保網站執行速度和準確性,才能順利存取內容。
跨瀏覽器繪畫工作台和 Houdini.how
瞭解如何實作跨瀏覽器 Houdini Paint API's,與 Houdini.how 一起探索霍迪尼作品台的世界。
付款表單最佳做法程式碼研究室
瞭解付款方式的最佳做法。
註冊表單最佳做法程式碼研究室
使用跨平台瀏覽器功能建立簡易的註冊表單,讓安全、存取和使用起來更方便。
註冊表單最佳做法
協助使用者註冊、登入及管理帳戶詳細資料,盡量減少麻煩。
地址表單最佳做法程式碼研究室
瞭解地址表單的最佳做法。
使用 AutoWebPerf 自動執行稽核
全新模組化工具,可自動收集來自多個來源的效能資料。
付款和地址表單的最佳做法
協助使用者盡可能快速輕鬆地填寫地址和付款表單,提高轉換率。
簡訊動態密碼表單最佳做法
要求使用者提供透過簡訊提供的動態密碼 (動態密碼) 是確認使用者電話號碼的常見原因。本文將介紹如何建立簡訊動態密碼表單,提供優質使用者體驗。
與服務工作人員之間的雙向通訊
如何在網頁與 Service Worker 之間建立雙向通訊管道。
透過 Service Worker 向網頁廣播更新
服務工作處理程序如何主動與網頁溝通,以掌握特定事件。
命令式快取指南
如何通訊視窗和服務工作站,以執行與效能、快取和離線相關的工作。
工作站總覽
網頁工作人員和服務工作處理程序如何改善網站的效能,以及何時使用網路工作程式與服務工作處理程序。
停用滑鼠加速功能,提供更優質的 FPS 遊戲體驗
網頁應用程式現在可在擷取指標事件時,停用滑鼠加速功能。
打造精選故事元件
說明如何在網路上發布類似 Instagram 故事體驗的基本簡介。
程式碼研究室:建構故事元件
瞭解如何在網路上建立與 Instagram 限時動態類似的體驗。
CMS 瀏覽器層級的延遲載入
本文將介紹如何在內容管理系統中採用載入屬性。
配置的同網站
"same-site" 的定義已改為包含網址配置,因此,現在網站 HTTP 和 HTTPS 版本之間的連結會視為跨網站要求。預設升級至 HTTPS,以免發生問題,或是繼續閱讀相關說明,瞭解需要哪些 SameSite 屬性值。
程式碼研究室:建構推播通知伺服器
互動式逐步教學課程:瞭解如何建立一個伺服器,用於管理推播通知訂閱,以及將網路推送通訊協定要求傳送至推送服務。
程式碼研究室:建構推播通知用戶端
互動式逐步教學課程,說明如何建構用戶端來訂閱推播通知、顯示推播通知,以及取消訂閱使用者來自推播通知。
推播通知總覽
概略介紹推播通知的定義、使用方式和運作方式。
評估離線用量
如何追蹤網站的離線使用狀況,協助撰寫網站需要改善離線體驗的原因。
高效能 CSS 動畫示例
示範如何運用高效能技巧製作複雜而精美的動畫。
CSS min()、max() 和 clamp()
最小、最大和取值範圍提供了強大的 CSS 功能,讓您不必編寫多餘的程式碼,即可打造回應式樣式。本文將介紹如何控制元素大小、維持適當的間距,以及如何使用以下受眾支援的 CSS 數學函式實作流體字體排版。
Signed Exchange (SXG)
SXG 是一種傳遞機制,可以讓資源不受傳送方式影響,可以同時驗證資源來源。
使用與流程相關的速記符號,強化邏輯版面配置
新的邏輯屬性縮寫和 Chromium 的新內嵌屬性。
為什麼有些動畫速度緩慢?
製作良好的動畫是良好的網路體驗核心。這篇文章將說明為何某幾類動畫的成效優於其他類型。
處理 Service Worker 中的範圍要求
確認 Service Worker 知道在要求部分回應時,該如何處理。
如何建立高效能 CSS 動畫
如要提升 CSS 動畫的效能,請盡量使用變形和不透明度的 CSS 屬性,並避免任何會觸發版面配置或繪製作業的行為。
控制相機的平移、傾斜和縮放功能
攝影機上的平移、傾斜和縮放功能最終都可以在網路上控制。
什麼是第三方來源試用?
來源試用是用來測試全新或實驗性網路平台功能的方式。第三方來源試用能讓嵌入內容的提供者在多個網站上試用新功能。 來源試用 是測試全新或實驗性網路平台功能的方式。 來源試用通常只能以第一方的方式進行,也就是僅適用於一個註冊的「來源」 。如果開發人員想在其他嵌入其內容的來源上測試實驗功能,則這些來源都必須註冊來源試用,每個來源都有專屬的試用權杖。這並不是可彈性調整的方法,以測試內嵌於多個網站的指令碼。 第三方來源試用能讓嵌入內容的提供者在多個網站上試用新功能。
卸離視窗記憶體流失
卸離視窗是一種常見的記憶體流失類型,特別難以找出並修正。
建立離線備用頁面
瞭解如何為應用程式打造簡易的離線體驗。
使用 CSS's clip-path 屬性建立有趣的圖片形狀
而在 CSS 中使用剪輯功能,可以幫助我們擺脫設計框架,讓所有內容變得像箱子一樣。使用各種基本形狀或 SVG ,就能建立裁剪路徑。然後將您不想顯示的元素部分刪掉。
使用 CSS 的自訂項目符號 ::marker
使用 CSS 自訂「`」或「`」元素中的數字或項目符號顏色、大小、類型。
新增可變更密碼的知名網址,協助使用者輕鬆變更密碼
將使用者要求重新導向至 /.well-known/change-password 至變更密碼網址,讓使用者能比以往更輕鬆地更新密碼。
與服務工作人員協調付款交易
註冊網頁式付款應用程式後,即可接受商家的付款要求。本文說明如何在執行階段自動化調度管理來自 Service Worker 的付款交易。
與服務工作人員處理選擇性付款資訊
註冊網頁式付款應用程式後,即可接受商家的付款要求。本文說明如何在執行階段自動化調度管理來自 Service Worker 的付款交易。
ARIA:毒藥或抗圓點?
應用程式語言不靠螢幕閱讀器,如何降低使用的障礙?
使用 Emscripten 對 WebAssembly 中的記憶體流失情形進行偵錯
瞭解如何使用 WebAssembly,以安全且符合慣用的做法,將以其他語言編寫的程式庫帶入網路。
content-visibility:可提升算繪成效的全新 CSS 資源
CSS 內容顯示屬性可略過轉譯畫面外內容,提升網站內容轉譯效能。本文將說明如何使用 auto 關鍵字,運用這項新的 CSS 屬性加快初始載入時間。您也會瞭解 CSS 容器規格和其他內容可見度值,以便進一步控管內容在瀏覽器中的顯示方式。
正在解除封鎖剪貼簿
Async Clipboard API 簡化了易於使用權限的複製及貼上程序。
參照網址和參照網址政策最佳做法
請考慮將參照網址政策設為「strict-origin-when-cross-origin」。這項政策會保留大部分的參照網址's 實用性,同時降低跨來源外洩資料的風險。
Android 網頁版
瞭解如何使用各種元件在 Android 應用程式中轉譯網頁內容。
在 Google 建構 PWA - 第 1 部分
公告團隊在開發 PWA 時,對服務工作人員的瞭解。
使用 Lighthouse CI 監控效能
瞭解如何設定 Lighthouse CI 並整合至開發人員工作流程。
設計 Google 帳戶密碼金鑰的使用者體驗
為 Google 帳戶帶來更優異的安全性和更優質的使用者體驗。
@property:為 CSS 變數提供超能力
瞭解如何直接在 CSS 檔案中導入語意輸入、備用值等導入 CSS 自訂屬性。
網站速度和業務指標的關聯性
利用 A/B 測試,評估網站速度對業務指標的影響。
註冊網頁式付款應用程式
瞭解如何為客戶註冊網頁式付款應用程式 #39;瀏覽器。您也將學習如何偵錯。
透過 Android 付款應用程式提供運送和聯絡資訊
瞭解如何修改 Android 付款應用程式,以便在商家透過 Payment Request API 要求使用者時,提供使用者選取的運送地址,以及聯絡資訊。
網頁式付款應用程式總覽
瞭解如何調整網頁式付款應用程式,以配合網頁付款功能,並提供更優質的使用者體驗。
Service Worker 快取和 HTTP 快取
在 Service Worker 快取和 HTTP 快取層中使用一致或不同的到期邏輯的優缺點。
處理導航要求
瀏覽要求是指您在導覽列中輸入新網址,或點選網頁上的連結時,所產生的 HTML 要求。服務工作處理程序能大幅影響效能:透過 Service Worker 即可直接回應,不必等待網路,就能確保導覽服務穩定快速、彈性。
使用 Chrome 使用者體驗報告查看實際成效
Chrome 使用者體驗報告 (舊稱 CrUX) 是公開資料集,內含數百萬個網站的實際使用者體驗資料。與研究室資料不同,CrUX 資料實際上來自現場選擇加入的使用者。
一行 CSS 提供十種現代版面配置
本文重點介紹幾行功能強大的 CSS 行,分別處理一些嚴重繁瑣的事務,並協助您建構完善的現代版面配置。
透過 devicePixelContentBox 完美呈現象素風格
從 Chrome 第 84 版開始,ResizeObserver 支援名為 device-pixel-content-box 的新方框測量方法,以實體像素測量元素和#39;s 尺寸。這對於轉譯完美像素圖像十分重要,特別是在高密度螢幕中。
web.dev 直播總結
這個 3 天線上社群活動公告的重大新聞和最新消息摘要,以及未來區域活動的相關提醒。
逐步強化漸進式網頁應用程式
瞭解如何逐步強化 Progressive Web App,使其在所有新式瀏覽器中仍然具有實用性,同時在支援新網路功能的瀏覽器上提供進階體驗,例如檔案系統存取、系統剪貼簿存取、聯絡人擷取、定期背景同步、螢幕喚醒鎖定、網路共用功能等。
使用跨平台瀏覽器功能建構登入表單
使用跨平台瀏覽器功能,建立安全、無障礙且易於使用的簡易登入表單。
登入表單最佳做法
使用跨平台瀏覽器功能,建立安全、無障礙且易於使用的登入表單。
使用網頁開發人員工具對 Google 搜尋中的 JavaScript 問題進行偵錯
如何針對個別網頁或整個網站的 SEO 問題進行偵錯。
透過 Workbox 打造彈性的搜尋體驗
如何透過 Background Sync 和 Push API,透過 Workbox 實現靈活彈性的搜尋體驗。
在網頁中加入媒體
使用 和 標記將媒體檔案嵌入網頁中。
以大膽連結的方式沒有任何人連結:文字片段
文字片段則可讓您在網址片段中指定文字片段。造訪含有這類文字片段的網址時,瀏覽器可以強調和/或讓使用者註意到網址'。
如何回報良好的瀏覽器錯誤
告訴瀏覽器廠商您在特定裝置或平台上發現的問題,是讓網路平台更加完善的關鍵!
讓 PWA 感覺像應用程式一樣
瞭解如何使用網頁技術實作特定平台的應用程式模式,讓你的漸進式網頁應用程式看起來更像 "real"。
使用 RAIL 模型評估效能
RAIL 模型能讓設計人員和開發人員穩定地鎖定對使用者體驗影響最大的效能最佳化工作。瞭解 RAIL 模型訂立的目標和準則,以及你可以使用哪些工具來達成這些目標。
使用 Quicklink 在 React 中加快瀏覽速度
Quicklink 程式庫會在閒置期間預先擷取顯示連結,以加快後續網頁載入速度。
使用擷取中繼資料功能,保護資源不受網路攻擊
擷取中繼資料是全新的網路平台功能,可讓伺服器防止自己受到跨來源攻擊。
內容重新排序
使用 CSS 建立版面配置時,必須格外小心,別讓使用鍵盤瀏覽的使用者無法產生負面體驗。
Chromium 84 中的 Web Animations API 改良項目
整理網頁動畫即將更得心應手。
設定付款方式
使用 Web Payments 進行付款交易時,第一步就是探索付款應用程式。瞭解如何設定付款方式,並讓商家和客戶能夠透過應用程式付款。
Android 付款應用程式開發人員指南
瞭解如何調整 Android 付款應用程式,以配合網路付款功能,並提供更優質的使用者體驗。
使用 Web Payments 提供付款應用程式
Web Payments 的目標是提供流暢的線上付款體驗。瞭解運作方式和優點,並做好整合付款應用程式與 Web Payments 的準備。
付款交易的生命週期
瞭解商家如何整合付款應用程式、付款交易如何與 Payment Request API 搭配運作,以及 Web Payments 的功能。
Chromium 83 中 macOS system-ui 字型提供更多可變字型選項
Chromium 80 在 macOS 上採用系統 UI 字型粗細迴歸功能。Chromium 第 83 版值得期待,以及後來解決後解析度出現的全新超級超支,絕對值得你期待。
漸進式網頁應用程式如何推動業務成長
建構可靠的 PWA 商業案例。瞭解適當的投資時機,以及如何衡量成效。
使用應用程式捷徑快速完成工作
應用程式捷徑可讓使用者快速存取幾項常用動作。
正在準備移除 AppCache
Chrome's 和其他瀏覽器詳細資訊' 計劃移除 AppCache。
永久儲存空間
永久儲存空間可協助保護重要資料,避免資料遺失,並降低資料遺失的風險。
如何定義安裝策略
結合不同安裝方案的最佳做法,提高安裝率,並避免平台競爭和競食效應。
CommonJS 如何運用大型套件
CommonJS 模組非常動態,可避免 JavaScript 最佳化器和組合對其執行進階最佳化。
在 Chrome 中剖析網路音訊應用程式
瞭解如何使用「about://tracing」和 Chrome 開發人員工具中的 **WebAudio** 擴充功能,在 Chrome 中分析網路音訊應用程式的效能。
為何需要 ";跨來源隔離" 以享有強大的功能
有些網路 API 會增加 Spectre 等旁路攻擊的風險。為降低這類風險,瀏覽器提供一個選擇採用的隔離環境,稱為「跨來源隔離」。瞭解為何需要使用跨來源隔離,以便使用強大的功能,例如「SharedArrayBuffer」、「performance.measureUserAgentspecificMemory()」和高解析度計時器。
透過精細的分塊改善 Next.js 和 Gatsby 網頁載入效能
瞭解 Next.js 和 Gatsby 如何改善建構輸出內容,盡可能減少重複程式碼,並提高網頁載入效能
" same-site" " same-origin"
"same-site"和 "same-origin"經常被引用,但通常誤解。本頁將說明其功能以及不同之處。
使用 COOP 和 COEP 建立網站 "跨來源隔離
有些網路 API 會增加 Spectre 等旁路攻擊的風險。為降低這類風險,瀏覽器提供一個選擇採用的隔離環境,稱為「跨來源隔離」。使用 COOP 和 COEP 即可設定這類環境,並啟用「SharedArrayBuffer」、「performance.measureUserAgentspecificMemory()」或高解析度計時器等強大功能,同時提升精確度。
使用 measureUserAgent specificMemory() 監控網頁和#39 的記憶體總用量
瞭解如何在實際工作環境中評估網頁的記憶體用量,以便偵測迴歸。
web.dev 工程網誌 #1:我們如何製作網站並使用網頁元件
在一篇 web.dev 工程團隊撰寫的第一篇文章中,瞭解我們如何建構網站,包括如何使用 Eleventy 和 Web 元件。
使用色彩配置 CSS 屬性和對應的中繼標記改善深色模式預設樣式
色彩配置 CSS 屬性和對應的中繼標記可讓開發人員為網頁啟用使用者代理程式樣式表的主題預設值,例如表單控制項、捲軸和 CSS 系統顏色。同時,這項功能會防止瀏覽器自行套用任何轉換。
在 COVID-19 期間,請確保您的網站可供所有人使用
如何確保網站的核心功能隨時可用、易於存取、安全、方便使用、容易找到且運作快速。
修正伺服器超載問題
如何判斷伺服器';快速修正瓶頸、改善伺服器效能,以及避免迴歸問題。
無障礙輕觸目標
務必在行動裝置或觸控螢幕裝置上使用互動元素,確保互動元素周圍有足夠的空間。這麼做可協助所有人,尤其是行動不便的使用者。
色彩和對比無障礙功能
瞭解如何改善色彩和對比度,讓網頁更易於存取。
無障礙回應式設計
我們知道這個版本
運用 Trusted Types 防範 DOM 型跨網站指令碼攻擊安全漏洞
隆重推出 Trusted Types:透過這個瀏覽器 API,現代網頁應用程式可防止 DOM 型跨網站指令碼攻擊。
在 Android 應用程式中使用 PWA
如何在 Android 應用程式中開啟漸進式網頁應用程式。
預先載入選用字型,避免版面配置位移和閃爍未顯示的文字 (FOIT)
透過最佳化轉譯週期,Chrome 83 可以在預先載入選用字型時消除版面配置位移。與 font-display: (選用) 搭配使用時,可有效確保自訂字型不會產生資源浪費。
如何使用 nginx 設定 Signed HTTP Exchange (SXG)
如何建立採用 SXG 擴充功能的傳輸層安全標準 (TLS) 憑證、安裝用來產生 SXG 檔案的工具,以及設定 nginx 以提供 SXG 檔案。
如何使用 nginx 發布 Signed HTTP Exchange (SXG)
如何使用 nginx 取得及提供 SXG 檔案,以及預先擷取子資源的挑戰。
使用媒體查詢來最佳化 CSS 背景圖片
使用媒體查詢功能傳送最小所需圖片,這項技術通常稱為回應式圖片。
修正跨部門的網站速度
其他部門如何協助貴公司提升網站速度最佳化專案的成效。
版面配置變更後捲動貼齊
從 Chrome 第 81 版開始,當頁面版面配置變更時,捲動工具會保持貼齊狀態。換句話說,您不再需要新增事件監聽器來強制重新調整位置。
如何使用 Web Packager 設定 Signed Exchange
瞭解如何使用 Web Packager 提供 Signed Exchange (SXG)。
如何提供自己的應用程式內安裝體驗
使用 beforeinstallprompt 事件為使用者提供自訂、流暢的應用程式內安裝體驗。
在實際檢視畫面中放置虛擬物件
WebXR Hit Test API 是一款增強網頁';擴增實境技術,讓您能夠將虛擬物件置於實景中。
虛擬實境可說是網路,第 2 部分
Chrome 79 版已推出網頁版。以 WebXR Device API 為基礎,這項功能推出時是擴增和虛擬實境的基礎。本文是系列文章的第二篇,聚焦於影格迴圈,此為 XR 工作階段中圖片的顯示部分。其他瀏覽器即將支援 WebXR Device API,包括 Firefox Reality、Oculus 瀏覽器、Edge 和 Magic Leap's Helio 瀏覽器。
擴增實境:你可能早就知道
如果您已使用 WebXR Device API,您將會很高興瞭解這項技術,但現在不太容易學習。輸入 WebXR 工作階段的步驟大致相同。執行影格迴圈的執行程序大致相同。這兩種設定的差異在於,可透過擴增實境正確顯示內容。
加強網路架構生態系統
瞭解 Chrome 如何投資多項開放原始碼工具,推動 JavaScript 生態系統發展
什麼是漸進式網頁應用程式?
介紹漸進式網頁應用程式 (PWA),以及與其他網頁應用程式區分的三大要素。
透過可遮蓋圖示的 PWA 支援自動調整圖示
可遮蓋圖示的這種格式可讓您進一步控制設定,讓漸進式網頁應用程式使用自動調整圖示。可遮蓋的圖示在所有 Android 裝置上都能呈現良好效果。
使用 Workbox 將 PWA 整合至內建分享使用者介面
如何在 Workbox 中註冊路徑,讓漸進式網頁應用程式可以與平台專用應用程式一起顯示,在系統層級的分享 UI 中就能顯示。
改善同步 XMLHttpRequest() 中的網頁關閉問題
It';使用者關閉網頁或應用程式時,經常會有未提交的數據分析或其他資料。網站會使用同步對 XMLHttpRequest() 的呼叫來保持網頁或應用程式開啟,直到資料傳送至伺服器為止。這麼做不但會影響使用者體驗,還會忽略更有效的資料節省方式。為瞭解決這個問題,Chrome 第 80 版會導入最近的規格變更。
使用模組工作站串連網路
模組工作站可將昂貴的程式碼移至背景執行緒,輕鬆解除封鎖主執行緒,同時保有標準 JavaScript 模組在人體工學和效能方面的優勢。
自動調整載入:改善速度緩慢裝置上的網頁效能
瞭解自動調整載入模式、如何實作,以及 Facebook、Tinder、eBay 和其他公司如何在實際工作環境中使用自動調整載入功能。
速度工具演進史:2019 年 Chrome 開發人員高峰會精彩回顧
瞭解速度工具的最新進展,包括新的成效指標、PageSpeed Insights 和 Chrome 使用者體驗報告 (CrUX) 更新內容,以及 Web Almanac 網路生態系統分析結果的深入分析。
使用網路工作站在瀏覽器執行 JavaScript's 主執行緒
瀏覽器' 的主要執行緒過度處理。透過網路工作人員移出主要執行緒的程式碼,就能大幅改善應用程式'、可靠性和使用者體驗。
來自 2019 年夏季圖片最佳化問卷調查的意見回饋
問卷調查作答者對各種圖片最佳化技巧發表的留言。
建構推播通知伺服器
在這個程式碼研究室中,瞭解如何建構推播通知伺服器。
在 Next.js 中使用預先擷取路徑
Next.js 如何透過路徑預先載入加快導覽速度,以及如何自訂。 本文將說明 Next.js 中的路由運作方式、如何針對速度進行最佳化,以及如何自訂以符合您的需求。 在 Next.js 中,您不必手動設定路由。Next.js 採用以檔案系統為基礎的路由,因此您只需在./pages/ 目錄中建立檔案和資料夾即可: 如要連結至其他網頁,請使用 <Link> 元件,就像使用舊版 <a> 元素一樣: 當您使用 <Link> 元件進行導覽時,Next.js
在 Next.js 中透過動態匯入功能分割程式碼
如何透過程式碼分割和智慧載入策略,加快 Next.js 應用程式的速度。 本文將說明不同類型的 程式碼分割 ,以及如何使用動態匯入功能加快 Next.js 應用程式的速度。 根據預設,Next.js 會將 JavaScript 分割為各個路徑的獨立區塊。使用者載入應用程式時,Next.js 只會傳送初始路徑所需的程式碼。當使用者在應用程式中瀏覽時,他們會擷取與其他路徑相關聯的區塊。以路線為基礎的程式碼分割作業可盡量減少一次需要剖析及編譯的指令碼數量,進而縮短網頁載入時間。
使用 Next.js 做為預設效能
Next.js 會處理 React 應用程式中的許多最佳化作業,因此您不必 Next.js 是一種有特定偏好的 React 架構,內建多項效能最佳化功能。這個架構背後的主要概念,是透過預設納入這些功能,確保應用程式啟動並維持最佳效能。 這份簡介將概略介紹架構提供的許多功能。本系列的其他指南會更詳細地介紹這些功能。 雖然 Next.js 預設提供多項效能最佳化功能,但這些指南旨在進一步說明這些功能,並說明如何運用這些功能打造快速且效能的使用體驗。 一般來說,React
AMP 如何保證 Next.js 應用程式中的載入速度
瞭解在 Next.js 應用程式中支援 AMP 的優點和優缺點 AMP 是一種網頁元件架構,可確保網頁能快速載入。 Next.js 為 AMP 提供了內建支援。 本指南會先簡要說明 AMP 保證能快速載入網頁 ,然後說明 在 Next.js 應用程式中支援 AMP 的各種方式 ,並協助您 決定最適合自己的方法 。 本指南的目標對像是採用 Next.js 的網頁程式開發人員,但不確定是否該支援 AMP。 AMP 可確保網頁速度的兩項主要策略: 在 Next.js 中使用 AMP 的方法有兩種:
與 OS 共用 UI 與 Web Share API 整合
透過 Web Share API,網頁應用程式可以使用系統提供的共用功能,與平台專用應用程式相同。Web Share API 可讓網頁應用程式將連結、文字和檔案提供給安裝在裝置上的其他應用程式,就像平台專用應用程式一樣。
虛擬實境上線
Chrome 79 版已推出網頁版。以 WebXR Devicer API 為基礎,本次推出同時是擴增和虛擬實境的基礎。本文是系列文章的第一篇,探索基本概念並說明如何進入 XR 工作階段。其他瀏覽器即將支援 WebXR Device API,包括 Firefox Reality、Oculus 瀏覽器、Edge 和 Magic Leap's Helio 瀏覽器。
SameSite Cookie 食譜
網站現在可以明確標記 Cookie,以便跨網站使用。瞭解如何標記 Cookie,確保第一方和第三方 Cookie 導入這項變更後能繼續運作。
瞭解 Cookie
瞭解 Cookie 的運作方式,以及第一方和第三方 Cookie 的定義。
網頁速度飛快無比
瞭解快速廣告的價值和考量廣告速度的方法。
使用推播通知吸引使用者或再次與他們互動
使用推播通知,透過精確的即時更新吸引使用者。
開始使用 Notifications API
在這個程式碼研究室中,您可以瞭解如何要求使用者權限及傳送通知。
使用 Service Worker 管理通知
在這個程式碼研究室中,瞭解如何透過 Service Worker 管理通知。
修正版面配置不穩定性
使用 WebPageTest 找出並修正版面配置不穩定性問題的逐步操作說明。
即使在功能型手機上,也能讓網頁應用程式快速載入
功能型手機正在復甦,並且廣受歡迎,特別是在 2G 為常態的新興市場。以下是我們在製作 PROXX 時所學到的經驗,這是一款行動版掃雷遊戲的複製品,可在 2G 功能手機上快速載入。
Houdini 的全新 API 提供更聰明的自訂屬性
雖然 CSS 變數很實用,但並不容易使用,因為這類變數可以接受任何值且遭到覆寫,且無法搭配轉換。CSS Properties 和 Values API 級別 1 解決了這些問題。
預先擷取資源,加快日後瀏覽的速度
瞭解 rel=prefetch 資源提示與使用方法。
預先擷取的方法有兩種:<link> 代碼和 HTTP 標頭
瞭解如何透過預先擷取資源加快日後的瀏覽速度。
什麼是混合內容?
當初始 HTML 是透過安全的 HTTPS 連線載入,但透過不安全的 HTTP 連線載入其他資源時,就會發生混合內容。
修正複合型內容
瞭解如何修正網站上的混合內容錯誤,藉此保護使用者並確保所有內容都能順利載入。
為網頁提供基本影片,跳脫圖片框架
研究顯示,網路影片可提高參與度和銷售量。即使您尚未將影片加入自己的網站',也只要過一段時間就大功告成了。
在漸進式網頁應用程式中新增 Apple Touch 圖示
互動式示範影片,說明如何指定 iOS 主畫面應顯示哪個圖示。
現成播放器網頁
網路平台目前對於遊戲開發已相當成熟。採用遊戲設計和營利的最佳做法,是打造現代網路遊戲的關鍵。本文將針對這項目標提供指引。
多來源網站的漸進式網頁應用程式
建構 PWA 時,多來源架構面臨著許多挑戰。探索多個來源的良好用途和惡意用途,以及在多來源網站上建構 PWA 的一些解決方法。
縮小網頁字型大小
本文章將說明如何縮減網站上使用的 WebFonts 大小,這樣良好的字型排版有助於避免速度過慢的網站。
最佳化 WebFont 載入和算繪
這篇文章將說明如何載入 WebFonts,避免在載入網頁時無法使用 WebFonts 時版面配置位移和空白網頁。
使用 Angular CLI 建立漸進式網頁應用程式
瞭解如何建立可安裝的漸進式 Angular 應用程式。
有效載入第三方 JavaScript
瞭解如何避免使用第三方指令碼的常見錯誤,進而改善載入時間和使用者體驗。
找出速度緩慢的第三方 JavaScript
瞭解如何使用 Lighthouse 和 Chrome 開發人員工具找出速度緩慢的第三方資源。
使用映像檔 CDN 最佳化映像檔
建議你使用圖片 CDN 將網站和圖片 #39 最佳化,並降低使用者的資料費用。
第三方 JavaScript 成效
這篇文章將說明常見的第三方 JavaScript 類型,以及這些 JavaScript 可能會造成的效能問題。也會提供最佳化第三方指令碼的一般指南。
最佳化第三方 JavaScript
在 Lighthouse 的協助下,瞭解最佳化緩慢第三方資源的技巧。
更多表單控制項功能
全新的網路平台功能可讓你輕鬆建構類似內建表單控制項的自訂元素。
盡早建立網路連線,以提升使用者感知的網頁速度
瞭解 rel=preconnect 和 rel=dns-prefetch 資源提示與使用方式。
使用背景幕濾鏡建立 OS 樣式背景
瞭解如何使用 CSS background-filter 屬性為網路上的 UI 元素加上模糊和透明度等背景效果。
定期重新驗證,確保內容新鮮有趣
過時的同時重新驗證可協助開發人員在立即載入快取內容與更新間隔之間取得平衡,確保日後使用快取內容的更新。
使用 Angular CDK 將大型清單虛擬化
瞭解如何使用 Angular Component Dev Kit 實作虛擬捲動功能,讓大型清單更具回應性。
最佳化 Angular's 變化偵測
瞭解如何最佳化 Angular 應用程式' 變更偵測功能,讓應用程式的回應更加靈敏。
Angular 中的路徑預先載入策略
瞭解如何使用 Angular's 預先載入的策略來提升應用程式速度。
根據聯播網品質調整影片,配合圖片放送情況
瞭解如何使用 Network Information API 根據網路品質調整內容。
透過預測預先擷取功能加快網頁瀏覽速度
程式碼分割功能可讓您加快應用程式速度,但可能會拖慢後續瀏覽速度。預測預先擷取是一種有效率的方式,可透過資料分析功能,聰明地預先擷取使用者接下來可能會使用的內容,以最佳化網路使用率。
透過 Codelyzer 稽核 Angular 應用程式's 無障礙功能
瞭解如何使用 Codelyzer 讓 Angular 應用程式可供存取。
透過 Angular CLI 提供效能預算
瞭解如何直接在 Angular CLI 中使用效能預算!
使用 Angular Service Worker 進行預先快取
瞭解如何使用 Angular Service Worker,在應用程式中預先快取靜態資產。
Preferencess-color-scheme:嗨,黑暗,我的老朋友
許多裝置現在都支援作業系統寬鬆的深色模式或深色主題。本文旨在說明網頁如何支援深色模式、列出最佳做法,並介紹名為「深色模式切換」的自訂元素,讓網頁開發人員可在特定網頁中,為使用者提供覆寫作業系統層級偏好設定的方法。
提升網站效能的最佳訣竅
使用 srcset 自動選擇正確的圖片大小。
Angular 中的路徑層級程式碼分割
瞭解如何使用路徑層級程式碼分割功能,縮減初始應用程式套件。
開始使用:最佳化 Angular 應用程式
瞭解如何讓 Angular 應用程式更加穩定、更可靠、可供偵測、安裝和存取!
網路元件:推動網路運作的秘密要素
本文總結了 Polymer Project 和 Salesforce Caridy Patiño 的 Kevin Schaaf 對 2019 年網路元件的討論。
使用 Lighthouse 設定效能預算
Lighthouse 現已支援效能預算。這項功能「LightWallet」,只要 5 分鐘就能完成設定,並提供網頁資源大小和數量的 Feedvack。
速度的價值
證明網站改善後產生的收益,但排除了行銷廣告活動等外部因素。
Web Payments API 更新
自 Chrome 53 版在 Chrome 53 版中推出,在 Chrome 68 版中推出 Payment Handler API 以來,也對相關規格進行了幾項變更。本文摘要說明這些更新,並會繼續累積 API 變更。
安裝電腦版漸進式網頁應用程式的網址列
只要在 Chrome 網址列中使用全新的安裝按鈕,即可輕鬆安裝漸進式網頁應用程式。
成效如何提高轉換率?
瞭解網站效能對電子商務漏斗不同部分的影響
服務工作處理程序的思維
對許多網站開發者來說,與服務工作站合作是初衷且不熟悉的做法。這篇文章提供了一些訣竅,幫助您構思意見。
如何通知使用者我的 PWA 可供安裝?
如何鼓勵安裝漸進式網頁應用程式及最佳做法。
宣傳 PWA 安裝模式
如何鼓勵安裝漸進式網頁應用程式及最佳做法。
圖片政策:縮短載入時間及其他相關事項
圖片佔據大量視覺空間,是網站上下載位元組的大部分內容。請使用新功能政策來辨識超大型圖片。
使用重大問題擷取關鍵 CSS 並內嵌
瞭解如何使用 Critical 擷取關鍵 CSS 並內嵌重要 CSS,同時縮短轉譯時間。
長時間的 JavaScript 工作是否拖慢了互動準備時間?
瞭解如何診斷高成本、避免使用者互動的工作。
擷取重要的 CSS
瞭解如何使用重要 CSS 技術縮短轉譯時間,以及如何選擇最適合專案的工具。
大規模加速網站效能:什麼是網站效能更新?
在 2019 年 Google I/O 大會中,我們推出了三項新的網頁成效計畫,希望可以為所有人改善使用者體驗。
隆重推出 PROXX
PROXX 是做為 PWA 建構的類似踩地雷遊戲。這項功能適用於各種裝置,且隨著裝置功能越強大,視覺效果也會逐漸提升。
使用 Web Perception 工具包進行視覺化搜尋
是否適合用相機搜尋您的網站?
SameSite Cookie 說明
瞭解如何用 SameSite 屬性標記第一方和第三方使用的 Cookie。您可以使用 SameSite' Lax 和 Strict 值強化網站安全性,以加強防範 CSRF 攻擊。指定新的 None 屬性後,即可明確標示要跨網站使用的 Cookie。
針對傳送門進行實作:順暢瀏覽網頁
新提議的 Portal API 可讓您採用簡便的前端介面,同時自訂轉場效果,讓使用者順暢瀏覽內容。本文將說明如何透過入口網站實際操作,改善網站使用者體驗。
根據網路品質自動調整放送
使用 Network Information API,根據使用者的連線品質調整提供給使用者的資產。
使用 brotli 壓縮網路酬載
在本程式碼研究室中,瞭解 Brotli 壓縮如何進一步降低壓縮比率和應用程式整體大小#39。
2019 年 I/O 大會的 web.dev
在 2019 年 Google I/O 大會中,web.dev 團隊的成員推出了許多更新項目,包括經過重新設計的設計、更多 Lighthouse 文件,以及全新的網誌。
什麼是速度?
速度是很重要的,但這個意思究竟是指什麼?網站速度飛快代表什麼意思?
如何維持快速?
品牌若能加快速度,往往會迅速發現結果。在這篇文章中,我們會探討如何提供快速流暢的體驗。
如何測量速度?
實際效能會因使用者人數、裝置、網路連線等因素而異。在本文中,我們將介紹可協助您收集研究室或實際資料來評估網頁效能的工具。
透過回應視窗將大型清單虛擬化
response-window 是一種程式庫,可讓大型清單有效率地轉譯。
在透過 Workbox 建立 React 應用程式時預先快取
Workbox 內建於 Create React 應用程式,提供預設設定,在每次版本時預先快取應用程式中的所有靜態資產。
使用因應回應預先算繪路徑
response-snap 是第三方程式庫,可將您網站上的網頁預先轉譯成靜態 HTML 檔案。這可改善應用程式的首次顯示時間。
使用 React.lazy 和 Suspense 分割程式碼
React.lazy 方法可以運用動態匯入功能,輕鬆在元件層級將 React 應用程式分割為元件。可與 Suspense 搭配使用,向使用者顯示適當的載入狀態。
使用 react-axe 和 eslint-plugin-jsx-a11y 進行無障礙功能稽核
response-axe 是一個程式庫,用於稽核 React 應用程式,並將任何無障礙功能問題記錄至 Chrome 開發人員工具控制台。eslint-plugin-jsx-a11y 是 ESLint 外掛程式,可直接在 JSX 中識別並強制執行多項無障礙規則。若搭配使用這兩項工具,可以提供完善的稽核方法,以便找出並修正應用程式中的無障礙問題。
開始使用:最佳化 React 應用程式
React 是開放原始碼程式庫,可讓您更輕鬆地建構 UI。這個學習路徑將說明生態系統中的各種 API 和工具,供您考慮運用,提升應用程式的效能和可用性。
使用 Create React 應用程式新增網頁應用程式資訊清單
根據預設,Create React 應用程式包含網頁應用程式資訊清單。修改這個檔案後,您可以變更應用程式在使用者裝置上安裝時的顯示方式。
程式碼研究室:預先載入重要資產,藉此提升載入速度
在本程式碼研究室中,您將瞭解如何預先載入及預先擷取資源,藉此改善網頁效能。
偏好減少動態:有時候,動作越少
偏好減少動作媒體查詢會偵測使用者是否已要求系統盡量減少使用的動畫或動作量。適合要求或偏好最小化動畫的使用者;舉例來說,患有骨骼疾病的人通常會偏好讓動畫盡量縮小
延後不重要的 CSS
瞭解如何透過最佳化關鍵轉譯路徑,以及改善首次內容繪製 (FCP) 為目標,延遲不重要的 CSS。
信任關係良好,觀測能力更佳:《Intersection Observer v2》
Intersection Observer v2 新增了一個功能,不僅能夠觀察每段路的交叉路口,還可偵測交叉元素在交集時是否可見。
回應式網頁設計基本概念
根據使用者的裝置需求和功能建立網站。
可建構的樣式表
可建構的樣式表可讓您輕鬆建立樣式,並將樣式分發至文件或陰影根,不必擔心支撐。
在網路上算繪
在應用程式中實作邏輯和算繪的建議。
在建構程序中納入效能預算
隨時注意效能預算的最佳方式是自動進行。瞭解如何選擇最符合貴公司需求與目前設定的工具。
搭配 Travis CI 使用 bundlesize
以最少設定來定義效能預算,並搭配 Travis CI 使用套裝組合,在開發工作流程中強制執行預算。
使用 webpack 設定效能預算
瞭解如何設定效能預算,並隨時與 Webpack 搭配使用。
使用 Lighthouse 機器人設定效能預算
你與#39;為了快速達成目標,現在可運用 Lighthouse 機器人在 Travis CI 自動化執行效能測試,確保作業速度飛快。
編寫與 npm
如何將 WebAssembly 整合至這項設定中?在本文中,我們會以 C/C++ 和 Emscripten 為例,說明這個解決方案。
已安裝您的應用程式嗎?getInstalledRelatedApps() 就會告訴你!
getwareRelatedApps() API 是一種網路平台 API,可讓您檢查使用者的裝置是否已安裝您的 iOS/Android/電腦版應用程式或 PWA。
為新型瀏覽器提供新程式碼,加快網頁載入速度
在本程式碼研究室中,您可以瞭解如何減少轉譯的程式碼量,藉此改善應用程式的效能。
運用用戶端提示根據使用者進行調整
用戶端提示是一組 HTTP 要求標頭,可用於根據使用者的裝置和網路連線的特性,變更我們提供網頁資源的方式。本文將逐一介紹客戶提示、運作方式,以及這些提示如何讓您網站更快速。
使用語意式 HTML 輕鬆取勝
只要使用正確的語意式 HTML 元素,就能滿足大部分或所有鍵盤存取需求。這樣一來,您就不必再花時間調整 tabindex,使用者也會更滿意!
聚焦樣式
焦點指標 (通常以 "對焦環" 表示) 代表目前聚焦的元素。對無法使用滑鼠的使用者來說,這項指標極為重要,因為這項指標可以幫助他們使用滑鼠指標。
語意和螢幕閱讀器
您是否曾想過,螢幕閱讀器等輔助技術如何知道要向使用者顯示什麼資訊?答案是,開發人員必須使用語意式 HTML 標記自己的網頁,才能有效使用這些技術。不過,什麼是語意?螢幕閱讀器如何使用語意?
標籤和文字替代項目
為了讓螢幕閱讀器向使用者顯示語音的 UI,有意義的元素必須有適當的標籤或文字替代項目。標籤或文字替代項目會為元素提供可解讀的名稱,這是在無障礙功能樹狀結構中表示元素語意的主要屬性之一。
使用 Tab 鍵控制焦點
標準 HTML 元素內建鍵盤無障礙功能。建立自訂互動元件時,請使用 Tabindex 確保元件和鍵盤皆可存取。
鍵盤存取基礎知識
許多使用者都會仰賴鍵盤瀏覽應用程式,無論是暫時或永久性障礙的使用者,還是使用鍵盤快速鍵提升效率和生產力的使用者,都不成問題。為應用程式製訂完善的鍵盤瀏覽策略,可為所有使用者帶來更好的體驗。
什麼是無障礙設計?
無論任何使用者或身心障礙者,都可以存取具有存取功能的網站,並由最多元化的使用者類型操作這類網站。
標題和位置標記
只要使用正確的標題和地標元素,即可大幅改善輔助技術使用者的瀏覽體驗。
瀏覽器沙箱
如要防範攻擊,開發人員必須減少安全漏洞,並在應用程式中新增安全性功能。幸好,瀏覽器在網路上提供許多安全功能,包括 "sandbox" 這個概念。
搜尋服務的運作方式
搜尋引擎是圖書館員的數位版本。這項工具使用完整索引,有助於找出特定查詢的正確資訊。瞭解搜尋的基本概念後,即可協助使用者找到您的內容。
使用 Imagemin 壓縮圖片
未壓縮的圖片會大量載入網頁,並呈現不必要的位元組。執行 Lighthouse 功能,透過壓縮圖片找出可以改善網頁載入速度的機會
修正幕後 404 錯誤
在本程式碼研究室中,瞭解如何追蹤可能導致網頁無法正確建立索引的幕後 404 錯誤。
安全性不應該如此嚇人!
當你想到 "security" 這個說法時,這個詞通常出現在負面新聞內容中。然而,安全性是網站開發中的積極且必要的一環,就像 ";使用者體驗";或 "無障礙設計"。
利用程式碼分割功能減少 JavaScript 酬載
傳送大量 JavaScript 酬載會大幅影響網站的速度。與其在應用程式的第一頁載入後,立即傳送所有 JavaScript 給使用者,您應該將套裝組合拆成多個部分,並且在一開始就傳送必要的內容。
相同來源政策與擷取;擷取要求
在本程式碼研究室中,瞭解擷取資源時相同來源政策的運作方式。
效能預算入門
效能良好的現象很少副作用。瞭解效能預算,以及如何設定預算助您邁向成功。
使用服務工作處理程序
在本程式碼研究室中,瞭解如何註冊 Service Worker,提升應用程式的可靠性。
使用 WebP 圖片
WebP 圖片的尺寸通常小於其 JPEG 和 PNG 版本,通常檔案大小會縮減 25% 到 35%。這麼做可以降低頁面大小並提升效能。
將 GIF 替換成影片
在這個程式碼研究室中,您可以瞭解如何將動畫 GIF 替換成影片,藉此改善效能。
預先載入重要素材資源,以加快載入速度
您開啟任何網頁後,瀏覽器會要求伺服器提供 HTML 文件、剖析 HTML 檔案的內容,並對任何其他外部參照提交不同的要求。關鍵要求鏈結代表了瀏覽器優先處理及擷取的資源順序。
避免使用閃爍的文字
在本程式碼研究室中,瞭解如何使用字型臉部觀察工具立即顯示文字。
使用 HTTP 快取,避免不必要的網路要求
Browser' HTTP 快取是防止不必要的網路要求的第一道防線。
Workbox:您的高階 Service Worker 工具包
Workbox 是以 Service Worker 和 Cache Storage API 為基礎的高階服務工作站工具包。提供一組可用於實際工作的程式庫,新增網頁應用程式的離線支援。
利用程式碼分割功能減少 JavaScript 酬載
在本程式碼研究室中,您將瞭解如何透過程式碼分割來改善簡易應用程式的效能。
什麼是安全性攻擊?
不安全的應用程式可能會將使用者和系統暴露在各種類型的損害中。如果惡意人士利用安全漏洞或缺乏安全性功能來造成損害,就稱為攻擊。我們將在本指南中說明各種類型的攻擊,讓您瞭解保護應用程式安全時要留意的事項。
如何使用 Lighthouse 評估搜尋引擎最佳化
Lighthouse 搜尋引擎最佳化 (SEO) 會掃描網頁、測試搜尋引擎重視的內容,並提供分數,讓你瞭解有哪些方面需要改善。SEO 十分重要,因為這項工具可以為你帶來更多瀏覽內容的相關使用者。
指定多個運算單元寬度
在本程式碼研究室中,瞭解如何使用尺寸屬性,根據使用者和#39;s 可視區域正確調整圖片大小。
找出從網路載入的資源
為網頁應用程式找出合適的快取策略,需要在載入時取得確切的帳號代碼。建構可靠的網頁應用程式時,網路可以受到各種黑暗力量影響。您必須先瞭解網路漏洞和#39,才能在應用程式中加以處理。