让你的产品更优秀!22个上线前应该测试的地方

运营君 2021年04月08日 原创

Nordwood themes 166423 unsplash1

为什么上线的产品总是觉得“小家子气”,使用起来“不顺畅”,用户感受“不爽”?我们很难说清楚答案,但直观感觉就是『产品质量』不行。

 

英选服务了N多互联网项目,在『产品质量』的优化方面积累了不少经验。不过,一切优化都有成本,无止境的优化不会带来更多用户,反而可能会让项目周期过长、预算增加引来更多问题。

 

产品的核心功能和流程一般经过精心设计,也会有多方共同测试完善,很难出现漏洞,所谓的『产品质量』更多在容易忽略的细节。

 

产品在上线前通常会做一轮完整的回归测试,这轮测试很难再发现大问题,目标应该是『以最低的成本、最大程度提高产品的质量』。为此,英选整理了22条产品上线前测试规范,包括访问速度、产品设计、运营分析和安全性四个方面。

 

这些规范经过验证,无论是处理和验收的成本都不高,但却能够大幅度提升产品体验和可靠性。

 

 

访问速度


 

1. 在1秒内响应、5秒内加载完毕

 

天下武功唯快不破,网站、应用的打开速度对于用户来说,是最为影响使用感受的因素之一。

 

许多研究都表明,用户最满意的打开网页时间,是在2秒以下。用户能够忍受的最长等待时间的中位数,在6~8秒之间,8秒是一个临界值,如果你的网站打开速度在8秒以上,那么很可能大部分访问者最终都会离你而去。

 

处理方法:

如果感觉你的网站确实不够快,优化速度的方法很多,但大体是两类:开源和节流。

  • 开源包括:加大服务器带宽,提高服务器性能,加入CDN;

  • 节流会涉及到技术方面的工作:优化代码性能,增加页面缓存,压缩静态资源等等。

 

除了代码优化之类的需要具体项目具体处理外,其他方式都可通用,具体步骤请参考下文。

 

验收方式:

用Chrome的应该会注意到,打开网页时标签卡上会有一个旋转的图标,灰色逆时针转就是等待服务器响应(响应太快,需要仔细看哦~),而蓝色顺时针则是开始加载资源,变成了网站的固定图标,则是加载完毕。

 


如果需要量化响应和加载时间,则需要用到『开发者工具』了。

 

Chrome下打开『开发者工具』(网页上随意右键并“审查”或F12)后,按以下步骤:

  1. 切换到Network标签页,并Disable cache(关闭缓存,保证每次刷新都是全新加载);

  2. 点击地址栏左侧的“刷新”按钮,并等待页面加载完毕;

  3. DOMContentLoaded的结果即为响应时间,Load即为页面完全加载完毕的时间;

  4. 可以通过仔细查看网站内资源的加载时间(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

- THE END -

和我们聊聊你的想法?

免费获取方案
微信公众号
英选公众号二维码

扫码关注公众号

企业微信联系
扫码联系顾问

扫码联系顾问