网站速度审计工具 - 深度分析核心网页指标，优化LCP、CLS、INP性能

audit-speed by calm-north/seojuice-skills

1,200 周安装量

3 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/calm-north/seojuice-skills --skill audit-speed

开发监控 SEO

🇨🇳中文介绍

审计速度

通过根源分析树和资源优化建议，深度审计核心网页指标。

核心网页指标阈值

指标	良好	需要改进	较差
LCP (最大内容绘制)	< 2.5秒	2.5秒 - 4.0秒	> 4.0秒
CLS (累积布局偏移)	< 0.1	0.1 - 0.25	> 0.25
INP (下次绘制交互)	< 200毫秒	200毫秒 - 500毫秒	> 500毫秒
FCP (首次内容绘制)	< 1.8秒	1.8秒 - 3.0秒	> 3.0秒
TTFB (首字节时间)	< 800毫秒	800毫秒 - 1800毫秒	> 1800毫秒

开始之前

收集以下背景信息：

哪些页面？ 首页、关键着陆页或特定的慢速页面。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

705,000 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

245,300 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

196,800 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

128,699 周安装

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

当前得分。 如果用户有 Lighthouse 或 PageSpeed Insights 数据，可以从此开始。

技术栈。 CMS、框架、托管服务——这决定了哪些优化方案可用。

已知限制。 无法移除的第三方脚本、限制优化的设计要求。

如果没有可用数据，建议在关键 URL 上运行 Google PageSpeed Insights。

LCP 衡量最大可见元素完成渲染的时间。诊断方法：

TTFB 是否过慢（> 800毫秒）？

→ 服务器响应时间问题
检查：托管质量、CDN 配置、数据库查询、服务端渲染时间
修复：升级托管服务、添加 CDN、优化服务端代码、启用缓存

LCP 元素是否为图像？

→ 图像优化问题
检查：图像格式（使用 WebP/AVIF）、图像尺寸（提供响应式尺寸）、LCP 图像是否启用了懒加载（不应启用懒加载）
修复：转换为现代格式、添加 width/height 属性、在 LCP 图像上使用 fetchpriority="high"、预加载 LCP 图像

LCP 元素是否为文本？

→ 字体加载问题
检查：自定义字体是否阻塞渲染、字体文件大小、字体显示策略
修复：使用 font-display: swap 或 optional、预加载关键字体、对字体进行子集化以仅包含使用的字符

渲染阻塞的 CSS/JS 是否延迟了 LCP？

检查：<head> 中的大型 CSS 文件、内容前的同步 JS
修复：内联关键 CSS、延迟非关键 CSS、异步/延迟 JS

CLS 衡量意外的布局偏移。诊断方法：

图像/视频是否缺少尺寸？

→ 浏览器无法在加载前预留空间
修复：为所有 <img> 和 <video> 元素添加 width 和 height 属性，使用 CSS aspect-ratio

广告或嵌入内容是否注入内容？

→ 动态内容将现有内容向下推
修复：为广告位预留空间（使用 min-height），对懒加载内容使用 contain-intrinsic-size

字体是否导致文本回流？

→ FOUT（无样式文本闪烁）在自定义字体加载时导致布局偏移
修复：使用 font-display: optional（不交换 = 无偏移），或匹配备用字体指标

动态内容是否插入到首屏？

→ 横幅、Cookie 通知、通知推送内容
修复：使用覆盖层而非内联插入，或使用固定高度的容器预留空间

INP 衡量对用户交互的响应能力。诊断方法：

主线程是否被长任务阻塞？

检查：JavaScript 执行时间、第三方脚本、大型 DOM
修复：使用 requestIdleCallback 或 setTimeout 拆分长任务、代码分割重型模块

事件处理程序是否执行繁重的同步工作？

检查：触发大型 DOM 更新的点击处理程序、每次按键触发的表单验证
修复：对输入进行防抖处理、使用 requestAnimationFrame 进行视觉更新、将工作卸载到 Web Worker

