Tips to improve website speed

Web 性能是指网站用户体验的可衡量且可感知的指标统称，特别是网页的加载速度和可靠性。

开发人员和网站所有者可以采取各种措施来提高网站性能。具体包括：优化 Web 设计因素，例如图片大小、代码格式和外部脚本使用，以及选择优质的服务提供商进行托管、内容缓存和负载平衡。

当网页加载速度提高且变得更可靠时，它们不仅能提供更好的用户体验，而且往往还能在自然搜寻结果中排名靠前，更容易被潜在的网页访问者注意到，往往也会提高转化率。

如何测试网站性能

提高网站性能的关键第一步是测试其当前性能。决定用户（和其他方）如何看待网站速度和可靠性的因素有很多，而对这些因素进行测试是了解哪些措施将最有利于提升网站性能的唯一途径。

A number of free tools exist for performance measurements, including Google Lighthouse (available in Google Chrome web browser’s DevTools suite) and Cloudflare Observatory (available to any Cloudflare user in their dashboard).

网站所有者应该使用这些工具来评估哪些因素？可以先从 Core Web Vitals 开始，它包含三个用于衡量重要的网络性能的指标：

• 最大内容绘制，用于衡量网页中面积最大的一块内容的加载速度
• 首次输入延迟，用于衡量用户与页面交互到浏览器对交互作出响应所需的时间
• 累计布局偏移，用户衡量页面加载过程中各个元素的视觉稳定性

改善页面的 Core Web Vitals 指标，不仅提供有价值的用户体验信号，而且还能使页面在 Google 自然搜寻结果中排名靠前。

其他重要的评估指标还包括：首字节时间（页面开始加载的速度）、DNS 查询速度（页面的域名服务将域名转换为 IP 地址的速度），以及交互响应时间（用户与页面交互的速度）。

要了解如何将衡量这些指标转化为有效措施，请参考以下示例：

• 如果网页的“最大内容绘制”速度很慢，即表明其加载网页中面积最大的一块内容所需的时间会比较长。网页所有者可以调查是否加载了不必要的代码，然后才加载该网页内容，并考虑是否要删除这些无用代码。
• A webpage with a slow Time to First Byte is taking too long to retrieve website resources from its origin server. The webpage’s owner could investigate response times for their DNS provider and website host — with an eye towards reconfiguring or replacing one or both services.

如何提高网站性能

虽然没有可以保证 Web 具备强大性能的详细方案，但网站所有者可以使用以下最佳做法来帮助提高网站速度和可靠性：

优化图像

由于图像文件的大小往往大于 HTML 和 CSS 文件，因此，网站加载图像所需的时间往往最长。幸运的是，可以通过图像优化来缩短图像加载时间，通常包括：降低图像分辨率和尺寸，以及压缩图像文件本身。

限制 HTTP 请求的数量

大多数网页都要求浏览器发出多个 HTTP 请求，才能获取页面上的各种资产（包括图像、脚本和 CSS 文件）。事实上，许多网页都需要几十个这样的请求。每个请求都要往返于托管资源的服务器，这会增加网页的整体加载时间。

由于存在这些潜在问题，因此，应该尽量减少每个页面需要加载的资产总数。此外，速度测试有助于确定哪些 HTTP 请求花费的时间最多。

使用浏览器 HTTP 缓存

浏览器缓存是一个临时存储位置，浏览器将静态文件的副本保存在其中，以便能够更快速地加载最近访问过的网页。开发人员可以指示浏览器缓存不经常更改的网页元素。浏览器缓存的说明位于托管服务器的 HTTP 响应的标头中。这显著减少了服务器需要传输到浏览器的数据量，从而缩短了用户访问某些常用页面所需的加载时间。

删除不必要的 JavaScript 渲染阻塞

网页可能会加载了不必要的代码，然后才加载更重要的页面内容，如此一来增加整体加载时间。这种情况在大型网站上尤为常见，因为许多网页所有者都是单独地添加代码和内容。网页所有者可以使用 Web 性能工具，来识别性能不佳网页上那些不必要的代码。

限制使用外部脚本

对于需要从其他位置加载的任何脚本化网页元素，例如外部评论系统、CTA 按钮、CMS 插件或潜在客户生成的弹出窗口，每次加载页面时都需要重新加载这些元素。

根据脚本大小，这些脚本可能会降低网页的加载速度，或导致网页无法一次性加载完毕，这被称为“内容跳转”或“布局偏移”，尤其会让移动用户感到沮丧，因为他/她们往往需要滚动页面才能看到完整的网页内容。

限制使用重定向

重定向是指将访问者从一个网页转到另一个网页。重定向会增加几分之一秒的页面加载时间，有时甚至需要几秒钟。重定向有时是不可避免的，但可能会被过度使用；而且在拥有多个网页所有者的大型网站上，重定向可能会逐步增加页面加载时间。网站所有者应该制定明确的重定向使用指南，以及定期扫描重要的网页，检查是否存在不必要的重定向。

极简化 CSS 和 JavaScript 文件

代码最小化是指删除计算机理解和执行代码时不需要的所有内容，包括代码注释、空格和不必要的分号。这可以略微缩小 CSS 和 JavaScript 文件的体积，从而让浏览器可以更快速地加载这些内容，减少占用的带宽。尽管代码最小化通常只能带来微不足道的性能提升，但它仍然是一种重要的最佳做法。

使用有效的第三方服务，实现重要的网站功能

• 托管：如果源服务器响应请求的速度很慢，即使是设计最好的网站，其网页加载速度也会很慢。网站所有者应该选择平均响应时间低于 200 毫秒，且拥有良好的可靠性记录的服务器。
• DNS：DNS 是一个域名转化系统（将example.com 转化为 IP 地址），这是页面加载过程的重要组成部分。网站所有者应该选用能够快速且可靠地提供解析结果的 DNS 服务，而不是依赖于 Web 主机的 DNS。
• 缓存：网站内容距离请求者的位置越近，他们接收到相应内容的速度就越快。网站所有者应该使用内容交付网络 (CDN) 在全球多个地点缓存 Web 内容，如此一来，用户的请求就不必跨越数百或数千英里（以及许多自治网络）的长途传输才能到达网站的源服务器。
• 网络安全：DDoS 攻击、恶意机器人以及其他网络攻击，可能会降低网站性能。这个话题的涉及面过于宽泛，无法在此一一详述，但网站所有者应该选择一家 Web 应用程序安全提供商，既可以过滤恶意流量，同时不降低合法流量的速度。

Cloudflare 如何帮助提高 Web 性能

Cloudflare 是一个全球互联网安全和性能平台。此平台可以连接到覆盖 330 个城市的全球网络，帮助提高各种规模和复杂程度的网站的运行性能。

对于个人网站和小型企业，Cloudflare 提供免费计划和优惠计划，只需几分钟即可激活，并且自动包含重要的网站性能增强功能：

• 高性能 DNS 服务
• CDN
• 图像优化
• 移动优化
• 防范 DDoS 攻击和常见的恶意机器人攻击

对于大型企业，Cloudflare 还提供企业级性能服务，可与任何类型的 Web 应用程序或基础架构搭配使用。