PageSpeed : Avoid CSS @import.

Published

Using @import in external stylesheets will affect your PageSpeed performance.

What is CSS @import?


CSS @import is used to import other stylesheets when specified in an external stylesheet.
For example,
Consider we have two style sheets named first.css and second.css.
In first.css, we can include the second.css file by specifying
@import url("second.css");




How Does it affect PageSpeed and performance?


Browser cannot load the importing css files in parallel. to download the specified @import mentioned stylesheet, browser has to download,parse and execute the parent stylesheet first.
then only it will start downloading the file.
For example, second.css file will download only after first.css is completely downloaded,parsed,executed first.

Manual Solution / Recommendation


if you have multiple stylesheets, never ever use import to download those files.
instead,you can use <link> tag.
<link rel="stylesheet" href="first.css" />
<link rel="stylesheet" href="second.css" />

Comments

Post a Comment