如何打造安全、快速、无障碍的网站？ | Google Web 最佳实践

疫情期间，如何确保您网站的核心功能始终在线？随时满足无障碍使用需求，且安全、高速、可用、可发现。

针对此次疫情，Google 多个职能团队的短期工作重点相应调整——为那些在疫情期间助力人们健康安全的网站提供支持。在这过程中，团队成员们发现，许多网站的访问量正面临着前所未有的增长，人们蜂拥而至来寻找关键信息，其中许多人很少或从未使用过网络。如何确保网站在这段时间内处于可用状态，并让所有人都能顺利使用？这对很多人来说都会是个挑战。

针对这一问题，Google 团队从六个方面为您提供详细指导，帮助您确保网站在线、可无障碍访问、安全，并且让每个人都随时可以使用。随着疫情的发展，我们也会不断更新这些信息供您参考，如果您有任何建议，请向我们提出反馈。

可用、可靠、适应力及稳定性

如果您的网站出现了流量激增，并出现了故障，或者您想防止网站出现故障，下面的指导可以帮助您快速修复问题，或者在问题恶化之前提早发现问题。

• 阅读“如何修复过载的服务器”，学习如何检测、缓解和预防流量激增问题。

• 删除不必要的图片、视频、脚本和字体。确保每个页面只专注于提供用户真正需要的功能。

• 优化图片可能会大大减少服务器带宽使用量，因为图片是网络上的第一大流量来源。

• 请尽量将静态内容转移到 CDN。这方面的细节请参阅常见供应商的说明：AWS、Azure、Cloudflare、Google Cloud、Firebase。

• 请检查您的 CDN 是否提供可轻易开启的优化选项，如动态图像压缩、文本压缩、针对 JS 和 CSS 资源的自动优化等。

• 优化 HTTP 缓存可以用最小的代码变动大幅降低服务器压力。请查看“HTTP 缓存：您的第一道防线”获取概览知识，以及阅读“HTTP 缓存”和“缓存最佳实践”以获得进一步的具体建议。Lighthouse 中的“以高效的缓存策略提供静态资源”检测项目可以帮助您快速找出未被缓存的资源。请记住，不同类型的资源会有不同的刷新需求，因此需要不同的缓存策略。

• Service workers 是另一种可以显著降低服务器压力的方式，但可能需要不小的技术投入。它们还可以让您的网站离线运作，使您可以在没有网络连接的情况下，向再次访问的用户展示营业时间、电话号码和其他信息。我们建议使用 Workbox 为网站添加 Service worker，因为它可以自动处理大量的模板代码，使其更容易遵循最佳实践，并避免了直接使用低级 ServiceWorker API 时常见但不易察觉的 bug。

• 如果您的网站使用量大增，请检查您是否有足够的保护措施来抵御 DDoS 攻击，因为您的网站现在可能是个更具吸引力的目标。这方面的细节请参阅常见供应商的说明：AWS、Azure、Cloudflare、Google Cloud。

请参阅“网络可靠性”获取更多指导内容。

无障碍访问

关注无障碍体验比以往任何时候都更重要，因为现在可能会有更多有不同需求的人访问您的网站。请您遵循以下指南，确保您的网站核心功能对每个人都是无障碍的。

• 无障碍体验需要整个团队的努力，每个人都要发挥作用。首先，请阅读 Google 的“无障碍体验团队指南”，指南内解释了每个团队成员 (包括产品经理、工程师、设计师、QA 等) 需要做的工作。

  请关注 A11ycast 的播放列表，了解更多关于无障碍主题的小技巧。

• 请进行无障碍功能审查，确定哪些地方做得好，哪些地方需要改进。在您手动对网站进行无障碍检查时，WAVE 浏览器扩展程序可以提供帮助。

• 请阅读“无障碍指南”，以更深入地理解特定的辅助功能，如键盘导航和屏幕阅读器支持。

• 运行 Lighthouse 核查，以发现常见的无障碍问题。该核查报告还提供了一份手动检查清单，您可以通过手动检查来提高网站的可操作性。请注意，在无障碍体验中得 100 分并不能保证您的网站是绝对可访问的。有许多重要的问题 Lighthouse 无法通过自动化的方式进行测试，因此手动检查依然很重要。请配合使用其他自动检查工具，包括 WAVE API 和 AXE 扩展等。

• 完成 egghead.io 上的“即刻开始构建无障碍 Web 应用”课程，或 Udacity 上的“网络无障碍”课程。

身份识别、安全，以及隐私

通过捷径来快速修复重要功能是很有诱惑力的，但一定要注意，不要在这样做的过程中留下安全漏洞。人们访问的一些内容会极其涉及隐私。网站需要不惜一切代价保护好这些敏感的用户数据，让人们相信他们的个人可识别信息 (PII) 是安全的。

