CSS @import is a CSS rule that allows web developers to import external style sheets into another one. The benefits of this rule are that you can link multiple style sheets through a single tag, providing a better way to organize you CSS files as project size increases.
Avoid CSS @import
What is CSS @import?
Why Avoid CSS @Import
Although the CSS @import may provide a means for better organizations and management of style sheets, it can cause an increase in page load times since the browser cannot download them simultaneously, or in parallel. They must be downloaded one at a time, which adds to the overall page download time.
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.