高性能网站标准
最后更新于
最后更新于
关于 Web 应用性能优化,有一点是毫无疑问的:「页面加载越久,用户体验就越差」。我们几乎可以说 Web 应用性能优化的关键之处就在于:减少页面初载时,所需加载资源的「数量」和「体积」。
那么当所需加载的资源数量到达多少或资源大小小于多少,我们才可以自信地宣称我们的 Web 应用拥有出色的性能呢?
下面给出的一个参考值,该参考值考虑到了移动端与国外等多种访问环境:
页面初载时,所有未压缩的 JavaScript 脚本大小:<=200KB;
页面初载时,所有未压缩的 CSS 资源大小:<=100KB;
HTTP 协议下,请求资源数:<=6 个;
HTTP/2 协议下,请求资源数:<=20 个 ;
90%的代码利用率(也就是说,仅允许 10% 的未使用代码);
或许你会觉得这个标准有点过于苛刻了,是有一点点,但为了创建出高性能的 Web 应用,你的实际资源加载情况应该尽可能靠近这个目标。
代码利用率 = 你页面中实际被执行的代码 / 你页面中引入的代码 * 100%
你可能会困惑在实际开发中如何得到这个值,别担心,通过使用 Chrome 开发者工具(很遗憾,目前只有 Chrome 支持这一功能),你就可以迅速对你的 Web 应用进行分析,得到当前页面下的代码利用率状态,步骤如下:
打开 Chrome Dev Tool;
按下 Cmd + Shift + P or Ctrl + Shift + P ;
输入 Coverage,并选择第一个出现的选项;