[{"data":1,"prerenderedAt":358},["ShallowReactive",2],{"blog-critical-css-inline":3,"blog-prev-critical-css-inline":122,"blog-next-critical-css-inline":244},{"id":4,"title":5,"author":6,"body":7,"canonical":106,"category":107,"cover":106,"date":108,"description":109,"draft":110,"extension":111,"keywords":106,"meta":112,"navigation":113,"noindex":110,"ogImage":106,"path":114,"seo":115,"seoDescription":106,"seoTitle":106,"stem":116,"tags":117,"updated":106,"__hash__":121},"blog\u002Fblog\u002Fcritical-css-inline.md","把关键 CSS 内联进 HTML，首屏能省半秒","元析智能",{"type":8,"value":9,"toc":95},"minimark",[10,14,19,22,25,29,32,35,38,41,44,47,50,53,56,59,62,65,68,71,74,77,80,83,86,89,92],[11,12,13],"p",{},"2026 年 8 月我们给一个官网做关键 CSS 内联，首屏渲染时间从 1.6 秒提前到 1.2 秒。改动只有一件事：把首屏需要的样式写进 HTML 的 head 里，剩下的样式延后加载。",[15,16,18],"h2",{"id":17},"为什么-css-会阻塞渲染","为什么 CSS 会阻塞渲染",[11,20,21],{},"浏览器要先拿到 CSS 才能确定页面长什么样，所以在 CSS 下载完成之前，它不会渲染任何内容。",[11,23,24],{},"一个 200KB 的样式文件，在 3G 网络下要下两秒。这两秒里用户看到的是白屏，即使 HTML 已经到了。",[15,26,28],{"id":27},"关键-css-怎么抽","关键 CSS 怎么抽",[11,30,31],{},"关键 CSS 指的是渲染首屏可见区域所必需的样式。写一个工具扫一遍页面，把首屏元素的样式挑出来，通常只有十几 KB。",[11,33,34],{},"原则是宁少勿多。内联的每一 KB 都拖慢 HTML 的传输，收益抵不过成本。",[11,36,37],{},"我们的经验是控制在 4KB 以内，压缩后 2KB 左右。超过这个数，说明把不该内联的样式也塞进去了。",[15,39,40],{"id":40},"剩余样式怎么异步加载",[11,42,43],{},"常见写法是 preload 加 onload 切换成样式表，或者用媒体查询的 hack。",[11,45,46],{},"这两种做法都有个副作用：样式加载完之前，页面可能闪一下无样式的内容。所以关键 CSS 必须覆盖首屏，否则会看到明显的跳动。",[11,48,49],{},"现在更稳的做法是用构建工具自动处理整个流程，别手写。",[15,51,52],{"id":52},"三个常见坑",[11,54,55],{},"第一个，内联太多。有人把整份样式表塞进 HTML，结果 HTML 变成 300KB，首屏更慢。",[11,57,58],{},"第二个，首屏判断错。工具按视口高度判定首屏，但用户实际看到的第一屏和工具算的不一样，尤其是移动端。要人工看一眼。",[11,60,61],{},"第三个，动态样式。主题切换、深色模式这类样式不在静态 CSS 里，内联会漏掉，导致闪烁。",[15,63,64],{"id":64},"怎么验证",[11,66,67],{},"改之前和改之后各测一次，看两个数：首次内容绘制和最大内容绘制。",[11,69,70],{},"测的时候一定要禁用缓存，并且用移动端配 4G 降速。桌面端加缓存测出来的差异很小，容易误判。",[11,72,73],{},"还要看真实用户的变化。实验室数据能证明改动生效，CrUX 才能证明用户感知到了。",[15,75,76],{"id":76},"一个折中做法",[11,78,79],{},"如果站点有几百个页面模板，逐个内联不现实。我们通常只对三类页面做：首页、核心产品页、投放落地页。",[11,81,82],{},"这三类页面吃掉了大部分首屏流量，其余页面用正常的样式表加载。这个取舍比全站上构建工具简单得多。",[15,84,85],{"id":85},"一个判断",[11,87,88],{},"关键 CSS 内联适合首屏简单、样式集中的页面，比如官网首页、落地页、文章页。",[11,90,91],{},"对于交互复杂、首屏依赖大量组件样式的应用，内联效果有限，优先做代码分割和延迟加载。",[11,93,94],{},"这件事的收益在几百毫秒量级，不是决定性的。但如果首屏本来就卡在 3 秒附近，这半秒能把它推进合格线。",{"title":96,"searchDepth":97,"depth":97,"links":98},"",2,[99,100,101,102,103,104,105],{"id":17,"depth":97,"text":18},{"id":27,"depth":97,"text":28},{"id":40,"depth":97,"text":40},{"id":52,"depth":97,"text":52},{"id":64,"depth":97,"text":64},{"id":76,"depth":97,"text":76},{"id":85,"depth":97,"text":85},null,"技术SEO","2026-07-13","CSS 阻塞渲染，把首屏样式内联进 HTML 能提前首屏时间。这篇写关键 CSS 怎么抽、四 KB 上限怎么守、剩余样式怎么异步加载，以及三个常见坑。",false,"md",{},true,"\u002Fblog\u002Fcritical-css-inline",{"title":5,"description":109},"blog\u002Fcritical-css-inline",[118,119,120],"CSS","首屏","渲染阻塞","c-tCZfv_1AUt31w50m8PKisGInsNDJh5oIB0kZcXigI",{"id":123,"title":124,"author":6,"body":125,"canonical":106,"category":107,"cover":106,"date":233,"description":234,"draft":110,"extension":111,"keywords":106,"meta":235,"navigation":113,"noindex":110,"ogImage":106,"path":236,"seo":237,"seoDescription":106,"seoTitle":106,"stem":238,"tags":239,"updated":106,"__hash__":243},"blog\u002Fblog\u002Fimage-seo-technical.md","1200 张产品图只被收录 40 张，问题在三个地方",{"type":8,"value":126,"toc":225},[127,130,134,146,153,160,164,171,174,177,181,184,191,194,198,201,204,207,210,213,216,219,222],[11,128,129],{},"产品图不收录，不是图片不够好看。我们查了 6 个软件站，问题集中在懒加载写法、图片 URL 参数和页面结构三处。1200 张图修完收录到 780 张。",[15,131,133],{"id":132},"问题一懒加载写成了没有-src","问题一：懒加载写成了\"没有 src\"",[11,135,136,137,141,142,145],{},"很多站为了性能，图片的 ",[138,139,140],"code",{},"src"," 写成占位图，真实地址放在 ",[138,143,144],{},"data-src","，等滚动到才加载。搜索引擎的爬虫不滚动页面，看到的永远是占位图。",[11,147,148,149,152],{},"查法：用抓取诊断或者 curl 看页面 HTML，搜索 ",[138,150,151],{},"\u003Cimg","，看 src 是不是占位图。",[11,154,155,156,159],{},"改法：首屏图片直接给真实 src，非首屏用原生 ",[138,157,158],{},"loading=\"lazy\"","，它会在 HTML 里保留真实地址，只是延迟加载。",[15,161,163],{"id":162},"问题二图片-url-带一堆参数","问题二：图片 URL 带一堆参数",[11,165,166,167,170],{},"图片做了 CDN 压缩和裁剪，URL 变成 ",[138,168,169],{},"image.jpg?w=800&h=600&q=80&format=webp","。同一个图有 10 个版本，搜索引擎会当成 10 张不同的图，权重分散。",[11,172,173],{},"查法：导出所有图片 URL，按路径去重，看一个原图对应多少个参数版本。",[11,175,176],{},"改法：用 canonical 或者 robots 收敛参数，只保留一个标准尺寸可被索引。最干净的做法是 CDN 层做内容协商，URL 不变，按 UA 返回合适格式。",[15,178,180],{"id":179},"问题三图片没有上下文","问题三：图片没有上下文",[11,182,183],{},"图片被收录不等于有排名。搜索引擎需要知道这张图讲什么，靠的是 alt、文件名、周围文字和所在页面的主题。",[11,185,186,187,190],{},"我们见过客户的图片 alt 全写成\"产品截图 1\"\"产品截图 2\"，文件名是 ",[138,188,189],{},"IMG_2024.png","。这种图片即使收录了，也搜不到。",[11,192,193],{},"改法：alt 写清楚图里是什么，文件名用有意义的英文短句，图片周围有说明文字。我们一般要求产品图的 alt 至少 10 个字、包含一个关键词。",[15,195,197],{"id":196},"额外一件事图片和页面要一起优化","额外一件事：图片和页面要一起优化",[11,199,200],{},"图片搜索的流量，最终是导到页面的。如果图片页是一个没有任何内容的附件页，用户点进来就走。",[11,202,203],{},"我们的做法是让图片可索引、同时图片所在的产品页\u002F文章页要有完整内容。图片搜索只是入口，转化还是靠页面。",[15,205,206],{"id":206},"修完的数据",[11,208,209],{},"2026 年 2 月我们开始查这个站，三周修完，每周看一次数据。",[11,211,212],{},"修完之后还有一个意外收获：产品图的 alt 写清楚之后，页面本身的图片相关搜索词也多了，比如\"XX 系统 后台截图\"这种长尾词，带来了一些注册。",[11,214,215],{},"那个客户 1200 张产品图，修了 3 周：懒加载改造、URL 参数收敛、alt 和文件名重写。",[11,217,218],{},"第 6 周看数据：收录从 40 张涨到 780 张，图片搜索带来的访问从每月 200 涨到 900 多，其中 12% 的用户到了产品页还停留超过 1 分钟。",[15,220,221],{"id":221},"一句判断",[11,223,224],{},"图片 SEO 是技术活，不是设计活。修好抓取路径和上下文，普通的产品截图也能带来流量。别在图片上堆关键词，搜索引擎现在能看出来。",{"title":96,"searchDepth":97,"depth":97,"links":226},[227,228,229,230,231,232],{"id":132,"depth":97,"text":133},{"id":162,"depth":97,"text":163},{"id":179,"depth":97,"text":180},{"id":196,"depth":97,"text":197},{"id":206,"depth":97,"text":206},{"id":221,"depth":97,"text":221},"2026-07-12","产品图不收录，不是图片不够好看。我们查了 6 个软件站，问题集中在懒加载写法、图片 URL 参数和页面结构三处。1200 张图修完收录到 780 张，图片搜索带来的访问涨了 3 倍。三个修法都不难，难在有人愿意去查。文末有修完的数据。",{},"\u002Fblog\u002Fimage-seo-technical",{"title":124,"description":234},"blog\u002Fimage-seo-technical",[240,241,242],"图片SEO","收录","站点技术","ofEYh2G69aTRD8RzgIG0nOwI_iLJsMAjpEMCmncOH_4",{"id":245,"title":246,"author":6,"body":247,"canonical":106,"category":347,"cover":106,"date":348,"description":349,"draft":110,"extension":111,"keywords":106,"meta":350,"navigation":113,"noindex":110,"ogImage":106,"path":351,"seo":352,"seoDescription":106,"seoTitle":106,"stem":353,"tags":354,"updated":106,"__hash__":357},"blog\u002Fblog\u002Fcontent-audit-sheet-fields.md","内容审计表格该有九个字段，少一个结论就会错",{"type":8,"value":248,"toc":336},[249,252,256,259,262,266,269,272,276,279,282,285,288,291,294,297,300,303,306,309,312,315,318,321,324,327,330,333],[11,250,251],{},"内容审计最容易犯的错，是拿一张只有标题和流量的表做判断。我们固定九个字段，少一个都会让结论偏。2025 年我们做过一次只有五个字段的简化版，结果按它删掉的 20 篇里，有 6 篇其实带着外链。",[15,253,255],{"id":254},"前三个字段定位","前三个字段：定位",[11,257,258],{},"URL、标题、所属主题。这三个解决“这是哪一篇、讲什么、属于哪个簇”。",[11,260,261],{},"主题这一列必须跟内容架构对齐。对不上的，说明这篇本来就不该存在。",[15,263,265],{"id":264},"中间三个字段数据","中间三个字段：数据",[11,267,268],{},"近 12 个月曝光、点击、平均排名。三个数都从搜索后台导，不要用手工估算。",[11,270,271],{},"只看点击会漏掉“有曝光没点击”的页面，只看排名会漏掉“有排名没曝光”的页面，三个一起看才完整。",[15,273,275],{"id":274},"后三个字段判断依据","后三个字段：判断依据",[11,277,278],{},"外链数、有没有转化、建议动作。",[11,280,281],{},"外链数是决定 301 还是 410 的关键。有没有转化决定要不要留。建议动作只有四个选项：留、改、并、删。",[15,283,284],{"id":284},"为什么少了外链就会错",[11,286,287],{},"2025 年那次简化版审计，我们按“流量低加内容旧”删了 20 篇，其中 6 篇有 1 到 4 个外链。删完两个月，客户发现有几个行业目录站的链接打不开了。",[11,289,290],{},"后来补了 301，但延迟已经造成。这件事之后，外链这一列成了必填项。",[15,292,293],{"id":293},"转化这一列怎么填",[11,295,296],{},"有小程序或表单的，看有没有带来提交。没有埋点的，用最土的办法：销售或客服有没有在对话里发过这个链接。",[11,298,299],{},"填“未知”比填“无”安全。未知可以先观察，填成无就会被误删。",[15,301,302],{"id":302},"建议动作怎么定",[11,304,305],{},"四个选项各有条件。改：有排名或曝光，但内容过时或结构不对。并：跟另一篇打同一个词。删：三项都为否。留：其他情况。",[11,307,308],{},"写动作的时候必须写一句理由，不写理由的动作，执行的人不敢动。",[15,310,311],{"id":311},"表格之外的两件事",[11,313,314],{},"一是导出时间要记录，数据不对齐的时候能对上口径。二是每半年重跑一次，别拿两年前的审计表做今天的决定。",[15,316,317],{"id":317},"填表要花多久",[11,319,320],{},"300 篇文章的九字段表，我们两个人填了两天半。其中外链和转化最费时间，各占半天。",[11,322,323],{},"2026 年 4 月那次，我们先把能自动导的六列导完，剩下三列人工补，速度才上来。",[15,325,326],{"id":326},"一个常见的误用",[11,328,329],{},"拿审计表当汇报材料。表格里有大量“删”“并”的建议，客户看到第一反应是防御。",[11,331,332],{},"我们的做法是先给结论页，再给明细表。结论页只写动作数量和理由分类，不给客户逐条反驳的机会。",[11,334,335],{},"表格本身不复杂，复杂的是填表的人愿不愿意真的去查。",{"title":96,"searchDepth":97,"depth":97,"links":337},[338,339,340,341,342,343,344,345,346],{"id":254,"depth":97,"text":255},{"id":264,"depth":97,"text":265},{"id":274,"depth":97,"text":275},{"id":284,"depth":97,"text":284},{"id":293,"depth":97,"text":293},{"id":302,"depth":97,"text":302},{"id":311,"depth":97,"text":311},{"id":317,"depth":97,"text":317},{"id":326,"depth":97,"text":326},"内容运营","2026-07-14","审计表不是把文章列出来。我们固定九个字段：URL、曝光、点击、排名、外链、转化、主题、意图、建议动作。少一个字段，判断就会偏，最后做出来的动作也是错的。",{},"\u002Fblog\u002Fcontent-audit-sheet-fields",{"title":246,"description":349},"blog\u002Fcontent-audit-sheet-fields",[355,356,347],"内容审计","数据表格","2B23-yKas4YNCuhVXEAqjX-iCuBbhQqKKvsLP1xtqCA",1794088103853]