为什么上线的产品总是觉得“小家子气”,使用起来“不顺畅”,用户感受“不爽”?我们很难说清楚答案,但直观感觉就是『产品质量』不行。
英选服务了N多互联网项目,在『产品质量』的优化方面积累了不少经验。不过,一切优化都有成本,无止境的优化不会带来更多用户,反而可能会让项目周期过长、预算增加引来更多问题。
产品的核心功能和流程一般经过精心设计,也会有多方共同测试完善,很难出现漏洞,所谓的『产品质量』更多在容易忽略的细节。
产品在上线前通常会做一轮完整的回归测试,这轮测试很难再发现大问题,目标应该是『以最低的成本、最大程度提高产品的质量』。为此,英选整理了22条产品上线前测试规范,包括访问速度、产品设计、运营分析和安全性四个方面。
这些规范经过验证,无论是处理和验收的成本都不高,但却能够大幅度提升产品体验和可靠性。
访问速度
1. 在1秒内响应、5秒内加载完毕
天下武功唯快不破,网站、应用的打开速度对于用户来说,是最为影响使用感受的因素之一。
许多研究都表明,用户最满意的打开网页时间,是在2秒以下。用户能够忍受的最长等待时间的中位数,在6~8秒之间,8秒是一个临界值,如果你的网站打开速度在8秒以上,那么很可能大部分访问者最终都会离你而去。
处理方法:
如果感觉你的网站确实不够快,优化速度的方法很多,但大体是两类:开源和节流。
-
开源包括:加大服务器带宽,提高服务器性能,加入CDN;
-
节流会涉及到技术方面的工作:优化代码性能,增加页面缓存,压缩静态资源等等。
除了代码优化之类的需要具体项目具体处理外,其他方式都可通用,具体步骤请参考下文。
验收方式:
用Chrome的应该会注意到,打开网页时标签卡上会有一个旋转的图标,灰色逆时针转就是等待服务器响应(响应太快,需要仔细看哦~),而蓝色顺时针则是开始加载资源,变成了网站的固定图标,则是加载完毕。
如果需要量化响应和加载时间,则需要用到『开发者工具』了。
Chrome下打开『开发者工具』(网页上随意右键并“审查”或F12)后,按以下步骤:
-
切换到Network标签页,并Disable cache(关闭缓存,保证每次刷新都是全新加载);
-
点击地址栏左侧的“刷新”按钮,并等待页面加载完毕;
-
DOMContentLoaded的结果即为响应时间,Load即为页面完全加载完毕的时间;
-
可以通过仔细查看网站内资源的加载时间(Time)来识别比较耗时的请求。
看到网站的性能情况后,需要规划优化方案,请继续往下看。
2. 使用CDN加速静态资源
用户打开你的网站时,加载的过程就像我们下载文件,我们会受宽带运营商(例如电信、天威)和服务提供商(例如百度云盘)带宽的限制,当需要下载的文件很多时,同时可以并发下载的数量也会影响整体时间。
对于浏览器来说,单个域名的请求并发量是 6 个,而自行购置服务器的带宽通常都比较有限(2-10M是比较常见的),10M的带宽实际下载速度是1MB/s,如果一个网页的资源加总是5MB,只有一个访客,理论上他可以5秒的速度加载完,但实际情况是有30个文件需要加载,他只能分5轮下载,整体时间会长达20秒以上。
通过CDN可以让网站的静态资源加载并发量有效提高,CDN通常有全球节点缓存,且绝大多数按流量计费,能充分保障用户客户端下载速度,减少带宽费用。
处理方法:
先去七牛、阿里云、腾讯云申请开通『对象存储』服务,开通后会自动启用CDN。工程师需为网站配置CDN域名,并设置 镜像回源 到网站的正式域名。
验收方式:
Chrome下打开『开发者工具』后查看网站里面的图片、CSS及JS等静态资源确认引用了CDN域名,而非网站域名。
3. 图片尺寸优化
Google做过一个试验,显示10条搜索结果的页面载入需要0.4秒,显示30条搜索结果的页面载入需要0.9秒,结果后者使得Google总的流量和收入减少了20%。
Google地图上线的时候,首页大小有100KB,后来下降到70~80KB。结果,流量在第一个星期上升了10%,接下来的3个星期又再上升了25%。
当下网络环境下,带宽仍旧是稀缺品。100像素宽的网页位置,但却放了一张1000像素宽的图片,然后缩放显示。二者的实际尺寸差了100倍,这是流量和带宽的极大浪费。
处理方法:
根据设计图/界面实际情况,对需要用到的图片事前进行尺寸大小调整。
验收方式:
Chrome下在图片位置右键“审查”,打开『开发者工具』后比对实际大小和原图的分辨率,考虑到响应式(不同尺寸屏幕下图片实际大小会变化)可能会有差异,但是整体来说应该基本一致,如果差异太大则需要与工程师沟通。
4. 静态资源压缩编译
网站里面使用的静态资源应当尽可能压缩以节约大小,包括图片、JS和CSS等。
处理方法:
不同的开发框架都有插件可以做到这一点,例如Uglifier。
验收方式:
Chrome下打开『开发者工具』后切换到Sources标签,进入Page,找到网站CDN域名或者网站域名下的文件,以JS为例,压缩过后代码通常难以阅读,且单行很长,行数很少。
产品设计
5. 404、500错误页面友好处理
输入网站的某个链接但找不到合适的内容,就会出现404错误;而当某一些操作或者页面代码出了问题,则会出现500错误(英文提示Internal server error,内部服务器错误。后文第17个测试点告诉你怎么及时获知用户遇到报错的情况。)。
考虑到这两种情况都是难以完全避免的,我们需要通过美观的设计让用户碰到时感受好些。
处理方法:
设计师提供UI设计稿并交由前端实现后,放到public目录或者用nginx配置。
验收方式:
在网站域名后边随便输入一些字符回车访问,就会触发404;如果网站访问过程中有代码运行错误,就会触发500,可以让工程师配合测试。
6. 用户密码强制中等强度以上,后台管理员账号使用强密码
一般理解的暴力破解是1234,2345,3456这样无规则的尝试,而事实上密码也有心理学,有经验的黑客会通过其他途径获取你的用户名、姓名拼音、生日,以及亲友的信息,并用那些信息组合进行尝试。
如果你用的简单的密码,被破解只是时间问题。
因此,请不要心怀侥幸,务必使用随机强密码,符号数字大小写搭配使用。
7. 桌面端、手机端、平板端版式均无错乱(完全缩放或响应式)
用户可能从各种终端访问你的网站,我们应该将精力放在最重要的终端上(例如手机移动端和桌面端),但是其他常见终端(例如iPad平板)的分辨率也要保证基本的访问效果。
处理方法:
前端工程师需要针对各个常见分辨率下,优化处理明显的问题,例如布局或者版式错乱(不需要刻意追求完美)
验收方式:
Chrome下打开『开发者工具』后点击切换设备(Toggle Device toolbar)的按钮(见图)。开启后,通过上方的下拉框可以切换设备。如果将开发者工具的布局收缩到右侧,测试体验更好。
8. 不兼容浏览器显示升级提醒
我们在技术选型时经常不得不使用不兼容旧浏览器的新技术,而新式浏览器的用户也确实将拥有良好的访问体验,但是仍有一些用户使用老旧的浏览器,我们无法完全放弃这部分用户,这种情况下,引导他们升级,是更负责任的态度。
处理方法:
判断浏览器的类型和版本信息(User Agent)并在老旧浏览器上显示类似以下的引导内容,也有插件可以方便做到这些。
验收方式:
目前来说,老旧浏览器通常意义是指IE9及以下。如果使用Windows 10之类的系统,将无法直接测试IE旧版本的兼容性,为此,我们需要开启IE内核兼容性模式。
以使用最新的IE11浏览器为例,按F12键调出“开发人员工具”,然后在左侧导航栏向下滚动,找到电脑图标状的“仿真”按钮,在“文档模式”下拉列表中可以选择从IE5到IE10的旧版IE内核,选择某个内核之后,当前网页就会刷新以选定的IE内核兼容性模式打开。
9. 慢网络下有Loading或载入进度
每个人都遇到过网络状况不太好的情况,用户会因为“没有反应”、“页面空白”而焦虑,造成重复点击提交信息、中断操作甚至离开你的产品。
研究显示,如果等待12秒以后,网页还是没有载入,那么99%以上的用户会关闭这个网页,不再等待。
但是,如果在等待载入期间,网站能够向用户显示反馈消息,比如一个进度条,那么用户可以忍受的时间会延长到38秒。
处理方法:
loading.io有大量loading样式素材参考下载
-
网站响应后如有大量素材待加载,应及时让用户知道加载进度,例如“进度条”;
-
表单请求提交后立即屏蔽提交按钮,并加上“旋转的菊花”等。
验收方式:
如果前面网站速度优化到位,本地的带宽又比较充裕,可能会难以复现低速网络的效果。我们同样可以通过Chrome的『开发者工具』,进行网络情况的模拟。
Chrome下打开『开发者工具』后点击切换设备(Toggle Device toolbar)的按钮,开启后,通过上方右侧的下拉框可以切换模拟网络情况(默认Online)。
10. 表单必填引导及错误提示
属于产品范畴,不多解释
11. 用户敏感操作需要二次验证
最常见的二次验证就是手机验证码,属于产品范畴,不多解释
运营分析
12. 引入统计分析
你了解你的网站流量和访客情况吗?很多企业有网站,却并不知道自己的这些数据,或是没人知道怎么获得这些数据。对此,英选的意见是,根据不同企业的情况,目前可以不做各种数据运营和分析,但要立刻开始收集。确保未来要用时,能有历史数据。
处理方法:
需求方需要先注册好例如Google分析、百度统计之类的账号,并添加好站点,将跟踪代码交给工程师放在layout布局文件里面。
验收方式:
引入跟踪代码后次日登录统计分析系统,查看有无访客、来源之类的数据产生。
13. SEO基础:页面描述、favicon及动态标题变化
当你谷歌搜索『英选』,你会看到英选首页的标题、描述,打开网站后标签卡上的网站图标(favicon),这些内容都是我们能够控制的。同时,我们还需要让网站内不同页面有自己的标题。
处理方法:
添加不同的meta,分别对应description和keywords,以及favicon。
验收方式:
如果网站已经被收录,修改后一般隔天重新搜索就能看到更新;如果尚未收录,得先用谷歌或百度的站长工具先提交网站收录。
品牌升级后的英选,对网站的标题和描述也进行了优化
14. 应用日志自动清理策略
网站运行过程中会产生大量日志,这些日志对于分析网站的问题有很大帮助。
但是持续的日志产生又会导致硬盘空间被挤占,严重情况下会导致服务器无法正常运行——这是一个很难在项目交付初期发现、容易忽略的问题,却会给网站运行的稳定性带来风险。
处理方法:
增加定时任务(如crontab)压缩、备份及清理日志,也可使用logrotate。日志价值很大的情况下,可以考虑ELK。
验收方式:
告知日志保存位置及策略,检查文件是否按策略压缩、备份及清理。
15. 数据库自动备份策略
数据库存放了应用方方面面的信息,而且运行过程中时时刻刻都在更新。一旦服务器出现问题,我们需要有可行的备份策略。
处理方法:
不同的数据库都有备份方法,需要有定时任务制定备份策略,并备份到对象存储等外部空间。
验收方式:
告知数据库备份策略及位置,检查数据库文件是否按策略备份,是否可以正常恢复。
16. 服务器数据文件夹定期备份策略
应用使用过程中,会有大量的数据文件产生,例如上传图片、附件等,这些都存放在服务器内,而不是数据库或者代码库。
一旦服务器出现问题,我们即使恢复了数据库,数据文件的缺失也可能导致应用无法正常使用,我们需要有可行的备份策略。
处理方法:
需要有定时任务制定备份策略,定期自动打包、压缩并上传到对象存储等外部空间。
验收方式:
告知数据文件备份策略及备份位置,检查文件是否按策略备份,是否可以正常恢复。
17. 前后端代码错误监控
每个应用运行过程中都会有出错的时候,但一般来说我们不知道用户正在面临问题,这时候可能用户就带着愤懑离开了,而我们却毫无知觉。可怕的是,这样的事情可能一直在发生。
处理方法:
为了尽可能提高产品质量,我们需要对前端(包括用户使用的客户前台及管理员使用的后台)、后端都添加代码错误监控,出错时通过邮件等方式及时通知工程师和项目经理。
建议使用Sentry之类第三方服务,方便持续收集统计报错信息。
验收方式:
添加自己的邮箱到Sentry或其他报错通知列表,触发报错检查是否可以收到邮件。
安全性
18. 支付接口异步通知
涉及到支付的环节对于产品来说至关重要,我们不仅要保障用户支付流程的顺畅,还要保障数据的正确。
支付接口有同步通知也有异步通知,前者是支付成功后支付接口直接返回的状态,后者是指支付服务商直接通知到服务器后端的通知。二者几乎都是实时的,但是由于后者是支付服务商主动通知,意味着对支付的正式确认,可靠程度更高。
处理方法:
采用异步通知逻辑处理订单状态的变化,前端不可依赖支付接口的返回,需等待后端通知或者主动向后端查询订单状态。
微信小程序支付文档中的业务流程时序图,包含了“推送支付结果后更新订单状态”的部分
验收方式:
向工程师确认支付通知的处理逻辑是否包含签名验证、订单金额验证和订单状态变化。
19. HTTPS证书
HTTP可以被劫持,篡改网页内容。而HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议, 要比HTTP协议安全,实现了服务器和客户端双向验证以确认对方身份。
处理方法:
需求方于阿里云、ssls.com购买商业SSL证书,或Let's encrypt申请免费SSL证书,配置代理服务器(nginx、apache)以启用HTTPS。
阿里云上SSL证书产品的详细介绍页面
验收方式:
查看浏览器地址栏左侧,有无”小锁“的标志或”安全“字样,展开后点击证书,可以查看证书的颁发方、证书类型及过期时间。
20. 服务器root账号禁止登陆
黑客在无时无刻窥探、尝试破解我们的服务器,root作为Linux系统的超级管理账号,名字是固定的,如果暴露在外容易被暴力破解。
处理方法:
除了各类防暴力破解的策略外,更加简单有效的就是直接禁止root账号登录,而启用自行创建的具有超级管理权限的账号名。
验收方式:
在终端输入ssh root@ip或域名
,提示权限拒绝。
21. SSH更换端口,采用证书登录,禁用密码登录
root账号已经禁用了,但如果你的账号仍旧有概率被猜到,一旦提示输入密码,那就又有了暴力破解的机会。
处理方法:
修改服务器ssh的默认端口(22),并禁用密码登录,所有需要服务器权限的工程师采用证书方式登录。
验收方式:
在终端输入 ssh root@ip或域名
,提示22端口链接拒绝,意味着端口已更换。如果端口正确,提示权限拒绝(公钥),则表示证书对该用户名无效。
22. (短信服务、支付功能等)外部服务采用白名单策略
对于一些涉及付费、敏感的外部服务,例如微信公众号、支付接口、短信服务等,需要采用白名单策略,避免密钥信息泄露后被非法使用。
处理方法:
将服务器的公网IP配置到这些服务的后台。
验收方式:
一旦被非法调用(例如迁移服务器后忘了添加白名单)会触发错误拒绝调用,并发送安全通知。
参考内容
-
网页打开速度的心理学 - 阮一峰的网络日志:
http://www.ruanyifeng.com/blog/2009/03/the_psychology_of_web_performance.html -
The Psychology of Web Performance - how slow response times affect user psychology:
http://www.websiteoptimization.com/speed/tweak/psychology-web-performance/ -
微信支付官方文档:
https://pay.weixin.qq.com/wiki/doc/api/index.html -
Sentry:https://sentry.io
-
七牛云存储官网:https://www.qiniu.com/
-
阿里云SSL证书产品:https://www.aliyun.com/product/casspm=5176.10695662.1171680.1.5358481ayfgi6F
-
SSLs.com:https://www.ssls.com