慢点更好-为何排序比速度更重要？

Posted 2020-08-14

众所周知：如今的网页为了吸引用户，无所不用其极，夹杂着大量拖累网站的工具。一个好的用户体验，需要高清晰度的图片、视频、图形以及字体；并且现在社会化分享（例如：jiathis社会化分享按钮和代码）、市场跟踪（如Google分析，百度统计）和第三方项目如雨后春笋，大量增加；javascript开始承担以前客户端才有的复杂处理。作为前端开发，显然需要做些什么来应对这些会影响体验的冲击。我们第一反应应该是以web性能为标准做优化，让网站更快。速度优化确实是个很好的开始，但这是不够的。虽然说从平均页面加载时间上看现在的互联网上页面基本上是静态的（以国外的网络速度为背景理解这句话），但是，现在面临的挑战是，越来越多的用户跑到移动端。是该想想其他的方法和路数了。

有个简单的道理想必大家都认可的，就是感知要胜过加载时间，说开了就是，用户对页面加载的实际感知要比真是的网页加载速度更重要，要满足用户的这种期望是个非常复杂的过程，这就是为什么只是傻傻地关注web性能是不足够的。

根据用户浏览时候的上下文为网页制定排序策略是应过对这种期望的最佳方式。排序(Sequencing)是近些年前端优化技术领域新诞生的一个概念，其基本理念是：每个页面的使命不是快，而是契合用户。使用“排序”，元素会以特定的顺序在特定时间显示，以便更好地促使用户参与进来，下面具体看看为何我们要从“速度控”转变成“排序信徒”。

无视就会错失

快可能会迷失方向而导致错失机会

我们不是第一个提出：快不总是代表好。Nielsen Norman这个组织年初发布了一项关于用户界面设计的研究，提出了：

Users might overlook things that change too fast—and even when they do notice, changeable screen elements are harder to understand in a limited timeframe.

如果事情来得太快，用户可能会忽略——即使他们注意到好像发生了什么变化，屏幕上变化的元素是很难再很短的时间内理解的。

//zxx: 例如，我们执行某一Ajax操作成功，需要刷新页面时候，会有提示“删除成功，页面重新加载中…”，如果直接就触发刷新，网络反应慢还好；如果网速以及服务器给力，刷新会很快，以至于则提示一闪而过，用户可能没看清而不知道刚刚发生了什么，此时可以故意慢一下，1~2秒的定时器，然后再自动刷新（同时支持手动刷新）。

一个网站如果短时间内一下子提供太多的选择会忽视很多关键点，因为用户如果被一大堆选择干扰，是不可能专注某一特性、完成某一目标或者知道该干嘛的。并且当用户在没有提示或要求的情况下要求做些改动，其多半不知道该寻找什么，或者该如何继续与网站互动。只有当用户已经做了行动、等待结果时候（如呈现搜索结果，数据提交等），速度是相当受益的。排序的要点在于：访问者需要很多很赞的功能，但是，如果这些功能偏离了预期路线，让用户原本可以称赞你站点的机会变成默哀，则你的网站首先应当着眼于目标转换，而不仅仅是速度。通过降低页面某些元素的呈现速度，让你用户与最重要的内容充分互动来降低挫败感，提高参与度。通过排序，你可以考虑优先让那些元素出现，以及什么时候渲染出来，以此满足访问者当时的需求同时带来更好的访问流量。

夺目，华而不实，以及凌乱

这种呈现组织实际上大家应该都见过。今年比较流行的滚屏加载、时差滚动网站实际上就是“排序”的很好的例子。每一屏都有希望用户关注的功能，如何无干扰呈现给用户，策略就是“慢”，而不是我们一味追求的“快”。当滚动到对应屏幕，或对应位置的时候，动画或者交互才开始呈现，使得用户意思可以关注一件事情，而不会错失希望用户感知的重要信息。如果大家有兴趣，可以围观下我和同事们做的QQ国际版首页，当你滚动鼠标的时候，你就会发现，我们做了很多“排序”以及细节处理，让用户注意到我们希望其关注的内容上。

