任何人都可以“做”一个网站,但要打造一个真正优秀的网站,就必须坚持不懈地排查所有错误、问题和可优化之处,才能输出尽可能出色的最终产品。我们会从上到下全面检查自己开发的网站,覆盖所有能想到的问题,从网络安全到无障碍可访问性。我们使用的很多工具和检查方法,你也可以用来审查自己的网站和项目,以便复核并确保你的开发人员没有遗漏任何问题。
网络安全(Cybersecurity)
我们的网络安全团队拥有更先进、更专业、更加深入的漏洞评估与管理方法,但团队中的其他成员也会做一些更通用的测试,用来复核并获取简单的整体概览。客户也可以使用这些工具,作为自查参考。
下面这些工具适合做一次“快速检查”,以便及时发现任何明显的问题:
代码层面与主要检查项
Google Lighthouse 工具作为 Google Chrome 浏览器扩展非常有用:https://developers.google.com/web/tools/lighthouse。它覆盖多个关键领域,其中包括我们下面会通过其他工具和方式检查的无障碍可访问性。Lighthouse 已经内置在 Google Chrome 浏览器的开发者工具(DevTools)中,只需在网页上点击右键,选择“检查(Inspect)”,它就是选项栏中的最后一项:

- Google Chrome 检查器中的 Lighthouse 工具,Google
可用性测试
有些问题与残障用户相关,例如色盲、视力减弱、对闪烁光线敏感等。比如,我们使用 WebAIM 来检查网页的色彩对比度问题。在 SEIRIM,我们更倾向于逐页走查网站,确保测试足够全面。

- WebAIM 无障碍检查工具,WebAIM
在进行 QA、检查站点可用性时,为了排查错误、错位字体等问题,检查时可以自问以下问题:
- 终端用户是否知道如何完成网站的关键功能?
- 界面是否干净、结构清晰,最重要的是是否保持一致?
- 重要功能和信息是否可用?
- 导航是否直观且一致?
- 行动号召(CTA)是否清晰?
- 潜在问题和错误是否得到妥善处理?
当你能自信地回答以上问题,并且每 3–5 天检查一次站点进度时,任何错误或问题通常都会在网站上线前很早就被发现。
主流浏览器
在各浏览器上进行 QA 时,需要重点确认以下几方面:
- 确保内容和布局在所有浏览器组合及设备上都能正常工作,如 Firefox、Chrome、Edge 和 Safari,以及不同操作系统如 Windows、macOS、iOS 和 Android。
- 应能在不同设备上正常运行,例如智能手机、平板电脑、台式机和笔记本电脑。
- 网站应与辅助技术兼容,例如屏幕对比度设置,并为不同能力的用户提供支持。
我们测试的主要浏览器包括 Google Chrome、Safari、Microsoft Edge(前身为 Internet Explorer)和 Firefox。当然也有其他浏览器,如 Opera,但它的市场份额仅约为 1.3%。Google Chrome 目前是使用最广泛的浏览器,承载了超过一半的网页流量,其次是份额大约 16.4% 的 Safari,差距较大。
Microsoft Edge(前身更为人熟知的是 Internet Explorer)已经基于 Chromium(即 Google Chrome 浏览器的开源版本)重构了 Edge 浏览器,这让它的速度比以前快了两倍,并且可以使用部分 Chrome 扩展。但这不太可能让 Chrome 用户大规模转向 Edge。至于 Firefox 和 Opera,它们的市场份额分别约为 3.2% 与 1.3%。
市场份额统计如下所示:

