跳至主要内容
web.dev for China
资源
  • 网络平台
  • 您可以按照自己的节奏深入了解 Web 平台。
  • HTML
  • CSS
  • JavaScript
  • 用户体验
  • 了解如何打造更好的用户体验。
  • 性能
  • 无障碍
  • 身份
  • 学习
  • 快速了解 Web 开发。
  • 学习 HTML
  • 学习 CSS
  • 了解 JavaScript
  • 了解效果
  • 了解无障碍功能
  • 更多课程
  • 其他资源
  • 探索内容集、图案等。
  • AI 和 Web
  • 探索
  • PageSpeed Insights
  • 模式
  • 播客和节目
  • 开发者简报
  • 关于 web.dev
基准 博客 案例研究
/
  • English
  • Deutsch
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어
  • 资源
隐私权 无障碍 HTML 图像 自适应设计 表单 PWA CSS 性能 测试 JavaScript
web.dev for China
  • 资源
    • 更多
    • 隐私权
    • 无障碍
    • HTML
    • 图像
    • 自适应设计
    • 表单
    • PWA
    • CSS
    • 性能
    • 测试
    • JavaScript
  • 基准
  • 博客
  • 案例研究
  • 欢迎学习“性能”课程!
  • 为什么速度很重要
  • HTML 性能的一般注意事项
  • 了解关键路径
  • 优化资源加载
  • 通过资源提示协助浏览器
  • 图片效果
  • 视频表现
  • 优化网页字体
  • 代码拆分 JavaScript
  • 延迟加载图片和

测量服务器响应时间

如果响应没有缓存,则服务器的响应时间与 托管服务提供商和后端应用堆栈提供 动态生成的响应(例如从数据库中提取数据) 其 TTFB 可能会比 在后端没有大量计算时间。显示 加载旋转图标,然后在客户端获取所有数据, 从可预测性的服务器端环境转变为可能 客户端一个。尽可能减少客户端的工作量通常可以改善 以用户为中心的指标

如果用户在字段中遇到 TTFB 缓慢的问题,您可以透露相关信息, 使用 Server-Timing 了解在服务器上花费的时间 响应标头:

Server-Timing: auth;dur=55.5, db;dur=220

Server-Timing 标头的值可以包含多个指标,以及 每个时段的播放时长然后,系统可从现场的用户收集这些数据 Navigation Timing API,并进行了分析,以了解用户 延误。在上述代码段中,响应标头包含两个时间:

  • 对用户进行身份验证所用的时间 (auth),耗时 55.5 毫秒。
  • 数据库访问时间 (db),耗时 220 毫秒。
。
注意:如需详细了解 Server-Timing 响应标头 优化 TTFB 指南。

您可能还需要检查您的托管基础架构,并确认 拥有足够的资源来处理您的网站所获得的流量。已分享 托管服务提供商通常容易受到较高的 TTFB 的影响,而 但响应时间更短,费用可能更高。

如要比较热门托管服务提供商的 TTFB,请访问 ismyhostfastyet.com. 这些数据包括从 Google Analytics 的 Chrome 用户 体验报告 (CrUX) 数据集。

压缩

HTML、JavaScript、CSS 和 SVG 图片等文本响应应 通过压缩来减少其通过网络的传输大小 下载速度会更快最常用的压缩算法是 gzip 和 Brotli。与 gzip 相比,Brotli 可将性能提升约 15% 至 20%。

