3万条!important，只有8.7%在盖别人写的样式
做法是把每一条声明连同它所在的选择器一起抓出来，按类名前缀归到九类第三方去。密度一律折算成每千条声明，并且只算声明数超过200条的样式表——那11个零条站的样式表中位只有6KB，是碎片不是主干。
标签
前端性能
保哥笔记 前端性能 标签下共 24 篇文章合集，含《3万条!important，只有8.7%在盖别人写的》《图片SEO换个请求头小37%，但发哪种格式不归你定》《14个不相干的站，发的是同一份给老浏览器的补丁》等，与 技术SEO、网页性能优化、核心网页指标 主题密切相关，覆盖 SEO/GEO 实战角度的深度解析与可落地方案。
-
-
图片SEO换个请求头小37%，但发哪种格式不归你定
测法是三档请求头加一次定宽对照：先把每条地址的尺寸参数统一改成800，再用现代、只认WebP、两样都不认三种身份各要一次。尺子先自查——把通配符去掉重问一遍，那16个站16个照旧。
-
14个不相干的站，发的是同一份给老浏览器的补丁
判据分三层：先看HTML里的nomodule属性，再看文件名里的polyfill与legacy，最后给每份下载到的产物算内容哈希。第三层撞出了意外——同一串哈希在十几个互不相识的品牌站上反复出现。
-
62个站的前端库版本：中位停在四年前，最老的是2011年
做法是三条通道并用：URL路径里写着的版本、打包器留下的banner注释、库自己给版本变量赋的值。上全量之前先拿16份版本已知的官方文件验尺子，命中12份、读错0份，所以所有数字都是下限。
-
localStorage里那15个键，服务器一个也删不掉
做法是每个站开一个全新的浏览器配置，访问首页等9秒，把三处存储连键带值读出来，再带着它回访一次做对照。尺子坏过两回：浏览器自带的用量接口根本不数这块地，报回来的中位是0字节；而第一版那条看起来严丝合缝的因果，把cookie和存储拆开重跑之后就散了。
-
srcset写着1920w，服务器给的是同一张140宽的图
对每张图只取前64KB，从PNG的IHDR、JPEG的SOF段、WebP的VP8X、AVIF的ispe盒子里直接读出真实宽高，再拿它跟srcset的w描述符、width与height属性、地址里的尺寸参数、文件扩展名这四处声明逐条对账；最后把整组srcset的每一档全部下一遍，验它们是不是同一张图。
-
第三方脚本拉进8个域名，只看HTML一个都看不到
对131个海外独立站首页跑三轮：关掉脚本数一次外部域，脚本跑完再数一次，最后把所有第三方请求全部拦断再跑一次，逐项量正文、链接、图片、结构化数据的存活情况。另把462个第三方域按出现频次排开，做两两清单的重合度比对，并与大样本公开分析的筛选口径做了一次对照，附带记下一次因跨域重定向造成的测量翻车。
-
HTTP/2把HTML切成几块，不由服务器一家说了算
量法是自己写客户端：不用现成的HTTP库，直接拿h2协议库完成ALPN协商、发SETTINGS、逐帧记录DATA帧的长度与到达时刻。131个站每站两组设置背靠背各打一次，整套跑两轮，第二轮把两组的先后顺序反过来，用来把设置的作用和请求顺序的作用分开。再在自己的nginx上另起一个独立实例，把三个上限拆成三个独立开关逐一验证。
-
静态资源带上哈希之后，一年后一半地址都404了
做法是从存档站取回2025年8月那份未经改写的原始HTML，把上面的资源地址按归属分好逐条拿到今天请求，同一套代码同时跑一遍今天的首页当零点。尺子坏过一次：存档站在目标日期没有快照时会跳到最近的任意一份，两个站落到了2017年，必须挑出来剔掉。
-
preconnect指着的域名，有8个已经不存在了
把122个海外品牌站首页上的3102条资源提示逐条拆开，跟页面实际加载的资源域名做差集，再把所有第三方主机拿去做域名解析与请求验活，最后用同一批站在两个时间点的快照比对这块配置动没动。文中给出五种提示类型各自的空转率、重复声明的规模与三种成因、字体预加载缺跨域属性的比例、被指得最多的第三方域各自的空转情况、两次快照的变更率，以及一套先删哪些、哪些要先确认、删完怎么验证的完整操作顺序。
-
CSS覆盖率实测：1149个类名里这一页只用上200个
做法是抓首页声明的每一份样式表，把里面定义的类名跟首页加一个内页的类名求交集。尺子改过三次：正则会把url里的文件后缀当类名，而修它的那一刀更狠，反复挖花括号会把整个媒体查询里的选择器一起挖掉。
-
图片压缩工具把135字节的图标压成了560字节，而画质拉满反倒更小
逐项实测这款纯前端压缩工具的四类边界：每张WebP固定要交的色彩配置文件开销、画质滑块最右一格切换编码器的真相、透明通道在JPEG下的归宿，以及最大宽度这个框管不到的那个方向。
-
content-visibility是什么？长列表渲染跳过与CSS隔离的机制实战
长列表页只显示首屏，浏览器却把屏幕外几千个节点全渲染了？content-visibility:auto能让它跳过看不见的部分。本文讲清三个取值、为何必配contain-intrinsic-size，以及会不会影响爬虫和布局稳定。
-
CLS累积布局偏移怎么优化？页面跳动、误触背后的机制与实战
商品页加载时按钮突然下移、用户点错？那多半是CLS在作祟。本文讲清累积布局偏移怎么算分、图片广告字体等五大元凶从哪来，以及用尺寸预留和度量对齐一步步把页面跳动摁进绿区。
-
fetchpriority是什么？浏览器资源优先级和懒加载的机制与实战
浏览器把LCP主图排到很靠后、首屏迟迟不出？多半是资源优先级没调对。本文讲清浏览器默认怎么给资源排队、fetchpriority的high和low各自什么场景，以及懒加载和它怎么配合把首屏提上来。
-
Speculation Rules API是什么？预渲染让站内翻页秒开的机制实战
首屏优化到牙齿，站内翻页却还要白等一秒？Speculation Rules API能趁用户浏览时把下一页整个渲染好。本文讲清它和资源提示的区别、prerender与prefetch怎么选、eagerness四档怎么配，以及统计为何会虚高。
-
关键渲染路径怎么优化？阻塞渲染的CSS和JS拖慢首屏的机制与实战
服务器很快、页面却白屏两秒？瓶颈多半卡在关键渲染路径。本文讲清浏览器从HTML到首屏的五步、CSS和JS为什么阻塞渲染，以及内联关键CSS、defer脚本怎么把首屏提上来。
-
网页字体加载怎么优化？FOIT、FOUT和font-display的机制与实战
海外用户打开站，大标题先空白三秒才蹦出来？那是网页字体在FOIT。本文讲清字体加载的两种翻车形态、font-display五个取值怎么选，以及用度量对齐和子集化做到又快又稳不跳动。
-
每个请求都把同一份Cookie重发一遍，HTTP/2本可以只发一次却没做到
用裸TCP中转实测上行字节：同一条连接连发50个请求，HTTP/1.1发出104KB而HTTP/2只发2.5KB；但Cookie头一过3064字节，倍数从12.46跌到1.43且再也不降，分界线来自HPACK动态表那4096字节。把同样的Cookie拆成两个头字段，上行从22079字节掉回2505字节，这是HTTP/2规范明写允许的做法。另含真实浏览器与无JS客户端的Cookie差距对照。
-
抓取体积检查器怎么用？Googlebot 2MB抓取上限实测全拆解
Googlebot抓页面有体积上限，超了后面的内容直接被截断，而这个上限2026年刚从15MB收紧到2MB。本文拆开一个抓取体积检查器测HTML文档体积、拆成五块成分的逻辑，讲清为什么外部资源不计入这2MB（最大减重杠杆）、超标后内容怎么被悄悄吞掉。