• 了解为什么所有的网站都应该使用 HTTPS 进行保护，而不仅仅是那些处理敏感 PII 数据的网站。

• 转为使用默认提供 HTTPS 的存储供应商，或使用 Let's Encrypt 或类似的服务在您的服务器上启用 HTTPS。

• 请查看对 SameSite cookie 的解释，了解如何更安全地使用 cookie。请注意，对 SameSite cookie 强制进行标签操作的要求已临时撤销。

可用性、用户界面及用户体验

人们越来越依赖网络来满足基本需求。但很多用户并不经常使用网络。因此您有必要检查网站核心功能的可用性，确保它们尽可能的简单易用。

• 您可以考虑在网站顶部添加一个醒目的横幅 (可以用 X 按钮关闭)，清晰地传达服务更新信息。在横幅中加入引导点击按钮，将人们带到相应的资源页面。请使用醒目的颜色和字体，让横幅在页面内容中凸显出来。请使用具有同理心的文案，聚焦人们的需求，并清晰阐述他们即将获得的服务。

• 请在您的关键用户流程 (Critical User Journey, CUJ) 中设法尽量减少物理接触，并向您的产品团队提供更改建议。例如，如果您的交付服务通常需要收件方签名，请看看有没有什么方法可以绕过这个步骤。

• 请仔细检查您的 CUJ 是否尽可能简单、直观，如果发现有任何需要改进的地方，请向产品团队提出建议。

• 回顾一下良好的移动设计原则，在各种移动设备上尝试一下您的 CUJ，确保没有任何明显的问题。那些不经常使用网络的人，当他们突然发现自己需要更多地依赖网络的时候，很可能会通过移动设备访问您的网站。

• 尽量使用响应式设计模式重构您的网站。

• 请确保您网站里的表单使用起来高效，且拥有良好的设计。

SEO

人们正在寻找与健康和工作相关的重要信息。请确保您的网站能够被所有的搜索引擎发现，这一点非常重要。Lighthouse SEO 核查可以帮助您发现基本问题。您还可以关注这些搜索引擎的官方博客，了解最新的指导和更新：Google、Bing、百度、DuckDuckGo、Yandex。目前最新的一些和疫情相关的博文包括：

• 如何改变您的在线活动，同时尽量减少对 Google 搜索的影响

• 反映虚拟、延期和取消活动的新属性

• Bing 采用 schemma.org 标记，用于疫情的特别公告

• 帮助卫生机构让疫情信息更容易获取

• 搜索卫生和政府网站的通用最佳做法

请参阅“可发现性”获取更多指导内容。

性能

一些互联网服务提供商 (例如印度的一些提供商) 发现家庭互联网使用量急剧增加，而自身却没有足够的基础设施来满足突然增长的需求。在这种情况下，即使您的做法完美无缺，您的网站速度也仍然可能变慢。优化加载性能也许可以抵消带宽减少带来的负面影响。换句话说，如果您可以在加载页面时减少需要通过网络发送的字节数，就可以抵消带宽减少对性能带来的影响

• 图片是造成网站臃肿的首要原因。您也许可以通过优化图片来显著降低网站的带宽使用量。Squoosh 是一个简单的开源图片压缩工具，可以帮助您快速压缩图片。

• 运行 WebPageTest 或 Lighthouse 来发现提升性能的最佳切入点。

• 启用文本压缩，减少文本资源带来的网络需求。只需要极小的技术投入，往往就能实现很大的性能提升。

• 阅读“跨职能提升网站速度”，学习如何与其他部门合作并获得他们的支持。

• 对图片使用原生懒加载，以减少对那些人们可能永远不会看到的图片的请求。浏览器的兼容性并非 100%，该功能可能不一定会带来改观。换句话说，如果某个浏览器不支持原生懒加载，那么所有图片会像正常情况下一样加载。

• 检查您的网站是否存在可进一步异步加载的 A/B 测试或个性化脚本，或者脚本中是否存在可关闭的非必需功能。A/B 测试和个性化脚本通常不能完全异步加载，因为它们需要在页面内容加载前运行，但您也许可以更加异步地加载部分脚本。请参阅“关键渲染路径”，了解如何权衡同步脚本 (也称为渲染阻塞脚本) 和页面加载时间，然后决定是否需要优先考虑渲染阻塞脚本，再考虑页面加载速度，或者反之。

• 在大多数网站的所有网络请求中，第三方代码占到大约一半。请考虑优化、暂时删除或禁用那些不影响网站运行的第三方代码。

• 如果新功能发布的优先级被取消，那最好趁此机会清理您的网站。您可以从标签管理器中删除标签，清理臃肿的 CSS 和 JS，并删除被弃用的功能或代码。Chrome DevTools 中的 Coverage 选项卡和 Puppeteer 中的 Coverage 类都可以帮助您检测出未使用的代码。

请参阅“快速加载”获取更多指导内容。

更多详情请英文原文