快可能很……糟糕

你想让你的网站留下深刻的印象，浮夸不总是有效的。当一个顾客走进一家商店，他是不会被大大的「欢迎光临本店，请注册！」这样的标语给轰炸的，理由很简单：这样的中断可能会让顾客离开。那为什么网站要这么做呢？说不定，注册量什么并不是你最大最优先要转换的东西，那为何还要为了这么个小目标，创造这么糟糕的体验呢？人眼一次只能专注于一个项目，人脑一次只能专注于一件事情。确保用户与你最先互动的是你网站有用的、引人入胜的内容，而不是分散的周围的芝麻蒜皮。排序的要点在于：合适的顺序产生更快的性能，但重要的是，它允许用户以正确的逻辑顺序和消费消息和网站互动。通过降低非优先项目，可以加速和促进最佳内容面向用户。这能让用户对你提供的内容保持兴趣和好奇心，可以提高页面的页面访问量、站点停留时间以及转换率。

千里之堤毁于蚁穴

想起了一个例子，手机APP都有个评分，对于APP而言，这个评分很重要。很多软件的做法是，用户刚试玩不久，就弹出让你评分的提示。这就跟上面逛商店被“注册”标语轰炸例子本质类似。而好的APP是在用户成功完成某项交易之后，弹出恭喜提示，然后让用户帮忙举手之劳评个分。哪个好，显然不言而喻。后者不会干扰用户正常使用APP的使用逻辑，降低评分优先级，但最后评分数目和分数确要比前者高很多。

 

再举个大家能够体验的例子。大家手机上使用京东或者淘宝APP时候，商品详情页，默认展示的都是简单却重要的信息，更详细的商品信息（宣传、参数、使用说明及注意事项）是需要额外拉一次（上拉查看图文详情）才呈现。这种“排序”好处在于：1. 省流量；2. 更高的性能与速度； 3. 没有过多信息干扰，能更准确互动。

如今，总是关注速度而不是元素

web性能优化已经有一定的水准，包括压缩(gzip)、最小化(mini), 合并等。但是，性能优化集中在页面加载上，而从未考虑过个体元素是如何吸引或分散访问者的。例如，社会化媒体的整合（如facebook的like的按钮）对鼓励用户产生品牌的积极情绪是很重要的。但是，如果它们阻止了你页面核心内容的装载，它们就会产生相反的效果。排序的要点在于：当流动受阻时候速度是没有价值的。但是，通过排序，资产可以延迟，或是降级到页面的底部，或者直接不加载——以确保你网站交互的正确性。但是，对于第三方资源，你是没有控制全。社会化媒体分享按钮放在顶部似乎是个不错的选择，但是，为了保证不会有因加载嗝屁而沮丧的用户，提高页面整体内容的专注度，最好在页面完全加载完毕后再去请求与呈现。

上面问题不知大家是否有所体会，我个人是有很多的。经常看外文时候，如果遇到有facebook分享按钮，呵呵，麻烦就来了，尤其这个按钮在顶部的时候。要知道墙内和墙外的世界是不一样的，当对facebook的请求在慢慢试图爬墙的时候，页面只是空白，只见浏览器标签页上菊花旋转，实际上，页面内容可能已经load进来了。但是，对于大多数用户而言，访问与流量中断了，重要的内容没有看到。网站使用Google服务的时候，也会经常遇到这样的问题。类似这种情况，你本身页面性能优化一级棒，其实也是徒劳的；个体元素“排序”要比纯粹加载性能要实用不知千百倍。

前事不忘后事之师
一个典型的Web页面可以有很多的元素，而这些元素有特定的优先级以及逻辑顺序。然而，大多数时候，很少会想到按照逻辑呈现。相反，这些元素的顺序是在设计时由UI设计决定的，而不是基于正确的前后优先顺序。同样的，通常是无意的，为了网站发展，关键吸引点被埋没了，一些营销活动或计划会雀占鸠巢。幸运的是，应用程序可以在事后使用排序做一些小的调整。想了解更多关于排序的好处？可以围观这个，最佳应用程序排序策略概要。