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