Answer a Question
Sign In

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.

Instructions

  • Do:

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

  • Avoid:

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

Avoid

avoid importing CSS using a URL

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

Do

Import Scss or LESS partials using the @import rule

@import './styles/base';
@import './styles/typography';
Brian Love
Brian is a software engineer and Google Developer Expert in Web Technologies and Angular with a passion for learning, writing, speaking, teaching and mentoring. He regularly speaks at conferences and meetups around the country, and co-authored "Why Angular for the Enterprise" for O'Reilly. When not coding, Brian enjoys skiing, hiking, and being in the outdoors. Brian recently launched lookout.dev where you can find best practices and expert advice on topics ranging from TypeScript, Angular, React, Node.js and more.
Google Developers Expert

Whoa 🤚 You need to sign in to join the discussion.

Don't worry, if you start a comment, we'll save it for when you return. 😉