web-performance

Analyze frontend bundles and images to improve Core Web Vitals.

3|Updated Feb 6, 2026

Search Tags:#caching #lighthouse #web-performance #code-splitting #bundle-size #image-optimization #core-web-vitals

Ready to run

npx skills add https://github.com/1Mangesh1/dev-skills-collection --skill web-performance-1mangesh1

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: web-performance
Source: https://github.com/1Mangesh1/dev-skills-collection/tree/main/skills/web-performance
Command: npx skills add https://github.com/1Mangesh1/dev-skills-collection --skill web-performance-1mangesh1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

Web performance optimization is about reducing load times and delivering a smooth, responsive user experience by focusing on Core Web Vitals, image efficiency, and efficient asset loading.

Core Features & Use Cases

CWV improvements: Target LCP, FID, and CLS through image optimization, server timing, and render-blocking resource management.
Code splitting & caching: Break large bundles into smaller chunks and apply effective caching strategies to speed subsequent visits.
Image optimization & lazy loading: Use modern formats and lazy loading to reduce bandwidth and render times.
Performance auditing: Use Lighthouse/WebPageTest to baseline, measure, and validate improvements across real user metrics.

Quick Start

Analyze a webpage and propose a concrete optimization plan focusing on images, code splitting, and caching to improve Core Web Vitals.

Frequently Asked Questions about web-performance

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

FAQPage Schema

How do I improve Core Web Vitals for my frontend web app?▼

Improve Core Web Vitals by targeting LCP, FID, and CLS through image optimization, managing render-blocking resources, and reducing server timing. Assessing bundle sizes and applying code splitting helps deliver faster loading and better visual stability for frontend applications.

What is the best way to reduce bundle size in a single page application?▼

The best way to reduce bundle size is implementing code splitting to break large bundles into smaller chunks. Combining this with effective caching strategies speeds up subsequent visits by delivering only necessary assets to the browser.

How does lazy loading images affect web performance and bandwidth?▼

Lazy loading images improves web performance by deferring offscreen image delivery until needed, which reduces bandwidth consumption and initial render times. Using modern image formats further optimizes asset delivery and accelerates page loading.

Can I use Lighthouse to baseline and validate web performance improvements?▼

Yes, you can use Lighthouse to baseline, measure, and validate web performance improvements across real user metrics. Performance auditing with Lighthouse helps track Core Web Vitals progress and verify that code splitting and image optimization changes are effective.

Does this web performance optimization approach work for traditional websites?▼

Yes, this approach applies to both single page applications and traditional websites. Any frontend site where faster loading, better interactivity, and improved visual stability are desired can benefit from bundle assessment, image optimization, and caching recommendations.