web-performance-optimization
Systematic approach to measuring, analyzing, and improving website loading speed and Core Web Vitals.
- Covers five-step optimization workflow: establish baseline metrics with Lighthouse, identify bottlenecks (bundle size, images, render-blocking resources), prioritize high-impact fixes, implement improvements, and verify results
- Addresses Core Web Vitals (LCP, FID, CLS) with specific code examples for image optimization, code splitting, lazy loading, and layout shift prevention
- Includes bundle size reduction strategies: replace heavy dependencies, implement code splitting, remove dead code, and optimize third-party scripts
- Provides image optimization techniques using modern formats (WebP, AVIF), responsive images, and lazy loading with practical conversion scripts
- Includes performance checklist, common pitfalls with solutions, and recommended tools (Lighthouse, webpack-bundle-analyzer, WebPageTest, Chrome DevTools)
Web Performance Optimization
Overview
Help developers optimize website and web application performance to improve user experience, SEO rankings, and conversion rates. This skill provides systematic approaches to measure, analyze, and improve loading speed, runtime performance, and Core Web Vitals metrics.
When to Use This Skill
- Use when website or app is loading slowly
- Use when optimizing for Core Web Vitals (LCP, FID, CLS)
- Use when reducing JavaScript bundle size
- Use when improving Time to Interactive (TTI)
- Use when optimizing images and assets
- Use when implementing caching strategies
- Use when debugging performance bottlenecks
- Use when preparing for performance audits
How It Works
More from sickn33/antigravity-awesome-skills
docker-expert
You are an advanced Docker containerization expert with comprehensive, practical knowledge of container optimization, security hardening, multi-stage builds, orchestration patterns, and production deployment strategies based on current industry best practices.
15.0Knodejs-best-practices
Node.js development principles and decision-making. Framework selection, async patterns, security, and architecture. Teaches thinking, not copying.
11.2Ktypescript-expert
TypeScript and JavaScript expert with deep knowledge of type-level programming, performance optimization, monorepo management, migration strategies, and modern tooling.
8.3Kapi-security-best-practices
Implement secure API design patterns including authentication, authorization, input validation, rate limiting, and protection against common API vulnerabilities
7.0Kclean-code
This skill embodies the principles of \"Clean Code\" by Robert C. Martin (Uncle Bob). Use it to transform \"code that works\" into \"code that is clean.\"
6.6Knextjs-best-practices
Next.js App Router principles. Server Components, data fetching, routing patterns.
5.2K