page-speed

@ominou5 · 收录于 1 周前

Page speed optimization guidelines and implementation patterns. Ensures all funnel pages meet Core Web Vitals targets for LCP < 2.5s, FID < 100ms, and CLS < 0.1.

场景页面加载慢性能审计

适合你，如果正在为网页加载速度和用户体验发愁

/ 下载安装

page-speed.skill双击,或拖进 Claude 桌面版 / Cowork,即完成安装↓ .skill ↓ .zip

用别的 agent?下载 .zip 解压,把文件夹放进它的技能目录

Claude Code~/.claude/skills/(项目级 .claude/skills/)

Codex CLI~/.codex/skills/

Cursor自动读取上面两处目录

其他工具见其文档的「skills」目录;两个下载是同一份文件,只是名字不同

/ 通过 npx 安装 校验哈希

npx oh-my-skill add ominou5/funnel-architect-plugin/page-speed

/ 通过 bash 安装

curl -fsSL https://oh-my-skill.com/install.sh | bash -s -- ominou5/funnel-architect-plugin/page-speed

/ 已经装过?验证本机副本,不用重装

npx oh-my-skill verify ominou5/funnel-architect-plugin/page-speed

安装目标可用 --agent / --scope 或 --to 明确指定;省略时只会在唯一已存在的 agent 目录上自动选择,零命中或多命中会停止并提示。content_hash 缺失或不一致均拒装。

67GitHub stars

~711上下文体积 · 单文件

镜像托管

怎么用

技能原文 SKILL.md作者撰写 · MIT · 7c5acf6

Page Speed Optimization

Every funnel page must load fast. Slow pages kill conversions — a 1-second delay reduces conversions by 7%.

Core Web Vitals Targets

| Metric | Target | Impact | |---|---|---| | LCP (Largest Contentful Paint) | < 2.5s | Main content visible | | FID (First Input Delay) | < 100ms | Page is interactive | | CLS (Cumulative Layout Shift) | < 0.1 | No visual jumping | | TTFB (Time to First Byte) | < 800ms | Server responds fast |

Required Optimizations

1. Critical CSS Inlining

Inline above-the-fold CSS directly in <head> to eliminate render-blocking:

<head>
  <style>
    /* Critical: hero, nav, above-fold layout only */
    .hero { /* ... */ }
    .nav { /* ... */ }
    .cta-primary { /* ... */ }
  </style>
  <!-- Defer the rest -->
  <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
  <noscript><link rel="stylesheet" href="styles.css"></noscript>
</head>

2. Image Optimization

<!-- Always include width/height to prevent CLS -->
<img
  src="hero.webp"
  alt="Descriptive alt text"
  width="800"
  height="450"
  loading="lazy"
  decoding="async"
>

<!-- Responsive images with srcset -->
<img
  srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  src="hero-800.webp"
  alt="Descriptive alt text"
  width="800"
  height="450"
  loading="lazy"
>

3. Font Loading

@font-face {
  font-family: 'BrandFont';
  src: url('brand-font.woff2') format('woff2');
  font-display: swap; /* Always include this */
  font-weight: 400;
}

<!-- Preload critical fonts -->
<link rel="preload" href="brand-font.woff2" as="font" type="font/woff2" crossorigin>

4. Script Loading

<!-- Defer non-critical scripts -->
<script defer src="analytics.js"></script>
<script defer src="interactions.js"></script>

<!-- Async for independent scripts -->
<script async src="third-party-widget.js"></script>

<!-- Never do this -->
<!-- <script src="blocking.js"></script> in <head> -->

5. Preconnect to Third Parties

<head>
  <link rel="preconnect" href="https://fonts.googleapis.com">
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  <link rel="preconnect" href="https://www.googletagmanager.com">
</head>

Performance Budget

| Resource | Budget | |---|---| | Total page weight | < 500KB | | HTML | < 50KB | | CSS | < 50KB | | JavaScript | < 100KB | | Images (above fold) | < 200KB | | Fonts | < 100KB | | Third-party scripts | < 50KB |

Quick Audit Checklist

[ ] Viewport meta tag present
[ ] All images have width/height attributes
[ ] Below-fold images use loading="lazy"
[ ] No render-blocking scripts in <head>
[ ] font-display: swap on all @font-face
[ ] Critical CSS inlined
[ ] Third-party origins preconnected
[ ] No unused CSS/JS shipped
[ ] Images in WebP/AVIF format
[ ] Total page weight under 500KB

按 MIT 许可原样转载,未经改动 · 在 GitHub 查看 →

登录即可评论;带「已验证安装」的,是发布者名下有本店的安装或持有记录。

…