page-speed
starsforks
How to install page-speed?
ominou5/funnel-architect-plugin/page-speed
$npx -y skills add ominou5/funnel-architect-plugin --skill page-speedPage 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.
SKILL.md
| 1 | # Page Speed Optimization |
| 2 | |
| 3 | Every funnel page must load fast. Slow pages kill conversions — a 1-second delay reduces conversions by 7%. |
| 4 | |
| 5 | ## Core Web Vitals Targets |
| 6 | |
| 7 | | Metric | Target | Impact | |
| 8 | |---|---|---| |
| 9 | | LCP (Largest Contentful Paint) | < 2.5s | Main content visible | |
| 10 | | FID (First Input Delay) | < 100ms | Page is interactive | |
| 11 | | CLS (Cumulative Layout Shift) | < 0.1 | No visual jumping | |
| 12 | | TTFB (Time to First Byte) | < 800ms | Server responds fast | |
| 13 | |
| 14 | ## Required Optimizations |
| 15 | |
| 16 | ### 1. Critical CSS Inlining |
| 17 | |
| 18 | Inline above-the-fold CSS directly in `<head>` to eliminate render-blocking: |
| 19 | |
| 20 | ```html |
| 21 | <head> |
| 22 | <style> |
| 23 | /* Critical: hero, nav, above-fold layout only */ |
| 24 | .hero { /* ... */ } |
| 25 | .nav { /* ... */ } |
| 26 | .cta-primary { /* ... */ } |
| 27 | </style> |
| 28 | <!-- Defer the rest --> |
| 29 | <link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> |
| 30 | <noscript><link rel="stylesheet" href="styles.css"></noscript> |
| 31 | </head> |
| 32 | ``` |
| 33 | |
| 34 | ### 2. Image Optimization |
| 35 | |
| 36 | ```html |
| 37 | <!-- Always include width/height to prevent CLS --> |
| 38 | <img |
| 39 | src="hero.webp" |
| 40 | alt="Descriptive alt text" |
| 41 | width="800" |
| 42 | height="450" |
| 43 | loading="lazy" |
| 44 | decoding="async" |
| 45 | > |
| 46 | |
| 47 | <!-- Responsive images with srcset --> |
| 48 | <img |
| 49 | srcset="hero-400.webp 400w, hero-800.webp 800w, hero-1200.webp 1200w" |
| 50 | sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px" |
| 51 | src="hero-800.webp" |
| 52 | alt="Descriptive alt text" |
| 53 | width="800" |
| 54 | height="450" |
| 55 | loading="lazy" |
| 56 | > |
| 57 | ``` |
| 58 | |
| 59 | ### 3. Font Loading |
| 60 | |
| 61 | ```css |
| 62 | @font-face { |
| 63 | font-family: 'BrandFont'; |
| 64 | src: url('brand-font.woff2') format('woff2'); |
| 65 | font-display: swap; /* Always include this */ |
| 66 | font-weight: 400; |
| 67 | } |
| 68 | ``` |
| 69 | |
| 70 | ```html |
| 71 | <!-- Preload critical fonts --> |
| 72 | <link rel="preload" href="brand-font.woff2" as="font" type="font/woff2" crossorigin> |
| 73 | ``` |
| 74 | |
| 75 | ### 4. Script Loading |
| 76 | |
| 77 | ```html |
| 78 | <!-- Defer non-critical scripts --> |
| 79 | <script defer src="analytics.js"></script> |
| 80 | <script defer src="interactions.js"></script> |
| 81 | |
| 82 | <!-- Async for independent scripts --> |
| 83 | <script async src="third-party-widget.js"></script> |
| 84 | |
| 85 | <!-- Never do this --> |
| 86 | <!-- <script src="blocking.js"></script> in <head> --> |
| 87 | ``` |
| 88 | |
| 89 | ### 5. Preconnect to Third Parties |
| 90 | |
| 91 | ```html |
| 92 | <head> |
| 93 | <link rel="preconnect" href="https://fonts.googleapis.com"> |
| 94 | <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> |
| 95 | <link rel="preconnect" href="https://www.googletagmanager.com"> |
| 96 | </head> |
| 97 | ``` |
| 98 | |
| 99 | ## Performance Budget |
| 100 | |
| 101 | | Resource | Budget | |
| 102 | |---|---| |
| 103 | | Total page weight | < 500KB | |
| 104 | | HTML | < 50KB | |
| 105 | | CSS | < 50KB | |
| 106 | | JavaScript | < 100KB | |
| 107 | | Images (above fold) | < 200KB | |
| 108 | | Fonts | < 100KB | |
| 109 | | Third-party scripts | < 50KB | |
| 110 | |
| 111 | ## Quick Audit Checklist |
| 112 | |
| 113 | - [ ] Viewport meta tag present |
| 114 | - [ ] All images have width/height attributes |
| 115 | - [ ] Below-fold images use `loading="lazy"` |
| 116 | - [ ] No render-blocking scripts in `<head>` |
| 117 | - [ ] `font-display: swap` on all @font-face |
| 118 | - [ ] Critical CSS inlined |
| 119 | - [ ] Third-party origins preconnected |
| 120 | - [ ] No unused CSS/JS shipped |
| 121 | - [ ] Images in WebP/AVIF format |
| 122 | - [ ] Total page weight under 500KB |
People who liked this also viewed
6 picksType
- seo-auditWhen the user wants to audit, review, or diagnose SEO issues on their site. Also use when the user mentions "SEO audit," "technical SEO," "why am I not ranking," "SEO issues," "on-page SEO," "meta tagSkillsJul 2026
- copywritingWhen the user wants to write, rewrite, or improve marketing copy for any page — including homepage, landing pages, pricing pages, feature pages, about pages, or product pages. Also use when the user sSkillsJul 2026
- marketing-psychologyWhen the user wants to apply psychological principles, mental models, or behavioral science to marketing. Also use when the user mentions 'psychology,' 'mental models,' 'cognitive bias,' 'persuasion,'SkillsJul 2026
- content-strategyWhen the user wants to plan a content strategy, decide what content to create, or figure out what topics to cover. Also use when the user mentions "content strategy," "what should I write about," "conSkillsJul 2026
- programmatic-seoWhen the user wants to create SEO-driven pages at scale using templates and data. Also use when the user mentions "programmatic SEO," "template pages," "pages at scale," "directory pages," "location pSkillsJul 2026
- marketing-ideasWhen the user needs marketing ideas, inspiration, or strategies for their SaaS or software product. Also use when the user asks for 'marketing ideas,' 'growth ideas,' 'how to market,' 'marketing stratSkillsJul 2026
