如何优化网页首屏加载速度_通过link标签替代@import方式引入css

必须将@import替换为，因为@import导致串行加载、白屏延长、FOUC及带宽浪费，而支持并行下载与media精准控制。 @import 会拖慢首屏，必须换成—— 这不是可选项，是性能底线。 为什么 @import 会让页面白屏更久 浏览器解析 HTML 时遇到 ，会立刻发起请求，并行下载、预解析、甚至预连接；而 是 CSS 规则，只能写在 CSS 文件或 或把 放在 前面 注意 属性：若 CSS 在 CDN 上，建议加 ，避免跨域错误导致样式加载失败且无提示 media 属性不是装饰，是加载控制开关 的 属性能真正影响浏览器是否阻塞渲染、是否预加载； 的 media 查询只管“是否生效”，不管“是否下载”。 非关键样式（如打印、暗色主题）用 或 ，浏览器会异步加载，不阻塞首屏 想让某份 CSS 完全不阻塞渲染（仅用于 JS 动态切换），可用 —— 浏览器识别为始终匹配但不关键，延迟加载 千万别给主样式表乱加 ，比如 或空值，部分浏览器会当成非关键资源处理 构建工具里藏着隐性 @import Webpack/Vite 项目看似没写 ，但如果你在入口 里写了 ，构建后仍可能生成单个大 CSS 文件，或触发运行时动态插入逻辑，失去并行优势。 检查打包产物：打开最终 HTML，确认关键 CSS 是否真以多个 形式存在，而不是合并进一个