Now Available: The GTmetrix MCP

Get GTmetrix performance testing data and analysis integrated right into your AI tool.

Available to all users - connect to our MCP server and try it now! Learn More

TRY IT NOW

PageSpeed: Avoid CSS @import

Recommendations

Lighthouse
Metrics
Audits
PageSpeed (Legacy)
YSlow (Legacy)

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