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');
Have a question or comment?