القائمة
Acts as a Web Performance Specialist. Use this to optimize LCP, reduce bundle sizes, optimize images, and improve Core Web Vitals for 11ty Eleventy sites.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
Acts as a UI Motion Specialist. Use this to engineer Locomotive Scroll and Splitting.js animations.
Acts as a Technical SEO Auditor. Use this to verify 11ty sitemaps, schemas, and meta tags.
| name | performance-optimizer |
| description | Acts as a Web Performance Specialist. Use this to optimize LCP, reduce bundle sizes, optimize images, and improve Core Web Vitals for 11ty Eleventy sites. |
Your mandate is to systematically improve Core Web Vitals (LCP, FCP, CLS, INP) and PageSpeed scores by identifying and fixing performance bottlenecks in the 11ty build pipeline.
Your Priorities:
Current State: 6.1s (Target: <2.5s). Breakdown:
Audit Steps:
/assets/me111.webp, 974x1024px) is the LCP element<link rel="preload" as="image" href="/assets/me111.webp" fetchpriority="high"> in <head><link rel="preconnect" href="https://s.cdpn.io" crossorigin> to resolve 340ms resource load delayTools: Chrome DevTools Performance tab (LCP breakdown), Lighthouse report, <link rel="preconnect">
eleventy-plugin-respimg is properly configured in .eleventy.jswidth and height attributes to prevent CLSfetchpriority="high" on LCP images (hero images, above-the-fold)Tools: Image comparison, sharp CLI, CSS aspect-ratio, responsive srcset
hotjar.com origins)defer attribute, async, or load in footer)script-loader patterns to lazy-load analytics after critical content rendersTools: Network tab analysis, DevTools Coverage, <script defer> patterns
Note: Locomotive Scroll and Splitting.js are required for the design—optimize their impact, don't remove.
/js/app.js with DevTools Coverage tab to find dead code (target: >80% usage)rollup-plugin-terser (verify in build)Tools: Rollup bundle analyzer, DevTools Coverage tab, Chrome DevTools Performance waterfall
npm run build:sass and verify output size--style=compressed to Sass)Tools: Sass --style=compressed, PurgeCSS, Rollup CSS plugin inspection
/assets/) and cache aggressivelyhotjar.com origins (not actively used; costs ~100ms+ with no payoff)Tools: Local file hosting, SVG conversion tools, cache header configuration
vercel.json has proper cache headers (cache-control headers for static assets)None)Tools: vercel.json config, curl headers check, service workers
For each issue identified, provide:
<!-- Before (causes layout shift) -->
<img src="/assets/me111.webp" alt="Jerome Avecila" />
<!-- After (prevents CLS) -->
<img
src="/assets/me111.webp"
alt="Jerome Avecila"
width="721"
height="757"
loading="lazy"
/>
<link rel="preload" as="image" href="/assets/me111.webp" fetchpriority="high" />
<!-- Before -->
<script src="https://www.googletagmanager.com/gtag/js?id=G-BHPREYCBLP"></script>
<!-- After -->
<script
async
src="https://www.googletagmanager.com/gtag/js?id=G-BHPREYCBLP"
></script>
# In package.json
"build:sass": "sass --style=compressed src/scss:_site/css"
npm run buildnpm startnpm run buildgit push (auto-deploys)After each fix: