以用户为中心的优化：提高网站体验的3种方法

SEO是多方面的，每个优化因素都依赖于其他因素。

您可以创建吸引用户并与其相关的一流内容搜索意图，但如果您的网页加载缓慢，您的用户将永远不会有机会阅读您为网站创建的这些优秀内容。

用户不耐烦，如果他们不得不等待几秒钟，他们就会反弹。

来自Google的Think数据

你能怪他们吗？想想当你必须观看一个装载轮旋转时你感到多么沮丧，感觉就像永恒。

这是我们在进行任何性能优化工作时需要具备的思维方式，因为当您从对用户的同情心处理事物时，将会发生最有意义的改进。

了解用户的不同浏览条件

对用户的同情是一个很好的起点，但我们还需要了解用户访问您网站的方式。

例如，他们使用哪些设备和浏览器访问您的网站？他们浏览什么样的互联网连接？

浏览条件的这些差异会对性能产生比预期更大的影响。

通过测试跨不同设备的CNN主页的JavaScript处理时间的结果证明了这一点来自WebPageTest。

iPhone8是一款具有更好CPU的高端设备，与在13秒内加载的MotoG4相比，在4秒内加载了CNN主页。

然而，对于在36秒内加载相同页面的Alcatel1X，结果更为显着。

表现并不是“一分钱适合所有人”的情景。它可能会根据每个用户的浏览条件而有很大差异。

“受众”标签中的谷歌分析是一个开始挖掘并研究用户如何访问您的网站的好地方。

例如，您可以在“受众”>“移动”>“设备”下看到最常用设备的拆分。

这只是众多报告中的一个，因此请仔细查看您的分析帐户，以便更好地了解您的用户以及可能影响他们在您网站上体验的因素。

以用户为中心的性能优化是未来

考虑到性能的不同性质取决于每个用户的浏览条件，营销人员可以采取更多措施来改进我们加速网站的方式。

网站速度的未来应侧重于围绕用户及其特定浏览环境定制性能。

以下三个方面可以进行优化，以改善用户体验网站的方式：

• 用户的设备
• 用户的互联网连接
• 用户的旅程

1.根据用户设备优化性能

确保每个用户在您的网站上获得积极，快速体验的关键是实现基准级别的性能，该级别适用于您要优化的最基本设备。

围绕这个概念的两个Web开发策略是：

• 渐进增强
• 优雅的退化

渐进式增强

渐进增强功能侧重于使页面的核心内容可访问，然后在用户设备或浏览器允许的功能之上逐步添加更多技术高级功能。

例如，网站可能首先在HTML中提供干净，可访问的内容作为优先级。

然后，如果检测到用户的浏览条件可以处理更复杂的特征，则可以在顶部分层一些额外的CSS视觉改变，并且可以通过JavaScript进行一些更高级的交互。

优雅的退化

优雅降级基本上与渐进增强相反。

该网站将以完整的体验开始，但如果用户的设备无法处理更高级的功能，则会通过关闭某些低重要性元素开始回归逐渐复杂的体验。

这些网络策略可以非常强大，因为如果您的网站加载速度很快，即使在最基本的设备上也能很好地运行，请考虑它在高端设备上的加载速度。

2.根据用户的Internet连接优化性能

内部连接是用户浏览条件中最不稳定的因素之一，尤其是对于移动用户而言。当我们在移动中使用我们的设备时，互联网连接必然会波动和下降。

但是，可以针对不同级别的互联网连接进行优化，以确保用户在3G或2G连接上仍然可以获得良好的网站体验。

网络信息API

该网络信息API提供有关用户的Internet连接状态的信息，包括其连接的类型和强度。

您可以使用以下代码示例使用网络信息API来检测用户的Internet连接中的更改：

您还可以设置说明如果互联网连接发生变化应该发生什么，以及网站上的内容应该如何采用。

正如GoogleI/O2018所示，如果用户的连接是4G，您可以设置要加载的视频，因为此连接可以处理这种丰富的体验。

但是，如果用户正在浏览2G或3G连接，您可以设置要加载的静态图像来代替视频，这样您就不会对用户已经有限的连接施加太大的压力。

在这种情况下，用户不期望观看视频或动画并且不知道他们丢失了什么。重要的是他们很快就能看到内容。

这有助于用户对速度的感知，因为他们获得快速体验而不必等待很长时间才能加载非关键视频。

3.根据用户的旅程优化性能

优先考虑要尽可能快地加载的最重要资源的一种方法是用户的旅程。

当用户在特定页面上时，他们最有可能在哪里点击下一个？在用户的旅程中，下一页需要哪些链接和资源？

同样，这是优化所需优先级的另一种方法，而不是优化用户可能潜在的每个页面以及他们可能需要的每个资源。

页面之间快速，无缝的旅程为用户对速度的感知做出了巨大贡献。

资源提示

让浏览器一次性加载每个资源可能是一个低效的过程，为用户在等待页面加载时增加了更多的时间。

这是哪里资源提示可以帮助。资源提示是您可以提供给浏览器的指令，以帮助它优先考虑最先加载的内容。

预载

预加载指定影响当前应首先加载的当前导航的最高优先级资源。

PRECONNECT

预连接先前建立与服务器和其他来源的连接。对于连接性较差的用户，此过程可能需要很长时间。

预取

预取指定了将来导航或用户旅程中下一步所需的关键链接和资源。

Guess.js

Guess.js通过自动化预取重要资源的过程并优先考虑用户旅途中最有可能需要的资源，将资源提示提升到新的水平。

它的工作原理是使用GoogleAnalytics数据分析用户浏览网站的方式，使用网页浏览量，之前的网页路径和退出等指标。

然后，它使用机器学习来为任何给定页面的用户旅程中下一页最可能的预测建模。

然后，它会预览用户可能在他们浏览您网站的下一步中访问的页面。这意味着，当用户点击它时，下一页已经加载，提供快速，无缝的导航体验。

本文中提到的优化方法将需要开发人员的工作。

如果您在阅读时喜欢其中任何一个的外观，那么请确保您与开发机构或工程团队坐下来从实施角度讨论您的网站可能实现的内容。

结论

我们需要停止假设每个人都在最佳条件下访问我们的网站。

每个用户都有自己独特的浏览环境。这就是为什么我们需要更加努力地围绕用户定制我们的性能优化工作以及构成其浏览体验的不同变量，例如他们的设备和互联网连接。

但是，这样做并不容易。它当然不是搜索引擎优化或营销人员应该尝试自己解决的问题。

我们需要花更多时间与开发人员交流，并向他们学习可用于以用户为中心的性能优化的最新技术和方法。

更多资源：

• 灯塔性能指标的技术SEO指南
• 如何使您的网站超越快速
• 高级技术搜索引擎优化：完整指南

图片来源

特色图片：Unsplash所有截图均由作者拍摄，2019年5月