perf/css-no-import

Why

The browser finds an @import only after it has downloaded and parsed the stylesheet that contains it, so each import adds a round trip before the page can render. On a mobile connection that is easily several hundred milliseconds of blank screen.

Fix

List each stylesheet with <link rel="stylesheet"> in <head> so they download in parallel, or let a build tool inline the imports into one file. Cascade layers work with links too: @layer reset, components; in the first file, then @layer components { … } in the others.

Examples

/* bad: main.css */
@import url("reset.css");

<!-- good -->
<link rel="stylesheet" href="/css/reset.css">
<link rel="stylesheet" href="/css/main.css">

Sources

• Chrome for Developers, Network dependency tree insight
• MDN, @import
• Chrome for Developers, Render blocking requests insight

Read it in the terminal

npx github:dawidolko/frontend-skills explain perf/css-no-import