SEO是在许多方面,每个优化因素都取决于其他因素。
您可以创建吸引用户并与他们的搜索意图相关的一流内容,但如果您的页面加载缓慢,您的用户将永远没有机会阅读您为之创建的这些精彩内容你的网页。
用户是没有耐心的,要等几秒就会跳出。
可以你怪他们吗?想一想当您不得不看着加载轮旋转时您是多么沮丧,感觉就像永恒一样。
这个这是我们在进行任何性能优化工作时需要具备的心态,因为当您以对用户的同理心来处理事情时,最有意义的改进就会发生。
了解用户不同的浏览情况
对用户换位思考是一个很好的切入点,但是我们还需要了解用户是如何访问你的网站的。
例如,他们使用什么设备和浏览器访问您的网站?他们正在浏览什么样的互联网连接?
浏览条件的这些差异对性能的影响可能比预期的要大。
WebPageTest 在不同设备上测试 CNN 主页的 JavaScript 处理时间的结果证明了这一点。
iPhone 8 是一款配备更好 CPU 的高端设备,加载 CNN 主页需要 4 秒,而 Moto G4 加载时间为 13 秒。
但是,对于在 36 秒内加载同一页面的 Alcatel 1X,结果更加引人注目。
表情这不是“一分钱一刀切”的情况。根据每个用户的浏览条件,它可能会有很大差异。
“受众群体”选项卡中的 Google Analytics(分析)是开始挖掘和研究用户如何访问您的网站的好地方。
例如,您可以在“受众”>“移动”>“设备”下看到最常用设备的拆分。
这个只是众多报告中的一份,所以请仔细查看您的分析帐户,以更好地了解您的用户以及可能影响他们在您网站上的体验的因素。
以用户为中心的性能优化是未来
鉴于性能的不同性质取决于每个用户的浏览条件,营销人员可以采取更多的方式来改进我们的加速网站。
网站速度的未来应侧重于围绕用户及其特定浏览环境定制性能。
可以优化以下三个方面来改善用户体验网站的方式:
- 用户的设备
- 用户的互联网连接</li >> li>用户旅程
1. 根据用户设备优化性能
确保每个用户在您的网站上获得积极、快速体验的关键是实施基线- 您正在优化的最基本设备的性能。
围绕这个概念的两个 Web 开发策略是:
- Progressive Enhancement
- Graceful Degradation
渐进式增强
渐进式增强侧重于使页面的核心内容易于访问,然后逐步添加更多技术上先进的功能,超出用户设备或浏览器允许的范围。
例如,网站可能会优先提供干净、可访问的 HTML 内容。
然后,如果检测到用户的浏览条件来处理更复杂的功能,一些额外的 CSS 视觉变化可以在上面分层,并且可以通过 JavaScript 完成一些更高级的交互。
Graceful degradation
Graceful degradation基本上与progressive enhancement相反。
该站点将以完整的体验开始,但如果用户的设备无法处理更高级的功能,它将通过关闭某些低重要性元素开始恢复到逐渐更复杂的体验。
这些网络策略可能非常强大,因为如果您的网站加载速度很快并且即使在最基本的设备上也运行良好,请考虑它在高端设备上的加载速度。
2. 根据用户的互联网连接优化性能
内部连接是影响用户浏览情况最不稳定的因素之一,尤其是对于移动用户。当我们在移动中使用我们的设备时,互联网连接必然会波动和掉线。
但是,它可以针对不同级别的互联网连接进行优化,以确保用户在 3G 或 2G 连接上仍然可以有良好的网站体验。
网络信息 API
网络信息 API 提供有关用户 Internet 连接状态的信息,包括他们的连接类型和强度。
您可以使用网络信息 API 通过以下代码示例检测用户互联网连接的变化:
您还可以设置有关如果互联网连接发生变化应该发生什么以及网站上的内容应该如何显示的说明采用。
如 Google I/O 2018 所示,您可以设置视频在用户连接为 4G 时加载,因为此连接可以处理这种丰富的体验。
但是,如果用户在 2G 或 3G 连接上浏览,您可以设置加载静态图像而不是视频,这样您就不会对用户本已有限的连接造成太大压力。
在在这种情况下,用户不希望观看视频或动画,也不知道他们错过了什么。重要的是他们能快速看到内容。
这有助于用户感知速度,因为他们可以获得快速体验并且不必等待很长时间来加载非关键视频。
3. 根据用户的旅程优化性能
优先考虑最重要的资源以尽快加载的一种方法是用户的旅程。
当用户在特定页面上时,他们下一步最有可能点击哪里?用户旅程的下一页需要哪些链接和资源?
同样,这是另一种确定所需内容优先级的方法,而不是优化用户可能拥有的每个页面和他们可能需要的每个资源。
页面之间快速、无缝的旅程极大地促进了用户对速度的感知。
资源提示
让浏览器一次加载每个资源可能是一个低效的过程,甚至会增加用户等待页面加载的时间。
这里是资源提示可以提供帮助的地方。资源提示是您可以给浏览器的指令,以帮助它确定首先加载哪些内容的优先级。
Preload
Preload 指定影响当前导航的优先级最高的资源应该首先加载。
PRECONNECT
预先与服务器和其他来源建立连接联系。对于连接性较差的用户,此过程可能需要很长时间。
Prefetch
Prefetch 指定未来导航或用户旅程的关键链接和资源下一步。
Guess.js
Guess.js 自动化预取重要资源的过程并且优先考虑用户在旅途中最可能需要的资源,将资源提示提升到一个新的水平。
它的工作原理是使用 Google Analytics 数据分析用户如何浏览您的网站,使用综合浏览量、先前页面路径和退出等指标。
然后,它使用机器学习为任何给定页面的用户旅程中的下一页最有可能的预测建模。
然后它会预览用户在下一步访问您的网站时可能会访问的页面。这意味着,当用户点击它时,下一页已经加载,提供快速无缝的导航体验。
这个文章中提到的优化方法将需要开发人员的工作。
如果您在阅读时喜欢其中任何一个的外观,请确保您与您的开发机构或工程团队坐下来讨论您的网站从实施的角度可以实现的目标。
结论
我们需要停止假设每个人都在最佳条件下访问我们的网站。
每个用户都有自己独特的浏览环境。这就是为什么我们需要更加努力地围绕用户和构成他们浏览体验的不同变量(例如他们的设备和互联网连接)来调整我们的性能优化工作。
然而,这样做并不容易。这当然不是 SEO 或营销人员应该尝试自己解决的问题。
我们需要花更多的时间与开发者交流,向他们学习以用户为中心的性能优化可用的最新技术和方法。
更多资源:
- Lighthouse 性能指标的技术 SEO 指南
- 如何让您的网站超越快速
- 高级技术 SEO:完整指南