Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

PageSpeed: Avoid CSS @import

Overview

Using CSS @import in an external stylesheet can add additional delays during the loading of a web page.

How does your site score on this recommendation?

Details from Google

CSS @import allows stylesheets to import other stylesheets. When CSS @import is used from an external stylesheet, the browser is unable to download the stylesheets in parallel, which adds additional round-trip times to the overall page load. For instance, if first.css contains the following content:

@import url("second.css")

The browser must download, parse, and execute first.css before it is able to discover that it needs to download second.css.

Read our Lighthouse documentation to learn more on avoiding CSS @import.

Summary

CSS
Medium
Easy
98%