Do not @import CSS using a URL
Monday, December 2, 2019
Do not @import CSS using a URL
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
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');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.
Have a question or comment?