[{"data":1,"prerenderedAt":358},["ShallowReactive",2],{"blog-responsive-images-srcset":3,"blog-prev-responsive-images-srcset":125,"blog-next-responsive-images-srcset":241},{"id":4,"title":5,"author":6,"body":7,"canonical":109,"category":110,"cover":109,"date":111,"description":112,"draft":113,"extension":114,"keywords":109,"meta":115,"navigation":116,"noindex":113,"ogImage":109,"path":117,"seo":118,"seoDescription":109,"seoTitle":109,"stem":119,"tags":120,"updated":109,"__hash__":124},"blog\u002Fblog\u002Fresponsive-images-srcset.md","一张图三个尺寸：srcset 配对了能省七成流量","元析智能",{"type":8,"value":9,"toc":98},"minimark",[10,14,18,21,24,27,31,34,37,40,43,46,49,52,56,59,62,65,68,71,74,77,80,83,86,89,92,95],[11,12,13],"p",{},"2026 年 8 月我们给一个官网改图片，改之前首屏图片总重 3.8 兆，改完 1.1 兆，视觉上看不出差别。做法不复杂：一张图准备三个尺寸，让浏览器自己挑。",[15,16,17],"h2",{"id":17},"一张图三个尺寸",[11,19,20],{},"手机竖屏大概需要 400 到 600 像素宽，平板 800 到 1000，桌面 1400 到 1600。",[11,22,23],{},"只做这三个就够，没必要给每个断点都生成一版。尺寸太多，构建和缓存都变复杂。",[11,25,26],{},"高分辨率屏要乘 2，所以桌面最大那张要准备 2800 像素左右的版本。这是文件变大主要来源，但也只在必要时加载。",[15,28,30],{"id":29},"srcset-和-sizes-怎么写","srcset 和 sizes 怎么写",[11,32,33],{},"srcset 列出候选图片和宽度，sizes 告诉浏览器这张图在不同视口下占多宽。",[11,35,36],{},"最常见的错是 sizes 写死 100vw。图片实际只占一半宽度，浏览器却按整屏挑图，结果加载了双倍大小的文件。",[11,38,39],{},"sizes 写不对，srcset 就白配。这条我们踩过，改完发现流量只降了一成，问题就在 sizes。",[15,41,42],{"id":42},"格式怎么选",[11,44,45],{},"优先 AVIF，其次 WebP，最后才是 JPEG 和 PNG。用 picture 标签做回退，浏览器自己选支持的最好格式。",[11,47,48],{},"质量参数别设满。照片类 70 到 80 就够，人眼很难分辨，文件能小一半。",[11,50,51],{},"截图和带文字的图要另说，压缩过头会糊，这类图控制在 85 左右。",[15,53,55],{"id":54},"图片-cdn-能省很多事","图片 CDN 能省很多事",[11,57,58],{},"图片放 CDN，URL 里带参数控制宽高和格式，不用提前生成多份。",[11,60,61],{},"一张原图，通过参数输出 400、800、1600 三个版本，缓存也由 CDN 管。改动成本比构建时生成低。",[11,63,64],{},"注意缓存策略。参数不同就是不同资源，URL 变了缓存要重新建，第一次访问会慢一点。",[15,66,67],{"id":67},"三个容易踩的坑",[11,69,70],{},"第一个，首屏那张图加了懒加载。LCP 图必须优先加载，懒加载会把它推到很后面。",[11,72,73],{},"第二个，显示尺寸和实际尺寸不一致。CSS 里显示 300 像素宽，加载的是 1600 像素的图，白白浪费七成流量。",[11,75,76],{},"第三个，图片没有宽高比。这会同时拖慢 LCP 和造成 CLS，等于两个指标一起坏。",[15,78,79],{"id":79},"一个省事的构建配置",[11,81,82],{},"站点如果用现代框架，图片组件一般能自动生成 srcset。手写容易漏尺寸，配置一次省事很多。",[11,84,85],{},"我们的默认输出是三个宽度加两种格式，构建时生成，交给 CDN 缓存。新图片进来不用单独交代。",[15,87,88],{"id":88},"一个态度",[11,90,91],{},"图片优化是首屏优化里收益最确定的一件事。软件公司的官网尤其明显，因为首屏往往就是一张产品截图。",[11,93,94],{},"但它需要设计和开发配合。设计稿出图的时候就要约定输出规格，别等上线了再回头改。",[11,96,97],{},"我们的默认要求是：新建页面提测时，首屏图片总量不超过 500KB，超过就不让上线。",{"title":99,"searchDepth":100,"depth":100,"links":101},"",2,[102,103,104,105,106,107,108],{"id":17,"depth":100,"text":17},{"id":29,"depth":100,"text":30},{"id":42,"depth":100,"text":42},{"id":54,"depth":100,"text":55},{"id":67,"depth":100,"text":67},{"id":79,"depth":100,"text":79},{"id":88,"depth":100,"text":88},null,"技术SEO","2026-08-01","一个站图片总重 3.8 兆，配上 srcset 和图片 CDN 之后降到 1.1 兆。这篇写 sizes 怎么写、格式怎么选，以及高分辨率屏和懒加载的坑。",false,"md",{},true,"\u002Fblog\u002Fresponsive-images-srcset",{"title":5,"description":112},"blog\u002Fresponsive-images-srcset",[121,122,123],"图片优化","srcset","页面体验","0fsMyxB4gSBLh_aRv6MZ7GWGwUkmWzdxNfIxnpDU1Ds",{"id":126,"title":127,"author":6,"body":128,"canonical":109,"category":110,"cover":109,"date":230,"description":231,"draft":113,"extension":114,"keywords":109,"meta":232,"navigation":116,"noindex":113,"ogImage":109,"path":233,"seo":234,"seoDescription":109,"seoTitle":109,"stem":235,"tags":236,"updated":109,"__hash__":240},"blog\u002Fblog\u002Findex-bloat-control.md","索引膨胀：站内 60% 页面不该被收录，怎么控制",{"type":8,"value":129,"toc":221},[130,133,136,139,142,145,148,151,154,157,160,163,166,169,172,175,178,181,184,187,191,194,197,200,203,206,209,212,215,218],[11,131,132],{},"索引膨胀的意思是搜索引擎收录了大量没有搜索价值的页面，占着抓取预算还拉低整站评价。我们给一个 8 万页的站做清理，压到 1.2 万页，核心页抓取频次翻倍。",[15,134,135],{"id":135},"什么是索引膨胀",[11,137,138],{},"假设一个站点有 8 万页，其中真正有搜索需求、能带来访问的只有 1 万多页，剩下的是标签页、分页、参数页、重复的产品变体、测试页。",[11,140,141],{},"搜索引擎把这些页面收进索引，不会给你流量，但会占用抓取资源，还会让\"整站质量\"这个判断变差。",[15,143,144],{"id":144},"我们的判断标准",[11,146,147],{},"三个问题，任何一个答案是\"否\"，这个页面就不该被收录：",[11,149,150],{},"第一，用户会不会主动搜这个页面想解决的问题？",[11,152,153],{},"第二，这个页面有没有独立的内容价值，还是只是换个排列组合？",[11,155,156],{},"第三，这个页面有没有内链或者外链指向它？",[11,158,159],{},"三个都过，保留；只过一两个，考虑合并；都不过，挡掉。",[15,161,162],{"id":162},"三类该挡的页面",[11,164,165],{},"第一类，参数和组合页。筛选组合、排序、视图模式，绝大多数没有搜索需求。",[11,167,168],{},"第二类，分页尾部。列表第 20 页之后的页面，用户不会直接搜，也没有独立内容。",[11,170,171],{},"第三类，重复变体。同一产品的不同颜色、不同版本，内容 90% 一样的，合并成一个页面。",[15,173,174],{"id":174},"挡住的方式",[11,176,177],{},"robots.txt 屏蔽：最彻底，页面不会被抓取。适合大量参数页。",[11,179,180],{},"noindex：页面能被抓取，但不进索引。适合需要保留给用户访问、但不想被搜到的页面。",[11,182,183],{},"canonical：页面能被抓取、能被用户访问，权重归到主页面。适合内容重复但都有流量的页面。",[11,185,186],{},"我们一般组合用：参数页用 robots，站内搜索页用 noindex，重复变体用 canonical。",[15,188,190],{"id":189},"一个-8-万页的案例","一个 8 万页的案例",[11,192,193],{},"2025 年 12 月接的一个电商 SaaS 站，8.2 万页，实际有搜索价值的约 1.1 万页。",[11,195,196],{},"我们做了三件事：按上面的标准筛出 6.9 万页不该收录的；参数页 robots 屏蔽、站内搜索页 noindex、重复产品变体合并；sitemap 只保留该收录的 1.2 万页。",[11,198,199],{},"清理用了 6 周。第 8 周看数据：索引量从 7.1 万降到 1.4 万，核心产品页的平均抓取间隔从 11 天降到 4 天，有排名的词从 3800 涨到 6100。",[11,201,202],{},"流量没有掉，反而涨了 18%。因为留下的都是有价值的页面。",[15,204,205],{"id":205},"一个提醒",[11,207,208],{},"别一次全挡。我们一般按 20% 分批，每批观察两周，看抓取和流量的变化。一次性清掉几万页，出问题很难回滚。",[11,210,211],{},"还有：挡之前先导出清单，挡之后保留 3 个月，方便回滚。",[15,213,214],{"id":214},"判断",[11,216,217],{},"索引膨胀的本质是\"贪多\"。很多站觉得收录越多越好，其实索引里全是垃圾，比收录少更糟。",[11,219,220],{},"先把页面数量压到和质量匹配，再谈收录增长。",{"title":99,"searchDepth":100,"depth":100,"links":222},[223,224,225,226,227,228,229],{"id":135,"depth":100,"text":135},{"id":144,"depth":100,"text":144},{"id":162,"depth":100,"text":162},{"id":174,"depth":100,"text":174},{"id":189,"depth":100,"text":190},{"id":205,"depth":100,"text":205},{"id":214,"depth":100,"text":214},"2026-07-31","索引膨胀的意思是搜索引擎收录了大量没有搜索价值的页面，占着抓取预算还拉低整站评价。我们给一个 8 万页的站做清理，压到 1.2 万页，核心页抓取频次翻倍。判断标准和三种控制手段都在这篇，照着做能少走弯路。",{},"\u002Fblog\u002Findex-bloat-control",{"title":127,"description":231},"blog\u002Findex-bloat-control",[237,238,239],"索引膨胀","收录控制","站点健康","TW3ejOzTysGNJrXnofPJrsL897_nh4sH9CRFdNem3fs",{"id":242,"title":243,"author":6,"body":244,"canonical":109,"category":346,"cover":109,"date":347,"description":348,"draft":113,"extension":114,"keywords":109,"meta":349,"navigation":116,"noindex":113,"ogImage":109,"path":350,"seo":351,"seoDescription":109,"seoTitle":109,"stem":352,"tags":353,"updated":109,"__hash__":357},"blog\u002Fblog\u002Fcontent-budget-split.md","内容预算怎么分：写手、工具、外包、试验的比例",{"type":8,"value":245,"toc":337},[246,249,252,255,258,261,264,267,271,274,277,280,284,287,290,294,297,300,303,307,310,313,316,319,322,325,328,331,334],[11,247,248],{},"内容预算不是\"有多少钱写多少稿\"。2026 年 1 月开始我们按 5:2:2:1 分：写手和编辑一半、工具和数据两成、外部合作两成、试验一成。",[15,250,251],{"id":251},"我们的分配比例",[11,253,254],{},"写手和编辑：50%。这是内容质量的根本，钱花在人身上最值。",[11,256,257],{},"工具和数据：20%。关键词工具、监测工具、数据购买、图表制作。",[11,259,260],{},"外部合作：20%。行业媒体投稿、专家约稿、联合内容、设计外包。",[11,262,263],{},"试验：10%。新渠道、新内容形式、新工具，允许失败。",[11,265,266],{},"这个比例不是死的，按阶段调。早期团队写手比例可以到 60%，成熟期外部合作可以到 30%。",[15,268,270],{"id":269},"写手这-50-怎么花","写手这 50% 怎么花",[11,272,273],{},"我们的经验：宁可少写，也要写好的。一篇 4000 字的深度内容，成本可能是一篇 1500 字水文的三倍，但带来的流量和引用是十倍。",[11,275,276],{},"具体分法：70% 给自有写手或长期合作的自由写手，30% 给专家约稿（行业专家、客户、技术负责人）。",[11,278,279],{},"专家稿贵，但信息增益高，值。",[15,281,283],{"id":282},"工具这-20-怎么花","工具这 20% 怎么花",[11,285,286],{},"别买一堆工具。我们只保留三类：关键词和竞品数据、排名和流量监测、内容管理和协作。",[11,288,289],{},"工具预算超了，先砍\"看起来有用但没人用\"的。我们每年清理一次工具，平均能砍掉 30% 的订阅。",[15,291,293],{"id":292},"外部合作这-20-怎么花","外部合作这 20% 怎么花",[11,295,296],{},"行业媒体投稿：找 2 到 3 家垂直媒体，长期合作，比广撒网有效。",[11,298,299],{},"联合内容：和互补产品一起做报告、做活动，成本分摊，受众互补。",[11,301,302],{},"设计外包：信息图、报告排版、视频剪辑，这些内部做不划算。",[15,304,306],{"id":305},"试验这-10-怎么花","试验这 10% 怎么花",[11,308,309],{},"每季度选一个试验：新渠道（比如小红书）、新形式（比如视频）、新工具。",[11,311,312],{},"试验的规矩：给明确的预算上限和时间上限，到期看数据，不行就停。",[11,314,315],{},"我们 2025 年的试验里，视频失败了，播客失败了，行业报告成功了。成功率不高，但成功的那个回报很大。",[15,317,318],{"id":318},"一个失败的分配",[11,320,321],{},"2025 年有个客户，预算 70% 花在写手，20% 买工具，10% 做外部合作，试验为 0。",[11,323,324],{},"结果：内容量上去了，但渠道单一，全是自然搜索；没有外部合作，外链和品牌曝光起不来；没有试验，错过了一个新渠道的红利期。",[11,326,327],{},"第二年调成 5:2:2:1，同样预算，总曝光涨了 60%。",[15,329,330],{"id":330},"一句判断",[11,332,333],{},"内容预算的核心不是\"分多少\"，是\"别把钱花在不能积累的地方\"。写手和独家数据能积累，一次性的投放不能。这个判断我们用了两年，没变过。这个比例我们每半年复盘一次。",[11,335,336],{},"预算有限的时候，先保写手，再保数据，其他都能砍。",{"title":99,"searchDepth":100,"depth":100,"links":338},[339,340,341,342,343,344,345],{"id":251,"depth":100,"text":251},{"id":269,"depth":100,"text":270},{"id":282,"depth":100,"text":283},{"id":292,"depth":100,"text":293},{"id":305,"depth":100,"text":306},{"id":318,"depth":100,"text":318},{"id":330,"depth":100,"text":330},"内容运营","2026-08-02","内容预算不是“有多少钱写多少稿”。我们按 5:2:2:1 分：写手和编辑一半、工具和数据两成、外部合作两成、试验一成。每块怎么花、什么时候该调、一个失败的分配案例都在这篇，预算有限的团队可以照着调，比例不是死的，按阶段调。",{},"\u002Fblog\u002Fcontent-budget-split",{"title":243,"description":348},"blog\u002Fcontent-budget-split",[354,355,356],"内容预算","内容团队","内容策略","v5f19wku30a6gOTk2AdpsBWE1elXSyCTKeViGJAalT8",1794088103247]