Share Knowledge

Do not @import CSS using a URL

Monday, December 2, 2019

When using the CSS @import rule with a URL the CSS file is fetched via a network request. Be default, browsers treat CSS as render blocking resources. This means that the rendering of the page will not occur until all render blocking activities are complete.

When fetching CSS via a network request, the user must wait until the network request is complete and the CSS Object Model (CSSOM) is constructed. This can cause a delay to the page's first meaningful paint (FMP), and subsequently, to the page's time to interactivity (TTI). Both of these metrics are critical to analyzing the performance of your site, and can further have an impact on user engagement, search engine optimization (SEO) and potentially reduced search engine results page (SERP) ranking.



use the @import rule with Scss and LESS to import stylesheet partials


using the CSS @import rule to fetch a stylesheet via a URL

Code Examples

Import Scss or LESS partials using the @import rule

@import './styles/base';
@import './styles/typography';

avoid importing CSS using a URL

@import url('/typography.css');
Brian Love

I am a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. I regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, I enjoy skiing, hiking, and being in the outdoors. I started lookout.dev to break down the barriers of learning in public. Learning in public fosters growth - for ourselves and others.

Google Developers Expert

Have a question or comment?