SKILL

web-performance

诊断并修复网站速度问题——核心网页指标（LCP、INP、CLS）、打包体积、图片、字体、缓存和渲染策略——适用于 Next.js、React/Vite、Vue/Nuxt、Astro 和静态站点。当用户说网站很慢、"website lemot"、想要更好的 Lighthouse/PageSpeed 分数、提到核心网页指标、打包体积过大，或正在为网站上线做准备时使用。

机器翻译

查看英文原文

Diagnose and fix website speed — Core Web Vitals (LCP, INP, CLS), bundle size, images, fonts, caching, and rendering strategy — for Next.js, React/Vite, Vue/Nuxt, Astro, and static sites. Use whenever the user says the site is slow, "website lemot", wants a better Lighthouse/PageSpeed score, mentions Core Web Vitals, large bundles, or is preparing a site for launch.

适用对象：React / Next.js。自动收录 · 待核查。

原作者说明节选

从固定版本的 SKILL.md 提取，保留原文语言。以下内容属于作者说明，本站尚未验证安装、兼容或运行结果。

查看英文原文

原文涵盖的主题

Web Performance
1. Measure
2. Fix by metric
3. Re-measure and report

Measure → fix the biggest bottleneck → measure again. Never optimize blind. Production build only (npm run build && npm run start / preview). Dev mode numbers are meaningless. Lighthouse (mobile preset): npx lighthouse --preset=perf --form-factor=mobile --output=json --output-path=./lh.json --chrome-flags="--headless" if Chrome is available; otherwise ask the user to run PageSpeed Insights and paste the result. Bundle: npx vite-bundle-visualizer, ANALYZE=true with @next/bundle-analyzer, or npx source-map-explorer 'dist//.js'. Note the baseline: LCP, INP/TBT, CLS, total JS (gzipped), page weight. Targets: LCP . Remove render-blocking CSS/JS in ; inline critical CSS if needed. Server: use SSG/ISR or cache HTML for pages that don't need per-request data; check TTFB. preconnect to required third-party origins (fonts CDN, API). CLS (layout jumps) width/height or aspect-ratio on every image, video, iframe, ad slot. Fonts: font-display: swap + size-adjusted fallback (next/font does this), or optional. Don't insert banners/content above existing content after load; reserve space. INP (slow interactions) Find long tasks (> 50ms). Break up heavy handlers; defer non-urgent work (requestIdleCa

这里只展示节选，请以完整原文和当前要求为准。

来源仓库: KILN-skills/kiln
源文件: skills/web-performance/SKILL.md
固定版本: 555d7ea59d05910b4ef6fb39780da5f906be832b

阅读完整原作者说明 ↗

准备条件

本条仅收录原作者的技能元数据；请阅读完整说明，确认依赖、许可与使用条件。

第一件可以尝试的小事

先阅读原作者说明，再决定是否在自己的 AI 工具中使用。

对应 AI 工具说明

作者有说明不等于本站实机验证。没有证据时，不自动标为兼容、安全或免费。

来源与内容状态

本条为自动发现的元数据，尚未完成人工文档核查；适用性与运行结果待核查。

原作者：KILN-skills/kiln · 原作者仓库元数据。文档核查：未核查。最近来源检查：2026-11-10T04:00:15.500Z。

分类由名称、说明与路径规则生成，分类不代表已核实适配。

许可与权利归属

MIT。第三方内容及版权归原作者，使用条件以原文为准。

许可原文 ↗

本站没有因同步、复制或用户自报成功而将资源标为运行验证通过。

原作者项目 ↗原始使用说明 ↗

限制与注意事项

元数据收录不代表本站已经安装、适配、实测或进行安全审查。