核心网页指标阈值

核心网页指标是衡量网页性能最重要的三个指标：

目标：确保所有核心网页指标的第 75 百分位数处于“良好”范围。

关键性能指标

实验室指标 (Lighthouse)

1. 首次内容绘制 (FCP)：首次内容渲染完成的时间
2. 最大内容绘制 (LCP)：最大内容元素渲染完成的时间
3. 速度指数：内容视觉显示的速度
4. 累积布局偏移 (CLS)：视觉稳定性度量
5. 总阻塞时间 (TBT)：FCP 和 TTI 之间阻塞时间的总和
6. 可交互时间 (TTI)：页面完全可交互的时间

现场指标 (CrUX)

• FCP：来自真实用户的首次内容绘制
• LCP：来自真实用户的最大内容绘制
• CLS：来自真实用户的累积布局偏移
• INP：下次绘制交互时间 (取代 FID)
• TTFB：首字节时间 (实验性)

常见性能问题与解决方案

❌ 不良实践：未优化的图像

问题：图像未经压缩、未使用现代格式或尺寸不当。

影响：LCP 分数差，页面加载慢。

✅ 解决方案：

• 使用现代图像格式 (WebP, AVIF)
• 使用 srcset 实现响应式图像
• 上传前压缩图像
• 设置明确的宽度/高度以防止 CLS
• 对首屏外图像使用懒加载

<!-- Bad -->
<img src="large-image.jpg" alt="Description" />

<!-- Good -->
<img
  src="image.webp"
  srcset="image-small.webp 400w, image-medium.webp 800w, image-large.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px"
  width="1200"
  height="800"
  alt="Description"
  loading="lazy"
/>

❌ 不良实践：渲染阻塞资源

问题：CSS 和 JavaScript 阻塞初始渲染。

影响：FCP 和 LCP 分数差。

✅ 解决方案：

• 延迟非关键 CSS
• 内联关键 CSS
• 对 JavaScript 使用 async 或 defer
• 移除未使用的 CSS/JS
• 拆分代码并懒加载路由

<!-- Bad -->
<link rel="stylesheet" href="styles.css" />
<script src="app.js"></script>

<!-- Good -->
<link
  rel="stylesheet"
  href="styles.css"
  media="print"
  onload="this.media='all'"
/>
<link rel="preload" href="critical.css" as="style" />
<script src="app.js" defer></script>

❌ 不良实践：缺少资源提示

问题：未预连接到重要源或预取关键资源。

影响：TTFB 和 LCP 慢。

✅ 解决方案：

• 对第三方源使用 rel="preconnect"
• 对 DNS 解析使用 rel="dns-prefetch"
• 对关键资源使用 rel="preload"
• 对可能的下页资源使用 rel="prefetch"

<!-- Good -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="dns-prefetch" href="https://api.example.com" />
<link rel="preload" href="hero-image.webp" as="image" />

❌ 不良实践：布局偏移 (CLS)

问题：页面加载期间内容发生偏移。

影响：CLS 分数差，用户体验不佳。

✅ 解决方案：

• 为图像和视频设置明确的尺寸
• 为广告和嵌入内容预留空间
• 避免在现有内容上方插入内容
• 对响应式容器使用 CSS aspect-ratio
• 优先使用变换动画而非触发布局的属性

/* Bad */
.image-container {
  width: 100%;
  /* height not set - causes CLS */
}

/* Good */
.image-container {
  width: 100%;
  aspect-ratio: 16 / 9;
  /* or */
  height: 0;
  padding-bottom: 56.25%; /* 16:9 ratio */
}

❌ 不良实践：大型 JavaScript 包

问题：加载不必要的 JavaScript 代码。

影响：TTI 差，TBT 高。

✅ 解决方案：

• 代码拆分和懒加载
• 移除未使用的代码 (tree shaking)
• 最小化并压缩 JavaScript
• 对路由使用动态导入
• 尽可能避免使用大型第三方库

// Bad - loading everything upfront
import { heavyLibrary } from "./heavy-library";

// Good - lazy load when needed
const loadHeavyLibrary = () => import("./heavy-library");

❌ 不良实践：低效的字体加载

