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