压缩功能通常由大多数网站托管服务提供商自动设置,但 如果您打算配置 或自行调整压缩设置:

  1. 尽可能使用 Brotli。如前所述,Brotli 提供了相当 与 gzip 相比,效果得到显著提升,并且 Brotli 在所有主流 浏览器。请尽可能使用 Brotli,但如果您的网站的使用率很高, 确保使用 gzip 作为后备 因为任何压缩都比完全不压缩好。
  2. 文件大小很重要。非常小的资源(小于 1 KiB)不会压缩 有时甚至根本不压缩。任意类型的有效性 但前提是拥有大量数据 为了找到更可压缩的位 数据。文件越大,压缩效果就越好,但请勿 但实际上 。JavaScript 和 CSS 等大型资源 浏览器完成分析和评估后, 解压缩了,并且可能会更频繁地更改,即使只有 因为任何更改都会产生不同的文件哈希值。
  3. 了解动态压缩与静态压缩。动态和静态 压缩是确定资源应何时使用的不同方法 压缩。动态压缩会在资源 请求,有时则每次请求。另一方面 静态压缩提前压缩文件,无需压缩 您请求 Google Analytics API 时静态压缩消除了 压缩本身涉及的延迟时间,这可能会增加服务器响应时间 。静态资源 JavaScript、CSS 和 SVG 图片)应进行静态压缩,而 HTML 尤其是为进行身份验证动态生成的资源 用户)都应进行动态压缩。

自行进行压缩颇具挑战,通常最好 内容分发网络 (CDN) - 具体内容将在下一部分讨论, 为您处理此问题。不过,了解这些概念可以帮助您 您的托管服务提供商是否正确使用了压缩功能。这些知识可以 可以帮助您找出优化压缩设置的机会, 让您的网站获得最大收益。

内容分发网络 (CDN)

内容分发网络 (CDN) 是分布式服务器网络, 从您的源服务器缓存资源,继而从边缘提供这些资源 物理位置更靠近用户的服务器商家的实际距离 这样用户就可以缩短往返时间 (RTT),而 HTTP/2 或 HTTP/3、缓存和压缩可让 CDN 更快地传送内容 与从您的源服务器提取相比。利用 CDN 在某些情况下,可以显著提高网站的 TTFB。

注意:如需深入了解 CDN 及其优势, 请参阅 CDN 指南。

知识测验

哪种类型的重定向完全由您控制?

跨源重定向。
请重试。
同源重定向。
正确!

Server-Timing 标头可以包含多个指标。

正确。
正确!
错误。
请重试。

哪种类型的服务器最有可能离您的终端 用户?

您网站的源服务器。
请重试。
内容分发网络 (CDN) 的边缘服务器。
正确!

下一篇:了解关键路径

现在,您已经熟悉了涉及到的一些性能注意事项 与网站的 HTML 结合使用,则更有利地确保它能够加载 但这仅仅是学习 Web 的开始 性能接下来,关键渲染路径背后的理论是 。本单元将介绍一些关键概念,例如阻塞渲染和 解析阻塞资源,以及它们在获取网页初始 以便尽快呈现在浏览器中

如未另行说明,那么本页面中的内容已根据知识共享署名 4.0 许可获得了许可,并且代码示例已根据 Apache 2.0 许可获得了许可。有关详情,请参阅 Google 开发者网站政策。Java 是 Oracle 和/或其关联公司的注册商标。

最后更新时间 (UTC):2023-11-01。

  • web.dev

    • web.dev

      我们希望帮助您构建美观、易于访问、快速且安全的网站,从而能跨浏览器并为您的所有用户提供服务。本网站包含各种内容,由 Chrome 团队成员及外部专家撰写,可协助您顺利踏上这一旅程。
  • 参与

    • 提交 bug
    • 查看未处理完毕的问题
  • 相关内容

    • Chrome 开发者版
    • Chromium 更新
    • 案例研究
    • 播客和节目
  • 关注

    • 关于 X 的 @ChromiumDev
    • YouTube
    • LinkedIn 上的 Chrome for Developers
    • RSS
  • 条款
  • 隐私权政策
  • Manage cookies
  • English
  • Deutsch
  • Español – América Latina
  • Français
  • Indonesia
  • Italiano
  • Polski
  • Português – Brasil
  • Tiếng Việt
  • Türkçe
  • Русский
  • עברית
  • العربيّة
  • فارسی
  • हिंदी
  • বাংলা
  • ภาษาไทย
  • 中文 – 简体
  • 中文 – 繁體
  • 日本語
  • 한국어