问题：字体导致 FOIT（文本不可见闪烁）或 FOUT（无样式文本闪烁）。

影响：FCP 差，布局偏移。

✅ 解决方案：

• 使用 font-display: swap 或 optional
• 预加载关键字体
• 对字体进行子集化，仅包含所需字符
• 尽可能使用系统字体

/* Good */
@font-face {
  font-family: "CustomFont";
  src: url("font.woff2") format("woff2");
  font-display: swap; /* or optional */
}

❌ 不良实践：无缓存策略

问题：资源未缓存，导致重复下载。

影响：重复访问慢，性能差。

✅ 解决方案：

• 设置适当的 Cache-Control 标头
• 使用 service workers 进行离线缓存
• 对关键资源实施 HTTP/2 服务器推送
• 对静态资源使用 CDN

Cache-Control: public, max-age=31536000, immutable

❌ 不良实践：第三方脚本阻塞渲染

问题：分析、广告或小部件阻塞页面加载。

影响：TTI 差，TBT 高。

✅ 解决方案：

• 异步加载第三方脚本
• 延迟非关键的第三方代码
• 对外部链接使用 rel="noopener"
• 尽可能考虑自托管分析

<!-- Good -->
<script async src="https://www.google-analytics.com/analytics.js"></script>

可访问性最佳实践

❌ 不良实践：缺少替代文本

问题：图像没有描述性的 alt 属性。

影响：可访问性分数差。

✅ 解决方案：始终提供有意义的替代文本。

<!-- Bad -->
<img src="chart.png" />

<!-- Good -->
<img src="chart.png" alt="Sales increased 25% from Q1 to Q2" />

❌ 不良实践：色彩对比度差

问题：由于对比度低导致文本不可读。

影响：可访问性分数差。

✅ 解决方案：确保普通文本的对比度至少为 4.5:1，大文本至少为 3:1。

❌ 不良实践：缺少 ARIA 标签

问题：交互式元素没有适当的标签。

影响：可访问性分数差。

✅ 解决方案：为屏幕阅读器使用 ARIA 标签。

<!-- Good -->
<button aria-label="Close dialog">×</button>

SEO 最佳实践

❌ 不良实践：缺少元标签

问题：没有标题、描述或视口元标签。

影响：SEO 分数差。

✅ 解决方案：包含必要的元标签。

<!-- Good -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Page description" />
<title>Page Title</title>

❌ 不良实践：非描述性链接

问题：链接文本是通用的，如“点击这里”。

影响：SEO 分数差。

✅ 解决方案：使用描述性链接文本。

<!-- Bad -->
<a href="/about">Click here</a>

<!-- Good -->
<a href="/about">Learn more about our company</a>

最佳实践清单

性能

• 图像已优化 (WebP/AVIF, 压缩, 响应式)
• 关键 CSS 已内联
• 非关键 CSS 已延迟
• JavaScript 代码已拆分并懒加载
• 渲染阻塞资源已最小化
• 资源提示已实施 (preconnect, preload, dns-prefetch)
• 字体已通过 font-display 优化
• 缓存策略已实施
• 第三方脚本已异步加载
• 布局偏移已预防 (明确尺寸, aspect-ratio)

核心网页指标

• LCP < 2.5 秒 (第 75 百分位数)
• FCP < 1.8 秒 (第 75 百分位数)
• CLS < 0.1 (第 75 百分位数)
• INP < 200 毫秒 (第 75 百分位数)
• TTFB < 800 毫秒 (第 75 百分位数)

可访问性

• 所有图像都有替代文本
• 色彩对比度符合 WCAG 标准
• 交互式元素有 ARIA 标签
• 使用了语义化 HTML
• 支持键盘导航

SEO

• 存在元标签 (标题, 描述, 视口)
• 描述性链接文本
• 正确的标题层次结构 (h1-h6)
• 已实施结构化数据
• 移动友好设计

审计工作流程

为 PageSpeed 优化审计页面时：

1. 分析当前状态

   • 检查当前 PageSpeed 分数
   • 识别核心网页指标
   • 审查实验室和现场数据的差异

2. 识别问题

   • 列出所有性能问题
   • 按影响优先级排序 (核心网页指标优先)
   • 按类型分类 (图像, JS, CSS 等)

