Avoid CSS @import
CSS @import: A Quick Overview
How to Avoid CSS @import
To avoid seeing the CSS @import message in a website speed test report, the best method is to call the CSS from within the HTML itself, not from within the CSS file. The issue is most prevalent when the @import message is included within the CSS file. This method uses the tags inside HTML, which should not affect the load time of the web page. You can also set this to load asynchronously, especially if the CSS is not critical to the above-the-fold page content.
CSS @import Additional Optimizations
In addition to removing the @import message, some other CSS optimizations include reducing the number of CSS files you are using. Typically, websites will use somewhere between 2-3 CSS files. For some larger organizations, especially with different global websites, may require more style sheets, themes, etc. And for smaller organizations, some web developers can get that number down to just a single CSS file, but that is typically not commonplace. And obviously, you do not want to have a unique style sheet for every single page. We will discuss other CSS optimizations later in this guide, like minifying, inlining, or combining CSS, but it is best to avoid the @import statement altogether.
Lighthouse is an open-source tool that is used to run an audit against your web pages and provides scores and suggestions for improving page performance, accessibility, SEO, and more.
PageSpeed Insights is a tool created by Google that reports on the performance of a page on both mobile and desktop devices, and provides suggestions on how that page may be improved.