第三方脚本是否在主线程上竞争？

检查：分析工具、聊天小部件、A/B 测试工具、社交嵌入
修复：延迟加载直到交互后、对嵌入内容使用 loading="lazy"、考虑移除低价值脚本

分解总页面权重：

资源类型	大小	评估	操作
HTML	[x] KB	[ok/large]	压缩、减少内联样式/脚本
CSS	[x] KB	[ok/large]	移除未使用的 CSS、压缩、提取关键 CSS
JavaScript	[x] KB	[ok/large]	代码分割、摇树优化、延迟非关键脚本
图像	[x] KB	[ok/large]	现代格式、响应式尺寸、首屏外懒加载
字体	[x] KB	[ok/large]	子集化、限制字体家族/字重、预加载关键字体
第三方	[x] KB	[ok/large]	审计必要性、延迟加载、如有可能则自托管

总页面权重低于 1.5 MB 为良好
大多数网站的 JavaScript 低于 300 KB（压缩后）
CSS 低于 100 KB（压缩后）
第一方字体低于 100 KB

速度审计：[URL 或域名]

核心网页指标

指标	值	评级	根本原因
LCP	[值]	良好 / 需要改进 / 较差	[已识别的原因]
CLS	[值]	...	...
INP	[值]	...	...
FCP	[值]	...	...
TTFB	[值]	...	...

资源分解 [来自资源分析的表格]

针对每个未达标的指标，按影响程度排序：

[指标]: [根本原因]
- 当前值: [值]
- 目标值: [阈值]
- 修复: [具体操作]
- 预估影响: [高/中/低]
...

快速优化 列出需要最少努力的优化措施：

为图像添加 width/height
在 LCP 图像上设置 fetchpriority="high"
延迟非关键 JavaScript
...

专业提示： 使用免费的 CWV 影响计算器来估算修复核心网页指标对流量产生的影响，并使用关键 CSS 生成器来提取首屏 CSS。SEOKuice MCP 用户可以运行 /seojuice:page-audit [domain] [url] 来获取即时 CWV 得分、Lighthouse 数据和资源分解。

🇺🇸English

Audit Speed

Deep Core Web Vitals audit with root-cause analysis trees and resource optimization recommendations.

Core Web Vitals Thresholds

Metric	Good	Needs Improvement	Poor
LCP (Largest Contentful Paint)	< 2.5s	2.5s - 4.0s	> 4.0s
CLS (Cumulative Layout Shift)	< 0.1	0.1 - 0.25	> 0.25
INP (Interaction to Next Paint)	< 200ms	200ms - 500ms	> 500ms
FCP (First Contentful Paint)	< 1.8s	1.8s - 3.0s	> 3.0s
TTFB (Time to First Byte)	< 800ms	800ms - 1800ms	> 1800ms

Before You Start

Gather this context:

Which pages? Homepage, key landing pages, or specific slow pages.
Current scores. If the user has Lighthouse or PageSpeed Insights data, start there.
Tech stack. CMS, framework, hosting — this determines which optimizations are available.
Known constraints. Third-party scripts they can't remove, design requirements that limit optimization.

If no data is available, suggest running Google PageSpeed Insights on the key URLs.

LCP Root-Cause Tree

LCP measures when the largest visible element finishes rendering. Diagnose:

Is TTFB slow ( > 800ms)?

→ Server response time issue
Check: hosting quality, CDN configuration, database queries, server-side rendering time
Fix: upgrade hosting, add CDN, optimize server-side code, enable caching

Is the LCP element an image?

→ Image optimization issue
Check: image format (use WebP/AVIF), image size (serve responsive sizes), lazy loading on LCP image (should NOT be lazy loaded)
Fix: convert to modern formats, add width/height attributes, use fetchpriority="high" on LCP image, preload the LCP image

Is the LCP element text?