- Web 浏览器市场份额
很明显,在浏览器领域 Chrome 处于绝对领先地位,连 Windows 和 Android 上的默认应用都往往选择 Google Chrome 作为首选默认浏览器。通常只有 iOS/Mac 用户才会默认使用 Safari。
在真正为新网站做 QA 时,我们对完美的要求非常严格,因此不仅会针对每种浏览器进行检查,还会借助 跨浏览器测试工具进行交叉验证。我个人非常喜欢这个工具,因为它易于使用,能在多种平台(如台式机、笔记本、各种设备等)上进行测试,而且可以在手动测试和自动化测试之间切换。
移动端性能
如今每个网站都必须在移动端表现良好。现在人们更可能拥有智能手机而不是电脑,智能手机本质上已经是“掌上电脑”。因此,许多组织和企业都会监控客户行为和趋势,这也使得移动性能成为开发网站或 App 时的关键要求。UI 设计和性能会决定你的网站成败,所以我们必须投入时间,确保内容在手机屏幕上的呈现效果良好。
与在不同浏览器间做 QA 类似,我们也会在 iOS 和 Android 设备上手动检查。除了使用一些专业测试工具外,我们非常喜欢用鼠标右键点击调出的“检查元素(Inspect Element)”功能,通过它可以查看网站在当前市面上多种设备上的布局表现。

- 检查移动端视图,Google Chrome
除了我们最喜欢的“检查元素”功能外,我们还使用 TestComplete,这是一款由 SmartBear(与 CrossBrowserTesting 同属一家)推出的产品。TestComplete 可以在真实的 Android 和 iOS 移动设备上自动化测试。有了 TestComplete,你可以将同一套移动测试脚本运行在多台不同屏幕尺寸和分辨率的设备上。

- SmartBear 首页,SmartBear
死链与相关错误
没有什么比点击网站上的一个链接,本应能打开却打不开更糟糕的了。就我自己作为消费者而言,当一个网站把我带到一个打不开的页面,还得重新来过时,我会非常沮丧。这绝对不是一个好的用户体验,必须立刻解决!
除了糟糕的用户体验之外,死链还会影响你的 SEO,降低网站的可信度,并可能影响你所有的转化。因此,务必要修复全部死链,确保它们都指向正确的 URL。
在网站制作完成并进入 QA 最后阶段后,我会使用 Screaming Frog(也适用于 SEO)。Screaming Frog 可以检查或抓取大约 500 个网页,并验证哪些 URL 是死链、重定向等。

- Screaming Frog 网站问题视图,Screaming Frog
如果你不想下载 Screaming Frog(它需要安装在本地),也可以使用 W3C Link Checker。它提供在线工具,可以给出你需要的结果,只不过在结果展示和组织方式上,可能没有 Screaming Frog 那么直观美观。

- W3C Link Checker,W3C
网站性能
我们构建的网站都以加载迅速、性能优秀为目标。为确保这一点并排查相关问题,我们会使用以下工具:
WepPageTest.org 一直是不错的性能检查工具:https://www.webpagetest.org/,用于站点性能检测。
我们也很喜欢 GTMetrix:https://gtmetrix.com/
影响网站速度的首要因素之一,就是网站本身是否在线、是否“可用”。为了监控客户网站并在宕机时收到提醒,我们使用 UptimeRobot:https://uptimerobot.com/。这有助于判断服务器是否是导致网站性能问题的原因。
我们还经常需要检查网站在中国境内是否可访问,为此我们会使用 Experte 提供的这款工具。
客户反馈工具
当我们想了解某位用户使用的浏览器及其版本,以便排查错误原因时,可以访问这个工具快速获取信息:https://toolbox.googleapps.com/apps/browserinfo/
这里还有一个方便易用的屏幕录制工具:https://toolbox.googleapps.com/apps/screen_recorder/
DNS 问题排查工具
有时网站问题会出现在最根本的细节上,比如域名续费、域名服务器(Nameserver)、A 记录、MX 记录等。针对不同场景,我们发现以下工具最为实用:
如需追溯到域名注册及所有权信息,可以使用:https://lookup.icann.org/
如需用最简单的视图检查网站的单一配置(例如 A 记录),可以使用:https://www.whatsmydns.net/
更全面的信息可以通过 Google 的这款工具获取:https://toolbox.googleapps.com/apps/dig/
结语
以上只是质量保证工具的一小部分示例,但已经涵盖了各大主要关注类别的检查。若想了解更多信息,欢迎联系位于上海的 SEIRIM,进一步了解我们如何打造令人印象深刻、安全可靠、并令用户满意的网站与 Web 应用!