Web 性能和速度：最佳技术

已发表: 2021-08-30

在 SEO 和 webperf 社区以及更广泛的电子营销和电子商务中，加载速度和网络性能是每个人的话题。

正如 Web 性能顾问和参考顾问 Andy Davies 提醒我们的那样：
“环境影响体验，
 经验影响行为，
 行为会影响业务收入。”

因此，无论您是想增加收入、搜索引擎优化还是两者兼而有之，您都必须知道快速页面对您的用户体验质量至关重要。 速度还有助于向谷歌发送正确的信号，谷歌自页面体验更新以来一直在考虑速度。

您也知道，网站必须先满足用户的期望，然后才能满足搜索引擎的期望。 因此，显示速度和交互性是优质用户体验的先决条件的一部分，主要是为了促进参与和转化！ 例如，请注意，根据 Google 的一项研究，77% 的互联网用户更倾向于在允许他们快速完成购买的网站或应用程序上订购。

但是哪些技术对访问者的影响最为明显，以便为他们提供流畅的浏览体验和真正的速度感？

这是一个由优化杠杆组织的清单，以提高显示速度和交互性。

优化网站的显示速度

页面越轻，显示所需的时间就越少。
除了资源优化之外，您还可以设置组成页面的不同元素的显示速率和尺寸，以增强速度和可用性的感觉。 以下是一些基本技术：

  • 将图像压缩为最有效的格式
    与 JPEG 相比，新一代 WebP（由 Google 推荐）和 AVIF（提供更好的结果）格式允许您将图像的重量减少多达 50%，同时保持最佳的视觉质量。 知道图像的重量约占页面重量的 50%，它是使您的页面快速的重要杠杆。
  • 使媒体和图像的显示适应不同的屏幕
    根据用户是从手机还是计算机访问您的网站，调整和定义媒体和图像的大小。
  • 减少页面资源的权重
    优化您的代码：HTML、JS 和 CSS 文件的缩小（删除不必要的字符）和资源压缩（Gzip 和 Brotli 格式），在某些情况下，连接，这些都是减少页面重量的好做法，因此可以加快速度浏览器中的显示。
  • 延迟加载
    该技术包括仅加载屏幕上可见的内容，而不是加载整个页面。 换句话说，浏览器仅提供与访问者需要在其屏幕上看到的内容相关的严格必要的工作。
  • 优化字体
    您可以优化字体的格式（例如 WOFF2，它可以节省 30% 到 50% 的文件大小），并且即使浏览器尚未加载字体，也可以选择显示文本，以加快渲染速度。
  • 消除阻塞资源并异步加载它们
    避免阻塞页面的渲染：更喜欢异步加载资源，尤其是 CSS（关键 CSS）、JS（异步和延迟）和字体（display:swap）。
    当然，如果你因为在页面加载开始时某些资源是必不可少的而别无选择，那么这些资源必须尽可能轻。
  • 采用正确的缓存策略
    为了让用户尽可能快地显示页面，缓存静态元素。
    为此，您需要事先识别动态内容和静态内容，并定义缓存静态内容的规则：多长时间，以及在哪个缓存上（浏览器、源或 CDN）。

[案例研究] 管理 Google 的机器人抓取

1001Pneus 拥有超过 26,000 个产品参考，需要一个可靠的工具来监控他们的 SEO 性能，并确保 Google 将其抓取预算用于正确的类别和页面。 了解如何使用 OnCrawl 成功管理电子商务网站的抓取预算。
阅读案例研究

提高交互性：即时响应页面

除了元素在浏览器中显示的速度之外，交互能力对于让用户完全满意是必不可少的。

否则，您会让他们感到沮丧，这会转化为诸如愤怒点击、鼠标在页面上疯狂移动或随机滚动以检查页面是否正常运行等行为。
在最坏的情况下，您的访问者会返回上一页，或者永远离开您的网站，在 Google 上进行新的搜索，或者转到您的竞争对手。
请记住，如果出现负面体验，43% 的互联网用户会去竞争对手的网站进行下一次购买。 因此，您必须为自己提供吸引和留住访客的方法。

大多数情况下，第三方脚本和 Javascript 可能会导致交互性不佳。 事实上，只要浏览器忙于检索、解析和执行 JavaScript，它就无法响应用户的交互。

同样，这里有一些技术可以优化您的代码和第三方，并让您的访问者享受最佳体验：

  • 通过延迟加载来减少第三方的影响
    您可以在页面上显示优先内容元素后开始加载和执行脚本。 但请注意：请记住，延迟加载 JavaScript 并不能使其在性能方面免费！
    这可能是在显示主要元素后推迟加载某些功能（聊天、小部件、跟踪……）以使用户放心的问题，但这并不会取消浏览器处理代码所需的时间，它只会及时转移它。
  • 减少 JavaScript 执行时间
    划分占用浏览器时间的任务（长任务），并确保支持短处理以响应用户交互（例如，避免主动侦听某些事件，如滚动；并利用浏览器有时间空闲时间运行某些 JavaScript 处理）。
  • 减少主线程的工作
    通过减少请求的数量和交换的大小，浏览器将能够更快地响应交互。

也节省时间：自动化您网站的优化技术

我们刚刚介绍了用户体验的两个非常重要的方面：显示速度和交互性。 好消息是，我们刚刚在此清单中提到的所有优化都可以自动化！

此外，您可能已经链接到 Google 的两个核心 Web VItals，它们允许您分别评估这些方面：最大内容绘制和首次输入延迟。
当然，您还应该考虑通过处理累积布局偏移分数来提高页面的视觉稳定性以获得最佳用户体验。

您应该知道，这 3 个指标（LCP、CLS 和总阻塞时间，或 TBT，相当于 FID）占 PageSpeed Insights 评分的 70%。
因此，从逻辑上讲，您为加快页面速度和优化这些指标所做的任何事情都会对您的用户以及您的性能得分产生积极影响。
简而言之，您可以将与 SEO 相同的方法应用于您的 UX：优质内容和体验保证用户满意度，并有助于更好地被 Go​​ogle 索引。

此外，与 SEO 一样，webperf 优化必须随着时间的推移而保持。
这需要时间和专业知识，因为技术和指标发展迅速。 此外，即使在大型团队中，技术资源也不总是有时间或知识来有效地保持网站的速度； 为一场像蛋奶酥一样的突击行动部署资源和精力非常令人沮丧，甚至令人沮丧。

因此，与其将时间浪费在维护上、担心网站每次演变时的副作用、以及冒着使插件过载的风险而增加插件，不如使用一个工具自动应用所有前端优化技术！

您应该知道，在大多数情况下，对于高流量的电子商务网站，webperf 优化解决方案的 ROI 很容易衡量。
事实上，谷歌估计 -0.1 秒的加载时间可以带来 +8% 的转化率，而前端优化解决方案可以轻松实现这一目标。
在 Fasterize，我们发现，通常，即使转化率提高不到 1 个百分点，也足以确保我们 SaaS 解决方案的投资回报率； 更不用说技术团队节省的时间了。
生意是战神，你自己算算，做起来很简单！ 它使您能够了解自动化性能优化的兴趣，并说服您的内部团队并让其参与进来。

在各个方面节省时间！