→ Font loading issue
Check: custom fonts blocking render, font file size, font-display strategy
Fix: use font-display: swap or optional, preload critical fonts, subset fonts to used characters

Is render-blocking CSS/JS delaying the LCP?

Check: large CSS files in <head>, synchronous JS before content
Fix: inline critical CSS, defer non-critical CSS, async/defer JS

CLS Root-Cause Tree

CLS measures unexpected layout shifts. Diagnose:

Do images/videos lack dimensions?

→ Browser can't reserve space before loading
Fix: add width and height attributes to all <img> and <video> elements, use CSS aspect-ratio

Do ads or embeds inject content?

→ Dynamic content pushing existing content down
Fix: reserve space for ad slots with min-height, use contain-intrinsic-size for lazy content

Do fonts cause text reflow?

→ FOUT (Flash of Unstyled Text) causes layout shift when custom font loads
Fix: use font-display: optional (no swap = no shift), or match fallback font metrics

Does dynamic content insert above the fold?

→ Banners, cookie notices, notifications pushing content
Fix: use overlays instead of inline insertions, or reserve space with fixed-height containers

INP Root-Cause Tree

INP measures responsiveness to user interactions. Diagnose:

Is the main thread blocked by long tasks?

Check: JavaScript execution time, third-party scripts, large DOM
Fix: break long tasks with requestIdleCallback or setTimeout, code-split heavy modules

Do event handlers do heavy synchronous work?

Check: click handlers that trigger large DOM updates, form validation on every keystroke
Fix: debounce inputs, use requestAnimationFrame for visual updates, offload work to web workers

Are third-party scripts competing for the main thread?

Check: analytics, chat widgets, A/B testing tools, social embeds
Fix: defer loading until after interaction, use loading="lazy" for embeds, consider removing low-value scripts

Resource Analysis

Break down the total page weight:

Resource Type	Size	Assessment	Action
HTML	[x] KB	[ok/large]	Compress, reduce inline styles/scripts
CSS	[x] KB	[ok/large]	Remove unused CSS, minify, critical CSS extraction
JavaScript	[x] KB	[ok/large]	Code-split, tree-shake, defer non-critical
Images	[x] KB	[ok/large]	Modern formats, responsive sizes, lazy load below fold
Fonts	[x] KB	[ok/large]	Subset, limit families/weights, preload critical
Third-party	[x] KB	[ok/large]	Audit necessity, defer, self-host if possible

Benchmarks:

Total page weight under 1.5 MB is good
JavaScript under 300 KB (compressed) for most sites
CSS under 100 KB (compressed)
First-party fonts under 100 KB

Output Format

Speed Audit: [URL or domain]

Core Web Vitals

Metric	Value	Rating	Root Cause
LCP	[value]	Good / Needs Improvement / Poor	[identified cause]
CLS	[value]	...	...
INP	[value]	...	...
FCP	[value]	...	...
TTFB	[value]	...	...

Resource Breakdown [Table from Resource Analysis]

Priority Fixes

For each failing metric, ordered by impact:

[Metric]: [Root cause]
- Current: [value]
- Target: [threshold]
- Fix: [specific action]
- Estimated impact: [high/medium/low]
...

Quick Wins List optimizations that require minimal effort:

Add width/height to images
Set fetchpriority="high" on LCP image
Defer non-critical JavaScript
...

Pro Tip: Use the free CWV Impact Calculator to estimate the traffic impact of fixing Core Web Vitals, and the Critical CSS Generator to extract above-the-fold CSS. SEOJuice MCP users can run /seojuice:page-audit [domain] [url] for instant CWV scores, Lighthouse data, and resource breakdowns.

Weekly Installs

1.1K

Repository

calm-north/seoj…e-skills

GitHub Stars

First Seen

11 days ago

Security Audits

Gen Agent Trust HubPass SocketPass SnykPass

Installed on

claude-code146

codex140

antigravity127

cursor79

opencode76

github-copilot76