skills.rest
Peterson-Benhame
Peterson-BenhameCOMMUNITY
Explore all skills by this author →
GitHub

perf-web-optimization

Optimizes web performance through bundle reduction, image optimization, caching, and lazy loading.

Updated Sep 15, 2026
Search Tags:#lighthouse#lazy loading#web performance#code splitting#core web vitals#image optimization#bundle optimization
One-click install
npx skills add https://github.com/Peterson-Benhame/agent-skills --skill perf-web-optimization-peterson-benhame
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: perf-web-optimization
Source: https://github.com/Peterson-Benhame/agent-skills/tree/main/packages/skills-catalog/skills/%28performance%29/perf-web-optimization
Command: npx skills add https://github.com/Peterson-Benhame/agent-skills --skill perf-web-optimization-peterson-benhame

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Slow websites hurt user experience and search rankings, but diagnosing and fixing performance issues like large bundles, unoptimized images, and render-blocking resources requires systematic knowledge that is easy to get wrong. ## Core Features & Use Cases - Quick-Win Optimizations: Apply proven fixes for images, fonts, third-party scripts, and critical CSS with copy-paste code snippets targeting LCP, CLS, and INP metrics. - Bundle Analysis & Reduction: Analyze JavaScript bundles with webpack-bundle-analyzer or vite-bundle-visualizer, replace heavy dependencies like moment and lodash, and implement code splitting patterns for React, Next.js, and Vite. - Use Case: Your e-commerce site has a 5-second LCP and a 400KB JavaScript bundle. Use this Skill to identify the hero image as the LCP element, add fetchpriority and modern formats, split the bundle by route, and defer third-party scripts until user interaction. ## Quick Start Analyze my website's performance and suggest optimizations to reduce bundle size and improve page load speed.

Frequently Asked Questions about perf-web-optimization

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I reduce JavaScript bundle size in webpack or Vite?▼

Run webpack-bundle-analyzer or vite-bundle-visualizer to identify large dependencies, then replace heavy packages like moment with date-fns or dayjs. Enable code splitting with React.lazy or dynamic imports and configure manualChunks for vendor separation.

How to fix Largest Contentful Paint on my website?▼

Optimize the LCP image by preloading it with fetchpriority="high", using modern formats like AVIF or WebP, and setting explicit width and height attributes. Also reduce TTFB with static generation and stale-while-revalidate caching.

What is the best image format for web performance?▼

AVIF offers 50-80% savings over JPEG with the best compression, while WebP provides 25-35% savings with wider browser support. Use the picture element with source fallbacks so older browsers receive JPEG.

Does this skill run Lighthouse audits?▼

No, running Lighthouse audits and reading reports is handled by the separate perf-lighthouse skill. This skill focuses on implementing the actual optimizations for bundles, images, caching, and loading strategies.

Why does my site have layout shifts when loading?▼

Layout shifts occur when images lack width and height attributes, ads or embeds have no reserved space, or web fonts cause FOIT/FOUT. Fix CLS by setting image dimensions, using aspect-ratio containers, and applying font-display: swap.

When should I defer third-party scripts?▼

Defer analytics, chat widgets, and other third-party scripts until user interaction events like scroll, click, or touchstart, with a setTimeout fallback. This prevents them from blocking the main thread and hurting INP scores.

Related Skills

Explore More Software Engineering Skills→
fjavidcrfjavidcr

performance

Identify performance bottlenecks and optimize web performance from Lighthouse audits.

Community
Advanced
zinohomezinohome

performance-budget-setter

Defines and enforces performance budgets for bundle size, API latency, database queries, and Core Web Vitals.

Community
Intermediate
imehrimehr

performance-engineering

Optimize web performance with caching strategies and Core Web Vitals.

Community
Basic
SufficientDaikonSufficientDaikon
8

astro-islands-expert

Design scalable Astro islands with framework selection and hydration directives.

Community
Advanced