打开网页，半天不见样式，页面文字堆在一起，图片错位，等个好几秒才恢复正常——这多半是CSS加载太慢惹的祸。尤其在手机上或者网络差的时候更明显。别急着刷新或换浏览器，问题可能出在CSS的加载方式上。
检查CSS文件是不是太大
一个动辄几百KB甚至上MB的CSS文件，浏览器得花时间下载、解析，自然卡。特别是用了完整版Bootstrap、Element UI这类UI框架时，很多人直接把整套样式全引了进来，其实只用了其中一小部分。
解决办法很简单：按需引入。比如你只用到按钮和弹窗，就只打包这两部分的样式。也可以用工具如PurgeCSS，在构建时自动删掉没用的CSS代码。
别让CSS阻塞页面渲染
CSS默认是“渲染阻塞资源”。浏览器必须等关键CSS加载完，才会开始绘制页面。如果CSS放在<head>里且文件大，用户就会看到白屏。
可以拆分CSS：把首屏必需的样式内联到HTML中，其余非关键样式异步加载。例如：
<style>\n /* 内联首屏关键CSS */\n .header, .main-title { \n color: #333; \n font-size: 18px; \n }\n</style>\n<link rel="preload" href="styles/main.css" as="style" onload="this.onload=null;this.rel='stylesheet'">\n<noscript><link rel="stylesheet" href="styles/main.css"></noscript>这样页面能快速显示基础样式，其他样式在后台悄悄加载。
启用压缩和Gzip
服务器返回的CSS文件如果是原始文本，体积会很大。开启Gzip压缩后，通常能缩小70%以上。比如Nginx配置中加上：
gzip on;\ngzip_types text/css;\ngzip_comp_level 6;再配合构建工具（如Webpack）输出.min.css文件，进一步减少传输量。
利用浏览器缓存
用户第二次访问时，如果CSS能从本地缓存读取，速度立马提升。给CSS文件加hash命名，比如style.a1b2c3.css，再设置长期缓存：
Cache-Control: public, max-age=31536000, immutable只要文件名变了，浏览器就知道要重新下载，否则直接用旧的。
CDN加速不能少
如果你的网站服务器在北京，南方用户访问延迟可能很高。把CSS文件扔到CDN上，用户会从离他最近的节点下载，速度提升明显。
现在很多静态托管服务自带CDN，比如Vercel、Netlify、Cloudflare Pages，部署时顺手就把静态资源加速了。
避免@import嵌套加载
有些人喜欢在CSS里用@import url('reset.css');来合并样式，但这会导致串行加载——主CSS下载完，才发现要再请求另一个文件，白白多一次往返。
换成多个<link>标签并行加载，或者构建阶段提前合并好，效率更高。
监控实际加载表现
打开Chrome开发者工具的Network面板，看CSS文件的Waterfall：DNS查询、连接、等待、下载各花了多久。如果是TTFB（首字节时间）高，可能是服务器响应慢；如果下载时间长，就得压缩或切分。