翻译慢点更好-为何排序比速度更重要by zhangxinxu from http://www.zhangxinxu.com本文地址http://www.zhangxinxu.com/wordpress/?p4464原文地址 http://www.yottaa.com/…-than-speed原文作者Brendan MacArthur翻译编辑 zhangxinxu翻译正文(2014-12-07)众所周知如今的网页为了吸引用户无所不用其极夹杂着大量拖累网站的工具。一个好的用户体验需要高清晰度的图片、视频、图形以及字体并且现在社会化分享例如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设计决定的而不是基于正确的前后优先顺序。同样的通常是无意的为了网站发展关键吸引点被埋没了一些营销活动或计划会雀占鸠巢。幸运的是应用程序可以在事后使用排序做一些小的调整。想了解更多关于排序的好处可以围观这个最佳应用程序排序策略概要。本文地址http://www.zhangxinxu.com/wordpress/?p4464