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
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 Terms
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.
YSlow
YSlow is an open-source website analysis tool that can be used to identify web page performance issues. Learn more about the YSlow to enhance your web pages and the user experience.