3. 提供解决方案

   • 建议具体的优化措施
   • 提供代码示例
   • 解释预期的改进

4. 验证改进

   • 更改后重新测试
   • 确保分数达到 90+
   • 确认核心网页指标为“良好”

需要避免的常见错误

❌ 只关注实验室数据

问题：仅针对 Lighthouse 分数进行优化，不考虑真实用户数据。

✅ 解决方案：平衡实验室和现场数据。现场数据显示真实世界的性能。

❌ 过度优化

问题：一次性实施过多优化，使调试变得困难。

✅ 解决方案：进行增量更改，并在每次优化后进行测试。

❌ 忽略移动端性能

问题：仅针对桌面端进行优化。

✅ 解决方案：采用移动优先方法。大多数用户使用移动设备。

❌ 更改后不进行测试

问题：假设优化有效而未经验证。

✅ 解决方案：实施更改后始终重新运行 PageSpeed Insights。

性能优化优先级

1. 关键路径：优化初始渲染所需的资源
2. 核心网页指标：首先关注 LCP、CLS 和 INP
3. 渲染阻塞：消除阻塞的 CSS 和 JS
4. 图像：优化最大内容绘制元素
5. 第三方：最小化外部脚本的影响
6. 缓存：实施适当的缓存策略

额外资源

• reference.md — 官方 PageSpeed、Lighthouse、核心网页指标、优化指南 — 可索引
• 官方：https://developers.google.com/speed/docs/insights/v5/about?hl=es-419
• PageSpeed Insights：https://pagespeed.web.dev/
• Lighthouse：内置于 Chrome DevTools
• Web Vitals：https://web.dev/vitals/

规范参考

此技能基于 Google Developers 的官方 PageSpeed Insights 文档。

此技能中的所有阈值、指标和最佳实践均遵循官方 PageSpeed Insights 指南和核心网页指标规范。完整文档请参阅 官方 PageSpeed Insights 文档。

每周安装数

235

仓库

enderpuentes/ai…t-skills

首次出现

2026年2月4日

安全审计

Gen Agent Trust HubPassSocketPassSnykPass

安装于

codex226

opencode226

gemini-cli223

github-copilot221

amp216

kimi-cli216

Target : Always aim for scores of 90 or higher in all categories.

Core Web Vitals Thresholds

Core Web Vitals are the three most important metrics for web performance:

Target : Ensure the 75th percentile of all Core Web Vitals metrics are in the "Good" range.

Key Performance Metrics

Lab Metrics (Lighthouse)

1. First Contentful Paint (FCP) : Time until first content is rendered
2. Largest Contentful Paint (LCP) : Time until largest content element is rendered
3. Speed Index : How quickly content is visually displayed
4. Cumulative Layout Shift (CLS) : Visual stability measure
5. Total Blocking Time (TBT) : Sum of blocking time between FCP and TTI
6. Time to Interactive (TTI) : Time until page is fully interactive

Field Metrics (CrUX)

• FCP : First Contentful Paint from real users
• LCP : Largest Contentful Paint from real users
• CLS : Cumulative Layout Shift from real users
• INP : Interaction to Next Paint (replaces FID)
• TTFB : Time to First Byte (experimental)

Common Performance Issues & Solutions

❌ Bad Practice: Unoptimized Images

Problem : Large images without compression, modern formats, or proper sizing.

Impact : Poor LCP scores, slow page loads.

✅ Solutions :

• Use modern image formats (WebP, AVIF)

• Implement responsive images with srcset

• Compress images before uploading

• Set explicit width/height to prevent CLS

• Use lazy loading for below-the-fold images

  <!-- Bad --> <img src="large-image.jpg" alt="Description" /> <!-- Good -->

  <img src="image.webp" srcset="image-small.webp 400w, image-medium.webp 800w, image-large.webp 1200w" sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1200px" width="1200" height="800" alt="Description" loading="lazy" />

❌ Bad Practice: Render-Blocking Resources

Problem : CSS and JavaScript blocking initial render.

Impact : Poor FCP and LCP scores.

✅ Solutions :

• Defer non-critical CSS

