跳至主要内容
web.dev
资源
  • 网络平台
  • 您可以按照自己的节奏深入了解 Web 平台。
  • HTML
  • CSS
  • JavaScript
  • 用户体验
  • 了解如何打造更好的用户体验。
  • 性能
  • 无障碍
  • 身份
  • 学习
  • 快速了解 Web 开发。
  • 学习 HTML
  • 学习 CSS
  • 了解 JavaScript
  • 学习 AI
  • 了解效果
  • 了解无障碍功能
  • 更多课程
  • 其他资源
  • 探索内容集、图案等。
  • AI 和 Web
  • 探索
  • PageSpeed Insights
  • 播客和节目
  • 开发者简报
  • 关于 web.dev
Discover 基准 如何使用 Baseline 博客 案例研究
/
  • English
  • Deutsch
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어
登录
  • Articles
AI 和 Web 加载时间短 了解 Core Web Vitals 身份 渐进式 Web 应用 收款 通知 如何优化 INP 网络可靠性 回应 动画 迷你应用 媒体 安全可靠 WebAssembly 设备 易于发现 测试自动化 Angular
web.dev
  • 资源
    • 更多
    • AI 和 Web
    • 加载时间短
    • 了解 Core Web Vitals
    • 身份
    • 渐进式 Web 应用
    • 收款
    • 通知
    • 如何优化 INP
    • 网络可靠性
    • 回应
    • 动画
    • 迷你应用
    • 媒体
    • 安全可靠
    • WebAssembly
    • 设备
    • 易于发现
    • 测试自动化
    • Angular
  • Discover
  • 基准
  • 如何使用 Baseline
  • 博客
  • 案例研究
  • 简介
  • 速度为什么很重要？
  • 什么是速度？
  • 如何测量速度？
  • 如何保持快速？
  • Core Web Vitals
  • Web Vitals
  • 以用户为中心的效果指标
  • 定义核心网页指标阈值
  • Largest Contentful Paint (LCP)
  • Cumulative Layout Shift (CLS)
  • Interaction to Next Paint (INP)
  • 优化 Largest Contentful Paint
  • 优化 Cumulative Layout Shift
  • 优化 Interaction to Next Paint
  • 提高 Core Web Vitals 最有效的方法
  • 使用 Google 工具构建核心网页指标工作流程
  • 为业务决策者优化核心网页指标
  • 衡量现场性能
  • 使用 Chrome 用户体验报告了解实际应用性能
  • 为什么实验室数据和现场数据可能不同（以及如何处理这些数据）
  • 为什么 CrUX 数据与我的 RUM 数据不同？
  • 优化资源分发
  • 优化加载第一个字节所需时间
  • 内容分发网络 (CDN)
  • 划分资源优先级
  • 预加载关键资源，以提高加载速度
  • 尽早建立网络连接，以提升系统感知的网页速度
  • 预提取资源以加快后续导航速度
  • 预加载音频和视频，从而快速播放
  • 基于网络质量的自适应投放
  • 优化图片
  • 选择正确的图片格式
  • 选择正确的压缩级别
  • 使用 Imagemin 压缩图片
  • 用视频替换 GIF 动画，加快网页加载速度
  • 提供自适应图片
  • 提供具有正确尺寸的图片
  • 使用 WebP 图片
  • 使用图片 CDN 优化图片
  • 延迟加载图片和视频
  • 针对 Web 的浏览器级图片延迟加载
  • 优化网页字体
  • 字体最佳实践
  • 避免在字体加载过程中显示不可见文本
  • 优化网页字体的加载和渲染
  • 缩减网页字体大小
  • 优化 CSS
  • 推迟非关键 CSS
  • 压缩 CSS
  • 提取关键 CSS
  • 使用媒体查询优化 CSS 背景图片
  • 优化您的第三方资源
  • 第三方 JavaScript 性能
  • 识别运行缓慢的第三方 JavaScript
  • 高效加载第三方 JavaScript
  • 代码和跟踪代码管理器的最佳做法
  • 优化 JavaScript
  • 优化耗时较长的任务
  • 优化 Interaction to Next Paint
  • 通过 PRPL 模式应用即时加载
  • 通过代码拆分减少 JavaScript 载荷
  • 移除未使用的代码
  • 缩减和压缩网络载荷
  • CommonJS 如何扩大您的 app bundle
  • 打造性能文化
  • 速度的价值
  • 效果如何提高转化率？
  • 您应该通过衡量哪些指标来提升效果？
  • 跨职能解决网站速度问题
  • 将网站速度与业务指标联系起来
  • 设置效果预算
  • 性能预算基础知识
  • 您的第一项效果预算
  • 将性能预算纳入构建流程中
  • 使用 Lighthouse 制定性能预算
  • 将 bundlesize 与 Travis CI 搭配使用
  • 使用 Lighthouse 聊天机器人设置性能预算
  • 使用 Lighthouse CI 监控性能
  • 网络平台
  • HTML
  • CSS
  • JavaScript
  • 用户体验
  • 性能
  • 无障碍
  • 身份
  • 学习
  • 学习 HTML