其他
如何打造安全、快速、无障碍的网站？| Google Web 实践指南
* 图片来自 NASA，取自 Unsplash
疫情期间，如何确保您网站的核心功能始终在线？随时满足无障碍使用需求，且安全、高速、可用、可发现？
针对此次疫情，Google 多个职能团队的短期工作重点相应调整——为那些在疫情期间助力人们健康安全的网站提供支持。在这过程中，团队成员们发现，许多网站的访问量正面临着前所未有的增长，人们蜂拥而至来寻找关键信息，其中许多人很少或从未使用过网络。如何确保网站在这段时间内处于可用状态，并让所有人都能顺利使用？这对很多人来说都会是个挑战。
针对这一问题，Google 团队从以下六个方面为您提供详细指导，帮助您确保网站在线、可无障碍访问、安全，并且让每个人都随时可以使用。随着疫情的发展，我们也会不断更新这些信息供您参考，如果您有任何建议，请向我们提出反馈。
不断更新: 确保您的网站在疫情期间在线并可用 https://pliao.gitbook.io/web-ecosystem-consulting/epidemic-19 提出反馈 https://github.com/GoogleChrome/web.dev/issues/new/choose
可用、可靠、适应力及稳定性
修复过载的服务器，学习如何检测、缓解和预防流量激增问题； 删除不必要的图片、视频、脚本和字体。确保每个页面只专注于提供用户真正需要的功能； 优化图片可能会大大减少服务器带宽使用量，因为图片是网络上的第一大流量来源； 请尽量将静态内容转移到 CDN。细节请参阅常见供应商的说明如 AWS、Azure、Cloudflare、Google Cloud、Firebase； 请检查您的 CDN 是否提供可轻易开启的优化选项，如动态图像压缩、文本压缩、针对 JS 和 CSS 资源的自动优化等； 优化 HTTP 缓存可以用最小的代码变动大幅降低服务器压力。请阅读 "HTTP 缓存" 和 "缓存实践指南" 的具体建议。Lighthouse 中的 "以高效的缓存策略提供静态资源" 检测项目可以帮助您快速找出未被缓存的资源。请记住，不同类型的资源会有不同的刷新需求，因此需要不同的缓存策略； Service workers 是另一种可以显著降低服务器压力的方式，但可能需要不小的技术投入。它们还可以让您的网站离线运作，使您可以在没有网络连接的情况下，向再次访问的用户展示营业时间、电话号码和其他信息。我们建议使用 Workbox 为网站添加 Service worker，因为它可以自动处理大量的模板代码，使其更容易遵循实践指南，并避免了直接使用低级 Service Worker API 时常见但不易察觉的 bug； 如果您的网站使用量大增，请检查您是否有足够的保护措施来抵御 DDoS 攻击，因为您的网站现在可能是个更具吸引力的目标。这方面的细节请参阅常见供应商的说明如 AWS、Azure、Cloudflare、Google Cloud。
HTTP 缓存 https://developers.google.cn/web/fundamentals/performance/optimizing-content-efficiency/http-caching 缓存实践指南 https://jakearchibald.com/2016/caching-best-practices/
无障碍访问
无障碍体验需要整个团队的努力，每个人都要发挥作用。首先，请阅读 Google 的 "无障碍体验团队指南"，指南解释了每个团队成员 (包括产品经理、工程师、设计师、QA 等) 需要做的工作； 请进行无障碍功能审查，确定哪些地方做得好，哪些地方需要改进。在您手动对网站进行无障碍检查时，WAVE 浏览器扩展程序可以提供帮助； 请阅读 "无障碍指南"，以更深入地理解特定的辅助功能，如键盘导航和屏幕阅读器支持； 运行 Lighthouse 核查，以发现常见的无障碍问题。该核查报告还提供了一份手动检查清单，您可以通过手动检查来提高网站的可操作性。请注意，在无障碍体验中得 100 分并不能保证您的网站是绝对可访问的。有许多重要的问题 Lighthouse 无法通过自动化的方式进行测试，因此手动检查依然很重要。请配合使用其他自动检查工具，包括 WAVE API 和 AXE 扩展等； 完成 egghead.io 上的 "即刻开始构建无障碍 Web 应用" 课程，或 Udacity 上的 "网络无障碍" 课程。
无障碍体验团队指南 https://developers.google.cn/web/fundamentals/accessibility/a11y-for-teams 无障碍指南 https://web.dev/accessible 即刻开始构建无障碍 Web 应用 https://egghead.io/courses/start-building-accessible-web-applications-today 网络无障碍 https://www.udacity.com/course/web-accessibility--ud891
身份识别、安全，以及隐私
所有的网站都应该使用 HTTPS 进行保护，而不仅仅是那些处理敏感 PII 数据的网站； 转为使用默认提供 HTTPS 的存储供应商，或使用 Let's Encrypt 或类似的服务在您的服务器上启用 HTTPS； 使用 SameSite cookie，了解如何更安全地使用 cookie。请注意，对 SameSite cookie 强制进行标签操作的要求已临时撤销。
可用性、用户界面与体验
您可以考虑在网站顶部添加一个醒目的横幅 (可以用 X 按钮关闭)，清晰地传达服务更新信息。在横幅中加入引导点击按钮，将人们带到相应的资源页面。请使用醒目的颜色和字体，让横幅在页面内容中凸显出来。请使用具有同理心的文案，聚焦人们的需求，并清晰阐述他们即将获得的服务； 请在您的关键用户流程 (Critical User Journey, CUJ) 中设法尽量减少物理接触，并向您的产品团队提供更改建议。例如，如果您的交付服务通常需要收件方签名，请看看有没有什么方法可以绕过这个步骤； 请仔细检查您的 CUJ 是否尽可能简单、直观，如果发现有任何需要改进的地方，请向产品团队提出建议； 回顾移动设计原则，在各种移动设备上尝试一下您的 CUJ，确保没有任何明显的问题。那些不经常使用网络的人，当他们突然发现自己需要更多地依赖网络的时候，很可能会通过移动设备访问您的网站； 尽量使用响应式设计模式重构您的网站； 请确保您网站里的表单使用起来高效，且拥有良好的设计。
性能
图片是造成网站臃肿的首要原因。您也许可以通过优化图片来显著降低网站的带宽使用量。Squoosh 是一个简单的开源图片压缩工具，可以帮助您快速压缩图片。 运行 WebPageTest 或 Lighthouse 来发现提升性能的切入点； 启用文本压缩，减少文本资源带来的网络需求。只需要极小的技术投入，往往就能实现很大的性能提升； 了解 "跨职能提升网站速度"，学习如何与其他部门合作并获得他们的支持； 对图片使用原生懒加载，以减少对那些人们可能永远不会看到的图片的请求。浏览器的兼容性并非 100%，该功能可能不一定会带来改观。换句话说，如果某个浏览器不支持原生懒加载，那么所有图片会像正常情况下一样加载； 检查您的网站是否存在可进一步异步加载的 A/B 测试或个性化脚本，或者脚本中是否存在可关闭的非必需功能。A/B 测试和个性化脚本通常不能完全异步加载，因为它们需要在页面内容加载前运行，但您也许可以更加异步地加载部分脚本。请参考关键渲染路径，了解如何权衡同步脚本 (也称为渲染阻塞脚本) 和页面加载时间，然后决定是否需要优先考虑渲染阻塞脚本，再考虑页面加载速度，或者反之； 在大多数网站的所有网络请求中，第三方代码占到大约一半。请考虑优化、暂时删除或禁用那些不影响网站运行的第三方代码； 如果新功能发布的优先级被取消，那最好趁此机会清理您的网站。您可以从标签管理器中删除标签，清理臃肿的 CSS 和 JS，并删除被弃用的功能或代码。Chrome DevTools 中的 Coverage 选项卡和 Puppeteer 中的 Coverage 类都可以帮助您检测出未使用的代码。
SEO
人们正在寻找与健康和工作相关的重要信息。请确保您的网站能够被所有的搜索引擎发现，这一点非常重要。Lighthouse SEO 核查可以帮助您发现基本问题。您还可以关注这些搜索引擎的官方博客，了解最新的指导和更新: Google、Bing、百度、DuckDuckGo、Yandex。目前最新的一些和疫情相关的博文 (点击阅读原文获取详细内容) ，包括:
如何改变您的在线活动，同时尽量减少对 Google 搜索的影响；
反映虚拟、延期和取消活动的新属性；
Bing 采用 schemma.org 标记，用于 COVID-19 的特别公告；
帮助卫生机构让 COVID-19 信息更容易获取；
搜索卫生和政府网站的通用推荐做法。