准备工作

在收集性能指标以进行网站审核之前,您可以执行几项检查,以确定简单的修复方法和需要重点关注的方面。

有效性检查:架构和代码

偿还技术债务!

在衡量性能之前,尽可能修复简单的 bug 并移除不需要的资源和代码,但务必记录问题和修复前后的对照记录。这些改进仍然可以在您的审核工作中。

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

运行时错误
检查浏览器控制台中报告的错误。不应包含任何 :)。

内容插入
您的 HTML、CSS 或 JavaScript 代码中是否存在错误?在工作流中内置 lint 功能有助于保持代码质量并避免回归。建议使用 HTMLHintStyleLintESLint,它们可用作代码编辑器插件,也可在工作流流程和持续集成工具(如 Travis)中从命令行运行。

损坏的链接和图片
有许多工具可用于在构建时和运行时测试损坏的链接,包括 Chrome 扩展程序(这个很好)和损坏的链接检查器等节点工具。

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

使用各种设备和情境进行测试

没有什么比真实的用户通过真实设备、多种浏览器和不同的连接环境测试您的网站了。

其中一些检查相对主观,但可以找出影响感知性能的问题。例如,损坏的链接会浪费时间并让人感觉“没有响应”。难以辨认的文字会导致阅读速度缓慢。

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

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

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

设备
请务必在用户所用的设备上测试您的网站。下图显示了两部不同手机上的同一页面。

博文页面在高规格和低规格手机上运行

在较大的屏幕上,文字较小但可以阅读。在较小的屏幕上,浏览器可以正确呈现布局,但文本无法阅读,即使放大后也是如此。显示屏模糊且存在“色偏”(白色不是白),使内容难以辨认。

如此简单的发现可能远比模糊的效果数据重要得多!

试用界面和用户体验

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

如需详细了解如何实现和查看无障碍功能,请参阅 Udacity 无障碍功能课程和 Web 基础知识一文如何进行无障碍功能审核

记录您的无障碍审核。您也许能够做出有利于所有用户的简单改进。

界面和用户体验方面的基本问题
互动无法正常运行、在较小的窗口和视口中溢出元素、点按目标过小、无法读取的内容、滚动卡顿...打开网站上的多个网页,试用导航和所有核心功能。记录。

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

主观的界面测试
这些测试可能并不相关,但简单的更改可让您更轻松地进行重构:

  • 您打开网站时是否会立即看到“我能在此处执行什么操作?”
  • 您是否愿意浏览内容和访问链接?
  • 是否存在视觉层次结构或路径?或者所有元素是否具有相同的视觉权重?
  • 布局是否杂乱?
  • 字体过多?
  • 是否有可以移除的图片或其他内容?
  • 内容设计与界面设计一样重要。您网站上的文字和图片内容是否适合在移动设备和桌面设备上浏览?能否消除某些元素? 为移动设备撰写内容