文档中心 >Google PageSpeed

避免CSS @import

概览

在外部样式表使用CSS @import会在网页加载中增加延迟。

详细

CSS @import允许把样式表导入到其他样式表里,当CSS @import 在外部样式表中使用,浏览器是不能并行下载这些样式表的,这将增加网络请求的来回时间。例如,如果first.css包含如下内容:

@import url("second.css")

浏览器必须先下载、分析和执行first.css,再去下载second.css

建议

使用 <link> 标记代替 CSS @import

对每个样式表使用 <link> 标记代替 CSS @import,以便浏览器能并行下载样式表,这将加速网页的加载时间:

<link rel="stylesheet" href="first.css" />
<link rel="stylesheet" href="second.css" />

本页面中的内容已获得知识共享署名3.0许可,并且代码示例已获得Apache 2.0许可;另有说明的情况除外。

文章源地址:https://developers.google.com/speed/pagespeed/service/FlattenCssImports