先聊一个最容易被忽视的细节:关键CSS到底该放在哪里。很多人觉得放里就行,但其实位置差一点,效果天差地别。浏览器是按顺序解析HTML的,标签必须抢在所有阻塞资源前面生效。如果它被放在任何一个之后,哪怕中间只隔了个,浏览器都会先暂停渲染去加载外部CSS——FCP没改善甚至变差,多半就是这个原因。Dev
先聊一个最容易被忽视的细节:关键CSS到底该放在哪里。很多人觉得放
里就行,但其实位置差一点,效果天差地别。浏览器是按顺序解析HTML的,标签必须抢在所有阻塞资源前面生效。如果它被放在任何一个之后,哪怕中间只隔了个,浏览器都会先暂停渲染去加载外部CSS——FCP没改善甚至变差,多半就是这个原因。DevTools里如果看到Parse HTML阶段卡在某个main.css请求上,基本可以断定关键CSS没抢到“首发位”。
正确的做法其实就几条铁律:必须是
必须是第二个,中间不能有任何空行、注释或其他标签插队。所有必须乖乖排在后头。还有一条红线:@import绝对禁用,因为它会在