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

 

英选服务了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