Provides page speed optimization guidelines and HTML/CSS/JS patterns to meet Core Web Vitals targets (LCP<2.5s, FID<100ms, CLS<0.1) for funnel pages.
npx claudepluginhub ominou5/funnel-architect-pluginThis skill uses the workspace's default tool permissions.
Every funnel page must load fast. Slow pages kill conversions — a 1-second delay reduces conversions by 7%.
Guides optimization of Core Web Vitals (LCP, INP, CLS) for improved page experience and search rankings. Covers diagnostics, thresholds, and fixes for loading, responsiveness, and visual stability.
Conducts web performance audits with Core Web Vitals (LCP, FID, CLS, INP), Lighthouse automation, bottleneck identification, and optimization recommendations for page load times and UX issues.
Audits web page performance measuring Core Web Vitals (LCP, FID, CLS, FCP); identifies bottlenecks and recommends optimizations for speed, UX, and SEO.
Share bugs, ideas, or general feedback.
Every funnel page must load fast. Slow pages kill conversions — a 1-second delay reduces conversions by 7%.
| 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 |
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>
<!-- 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"
>
@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>
<!-- 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> -->
<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>
| Resource | Budget |
|---|---|
| Total page weight | < 500KB |
| HTML | < 50KB |
| CSS | < 50KB |
| JavaScript | < 100KB |
| Images (above fold) | < 200KB |
| Fonts | < 100KB |
| Third-party scripts | < 50KB |
loading="lazy"<head>font-display: swap on all @font-face