skills.rest
tech-leads-club
tech-leads-clubOFFICIAL
Explore all skills by this author →
WebsiteGitHub

perf-web-optimization

Audit Core Web Vitals and implement image, caching, and code-splitting fixes.

5.0k|454|Updated Jan 19, 2026
Search Tags:#optimize#web-performance#bundle-size#LCP#image-optimization#CLS#core-web-vitals
One-click install
npx skills add https://github.com/tech-leads-club/agent-skills --skill perf-web-optimization
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: perf-web-optimization
Source: https://github.com/tech-leads-club/agent-skills/tree/main/packages/skills-catalog/skills/%28performance%29/perf-web-optimization
Command: npx skills add https://github.com/tech-leads-club/agent-skills --skill perf-web-optimization

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Slow-loading websites degrade user experience and conversions. This skill provides a structured approach to optimize Core Web Vitals, bundle size, and asset delivery to deliver faster pages.

Core Features & Use Cases

  • Performance auditing: identify bottlenecks in LCP, CLS, INP, TTFB, and bundle size.
  • Guided optimizations: actionable steps for image optimization, caching headers, code splitting, and lazy loading.
  • Use Case: when a site scores poorly on Lighthouse, run this skill to present a prioritized plan and implement fixes.

Quick Start

Run a Lighthouse audit on your target site to identify LCP/CLS/INP issues, then apply the top 3 fixes such as image optimization, critical CSS, and code-splitting to improve overall performance.

Frequently Asked Questions about perf-web-optimization

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

FAQPage Schema
How do I optimize Core Web Vitals like LCP and CLS for a frontend project?▼

Optimize Core Web Vitals by running a Lighthouse audit to identify LCP, CLS, and INP bottlenecks, then apply targeted fixes for image optimization, critical CSS, and code splitting to improve load times.

What is the best way to reduce bundle size and improve Lighthouse scores?▼

Reduce bundle size by implementing code splitting and lazy loading to minimize initial payloads. This structured optimization approach directly improves Lighthouse scores and accelerates overall web performance.

Why does my site have a poor LCP score and how can I fix it?▼

Poor LCP scores often stem from unoptimized images and large resource payloads. Fix LCP by applying image optimization workflows, setting proper caching headers, and inlining critical CSS.

Do I need to know bundler configuration to improve web performance?▼

Knowledge of bundlers and tooling like Lighthouse is required to effectively execute code splitting, lazy loading, and resource budgeting for faster loading frontend, SaaS, and marketing sites.

Can I use this approach to fix high TTFB and INP issues on a SaaS dashboard?▼

Yes, this performance optimization approach addresses TTFB and INP issues on SaaS dashboards by applying caching strategies, resource budgets, and prioritized delivery fixes.

What are the limitations of relying only on Lighthouse audits for performance optimization?▼

While Lighthouse audits identify bottlenecks, resolving Core Web Vitals requires implementing caching headers, image optimization, and code splitting workflows to achieve actual faster load times.

Related Skills

Explore More Software Engineering Skills→
WesleySmitsWesleySmits
6

profiling-performance

Audit web performance with Lighthouse and Core Web Vitals metrics.

Community
Advanced
MatheusrlrMatheusrlr
1

perf-web-optimization

Optimize web performance by addressing Core Web Vitals and reducing bundle sizes.

Community
Intermediate
rattamnoonrattamnoon

optimize

Diagnose and fix UI performance issues in web applications.

Community
Advanced
finsilabsfinsilabs
44

ecommerce-caching

Implement multi-layer caching with CDN, Redis, and cart-aware invalidation.

Official
Advanced