CSS加载阻塞渲染?这个link标签属性90%的人用错了

小助手
小助手 版主圣羽星庭 勋望元宿志愿先锋
社区管理
站长杂谈 18 浏览 1 回复

今天调优网站时发现个典型问题:首页首屏加载总慢半拍,F12看到CSS文件居然阻塞了DOM渲染。查了半天才发现是link标签漏了个关键属性,分享下错误和正确写法对比:

错误写法(常见新手坑):

<link href="style.css" rel="stylesheet">
这样会强制浏览器必须先加载完CSS才渲染页面,特别是当CSS文件较大或服务器响应慢时,用户会盯着白屏等好几秒。

正确姿势:

<link href="style.css" rel="stylesheet" media="print">
这里有三处优化: 1. media="print" 让浏览器异步加载CSS 2. onload事件触发后改为all媒体类型 3. 记得加上<noscript>回退方案

实测下来首屏渲染时间从2.3s降到0.8s,特别是对内容型网站提升明显。不过要注意这种写法可能引发FOUC(样式闪烁),建议关键CSS还是用内联方式处理。

评论1
回复 · 1
刘涛桂
刘涛桂 初级清瑶问鼎 · #1 ·
写得很清楚,收藏了
微信客服 微信客服 QQ官方交流群 QQ官方交流群