Web 加载速度优化清单，让你的网站快上加快

网页加载速度是衡量一个网页好坏的重要标准，网页遗弃率随网页加载时间的增加而增加。据说近一半的用户希望网页加载时间不超过 2s，超过 3s 一般就放弃该网页。时间就是生命，干等着，谁愿意平白无故地 +1s 呀，所以今天来整理下具体如何加快网页。

本文不再更新，原文链接：https://blog.wangtwothree.com/code/89.html

HTML

1、压缩 HTML：

HTML 代码压缩，将注释、空格和新行从生产文件中删除。

为什么：

删除所有不必要的空格、注释和中断行将减少 HTML 的大小，加快网站的页面加载时间，并显著减少用户的下载时间。

2、删除不必要的注释：

确保从您的网页中删除注释。

为什么：

注释对用户来说是没有用的，应该从生产环境文件中删除。可能需要保留注释的一种情况是：保留远端代码库（keep the origin for a library）。

3、删除不必要的属性：

像 type="text/javascript" or type="text/css" 这样的属性应该被移除。

为什么：

类型属性不是必需的，因为 HTML5 把 text/css 和 text/javascript 作为默认值。没用的代码应在网站或应用程序中删除，因为它们会使网页体积增大。

4、在 JavaScript 引用之前引用 CSS 标记：

确保在使用 JavaScript 代码之前加载 CSS。

为什么：

在引用 JavaScript 之前引用 CSS 可以实现更好地并行下载，从而加快浏览器的渲染速度。

5、最小化 iframe 的数量：

仅在没有任何其他技术可行性时才使用 iframe。尽量避免使用 iframe。

6、DNS 预取：

一次 DNS 查询时间大概在 60-120ms 之间或者更长，提前解析网页中可能的网络连接域名

<link rel="dns-prefetch" href="http://example.com/">

CSS

1、压缩:

所有 CSS 文件都需要被压缩，从生产文件中删除注释，空格和空行。

为什么：

缩小 CSS 文件后，内容加载速度更快，并且将更少的数据发送到客户端，所以在生产中缩小 CSS 文件是非常重要，这对用户是有益的，就像任何企业想要降低带宽成本和降低资源。

2、Concatenation:

CSS 文件合并（对于 HTTP/2 效果不是很大）。

<!-- 不推荐 -->
<link rel="stylesheet" href="foo.css"/>
<link rel="stylesheet" href="bar.css"/>

<!-- 推荐 -->
<link rel="stylesheet" href="foobar.css"/>

为什么：

如果你还在使用 HTTP/1，那么你就需要合并你的文件。不过在使用 HTTP/2 的情况下不用这样（效果待测试）。