• Inline critical CSS

• Use async or defer for JavaScript

• Remove unused CSS/JS

• Split code and lazy load routes

  <!-- Bad --> <link rel="stylesheet" href="styles.css" /> <script src="app.js"></script> <!-- Good --> <link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'" /> <link rel="preload" href="critical.css" as="style" /> <script src="app.js" defer></script>

❌ Bad Practice: Missing Resource Hints

Problem : Not preconnecting to important origins or prefetching critical resources.

Impact : Slow TTFB and LCP.

✅ Solutions :

• Use rel="preconnect" for third-party origins

• Use rel="dns-prefetch" for DNS resolution

• Use rel="preload" for critical resources

• Use rel="prefetch" for likely next-page resources

  <!-- Good --> <link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="dns-prefetch" href="https://api.example.com" /> <link rel="preload" href="hero-image.webp" as="image" />

❌ Bad Practice: Layout Shift (CLS)

Problem : Content shifting during page load.

Impact : Poor CLS scores, bad user experience.

✅ Solutions :

• Set explicit dimensions for images and videos

• Reserve space for ads and embeds

• Avoid inserting content above existing content

• Use CSS aspect-ratio for responsive containers

• Prefer transform animations over layout-triggering properties

  /* Bad / .image-container { width: 100%; / height not set - causes CLS */ }

  /* Good / .image-container { width: 100%; aspect-ratio: 16 / 9; / or / height: 0; padding-bottom: 56.25%; / 16:9 ratio */ }

❌ Bad Practice: Large JavaScript Bundles

Problem : Loading unnecessary JavaScript code.

Impact : Poor TTI, high TBT.

✅ Solutions :

• Code splitting and lazy loading

• Remove unused code (tree shaking)

• Minimize and compress JavaScript

• Use dynamic imports for routes

• Avoid large third-party libraries when possible

  // Bad - loading everything upfront import { heavyLibrary } from "./heavy-library";

  // Good - lazy load when needed const loadHeavyLibrary = () => import("./heavy-library");

❌ Bad Practice: Inefficient Font Loading

Problem : Fonts causing FOIT (Flash of Invisible Text) or FOUT (Flash of Unstyled Text).

Impact : Poor FCP, layout shifts.

✅ Solutions :

• Use font-display: swap or optional

• Preload critical fonts

• Subset fonts to include only needed characters

• Use system fonts when possible

  /* Good / @font-face { font-family: "CustomFont"; src: url("font.woff2") format("woff2"); font-display: swap; / or optional */ }

❌ Bad Practice: No Caching Strategy

Problem : Resources not cached, causing repeated downloads.

Impact : Slow repeat visits, poor performance.

✅ Solutions :

• Set appropriate Cache-Control headers

• Use service workers for offline caching

• Implement HTTP/2 server push for critical resources

• Use CDN for static assets

  Cache-Control: public, max-age=31536000, immutable

❌ Bad Practice: Third-Party Scripts Blocking Render

Problem : Analytics, ads, or widgets blocking page load.

Impact : Poor TTI, high TBT.

✅ Solutions :

• Load third-party scripts asynchronously

• Defer non-critical third-party code

• Use rel="noopener" for external links

• Consider self-hosting analytics when possible

  <!-- Good --> <script async src="https://www.google-analytics.com/analytics.js"></script>

Accessibility Best Practices

❌ Bad Practice: Missing Alt Text

Problem : Images without descriptive alt attributes.

Impact : Poor accessibility score.

✅ Solution : Always provide meaningful alt text.

<!-- Bad -->
<img src="chart.png" />

<!-- Good -->
<img src="chart.png" alt="Sales increased 25% from Q1 to Q2" />

❌ Bad Practice: Poor Color Contrast

Problem : Text not readable due to low contrast.

Impact : Poor accessibility score.

✅ Solution : Ensure contrast ratio of at least 4.5:1 for normal text, 3:1 for large text.

❌ Bad Practice: Missing ARIA Labels

Problem : Interactive elements without proper labels.

Impact : Poor accessibility score.

✅ Solution : Use ARIA labels for screen readers.

<!-- Good -->
<button aria-label="Close dialog">×</button>

SEO Best Practices

