如何确保网站的核心功能始终可用、可访问、安全、可用、可检测且快速。
本页面提供了相关指南,可帮助您确保网站随时可供人人皆宜访问、安全且易用。
本页中的指南由 Google 内部的多个跨职能团队共同提供,这些团队正在将短期工作重心转移到支持那些在新冠疫情期间帮助人们保持安全的网站。这些 Google 员工发现,由于人们对关键信息的需求前所未有地增加,网站面临着巨大的压力,其中许多人很少或从未用过网络。在此期间,确保网站可用且可供所有人访问可能是一项挑战。
指南
可用性、可靠性、弹性和稳定性
如果您的网站流量激增且出现故障,或者您想防止其出现故障,以下指南可以帮助您快速解决问题或在问题变得严重之前检测到问题。
- 请参阅修复过载的服务器,了解如何检测、缓解和预防流量高峰问题。
- 移除不必要的图片、视频、脚本和字体。确保每个页面都专注于提供网站用户真正需要的功能。
- 优化图片可能会显著减少服务器带宽用量,因为图片是导致网页臃肿的首要原因。
- 尽可能将静态内容分流到 CDN。 如需了解详情,请参阅常见提供商的相关文档: AWS、 Azure、 Cloudflare、 Google Cloud、 Firebase。
- 检查您的 CDN 是否有任何易于开启的优化功能,例如动态图片压缩、文本压缩或 JS 和 CSS 资源的自动缩减。
- 优化 HTTP 缓存可以显著减少对服务器的需求,同时只需极少的代码更改。如需简要了解 HTTP 缓存,请参阅 HTTP 缓存:您的第一道防线;如需了解具体建议,请参阅 HTTP 缓存和缓存最佳实践。Lighthouse 中的采用高效的缓存策略提供静态资源审核可帮助您快速检测未缓存的资源。请注意,不同类型的资源会有不同的新鲜度要求,因此需要不同的缓存策略。
- Service Worker 是另一种可显著降低服务器需求的方法,但可能需要大量技术投入。它们还使您的网站能够离线运行,从而使您能够在没有连接的情况下向回访用户显示营业时间、电话号码和其他信息。Workbox 是向网站添加 Service Worker 的推荐方法,因为它会自动执行大量样板代码,更易于遵循最佳实践,并可防止直接使用低级
ServiceWorkerAPI 时常见的细微 bug。 - 如果您的网站使用量大幅增加,请检查您是否针对 DDoS 攻击采取了充分的防护措施,因为您的网站现在可能是一个更具吸引力的目标。如需了解详情,请参阅常见提供商的相关文档: AWS、 Azure、 Cloudflare、 Google Cloud。
如需更多指导,请参阅网络可靠性。
无障碍
关注无障碍功能比以往任何时候都更加重要,因为可能有更多具有各种需求的用户访问您的网站。请遵循以下准则,确保所有人都能使用您网站的核心功能。
- 无障碍要靠团队一起努力才能实现,每个人都扮演着重要角色。首先,请查看 Google 的团队无障碍指南以及美国数字服务团队指南。这些指南介绍了每位团队成员(产品经理、工程师、设计师、QA 等)可以做出的贡献。
- 进行无障碍功能审核,确定哪些方面做得好,哪些方面需要改进。WAVE 浏览器扩展程序可帮助您完成网站的手动无障碍功能审核。
- 通读无障碍指南,更好地了解键盘导航和屏幕阅读器支持等特定主题。
- 运行 Lighthouse 审核,找出常见的无障碍功能问题。该报告还提供了一份手动检查清单,您可以执行这些检查来提高网站的可操作性。请注意,无障碍功能得分为 100 分并不能保证您的网站可供访问。Lighthouse 无法以自动化方式测试许多重要问题,因此手动审核仍然很重要。其他自动化审核工具包括 WAVE API 和 AXE 扩展程序。
- 完成 egghead.io 上的“Start Building Accessible Web 应用 Today”课程,或查看 Udacity 上的“Web Accessibility”课程。
- 观看 A11ycast 播放列表,了解有关特定无障碍主题的更多快速提示。
身份、安全和隐私
您可能会想走捷径来快速发布关键修复,但请务必小心,不要因此造成安全漏洞。用户需要访问极其私密的主题内容。网站需要不惜一切代价保护这些敏感的用户数据,并让用户相信其个人身份信息 (PII) 是安全的。
- 了解为什么所有网站都应该通过 HTTPS 来保护,而不仅仅是那些处理敏感 PII 数据的网站。
- 改用默认使用 HTTPS 的托管服务提供商,或使用 Let's Encrypt 或类似服务在您的服务器上启用 HTTPS。
- 请参阅 SameSite Cookie 说明,了解如何更安全地使用 Cookie。请注意,SameSite Cookie 标签强制执行已暂时回滚。
如需更多指导,请参阅安全可靠。
易用性、界面和用户体验
人们越来越依赖网络来满足基本需求。其中许多人并不经常使用网络。审核网站核心功能的易用性,并确保其尽可能简单易用,是非常值得的。
- 考虑在网站顶部添加一个醒目的横幅(可通过 X 按钮移除),以便清楚地传达服务更新。在横幅中使用号召性用语,将用户引导至更具体的资源。考虑使用与页面其他内容不同的颜色和字体。撰写文案时,请保持同理心,专注于用户需求,并清楚说明用户可以期待什么样的服务。
- 寻找机会,尽量减少关键用户历程 (CUJ) 中的物理互动,并向产品团队建议这些更改。例如,如果您的送货服务通常需要签收,请看看是否有办法解决这个问题。
- 仔细检查您的 CUJ 是否尽可能简单直观,如果您发现任何改进机会,请向产品团队提出更改建议。
- 查看良好的移动设计原则,并在各种移动设备上试用 CUJ,确保没有任何明显的问题。不经常使用网络、突然发现自己不得不更多地依赖网络的用户,可能会通过移动设备访问您的网站。
- 重构您的网站,尽可能使用自适应设计模式。
- 确保您的表单高效且设计良好。
SEO
人们正在寻找与健康和工作相关的重要信息。务必确保您的网站可被所有搜索引擎发现。 Lighthouse SEO 审核可帮助您检测基本问题。 关注搜索引擎的官方博客,获取最新指南和更新: Google、 Bing、 Baidu、 DuckDuckGo、 Yandex。 近期与新冠相关的帖子:
- 如何在更改在线活动的同时,最大限度地减少对 Google 搜索结果的影响
- 用于推迟、取消活动或将活动改为在线举行的新增属性
- Bing 采用 schema.org 标记来发布新冠特别通知
- 为 COVID-19 通知添加结构化数据
- 帮助卫生健康组织,使 COVID-19 信息更易获取
- 适用于健康和政府网站的 Google 搜索常规最佳实践
如需更多指导,请参阅可检测到。
性能
一些 ISP(例如印度)发现家庭互联网使用量急剧增加,但其基础设施无法满足不断增长的需求。在这种情况下,您的网站速度可能会变慢,但这并非您的过错。 优化加载性能可能是抵消带宽减少带来的不利影响的一种方法。换句话说,通过减少加载网页时需要通过网络发送的字节数,您可以抵消带宽减少对性能的影响。
- 图片是导致网页臃肿的首要原因。通过优化图片,您可以显著减少网站的带宽用量。Squoosh 是一款简单的开源图片压缩工具,可帮助您快速压缩图片。
- 运行 WebPageTest 或 Lighthouse,发现最重要的性能提升机会。
- 启用文本压缩,以缩减文本资源的网络大小。这通常是一种只需极少技术投入即可轻松提升性能的方法。
- 阅读跨职能部门提升网站速度,了解如何与其他部门协作并获得他们的支持。
- 对图片使用标准化的延迟加载,以最大限度地减少对用户可能永远不会看到的图片的请求。浏览器兼容性并非 100%,但该功能可视为渐进增强。换句话说,如果某个浏览器不支持标准化的延迟加载,则图片应正常加载。
- 检查您的网站是否有任何 A/B 测试或个性化脚本可以更异步地加载,或者脚本中是否有任何可以停用的非关键功能。A/B 测试和个性化脚本通常无法完全异步加载,因为它们需要在页面内容加载之前运行,但可能有机会以更异步的方式加载部分脚本。请参阅关键渲染路径,了解同步脚本(也称为渲染阻塞脚本)与网页加载时间之间的基本权衡,然后决定是需要优先考虑渲染阻塞脚本,还是优先考虑网页加载时间。
- 对于大多数网站,第三方代码约占所有请求的一半。考虑优化或暂时移除或停用对网站运行不重要的第三方代码。
- 如果功能发布优先级降低,这可能是清理代码的绝佳时机。从跟踪代码管理器中移除代码,清理臃肿的 CSS 和 JS,并移除已弃用的功能或代码。Chrome 开发者工具中的“Coverage”标签页和 Puppeteer 中的
Coverage类可帮助您检测未使用的代码。
如需更多指导,请参阅快速加载。