Medium This Hint is worth investigating further, and may warrant further attention depending on the type and quantity of URLs affected. Issue This Hint represents an error or problem that needs to be fixed.

CSS contains @import

This means that the URL in question is a CSS file that contains at least one @import rule.

Why is this important?

The CSS @import function makes it possible to include external CSS files in a document. It can be used as a way to import CSS scripts within a stylesheet tag in HTML documents or to add extra rules within CSS files.

This function has a negative effect on performance, as they introduce additional roundtrips into the critical path: the imported CSS resources are discovered only after the CSS stylesheet with the @import rule itself is received and parsed, so the browser will not continue downloading any other style sheets until this @import file has finished.

What does the Hint check?

This Hint will trigger for any internal or external CSS URL which contains the @import function.

Examples that trigger this Hint:

The Hint would trigger for any style sheet that contains:

@import url("cssfile.css");

How do you resolve this issue?

What you first should do is remove all the @import rules from your CSS code. Then you open all the CSS files you use for the web page (also the ones you don’t use @import for), copy & paste all the codes within those files, combine them all in one large CSS script and call it from a HTML header within style tags.

Further Reading

Ready to try Sitebulb?
Start your free 14 day trial now

Start Free Trial