❌ Bad Practice: Missing Meta Tags

Problem : No title, description, or viewport meta tags.

Impact : Poor SEO score.

✅ Solution : Include essential meta tags.

<!-- Good -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="Page description" />
<title>Page Title</title>

❌ Bad Practice: Non-Descriptive Links

Problem : Links with generic text like "click here".

Impact : Poor SEO score.

✅ Solution : Use descriptive link text.

<!-- Bad -->
<a href="/about">Click here</a>

<!-- Good -->
<a href="/about">Learn more about our company</a>

Best Practices Checklist

Performance

• Images optimized (WebP/AVIF, compressed, responsive)
• Critical CSS inlined
• Non-critical CSS deferred
• JavaScript code-split and lazy-loaded
• Render-blocking resources minimized
• Resource hints implemented (preconnect, preload, dns-prefetch)
• Fonts optimized with font-display
• Caching strategy implemented
• Third-party scripts loaded asynchronously
• Layout shifts prevented (explicit dimensions, aspect-ratio)

Core Web Vitals

• LCP < 2.5 seconds (75th percentile)
• FCP < 1.8 seconds (75th percentile)
• CLS < 0.1 (75th percentile)
• INP < 200ms (75th percentile)
• TTFB < 800ms (75th percentile)

Accessibility

• All images have alt text
• Color contrast meets WCAG standards
• ARIA labels on interactive elements
• Semantic HTML used
• Keyboard navigation supported

SEO

• Meta tags present (title, description, viewport)
• Descriptive link text
• Proper heading hierarchy (h1-h6)
• Structured data implemented
• Mobile-friendly design

Audit Workflow

When auditing a page for PageSpeed optimization:

1. Analyze Current State

   • Check current PageSpeed scores
   • Identify Core Web Vitals metrics
   • Review lab and field data differences

2. Identify Issues

   • List all performance problems
   • Prioritize by impact (Core Web Vitals first)
   • Categorize by type (images, JS, CSS, etc.)

3. Provide Solutions

   • Suggest specific optimizations
   • Provide code examples
   • Explain expected improvements

4. Verify Improvements

   • Re-test after changes
   • Ensure scores reach 90+
   • Confirm Core Web Vitals are "Good"

Common Mistakes to Avoid

❌ Focusing Only on Lab Data

Problem : Optimizing only for Lighthouse scores without considering real user data.

✅ Solution : Balance both lab and field data. Field data shows real-world performance.

❌ Over-Optimizing

Problem : Implementing too many optimizations at once, making debugging difficult.

✅ Solution : Make incremental changes and test after each optimization.

❌ Ignoring Mobile Performance

Problem : Optimizing only for desktop.

✅ Solution : Mobile-first approach. Most users are on mobile devices.

❌ Not Testing After Changes

Problem : Assuming optimizations worked without verification.

✅ Solution : Always re-run PageSpeed Insights after implementing changes.

Performance Optimization Priority

1. Critical Path : Optimize resources needed for initial render
2. Core Web Vitals : Focus on LCP, CLS, and INP first
3. Render-Blocking : Eliminate blocking CSS and JS
4. Images : Optimize largest contentful paint element
5. Third-Party : Minimize impact of external scripts
6. Caching : Implement proper caching strategies

Additional Resources

• reference.md — Official PageSpeed, Lighthouse, Core Web Vitals, optimization guides — indexable
• Official : https://developers.google.com/speed/docs/insights/v5/about?hl=es-419
• PageSpeed Insights : https://pagespeed.web.dev/
• Lighthouse : Built into Chrome DevTools
• Web Vitals : https://web.dev/vitals/

Specification Reference

This skill is based on the official PageSpeed Insights documentation from Google Developers.

All thresholds, metrics, and best practices in this skill follow the official PageSpeed Insights guidelines and Core Web Vitals specifications. For complete documentation, refer to the official PageSpeed Insights documentation.

Weekly Installs

235

Repository

enderpuentes/ai…t-skills

First Seen

Feb 4, 2026

Security Audits

Gen Agent Trust HubPassSocketPassSnykPass

Installed on

codex226

opencode226

gemini-cli223

github-copilot221

amp216

kimi-cli216