Rich Moy 2024-07-08
网站性能优化涉及多种策略，旨在最小化页面加载时间、减少 Web 服务器响应时间，并提升网站的功能性。
第一印象至关重要。对于您的网站而言，闪电般的页面加载速度和响应式设计有助于树立良好的第一印象。
这还能提升您的销售额。仅将移动端页面加载速度提升半秒，就可能提高转化率，同时降低跳出率。另一方面，54% 的用户表示，电商网站的加载时间越长，他们的挫败感就越强。
这表明网站加载速度会给用户留下重要印象。网站性能优化的目标是提升网站的技术性能，从而加快加载速度，进而帮助您留住用户。以下是如何通过优化网站性能来获得更好的商业成果。
什么是网站性能优化？
网站性能优化是指提升网站速度和响应能力的过程。它包括一系列策略，用于最小化页面加载时间、减少 Web 服务器响应时间、改善资源交付效率，并提升网站在桌面端和移动端的功能表现。
您可以通过多种后端措施来优化网站，包括限制图片尺寸、精简网站代码，以及确保您的 Web 服务器满足业务需求。
一个经过优化的网页能够快速加载并迅速变得可交互。文本框和交互元素能正常运行，动画和视频也能流畅播放。如果您有一个内容繁重、不可避免加载较慢的网页，可以考虑添加一个进度条，甚至配上一些文字说明（或幽默地调侃一下）较长的加载时间。
网站性能优化的好处
对企业而言，网站性能优化的好处包括：
- 提高转化率：根据 Unbounce 的数据，70% 的客户表示页面速度会影响他们是否愿意从某家零售商处购买商品。
- 提升可见性：Google 的 PageRank 算法（根据质量和相关性对网页进行排名）优先考虑网站性能。出现在 Google 搜索结果首页的网站平均加载时间为 1.65 秒。如果自然搜索是您获取客户的重要渠道，请务必高度重视网站速度。
- 改善可用性：更快、更灵敏的网站可以提升整体用户体验（UX），增强客户满意度和信任感。
如何衡量您的网站性能
优化网站性能的第一步是获取基线测量数据，以指导后续的优化工作。您可以使用多种工具进行测量，其中流行的选项包括 Google PageSpeed Insights、GTmetrix、Lighthouse、WebPageTest 和 YSlow——这些工具均提供免费版本或完全免费。您也可以使用 Shopify 的网站性能仪表盘。
关键的网站性能优化指标包括：
页面加载时间（Page Load Time）
页面加载时间是最常用也最容易理解的指标。它指网页在用户浏览器中完全加载并可见所需的时间。这包括从服务器获取所有必要资源（如 HTML、CSS、JavaScript、图片及其他元素）并在设备上渲染完成所需的时间。
首字节时间（Time to First Byte, TTFB）
TTFB 是指浏览器在发送请求后，接收到服务器返回的第一个字节数据所需的时间。通常，较低的 TTFB 表示服务器响应更快，从而带来更好的用户体验。
最近我们发现，Shopify 网站的平均 TTFB 为 0.51 秒。相比之下，其他平台上的网站平均 TTFB 为 1.51 秒，最高可达 1.99 秒。简单来说，这些数据表明 Shopify 在电商领域拥有最快的服务器速度，平均快 2.8 倍，最高可达 3.9 倍。
想了解更多关于 Shopify 明显的网站速度优势？请阅读完整报告。
可交互时间（Time to Interactive, TTI）
TTI 衡量网页变得完全可交互并对用户输入做出响应所需的时间——即用户可以有效与页面互动（例如点击按钮或输入数据）而不会遇到明显延迟的时间点。
开始渲染时间（Start Render）
开始渲染时间是指网页的首个视觉元素（包括文本、图片和其他图形元素）出现在用户屏幕上的时刻。
页面总大小（Total Page Size）
页面总大小是指构成网页的所有元素（HTML、CSS、JavaScript，以及图片、视频和其他资源）的总字节数。减小页面总大小有助于减少数据传输时间，从而提升整体加载速度。
首次内容绘制（First Contentful Paint, FCP）
FCP 衡量浏览器渲染网页上第一块内容（如文本或图片）所需的时间。它代表了用户感知到初始视觉反馈的时刻。
最大内容绘制（Largest Contentful Paint, LCP）
LCP 衡量浏览器渲染页面中最显著可见元素或内容区块（如一张图片或一段文本）所需的时间，用于反映核心内容何时对用户可见。
总阻塞时间（Total Blocking Time, TBT）
TBT 表示页面加载过程中主线程被阻塞、无法响应用户输入的总时间。它衡量了资源密集型操作或 JavaScript 执行对页面交互能力的影响。
HTTP 请求数量（Number of HTTP Requests）
该指标表示浏览器为渲染网页而发出的资源请求数量。HTTP 请求数量越少，性能越好。
九种优化网站性能的方法
在获得网站当前性能的数据后，您就可以开始优化了。以下是九项具有显著影响的优化策略：
1. 优化图像文件
图像文件可能非常大，导致浏览器下载耗时较长。您可以使用 TinyPNG 或 Compressor.io 等在线工具压缩图片，或使用 Photoshop 等编辑软件调整图片尺寸。此外，尽量只包含必要的图片。如果某张图片并非必需，可能就不值得占用额外带宽。
2. 精简并合并文件
精简（Minification）是指通过移除不必要的字符来减小源代码体积，从而缩小 HTML、JavaScript 和 CSS 文件的大小。将多个文件合并为一个可以减少浏览器需要发起的请求数量，从而加快加载速度。您可以使用 Webpack 和 Grunt 等工具实现这一目标。
3. 使用浏览器缓存
浏览器缓存意味着将您网站的部分资源（如图片、CSS 和 JavaScript 文件）存储在用户的浏览器中。这样，用户再次访问您网站的页面时，浏览器无需每次都从服务器重新获取这些文件，从而加快加载速度。可通过在 Web 服务器上设置 Cache-Control 和 Expires 响应头，并指定文件在用户浏览器中缓存的时长来实现浏览器缓存。
4. 使用内容分发网络（CDN）
内容分发网络（CDN）将您网站的内容存储在靠近用户地理位置的服务器上，从而缩短数据传输距离。CDN 能有效降低延迟并提升加载速度。主流 CDN 服务包括 Cloudflare、Akamai 和 Fastly。
为了在北美强大节点的基础上进一步扩展，Shopify 已将其 Google Cloud 服务器集群扩展至欧洲多地。我们的服务器集群由 Cloudflare CDN 提供支持，后者在全球拥有超过 300 个边缘节点。无论客户身处何地，都能让品牌更贴近他们。
5. 优化代码执行
精简网站代码有助于浏览器更快加载页面。例如，优化数据库查询可以加快搜索功能，因为检索结果所需时间更短。您还可以优化代码，优先加载对用户最重要的内容——例如，在用户滚动之前，先加载首屏可见的内容。
6. 启用 Gzip 压缩
Gzip 是一种压缩算法，可用于压缩基于文本的资源，如 HTML、CSS 和 JavaScript 文件。它能显著减小文件体积，从而加快数据传输和页面渲染速度。大多数现代 Web 服务器都内置了 Gzip 支持，只需在服务器上进行相应配置即可启用（具体配置方式因服务器而异）。
7. 减少重定向
重定向是指一个 URL 自动跳转到另一个 URL——例如，当某个已下架产品的 URL 自动跳转到新产品的 URL。通常应尽量减少重定向，因为它们会增加页面加载时间。保持站点地图（sitemap）更新，确保用户能高效地到达目标页面；对于流量较高的页面，尽量复用而非重定向。
8. 优化第三方脚本和插件
大多数网站都使用大量插件。这些软件组件可为网站添加功能，并轻松集成到内容管理系统（CMS）或 Web 框架中。然而，它们也可能拖慢网站性能。通过定期移除未使用的插件，可以加快页面加载速度。
9. 持续监控性能
提升网站性能的最后一步是持续关注其表现。定期运行性能测试是确保长期优化效果的最佳方式。这些努力可能需要时间，但最终将带来更快的网站，以及随之而来的更高转化率、更好搜索引擎排名和更强的品牌声誉。
2024 年初，Shopify 宣布推出全新的网站性能仪表盘，该仪表盘采用 Google 的 Core Web Vitals（核心 Web 指标），为企业提供更清晰的网站性能视图。此前，我们的 Site Speed Score（网站速度评分）仅使用单一的 Lighthouse 分数来衡量网站性能，但这并未反映真实用户的交互体验。而 Google 的 Core Web Vitals 则是衡量和优化实际用户体验的行业标准。