home / skills / ominou5 / funnel-architect-plugin / page-speed

page-speed skill

Q: Will inlining critical CSS increase overall page size?

Inlining a small critical CSS subset improves perceived load by removing render blocking; keep it minimal and still defer the full stylesheet to stay within your budget.

Q: How strict should the performance budget be?

Use the provided budget as a baseline (total < 500KB). Tighten budgets for mobile-first funnels and high-traffic campaigns where every millisecond affects conversions.

safe

/skills/page-speed

This skill helps you optimize page speed by enforcing core web vitals targets and practical patterns for inline CSS, images, fonts, and scripts.

npx playbooks add skill ominou5/funnel-architect-plugin --skill page-speed

Review the files below or copy the command above to add this skill to your agents.

Files (1)

SKILL.md

3.2 KB

---
name: page-speed
description: >
  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 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:

```html
<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

```html
<!-- 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

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

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

### 4. Script Loading

```html
<!-- 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

```html
<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

Overview

This skill provides practical page-speed optimization guidelines and implementation patterns to ensure funnel pages meet Core Web Vitals targets (LCP < 2.5s, FID < 100ms, CLS < 0.1). It combines actionable front-end techniques, a performance budget, and a quick audit checklist so every sales funnel loads fast and converts better. The guidance focuses on minimal, high-impact changes that fit into typical landing-page workflows.

How this skill works

The skill inspects and prescribes changes across CSS, images, fonts, scripts, and third-party resources to remove render-blocking work and reduce payload. It recommends inlining critical CSS, optimized responsive images with explicit dimensions, preload and swap font strategies, async/defer script loading, and preconnect hints for external origins. A compact performance budget and a checklist make it easy to measure and enforce targets during development and reviews.

When to use it

Building new landing pages or multi-step funnels where conversion rate matters
Auditing existing funnel pages that fail Core Web Vitals or load slowly
Before launching paid traffic campaigns to maximize return on ad spend
During performance-focused QA sprints or pre-release checks
When migrating templates to new platforms or CMSes

Best practices

Inline only above-the-fold CSS in <head> and defer the rest with preload/onload
Serve responsive images (srcset/sizes) in WebP/AVIF with width/height to avoid CLS
Use font-display: swap and preload critical woff2 fonts with crossorigin where needed
Defer non-critical scripts, async independent widgets, and never block render in <head>
Keep a strict performance budget (total < 500KB; JS < 100KB; CSS < 50KB)
Preconnect to frequent third-party origins and minimize third-party script use

Example use cases

Optimize a product landing page to hit LCP < 2.5s before a high-volume ad campaign
Trim a pricing page by moving analytics and chat widgets off the critical path
Convert hero images to responsive WebP assets with explicit dimensions to eliminate CLS
Set up a build step to extract critical CSS and inject it into the page head
Apply a performance budget to template builds in a headless CMS or static site generator

FAQ

Will inlining critical CSS increase overall page size?

Inlining a small critical CSS subset improves perceived load by removing render blocking; keep it minimal and still defer the full stylesheet to stay within your budget.

How strict should the performance budget be?

Use the provided budget as a baseline (total < 500KB). Tighten budgets for mobile-first funnels and high-traffic campaigns where every millisecond affects conversions.