版面配置模式
使用現代 CSS API 建構的版面配置模式，有助於建構常用介面，例如資訊卡、動態格線區域和整頁版面配置。
- 如何查詢 Web Platform Dashboard 的基準工具
- 網站體驗核心指標工作流程和 Google 工具
- 2025 年 2 月基準月月報
- ruby-align 已成為基準
- 使用 Background Fetch API 下載 AI 模型
- 預先擷取資源，加快日後瀏覽的速度
- 對版面配置位移進行偵錯
- 改善累計版面配置位移
- CSS 的 scrollbar-color 和 scrollbar-gutter 已納入新版標準
- 使用 mimalloc 和 WasmFS 調整多執行緒 WebAssembly 應用程式的規模
- 2025 年 1 月基準月摘要
- WasmGC 和 Wasm 尾端呼叫最佳化功能現已可供使用
- 最大內容繪製 (LCP)
- Promise.try 現已成為 Baseline
- 使用 getClientCapabilities() 進行更簡單的 WebAuthn 功能偵測
- 建構可在本機和離線狀態下運作的聊天機器人
- 針對長時間工作進行最佳化調整
- 使用 CSS mask-image 屬性為圖片套用效果
- 2024 年基準：推出更多網頁開發人員工具
- 延遲載入影片
- 預先載入模組
- 評估表單中的瀏覽器自動填入功能
- 第 2 部分：建構用戶端 AI 有害內容偵測機制
- 總封鎖時間 (TBT)
- 改善 Core Web Vitals 最有效的方法
- 最佳化最大內容繪製
- Web Vitals
- 開始評估 Web Vitals
- CSS 內容顯示屬性現已成為新版基準
- 網站體驗核心指標的門檻定義方式
- 手動診斷研究室中的緩慢互動
- 基準主題
- 往返快取
- 使用 CSSNestedDeclarations 改善 CSS 巢狀結構
- 偵錯欄位效能
- First Input Delay (FID)
- 將 Core Web Vitals 和廣告收益與 Google 工具相關聯
- 基準測試 CSS @property 的效能
- 網頁儲存空間
- 立即延遲載入畫面外 iframe 了！
- 在同一個網域上建構多個漸進式網頁應用程式
- 網路推送通訊協定
- 如何打造優質的漸進式網頁應用程式？
- Chrome 如何處理網頁應用程式資訊清單的更新
- 安裝廣告時需要多久？
- 新增網頁應用程式資訊清單
- 使用嚴格的內容安全政策 (CSP) 減少跨網站指令碼攻擊 (XSS)
- 在網路上存取硬體裝置
- 允許透過相關來源要求，在網站上重複使用密碼金鑰
- 選擇合適的圖片格式
- 網頁瀏覽器層級的延遲載入圖片
- 自訂指標
- 使用 Google Analytics 4 和 BigQuery 評估及偵錯成效
- 網路權限最佳做法
- Cookie 通知的最佳做法
- 運用 Media Session API 自訂媒體通知和播放控制項
- 使用 Tabindex
- 尋找欄位中的緩慢互動
- 第一個位元組時間 (TTFB)
- 小型 LLM 實用的提示工程
- Interaction to Next Paint (INP)
- 依 CSS 色彩配置相依的顏色搭配 light-dark()
- 網頁應用程式的 WebAssembly 效能模式
- CSS 動畫格狀版面配置
- 使用遊戲手把玩 Chrome 恐龍遊戲
- Inert 屬性
- 透過 AAGUID 判斷密碼金鑰提供者
- 使用 Binaryen 編譯 Wasm 並進行最佳化
- 擷取 HTML5 中的音訊和視訊
- 模型檢視器> 網頁元件
- 使用者驗證深入解析
- 為什麼 CrUX 資料與我的 RUM 資料不同？
- 網頁程式開發人員適用的無障礙功能
- 載入第三方 JavaScript
- 如果已有密碼金鑰，系統應禁止建立新的密碼金鑰
- 使用索引資料庫
- 2024 年所有前端開發人員都應該知道 5 個 CSS 程式碼片段
- 最佳化首次位元組的時間
- 網址有哪些部分？
- 可搜尋的憑證深入探索
- 轉譯效能
- ResizeObserver：it'；例如適用於元素的 document.onresize
- 最佳化文字型素材資源的編碼和傳輸大小
- OffscreenCanvas - 善用網路工作處理工具，可加快畫布作業速度
- First Contentful Paint (FCP)
- 內容傳遞聯播網 (CDN)
- 良好的登出體驗需要具備什麼條件？
- 互動準備時間 (TTI)
- 使用 Fetch Priority API 最佳化資源載入
- :user-valid 和 :user-invalid 虛擬類別
- 幫助業務決策者改善 Core Web Vitals
- JavaScript 中的 Base64 編碼字串細微差異
- CSS 子格狀檢視
- 有效載入廣告，且不影響網頁速度
- 四種常見的程式碼涵蓋率
- 請就技術層面進行測試
- 定義測試案例和優先順序
- 以使用者為中心的成效指標
- 預先載入回應式圖片
- 透過 CSS 根據使用者偏好設定調整字體排版
- 金字塔還是螃蟹？尋找合適的測試策略
- 三種常見的測試自動化類型
- 排除不必要的下載作業
- 將 mkbitmap 編譯為 WebAssembly
- WebAssembly 是什麼？來源為何？
- 來源私人檔案系統
- 在新型網頁應用程式中安全地代管使用者資料
- 部署 AVIF 提高回應速度的網站
- 改善與下一個顯示的內容的互動方式
- 目前可用的基準功能
- 最佳化輸入延遲時間
- 用戶端轉譯 HTML 和互動功能
- DOM 大小過大對互動的影響，以及您可以採取哪些行動
- 指令碼評估和長時間任務
- 使用 WordPress Playground 和 WebAssembly 建構瀏覽器中的 WordPress 體驗
- 累計版面配置位移 (CLS)
- 為開發人員提供的新功能 – 由 WebAssembly 提供
- 應用程式商店中的 PWA
- 什麼是來源對應？
- 2023 年每位前端開發人員應知道的 6 個 CSS 程式碼片段
- CSS 的三角函式
- 使用 requestVideoFrameCallback() 對影片執行每個影片影格的有效作業
- GDE 社群精選內容：Lars Knudsen
- 快速處理 CSS 的秘訣！動畫漸層文字
- 媒體應用程式的新模式
- 正在打造 Chrometober！
- 建立工具提示元件
- 透過表單自動填入功能使用密碼金鑰登入
- 為無密碼登入建立密碼金鑰
- 建構懸浮動作按鈕 (FAB) 元件
- 字型的最佳做法
- GDE 社群精選：Alba Silvente Fuentes
- 測試網頁設計的顏色對比
- 快速處理 CSS 的秘訣！動畫載入器
- 為網站建立主要導覽
- 是互動形式嗎？
- 代碼和代碼管理工具的最佳做法
- 廣告素材清單樣式
- 營造彎曲的幻覺效果
- Nordhealth 在網頁元件中使用自訂屬性的方式
- 對 CSS 使用個別轉換屬性進行精細的控管機制
- CSS 邊框動畫
- BBC 如何推出 HSTS 來強化安全性與效能。
- 為什麼實驗資料和實際資料有差異 (以及處理方式)
- 雙贏局面
- Internet Explorer 結尾
- 改用 HTML5Rocks
- 第一方 Cookie 食譜
- 同步處理網路上的音訊和視訊播放
- 使用圓角漸層建立酷炫邊框
- JavaScript 程式庫和架構之間的差異
- 使用 Fetch API 時實作錯誤處理
- 選擇 JavaScript 程式庫或架構
- 提供快速精美網路字型的 API
- 前端開發人員指南
- GOV.UK 從前端捨棄 jQuery。
- 建立按鈕元件
- 不要對瀏覽器預先載入掃描器(')
- 消除差距
- 實際評估網站體驗指標的最佳做法
- 在開發人員社群中尋找勇氣和靈感
- 現實生活中的可變字型
- 使用 CSS Gradient Creator 快速建立良好的 CSS 漸層
- 深入瞭解常見的網頁程式開發人員問題點
- 使用 images.tooling.report 呈現完美的網站圖片
- 全域和本機變數範圍
- 建構對話方塊元件
- 在網路上偵錯媒體播放錯誤
- GDE 社群焦點：Nishu Goel
- 過度使用延遲載入的效能影響
- 建立載入列元件
- 儲存表單中的憑證
- Chrome 和 Firefox 即將支援主要版本 100
- 打造自動調整網站小圖示
- 更新 HTTP 快取，藉此提升安全性和隱私防護
- 在 Emscripten 中在畫布上繪圖
- 其他 HTML 元素
- 將 USB 應用程式轉移到網路。第 2 部分：gPhoto2
- 網路錯誤記錄 (NEL)
- WebAssembly 功能偵測
- 將 USB 應用程式轉移到網路。第 1 部分：libusb
- 建立主題切換元件
- 使用 Emscripten 以 C++ 嵌入 JavaScript 程式碼片段
- Oculus Quest 2 的 PWA
- 建築設計
- 設計工具計算機
- 使用 StructuredClone 在 JavaScript 中進行深度複製
- 建立浮動式訊息元件
- UI 資金
- 建立 3D 遊戲選單元件
- 往至動畫平滑度指標
- 2021 年 Chrome 開發人員高峰會公告的所有資訊
- 燈塔使用者流程
- PageSpeed Insights 簡介
- Photoshop' 瀏覽網路的歷程
- 建立複選元件
- 如何使用 Navigation Timing 和 Resource Timing 評估欄位中的載入效能
- 透過 Sanitizer API 進行 Safe DOM 操控
- 使用第三方嵌入功能的最佳做法
- SPA 架構對網站體驗核心指標的影響
- JavaScript 事件深入解析
- 整合非 JavaScript 資源
- 建立分割按鈕元件
- 使用 CSS 模組指令碼匯入樣式表
- CSS 強調色
- 建立切換元件
- 使用者偏好設定媒體功能用戶端提示標頭
- 建立導覽標記元件
- 使用 C、C++ 和 Rust 的 WebAssembly 執行緒
- 媒體串流基本概念
- 媒體架構
- 具備離線串流的 PWA
- 媒體加密
- 建立色彩配置
- @font-face 的 CSS size-Adjust
- 使用 AVIF 壓縮網站上的圖片
- 將 CSS 用於網站體驗指標
- 網路工具中的累計版面配置位移
- 全新 CSS 函式虛擬類別選取器 :is() 和 :where()
- 新的漸進式網頁應用程式訓練課程現已推出
- 全新回應式：網頁設計在元件導向的世界中
- 遷移至使用者代理程式用戶端提示
- 《Excalidraw》與《Fugu》：改善核心使用者歷程
- 安全性標頭快速參考
- Service Worker 中的 ES 模組
- 建構媒體捲動元件
- 使用 Lighthouse 最佳化網站體驗指標
- 使用 WebAssembly 中的非同步網頁 API
- 自訂 PWA's 標題列的視窗控制項
- 確保第三方指令碼受到控管
- 運用 DataTransfer API 打破藩籬
- 使用 WebOTP API 在跨來源 iframe 中填入動態密碼表單
- 建構分割文字動畫
- 改善 CLS 指標
- 網頁程式開發人員滿意度
- 建構設定元件
- JavaScript：這是什麼意思？
- 迷你應用程式開放原始碼專案
- 迷你應用程式元件
- 什麼是 H5 和 QuickApp？
- 專案結構、生命週期及套裝組合
- 針對網頁程式開發人員的迷你應用程式歸納出看法
- 以迷你應用程式進行程式設計
- 迷你應用程式標記、樣式、指令碼和更新
- 將迷你應用程式程式設計原則套用至範例專案
- 訊息串：這份指南
- 建立分頁元件
- 啟用跨來源隔離功能的指南
- 使用 Origin-Agent-Cluster 標頭進行效能隔離
- CSS aspect-ratio 屬性
- 輪轉介面的最佳做法
- WebRTC 現已成為 W3C 和 IETF 標準
- 使用 HTTPS 進行本機開發作業
- 意見回饋：如何改善長效網頁的版面配置位移指標
- 使用 HTTPS 進行本機開發的時機
- 程式碼研究室：建構 Sidenav 元件
- 建立側邊導覽列元件
- 在 CSS 中置中
- 程式碼研究室：在 CSS 中置中
- 愛你的快取 ❤️
- 跨瀏覽器繪畫工作台和 Houdini.how
- 使用 AutoWebPerf 自動執行稽核
- 付款和地址表單的最佳做法
- 註冊表單最佳做法程式碼研究室
- 地址表單最佳做法程式碼研究室
- 簡訊動態密碼表單最佳做法
- 付款表單最佳做法程式碼研究室
- 註冊表單最佳做法
- 命令式快取指南
- 工作站總覽
- 透過 Service Worker 向網頁廣播更新
- 與服務工作人員之間的雙向通訊
- 停用滑鼠加速功能，提供更優質的 FPS 遊戲體驗
- 程式碼研究室：建構故事元件
- 打造精選故事元件
- CMS 瀏覽器層級的延遲載入
- 配置的同網站
- 程式碼研究室：建構推播通知伺服器
- 程式碼研究室：建構推播通知用戶端
- 推播通知總覽
- 評估離線用量
- 高效能 CSS 動畫示例
- Signed Exchange (SXG)
- CSS min()、max() 和 clamp()
- 使用與流程相關的速記符號，強化邏輯版面配置
- 為什麼有些動畫速度緩慢？
- 處理 Service Worker 中的範圍要求
- 如何建立高效能 CSS 動畫
- 控制相機的平移、傾斜和縮放功能
- 什麼是第三方來源試用？
- 卸離視窗記憶體流失
- 建立離線備用頁面
- Core Web Vitals
- 使用 CSS's clip-path 屬性建立有趣的圖片形狀
- 使用 CSS 的自訂項目符號 ::marker
- 新增可變更密碼的知名網址，協助使用者輕鬆變更密碼
- 與服務工作人員協調付款交易
- 與服務工作人員處理選擇性付款資訊
- ARIA：毒藥或抗圓點？
- 使用 Emscripten 對 WebAssembly 中的記憶體流失情形進行偵錯
- content-visibility：可提升算繪成效的全新 CSS 資源
- 正在解除封鎖剪貼簿
- 參照網址和參照網址政策最佳做法
- Android 網頁版
- 在 Google 建構 PWA - 第 1 部分
- 使用 Lighthouse CI 監控效能
- 設計 Google 帳戶密碼金鑰的使用者體驗
- @property：為 CSS 變數提供超能力
- 註冊網頁式付款應用程式
- Service Worker 快取和 HTTP 快取
- 網站速度和業務指標的關聯性
- 網頁式付款應用程式總覽
- 透過 Android 付款應用程式提供運送和聯絡資訊
- 處理導航要求
- 使用 Chrome 使用者體驗報告查看實際成效
- 一行 CSS 提供十種現代版面配置
- 透過 devicePixelContentBox 完美呈現象素風格
- web.dev 直播總結
- 登入表單最佳做法
- 使用跨平台瀏覽器功能建構登入表單
- 逐步強化漸進式網頁應用程式
- 使用網頁開發人員工具對 Google 搜尋中的 JavaScript 問題進行偵錯
- 透過 Workbox 打造彈性的搜尋體驗
- 在網頁中加入媒體
- 以大膽連結的方式沒有任何人連結：文字片段
- 如何回報良好的瀏覽器錯誤
- 讓 PWA 感覺像應用程式一樣
- 使用 RAIL 模型評估效能
- 使用 Quicklink 在 React 中加快瀏覽速度
- 使用擷取中繼資料功能，保護資源不受網路攻擊
- 內容重新排序
- Chromium 84 中的 Web Animations API 改良項目
- Android 付款應用程式開發人員指南
- 付款交易的生命週期
- 使用 Web Payments 提供付款應用程式
- 設定付款方式
- Chromium 83 中 macOS system-ui 字型提供更多可變字型選項
- 漸進式網頁應用程式如何推動業務成長
- 使用應用程式捷徑快速完成工作
- 正在準備移除 AppCache
- 如何定義安裝策略
- 永久儲存空間
- CommonJS 如何運用大型套件
- 為何需要 "；跨來源隔離" 以享有強大的功能
- 在 Chrome 中剖析網路音訊應用程式
- 透過精細的分塊改善 Next.js 和 Gatsby 網頁載入效能
- " same-site" " same-origin"
- 使用 COOP 和 COEP 建立網站 "跨來源隔離
- 使用 measureUserAgent specificMemory() 監控網頁和#39 的記憶體總用量
- web.dev 工程網誌 #1：我們如何製作網站並使用網頁元件
- 使用色彩配置 CSS 屬性和對應的中繼標記改善深色模式預設樣式
- 在 COVID-19 期間，請確保您的網站可供所有人使用
- 修正伺服器超載問題
- 色彩和對比無障礙功能
- 無障礙輕觸目標
- 無障礙回應式設計
- 運用 Trusted Types 防範 DOM 型跨網站指令碼攻擊安全漏洞
- 在 Android 應用程式中使用 PWA
- 預先載入選用字型，避免版面配置位移和閃爍未顯示的文字 (FOIT)
- 如何使用 nginx 設定 Signed HTTP Exchange (SXG)
- 如何使用 nginx 發布 Signed HTTP Exchange (SXG)
- 使用媒體查詢來最佳化 CSS 背景圖片
- 修正跨部門的網站速度
- 版面配置變更後捲動貼齊
- 如何使用 Web Packager 設定 Signed Exchange
- 如何提供自己的應用程式內安裝體驗
- 在實際檢視畫面中放置虛擬物件
- 虛擬實境可說是網路，第 2 部分
- 擴增實境：你可能早就知道
- 加強網路架構生態系統
- 什麼是漸進式網頁應用程式？
- 使用 Workbox 將 PWA 整合至內建分享使用者介面
- 透過可遮蓋圖示的 PWA 支援自動調整圖示
- 改善同步 XMLHttpRequest() 中的網頁關閉問題
- 使用模組工作站串連網路
- 自動調整載入：改善速度緩慢裝置上的網頁效能
- 速度工具演進史：2019 年 Chrome 開發人員高峰會精彩回顧
- 使用網路工作站在瀏覽器執行 JavaScript's 主執行緒
- 來自 2019 年夏季圖片最佳化問卷調查的意見回饋
- 建構推播通知伺服器
- 在 Next.js 中使用預先擷取路徑
- 在 Next.js 中透過動態匯入功能分割程式碼
- AMP 如何保證 Next.js 應用程式中的載入速度
- 使用 Next.js 做為預設效能
- 與 OS 共用 UI 與 Web Share API 整合
- 虛擬實境上線
- SameSite Cookie 食譜
- 瞭解 Cookie
- 網頁速度飛快無比
- 使用推播通知吸引使用者或再次與他們互動
- 開始使用 Notifications API
- 使用 Service Worker 管理通知
- 修正版面配置不穩定性
- 即使在功能型手機上，也能讓網頁應用程式快速載入
- Houdini 的全新 API 提供更聰明的自訂屬性
- 預先擷取的方法有兩種：<link> 代碼和 HTTP 標頭
- 修正複合型內容
- 什麼是混合內容？
- 為網頁提供基本影片，跳脫圖片框架
- 在漸進式網頁應用程式中新增 Apple Touch 圖示
- 現成播放器網頁
- 多來源網站的漸進式網頁應用程式
- 最佳化 WebFont 載入和算繪
- 縮小網頁字型大小
- 使用 Angular CLI 建立漸進式網頁應用程式
- 有效載入第三方 JavaScript
- 使用映像檔 CDN 最佳化映像檔
- 找出速度緩慢的第三方 JavaScript
- 第三方 JavaScript 成效
- 更多表單控制項功能
- 最佳化第三方 JavaScript
- 盡早建立網路連線，以提升使用者感知的網頁速度
- 使用背景幕濾鏡建立 OS 樣式背景
- 定期重新驗證，確保內容新鮮有趣
- 使用 Angular CDK 將大型清單虛擬化
- Angular 中的路徑預先載入策略
- 最佳化 Angular's 變化偵測
- 根據聯播網品質調整影片，配合圖片放送情況
- 透過預測預先擷取功能加快網頁瀏覽速度
- 透過 Codelyzer 稽核 Angular 應用程式's 無障礙功能
- 使用 Angular Service Worker 進行預先快取
- 透過 Angular CLI 提供效能預算
- Preferencess-color-scheme：嗨，黑暗，我的老朋友
- 開始使用：最佳化 Angular 應用程式
- Angular 中的路徑層級程式碼分割
- 提升網站效能的最佳訣竅
- 網路元件：推動網路運作的秘密要素
- 使用 Lighthouse 設定效能預算
- Web Payments API 更新
- 速度的價值
- 安裝電腦版漸進式網頁應用程式的網址列
- 成效如何提高轉換率？
- 服務工作處理程序的思維
- 宣傳 PWA 安裝模式
- 如何通知使用者我的 PWA 可供安裝？
- 圖片政策：縮短載入時間及其他相關事項
- 長時間的 JavaScript 工作是否拖慢了互動準備時間？
- 使用重大問題擷取關鍵 CSS 並內嵌
- 擷取重要的 CSS
- 大規模加速網站效能：什麼是網站效能更新？
- 隆重推出 PROXX
- SameSite Cookie 說明
- 使用 Web Perception 工具包進行視覺化搜尋
- 根據網路品質自動調整放送
- 針對傳送門進行實作：順暢瀏覽網頁
- 使用 brotli 壓縮網路酬載
- 2019 年 I/O 大會的 web.dev
- 如何測量速度？
- 什麼是速度？
- 如何維持快速？
- 使用 Create React 應用程式新增網頁應用程式資訊清單
- 透過回應視窗將大型清單虛擬化
- 在透過 Workbox 建立 React 應用程式時預先快取
- 使用 React.lazy 和 Suspense 分割程式碼
- 使用因應回應預先算繪路徑
- 使用 react-axe 和 eslint-plugin-jsx-a11y 進行無障礙功能稽核
- 開始使用：最佳化 React 應用程式
- 程式碼研究室：預先載入重要資產，藉此提升載入速度
- 偏好減少動態：有時候，動作越少
- 延後不重要的 CSS
- 信任關係良好，觀測能力更佳：《Intersection Observer v2》
- 回應式網頁設計基本概念
- 可建構的樣式表
- 在網路上算繪
- 在建構程序中納入效能預算
- 搭配 Travis CI 使用 bundlesize
- 使用 webpack 設定效能預算
- 使用 Lighthouse 機器人設定效能預算
- 編寫與 npm
- 已安裝您的應用程式嗎？getInstalledRelatedApps() 就會告訴你！
- 為新型瀏覽器提供新程式碼，加快網頁載入速度
- 運用用戶端提示根據使用者進行調整
- 聚焦樣式
- 什麼是無障礙設計？
- 標籤和文字替代項目
- 鍵盤存取基礎知識
- 標題和位置標記
- 使用語意式 HTML 輕鬆取勝
- 語意和螢幕閱讀器
- 使用 Tab 鍵控制焦點
- 搜尋服務的運作方式
- 提供尺寸正確的圖片
- 使用 WebP 圖片
- 指定多個運算單元寬度
- 找出從網路載入的資源
- 設為可安裝
- 相同來源政策與擷取；擷取要求
- 預先載入重要素材資源，以加快載入速度
- 修正幕後 404 錯誤
- 藝術指導
- 使用服務工作處理程序
- 使用 Imagemin 壓縮圖片
- 利用程式碼分割功能減少 JavaScript 酬載
- 透過 PRPL 模式套用即時載入
- 將 GIF 動畫換成影片，加快網頁載入速度
- 瀏覽器沙箱
- 如何使用 Lighthouse 評估搜尋引擎最佳化
- 提供尺寸正確的圖片
- Workbox：您的高階 Service Worker 工具包
- 避免使用閃爍的文字