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

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

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

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

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

* 阅读“[如何修复过载的服务器](https://web.dev/overloaded-server)”，学习如何检测、缓解和预防流量激增问题。
* 删除不必要的图片、视频、脚本和字体。确保每个页面只专注于提供用户真正需要的功能。
* [优化图片](https://web.dev/fast/#optimize-your-images)可能会大大减少服务器带宽使用量，因为[图片是网络上的第一大流量来源](https://images.guide/#introduction)。
* 请尽量将静态内容转移到 CDN。这方面的细节请参阅常见供应商的说明：[AWS](https://aws.amazon.com/cloudfront/)、[Azure](https://azure.microsoft.com/en-us/services/cdn/)、[Cloudflare](https://www.cloudflare.com/cdn/)、[Google Cloud](https://cloud.google.com/cdn)、[Firebase](https://firebase.google.com/docs/hosting)。
* 请检查您的 CDN 是否提供可轻易开启的优化选项，如动态图像压缩、文本压缩、针对 JS 和 CSS 资源的自动优化等。
* 优化 HTTP 缓存可以用最小的代码变动大幅降低服务器压力。请查看“[HTTP 缓存：您的第一道防线](https://web.dev/http-cache/)”获取概览知识，以及阅读“[HTTP 缓存](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/http-caching)”和“[缓存最佳实践](https://jakearchibald.com/2016/caching-best-practices/)”以获得进一步的具体建议。Lighthouse 中的“[以高效的缓存策略提供静态资源](https://web.dev/uses-long-cache-ttl/)”检测项目可以帮助您快速找出未被缓存的资源。请记住，不同类型的资源会有不同的刷新需求，因此需要不同的缓存策略。
* [Service workers](https://web.dev/service-workers-cache-storage/) 是另一种可以显著降低服务器压力的方式，但可能需要不小的技术投入。它们还可以让您的网站[离线运作](https://developers.google.com/web/fundamentals/codelabs/offline)，使您可以在没有网络连接的情况下，向再次访问的用户展示营业时间、电话号码和其他信息。我们建议使用 [Workbox](https://web.dev/workbox/) 为网站添加 Service worker，因为它可以自动处理大量的模板代码，使其更容易遵循最佳实践，并避免了直接使用低级 ServiceWorker API 时常见但不易察觉的 bug。
* 如果您的网站使用量大增，请检查您是否有足够的保护措施来抵御 [DDoS 攻击](https://en.wikipedia.org/wiki/Denial-of-service_attack)，因为您的网站现在可能是个更具吸引力的目标。这方面的细节请参阅常见供应商的说明：[AWS](https://aws.amazon.com/answers/networking/aws-ddos-attack-mitigation/)、[Azure](https://azure.microsoft.com/en-us/services/ddos-protection/)、[Cloudflare](https://www.cloudflare.com/learning/ddos/ddos-mitigation/)、[Google Cloud](https://cloud.google.com/files/GCPDDoSprotection-04122016.pdf)。

**请参阅“**[**网络可靠性**](https://web.dev/reliable/)**”获取更多指导内容。**

### **无障碍访问**

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

* 无障碍体验需要整个团队的努力，每个人都要发挥作用。首先，请阅读 Google 的“[无障碍体验团队指南](https://developers.google.com/web/fundamentals/accessibility/a11y-for-teams)”，指南内解释了每个团队成员 (包括产品经理、工程师、设计师、QA 等) 需要做的工作。

  请关注 [A11ycast 的播放列表](https://www.youtube.com/playlist?list=PLNYkxOF6rcICWx0C9LVWWVqvHlYJyqw7g)，了解更多关于无障碍主题的小技巧。
* 请进行[无障碍功能审查](https://developers.google.com/web/fundamentals/accessibility/how-to-review)，确定哪些地方做得好，哪些地方需要改进。在您手动对网站进行无障碍检查时，[WAVE 浏览器扩展程序](https://wave.webaim.org/extension/)可以提供帮助。
* 请阅读“[无障碍指南](https://web.dev/accessible)”，以更深入地理解特定的辅助功能，如键盘导航和屏幕阅读器支持。
* [运行 Lighthouse 核查](https://developers.google.com/web/tools/lighthouse#devtools)，以发现常见的无障碍问题。该核查报告还提供了一份手动检查清单，您可以通过手动检查来提高网站的可操作性。请注意，在无障碍体验中得 100 分并不能保证您的网站是绝对可访问的。有许多重要的问题 Lighthouse 无法通过自动化的方式进行测试，因此手动检查依然很重要。请配合使用其他自动检查工具，包括 [WAVE API](https://wave.webaim.org/api/) 和 [AXE 扩展](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd)等。
* 完成 egghead.io 上的“[即刻开始构建无障碍 Web 应用](https://egghead.io/courses/start-building-accessible-web-applications-today)”课程，或 Udacity 上的“[网络无障碍](https://www.udacity.com/course/web-accessibility--ud891)”课程。

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

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

* 了解[为什么所有的网站都应该使用 HTTPS 进行保护](https://developers.google.com/web/fundamentals/security/encrypt-in-transit/why-https)，而不仅仅是那些处理敏感 PII 数据的网站。
* 转为使用默认提供 HTTPS 的存储供应商，或使用 [Let's Encrypt](https://letsencrypt.org/getting-started/) 或类似的服务在您的服务器上启用 HTTPS。
* 请查看[对 SameSite cookie 的解释](https://web.dev/samesite-cookies-explained/)，了解如何更安全地使用 cookie。请注意，[对 SameSite cookie 强制进行标签操作的要求已临时撤销](https://blog.chromium.org/2020/04/temporarily-rolling-back-samesite.html)。

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

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

* 您可以考虑在网站顶部添加一个醒目的横幅 (可以用 X 按钮关闭)，清晰地传达服务更新信息。在横幅中加入引导点击按钮，将人们带到相应的资源页面。请使用醒目的颜色和字体，让横幅在页面内容中凸显出来。请使用具有同理心的文案，聚焦人们的需求，并清晰阐述他们即将获得的服务。
* 请在您的[关键用户流程](https://www.nngroup.com/articles/journey-mapping-101/) (Critical User Journey, CUJ) 中设法尽量减少物理接触，并向您的产品团队提供更改建议。例如，如果您的交付服务通常需要收件方签名，请看看有没有什么方法可以绕过这个步骤。
* 请仔细检查您的 CUJ 是否尽可能简单、直观，如果发现有任何需要改进的地方，请向产品团队提出建议。
* 回顾一下[良好的移动设计原则](https://developers.google.com/web/fundamentals/design-and-ux/principles)，在各种移动设备上尝试一下您的 CUJ，确保没有任何明显的问题。那些不经常使用网络的人，当他们突然发现自己需要更多地依赖网络的时候，很可能会通过移动设备访问您的网站。
* 尽量使用[响应式设计模式](https://developers.google.com/web/fundamentals/design-and-ux/responsive)重构您的网站。
* 请确保您网站里的表单使用起来[高效](https://www.smashingmagazine.com/2017/06/designing-efficient-web-forms/)，且拥有[良好的设计](https://developers.google.com/web/fundamentals/design-and-ux/input/forms)。

### **SEO**

**人们正在寻找与健康和工作相关的重要信息。请确保您的网站能够被所有的搜索引擎发现，这一点非常重要。**[**Lighthouse SEO 核查**](https://web.dev/lighthouse-seo/)**可以帮助您发现基本问题。您还可以关注这些搜索引擎的官方博客，了解最新的指导和更新：**[**Google**](https://webmasters.googleblog.com/)**、**[**Bing**](https://blogs.bing.com/webmaster/)**、**[**百度**](http://research.baidu.com/Blog)**、**[**DuckDuckGo**](https://spreadprivacy.com/tag/duckduckgo/)**、**[**Yandex**](https://yandex.com/blog/yacompany-com)**。目前最新的一些和疫情相关的博文包括：**

* [如何改变您的在线活动，同时尽量减少对 Google 搜索的影响](https://webmasters.googleblog.com/2020/03/how-to-pause-your-business-online-in.html)
* [反映虚拟、延期和取消活动的新属性](https://webmasters.googleblog.com/2020/03/new-properties-virtual-or-canceled-events.html)
* [Bing 采用 schemma.org 标记，用于疫情的特别公告](https://blogs.bing.com/webmaster/march-2020/Bing-adopts-schema-org-mark-up-for-Special-Announcements-about-COVID-19)
* [帮助卫生机构让疫情信息更容易获取](https://webmasters.googleblog.com/2020/03/health-organizations-covid19.html)
* [搜索卫生和政府网站的通用最佳做法](https://support.google.com/webmasters/answer/9781983)

请参阅“[可发现性](https://web.dev/discoverable/)”获取更多指导内容。

### **性能**

**一些互联网服务提供商 (**[**例如印度的一些提供商**](https://economictimes.indiatimes.com/tech/internet/brace-yourself-for-slower-data-speeds/articleshow/74702264.cms)**) 发现**[**家庭互联网使用量急剧增加**](https://www.npr.org/2020/03/17/817154787/internet-traffic-surges-as-companies-and-schools-send-people-home)**，而自身却没有足够的基础设施来满足突然增长的需求。在这种情况下，即使您的做法完美无缺，您的网站速度也仍然可能变慢。优化加载性能也许可以抵消带宽减少带来的负面影响。换句话说，如果您可以在加载页面时减少需要通过网络发送的字节数，就可以抵消带宽减少对性能带来的影响**

* 图片是[造成网站臃肿的首要原因](https://images.guide/#introduction)。您也许可以通过[优化图片](https://web.dev/fast/#optimize-your-images)来显著降低网站的带宽使用量。[Squoosh](https://squoosh.app/) 是一个简单的开源图片压缩工具，可以帮助您快速压缩图片。
* 运行 [WebPageTest](https://webpagetest.org/easy) 或 [Lighthouse](https://developers.google.com/web/tools/lighthouse/#get-started) 来发现提升性能的最佳切入点。
* [启用文本压缩](https://web.dev/uses-text-compression/)，减少文本资源带来的网络需求。只需要极小的技术投入，往往就能实现很大的性能提升。
* 阅读“[跨职能提升网站速度](https://web.dev/fixing-website-speed-cross-functionally/)”，学习如何与其他部门合作并获得他们的支持。
* [对图片使用原生懒加载](https://web.dev/native-lazy-loading/)，以减少对那些人们可能永远不会看到的图片的请求。[浏览器的兼容性](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Browser_compatibility)并非 100%，该功能可能不一定会带来改观。换句话说，如果某个浏览器不支持原生懒加载，那么所有图片会像正常情况下一样加载。
* 检查您的网站是否存在可进一步异步加载的 A/B 测试或个性化脚本，或者脚本中是否存在可关闭的非必需功能。A/B 测试和个性化脚本通常不能完全异步加载，因为它们需要在页面内容加载前运行，但您也许可以更加异步地加载部分脚本。请参阅“[关键渲染路径](https://developers.google.com/web/fundamentals/performance/critical-rendering-path)”，了解如何权衡同步脚本 (也称为渲染阻塞脚本) 和页面加载时间，然后决定是否需要优先考虑渲染阻塞脚本，再考虑页面加载速度，或者反之。
* 在大多数网站的所有网络请求中，第三方代码[占到大约一半](https://almanac.httparchive.org/en/2019/third-parties)。请考虑[优化](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/loading-third-party-javascript)、暂时删除或禁用那些不影响网站运行的第三方代码。
* 如果新功能发布的优先级被取消，那最好趁此机会清理您的网站。您可以从标签管理器中删除标签，清理臃肿的 CSS 和 JS，并删除被弃用的功能或代码。Chrome DevTools 中的 [Coverage 选项卡](https://developers.google.com/web/tools/chrome-devtools/coverage)和 Puppeteer 中的 [Coverage](https://pptr.dev/#?product=Puppeteer\&version=v2.1.1\&show=api-class-coverage) 类都可以帮助您检测出未使用的代码。

请参阅“[快速加载](https://web.dev/fast/)”获取更多指导内容。

**更多详情请**[**英文原文**](https://web.dev/covid19/)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://pliao.gitbook.io/web-ecosystem-consulting/epidemic-19.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.