Overview
使用CSS @import导入外部样式表会给页面加载增加额外的延迟。
Details
CSS @import允许在样式表中导入其它样式表。当CSS @import被用于外部样式表，浏览器不能并行下载样式表，这会给整个页面加载增加多余的RTT(round-trip times)。比如若first.css中包含如下内容：
@import url("second.css")浏览器先下载，解析和执行first.css，然后再下载second.css。
Recommendations
- 使用<link>标签替换CSS @import
-
使用<link>标签替换@import可以使用浏览器并行加载样式表，从而缩短页面加载时间：
<link rel="stylesheet" href="first.css"> <link rel="stylesheet" href="second.css">
原文链接：https://developers.google.com/speed/docs/best-practices/rtt#AvoidCssImport