度量 Web性能的一个重要指标就是页面内容实际显示在屏幕上需要多久。这个指标有时候也叫 “渲染时间” 或者 “上屏时间”。现代浏览器在屏幕上渲染之前，至少需要两样东西：HTML和CSS。这意味着让浏览器尽快下载HTML和全部CSS极其重要。
浏览器只有掌握了布局页面的全部CSS信息，才能给出最佳响应。 因为只有这样，他们才知道应该把页面渲染成什么样，从而一次性地把页面绘制到屏幕上，而非一边加载新样式一边重新调整页面
1、减少HTTP请求
在链接外部样式表时，保证链接的文件数量最少至关重要，因为每个文件都需要单独发送一次HTTP请求。相应地，每次服务器请求文件，浏览器需要花一定的时间下载，然后还要花时间应用其中的样式。另外，额外的HTTP请求也意味着浏览器会向服务器发送多余的数据，比如cookie或请求首部。服务器也必须针对每个请求返回响应首部。服务器也必须针对每个请求返回响应首部。两个文件要比一个包含相同CSS内容的文件在浏览器和服务器间传递的数据更多。
所以线上网页最好把需要加载的CSS文件控制在 1 或 2 个。只能一个 link 元素加载CSS文件，然后在其中使用 @import，并不能把请求控制为1，因为这意味着先需要 1 个请求下载链接的文件，此外还要发送额外的请求取得所有导入的文件。因此，在线上网页中尽量不要使用@import
2、压缩和缓存内容
GZIP压缩线上资源。CSS压缩的比率很高，因为它的很多属性和值都是重复的。一般来说，CSS文件压缩后会减少70%~80%。这样显然可以减少带宽占用，从而为用户节省时间，多数Web服务器都会在浏览器支持的情况下启用自动压缩线上资源。（当下主流的浏览器都是支持 Gzip 压缩，包括 IE6、IE7、IE8、IE9、FireFox、Google Chrome、Opera 等。）
GZIP压缩：全称GNUzip，gzip压缩程序是使用DEFLATE 算法---- LZ77 和霍夫曼编码的组合，最早用于 UNIX 系统的文件压缩。对纯文本内容可压缩到原大小的40%，图片文件不推荐（svg除外）。（在Network —> Reponse —> Header 中找到 content-encoding：gzip ----表明使用了gzip压缩）
Brotli压缩：Google 在 2015 年 9 月推出了无损压缩算法 Brotli。Brotli 通过变种的 LZ77 算法、Huffman 编码以及二阶文本建模等方式进行数据压缩，与其他压缩算法相比，它有着更高的压缩效率。使用 Brotli 取代DEFLATE 来对文本压缩通常可增加20%的压缩密度。
国内使用Brotli压缩网站有：知乎
国外使用Brotli压缩网站有：google，facebook，bing
类似地让Web服务器帮你设置一定的CSS缓存时间也很重要，理想情况下，浏览器应该只下载一次CSS文件，除非线上文件有变化。方法就是通过HTTP首部告诉浏览器，把文件缓存较长的一段时间，如果文件有修改，则通过文件名来 “清除缓存”。
3、不让浏览器渲染阻塞 JavaScript
如果你在HTML文档的 < head >元素中加入< script >元素，浏览器必须先把它链接的脚本下载下来，然后再向用户显示页面内容。换句话说，这种情况下的 HTML 和 CSS 解析完全被下载以及执行脚本阻断了，也就是多为的 “渲染阻塞”
比较现代的做法是在 < head > 中使用< script > 标签，但添加 async 和 dafer 属性。给< script > 标签加上 async 属性，不阻塞HTML解析，但会在脚本加载完毕执行时阻断HTML解析。给 < script >标签添加上 defer 属性，同样会异步加载脚本，不同的是会在HTML解析完毕后再执行加载的脚本。
使用以上方法加载JavaScript，可以确保浏览器首先解析HTML 和 CSS，不受请求JavaScript文件的影响。但async 和 defer 属性是HTML5中定义的，IE10和更早版本的IE并不支持或不完全支持它们。