Avoid CSS @import

Rule from inspect under performance category

What is a trooper!

we have submitted your edit to the community for review! We'll review and make it live on the site in the next few hours, the internet thanks you :).

Browse another section of the knowledge base



Suggest an edit

Cancel

This rule has no content... yet.

Add content to this rule

Or just browse to view rules that have content



 

Browsers are built to download files in parallel, these files are downloaded as they are parsed from the HTML in the response. When using @import the requested @import files will only be downloaded after the requested css file is downloaded from the server making your users wait on a CSS file to finish downloading before starting the next.

How do I fix this ?

Avoid using @import in your CSS files to <link .. /> elements.

For example the following:

@import('/reset.css');

body { background-color: red; }

would be updated to the following instead:

<html>
  <head>
    <link href="/reset.css" />
  </head>
</html>

Resources

Browse another section of the knowledge base



Signup icon
Ready to see how well your site scores?

Passmarked works best when you have an account. It allows you to keep a dashboard with saved data of the sites you have run through the system, we’ll alert you about important updates and you get access to the Passmarked Slack forum.

Sign up to get started