PageSpeed : Avoid CSS @import.
Published by Aslam
Using
CSS
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
Browser cannot load the importing css files in parallel. to download the specified
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.
if you have multiple stylesheets, never ever use import to download those files.
instead,you can use
@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