HLS 不再神秘：猫抓把一堆小 ts 变成一个可用地址
Chrome教程约 5 分钟今天看到个挺有意思的…就是那个，给网页做“体检”的小医生——
Lighthouse（谷歌官方那位）
。 我以前也不太搭理它，直到有天我把它跑了一下，报告里蹦出一排五颜六色的分数：Performance、Accessibility、Best Practices、SEO、PWA…我愣住两秒，“等等，这玩意儿把我站点的毛病全摊桌面上了？”
从那之后，开发/写作/做运营的上网体验，直接像开了“X光模式”。
1）为啥我开始用它？
说白了，被“页面卡、布局跳、找不到问题在哪儿”逼的。 很多站明明视觉挺花哨，打开却一卡一卡，移动端点着点着按钮还会“跑位”。我想搞明白到底是图片太肥、字体太慢、还是脚本在偷吃 CPU。朋友说：“别瞎猜，跑个 Lighthouse 看看。”我装上扩展（或者直接用 DevTools 里的），点一次，报告就把
最大内容绘制 LCP、累积位移 CLS、交互 INP、阻塞时间 TBT
都给我列出来了，还贴心给出“怎么改”的建议。那一刻我才知道，原来性能问题不是玄学，是有指标可抓的。
（对了，顺带一提，它不只给前端看热闹，内容同学/SEO也能用：标题描述、语义结构、可访问性对比度…都能一眼看穿。不过这不是重点。）
2）怎么玩？比想象中还省事
别被“审计”两个字吓到，真的很“傻瓜”：
装好入口
要么装 Lighthouse Chrome 扩展； 要么直接开 Chrome DevTools → Lighthouse 面板（不用额外安装）； 懒得折腾也行，搜“PageSpeed Insights”，输入网址就跑（它底层也是 Lighthouse）。
打开你要测的页面，最好是你想看的那个状态：移动端/桌面端、登录后/文章页/商品详情页…（重点！别测错场景，不然数据没意义。）
点“Analyze / 生成报告”。 可以勾选分类：Performance / Accessibility / Best Practices / SEO / PWA；还能切换 Mobile / Desktop，是否限速、模拟 CPU 降频之类的。
等一会儿，彩色成绩单就出来了。 它会告诉你：
LCP（最大内容绘制）的罪魁祸首是哪张图； CLS（页面跳动）是哪个广告位/懒加载图片惹的祸； INP（交互响应）被哪个监听器或第三方脚本拖慢； 还有可访问性（对比度、alt 文本、ARIA）和 SEO 基础项（title、meta、链接语义）。
照着“Opportunities / 机会”改就行。 比如“预加载关键字体”“压缩图片”“移除阻塞渲染的脚本”“减少未使用的 CSS/JS”。点开每条还能看到大概能省多少毫秒，特别解气。
小技巧顺嘴说：
面板里的“View Trace”可以直接跳到性能火焰图，想深挖的同学会爱上。 跑多次会有波动，想更稳，用 Incognito+禁用扩展 再测一遍，或者把报告导出留存对比。
3）我踩过的坑（人话提醒）
别在没播放/没交互的状态测交互。INP 要有人点点点，它才知道慢不慢；纯静态看不出来。 分数≠业务 KPI。90 分不一定转化高，60 分也不一定没人用。分数是灯，不是目的地。 SPA 只测了“首屏加载”不够。路由切换、懒加载之后的页面也会卡，得用“Start profiling and reload page”或切路由再测。 第三方脚本很会“背刺”。A/B、埋点、广告…本地测得挺快，上线加完脚本开始掉分。把第三方单独关掉对比一下，你会知道谁是元凶。 网络/CPU 模拟不是现实世界。Lighthouse 是实验室（Lab）数据，真用户（RUM）可能更糟或更好。结合线上监控（比如 LCP/CLS/INP 实际采样）一起看。 追 100 分很容易走火入魔。有些建议性条目不该为分数牺牲体验，比如过度懒加载导致用户看不到东西。先把“红→黄→绿”搞定，再考虑“极致”。 PWA 报错不一定是你不会写。缺 manifest、service worker、缓存策略不合理，它都会唠叨。环境不同（子路径/多域名）也会误伤，淡定。
4）使用场景直接封神
性能排查：一键知道“LCP 大图”“阻塞脚本”“未使用的 CSS”，比你闭眼猜快。 可访问性自检：对比度不足、按钮无 label、图片缺 alt，一网打尽，顺手就能修。 SEO 基础体检：title/description 有无、链接语义、robots 可见性…内容同学也能自己过一遍。 PWA 快速验收：manifest 是否齐、Service Worker 缓存命中、可离线程度。 竞品 Benchmark：把你和对手都跑一遍，图一贴，老板自己会懂。 CI 回归：配 Lighthouse CI，发版前捅一刀，分数跌太多直接报警——再也不怕“某次改动把性能打回解放前”。
5）爽点和限制
爽点：
官方工具，一键出报告，还自带“怎么改”的 checklist。 指标对齐现代 Web：LCP/CLS/INP/TBT，说人话、可落地。 可复现（设备/限速/CPU 模拟），适合和团队对齐“同一个现实”。 开源、更新勤，和 DevTools 绑定，装机即用。
限制：
实验室数据，不是所有真实用户；一定要配真实监控。 分数受场景影响很大（广告、登录、地区、A/B），跑一次不算数。 有些建议需要取舍：比如“把 JS 拆更细”会增加请求数；“懒加载一切”会影响可见性。别为分而分。 后端/边缘问题它看不全（比如 TTFB、数据库慢查询），那是另一套工具的活儿。
6）顺手的实战清单（我现在基本照着走）
先用 Mobile 跑一遍（限速+CPU 降频），再跑 Desktop。 锁定 LCP 元素：要么压图、要么预加载、要么上占位/骨架，少让用户等白屏。 把 CLS 弄到绿：给图片/广告位预留宽高，别突然把内容往下拱。 看 INP：给重交互的按钮做 节流/去重绘，避免长任务，必要时把耗时逻辑丢到 Web Worker。 扫 未使用的 JS/CSS：能拆就拆，能懒就懒，第三方脚本延后/按需。 字体： font-display: swap+ 预加载关键字体，别卡在“等字来”。图片：WebP/AVIF、 <img loading="lazy">，大图走 CDN。可访问性：对比度过不去就调色，交互控件要有可见焦点、语义正确。 SEO 基础：唯一的 <h1>、清晰的<title>/<meta description>、语义链接、可索引。PWA：该有的 manifest 字段补齐，Service Worker 策略别太激进（避免脏缓存）。