# 高性能网站标准

关于 Web 应用性能优化，有一点是毫无疑问的：「**页面加载越久，用户体验就越差**」。我们几乎可以说 Web 应用性能优化的关键之处就在于：**减少页面初载时，所需加载资源的「数量」和「体积」**。

那么当所需加载的资源数量到达多少或资源大小小于多少，我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢？

下面给出的一个参考值，该参考值考虑到了移动端与国外等多种访问环境：

1. 页面初载时，所有未压缩的 JavaScript 脚本大小：**<=200KB**；
2. 页面初载时，所有未压缩的 CSS 资源大小：**<=100KB**；
3. HTTP 协议下，请求资源数：**<=6 个**；
4. HTTP/2 协议下，请求资源数：**<=20 个** ；
5. **90%**&#x7684;代码利用率（也就是说，仅允许 10% 的未使用代码）；

或许你会觉得这个标准有点过于苛刻了，是有一点点，但为了创建出高性能的 Web 应用，你的实际资源加载情况应该尽可能靠近这个目标。<br>

### 如何查询代码利用率

{% hint style="info" %}
代码利用率 = 你页面中实际被执行的代码 / 你页面中引入的代码 \* 100%
{% endhint %}

你可能会困惑在实际开发中如何得到这个值，别担心，通过使用 Chrome 开发者工具（很遗憾，目前只有 Chrome 支持这一功能），你就可以迅速对你的 Web 应用进行分析，得到当前页面下的代码利用率状态，步骤如下：

1. 打开 Chrome Dev Tool；
2. 按下 Cmd + Shift + P or Ctrl + Shift + P ;
3. 输入 Coverage，并选择第一个出现的选项；

![](/files/-M3GtPcNAJbYBNybKTwY)


---

# 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://mm.ricky.moe/frontend-ecosystem/ye-wu-kai-fa/standard-for-high-performance-website.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.