准备工作

在收集效果指标以进行网站审核之前,您可以执行多项检查,以找出简单的修复方法和重点关注的领域。

有效性检查:架构和代码

偿还技术债!

尽可能在衡量性能之前修复简单的 bug 并移除不需要的资源和代码,但请务必记录问题和修复前后的情况。这些改进仍可作为审核工作的一部分。

网站架构和素材资源
是否有任何内容可以轻松地从代码库和网站中移除,例如未使用的旧版网页、内容或其他素材资源?检查孤立页面、冗余模板、未使用的图片以及未使用的代码和库。

运行时错误
检查浏览器控制台中报告的错误。应该没有任何错误 :)。

Linting
您的 HTML、CSS 或 JavaScript 代码中是否存在错误?将 lint 检查纳入工作流有助于维护代码质量并避免回归。我们推荐使用 HTMLHint、StyleLint 和 ESLint,它们可用作代码编辑器插件,也可在工作流流程和持续集成工具(如 Travis)中通过命令行运行。

损坏的链接和图片
有许多工具可在构建时和运行时测试损坏的链接,包括 Chrome 扩展程序(这个就不错)和 Node 工具(例如损坏的链接检查器)。

插件
Flash 和 Silverlight 等插件可能会带来安全风险,因此已弃用对这些插件的支持,并且它们无法在移动设备上运行。使用 Lighthouse 检查插件。

在各种设备和情境下进行测试

没有什么比让真实用户在真实设备、多种浏览器和不同连接环境中使用您的网站更好的测试方法了。

其中一些检查相对主观,但可以识别影响感知性能的问题。例如,损坏的链接会浪费时间,让人感觉“无响应”。难以辨认的文字 阅读起来很慢。

跨设备测试
尝试不同的视口和窗口大小。至少使用一部移动设备和一台桌面设备。如果可能,请在屏幕较小的低配移动设备上试用您的网站。文字是否清晰可辨?是否有任何图片损坏?可以缩放吗?触摸目标是否足够大?速度慢? 是否有任何功能无响应?对结果进行屏幕截图或录制视频。

跨平台测试
您的目标平台有哪些?您需要在用户现在和将来使用的浏览器和操作系统上进行测试。

连接性
在多种目标网络类型上进行测试:已连接、Wi-Fi 和移动网络。您可以使用浏览器工具模拟各种网络条件。

设备
请务必在用户使用的设备上试用您的网站。以下照片显示了同一页面在两部不同手机上的显示效果。

在高端手机和低端手机上运行的博文页面

在大屏幕上,文字较小但可读。在较小的屏幕上,浏览器会正确呈现布局,但文字难以辨认,即使放大也无济于事。显示屏模糊不清,并且存在“色偏”(白色看起来不像白色),导致内容不易辨认。

像这样简单的发现可能比晦涩难懂的性能数据重要得多!

试用界面和用户体验

无障碍性、易用性和可读性
为了确保所有人都能访问您网站的内容和功能,您需要了解用户的多样性。 Lighthouse 和其他工具可测试特定的无障碍问题,但没有什么比真实测试更有效。尝试在各种场景下阅读、浏览和输入数据,例如在阳光下的户外或在火车上。邀请亲朋好友和同事试用您的网站。尝试通过屏幕阅读器(例如 Mac 上的 VoiceOver 或 Windows 上的 NVDA)使用内容。

如需详细了解如何实现和检查无障碍功能,请参阅 Udacity 无障碍功能课程和网站开发基础文章如何进行无障碍功能检查。

保留无障碍功能审核记录。您很可能只需进行简单的改进,就能让所有用户受益。

基本的界面和用户体验问题
互动未按预期方式运行、较小的窗口和视口中元素溢出、点按目标过小、内容无法阅读、滚动不顺畅…打开网站上的多个页面,试用导航和所有核心功能。保留记录。

图片、音频和视频
:测试是否存在内容溢出、宽高比不正确、剪裁不当和质量问题。

主观界面测试
这些测试可能并非都相关,但简单的更改可以使重构更容易:

  • 打开网站后,用户是否能立即清楚地知道“我可以在这里做什么?”
  • 您是否被吸引去消费内容和点击链接?
  • 是否存在视觉层级或路径,还是所有内容的视重都相同?
  • 布局是否杂乱?
  • 字体是否过多?
  • 是否有可以移除的图片或其他内容?
  • 内容设计与界面设计同样重要。您网站上的文字和图片内容是否适合移动设备和桌面设备?Can anything be eliminated? 针对移动设备撰写文案。