网站性能的关键重要性
为什么网站速度比你想象的更重要
当你访问一个网站时,每一秒的等待都感觉像永恒。但对于运营该网站的人来说,这些秒数有非常真实的成本。大公司的研究一再表明,速度直接影响网站赚多少钱、有多少人访问,以及这些访问者是否会回来。
亚马逊发现,每延迟100毫秒,他们的销售额就会下降1%。谷歌发现,半秒的延迟使其流量减少了20%。沃尔玛发现,将加载时间缩短仅一秒钟,转化率就提高了2%。BBC每增加一秒钟的页面加载时间,就失去10%的用户。而Pinterest通过让网站感觉更快,注册人数增加了15%。这些数字讲述了一个清晰的故事:速度很重要。
谷歌如何衡量网站速度
谷歌定义了一组称为Core Web Vitals的指标,用于衡量网站对真实用户来说有多快、多流畅。这些指标现在已成为谷歌决定哪些网站在搜索结果中排名更高的一部分,因此对于任何希望自己的网站被找到的人来说都很重要。
第一个指标是Largest Contentful Paint(LCP),它衡量页面主要内容变得可见所需的时间。可以把它想象成你真正能在屏幕上看到有用东西的时刻。谷歌建议这应该在2.5秒内发生。第二个是First Input Delay,它衡量当你尝试点击或轻触某物时页面响应速度。这应该低于100毫秒——任何更慢的都会感觉迟钝。第三个是Cumulative Layout Shift,它衡量页面在加载时跳动的程度。你是否曾试图点击一个按钮,却因为上方加载了一张图片而导致按钮移动?这就是这个指标试图防止的。
其他重要的速度测量指标
除了Core Web Vitals之外,还有其他有用的测量指标。Time to First Byte衡量当浏览器请求页面时服务器响应的速度。First Contentful Paint是屏幕上出现任何内容的时刻,即使只是背景颜色。Time to Interactive告诉你页面何时完全准备好供你点击和输入。Total Blocking Time衡量浏览器主线程被重工作卡住的时间,阻止你与页面交互。
加速网站的实际方法
有几种经过验证的加速网站的策略。最具影响力的策略侧重于浏览器在显示任何内容之前必须执行的操作。这包括最小化需要下载的文件数量,确保关键CSS早期加载,以及延迟不需要立即执行的JavaScript。
图像通常是页面上最大的文件。使用WebP或AVIF等现代格式可以在不损失质量的情况下大幅减小其大小。使用Brotli或gzip压缩文本文件,使用CDN从靠近访问者的服务器提供内容,以及设置适当的缓存以便回访者不必重新下载所有内容,所有这些都会产生很大的不同。
代码拆分是另一种有用的技术——不是一次发送所有JavaScript,而是只发送当前页面所需的内容,其余部分稍后加载。这使初始加载速度更快。
跟踪性能
确保网站保持快速的最佳方法是设定明确的性能预算——对JavaScript包大小、图像总重量和第三方脚本数量等内容的限制。这些预算就像代码的速度限制。
有一些工具可以从访问你网站的真实用户那里测量性能,这能给你最准确的图像。谷歌的Chrome用户体验报告收集了数百万真实网站的数据。Lighthouse在受控环境中运行测试并给出分数。对于持续监控,你可以将这些工具集成到你的开发工作流中,这样每次更改在发布前都会检查性能影响。
