skills.rest
JoaoPedroAmaral
JoaoPedroAmaralCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

web-performance-optimization

Audit websites with Lighthouse and WebPageTest to optimize Core Web Vitals.

Updated Aug 23, 2026
Search Tags:#caching#lighthouse#web-performance#code-splitting#image-optimization#core-web-vitals
One-click install
npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill web-performance-optimization-joaopedroamaral
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-performance-optimization
Source: https://github.com/JoaoPedroAmaral/backBarbearia/tree/main/.claude/skills/web-performance-optimization
Command: npx skills add https://github.com/JoaoPedroAmaral/backBarbearia --skill web-performance-optimization-joaopedroamaral

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Websites and web applications that load slowly or suffer poor Core Web Vitals create bad user experiences, lower SEO rankings, and reduce conversions. This Skill helps teams measure baseline performance, identify root causes across assets and code, and apply targeted optimizations to reduce load times and runtime jank.

Core Features & Use Cases

  • Performance Audits: Run and interpret Lighthouse, WebPageTest, and Chrome DevTools output to pinpoint LCP, FID/INP, CLS, and TTFB problems.
  • Bundle & Runtime Optimization: Analyze and reduce JavaScript/CSS bundle size with code splitting, tree shaking, and dependency pruning.
  • Asset Optimization: Convert and serve images in AVIF/WebP, produce responsive srcsets, add dimensions, and apply lazy loading and preload strategies.
  • Caching & Delivery: Recommend cache headers, CDN use, service worker strategies, and server-side optimizations to lower TTFB and speed repeat visits.
  • Verification & Monitoring: Re-run audits, compare before/after metrics, and set up RUM monitoring to validate real-user improvements.

Quick Start

Audit https://example.com for Core Web Vitals, list the top 5 issues by impact, and provide concrete fixes with estimated improvement for LCP, FID, and CLS.

Frequently Asked Questions about web-performance-optimization

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

FAQPage Schema
How do I improve my website's Core Web Vitals and reduce load times?▼

Improve Core Web Vitals by running Lighthouse audits, analyzing bundles, optimizing images, and implementing caching. This process reduces load times by targeting LCP, FID/INP, CLS, and TTFB issues across static sites and single-page apps.

How do I analyze and reduce JavaScript bundle size with code splitting?▼

Analyze JavaScript bundle size using audit tools, then reduce it through code splitting, tree shaking, and dependency pruning. This minimizes runtime jank and improves load times for single-page apps and server-rendered pages.

What is the best way to optimize images for web performance?▼

Optimize images by converting formats to AVIF or WebP, generating responsive srcsets, and adding dimensions. Apply lazy loading and preload strategies to further speed up websites and improve Core Web Vitals.

How do I set up caching strategies to lower TTFB and speed up repeat visits?▼

Lower TTFB and speed up repeat visits by configuring cache headers, utilizing CDNs, and implementing service worker strategies. These caching techniques reduce server response times for static sites and web applications.

Can I use Lighthouse and WebPageTest to audit server-rendered pages?▼

Yes, you can use Lighthouse and WebPageTest to audit server-rendered pages, single-page apps, and static sites. These performance audits pinpoint root causes across assets and code to improve Core Web Vitals.

How do I verify Core Web Vitals improvements using RUM and re-audits?▼

Verify Core Web Vitals improvements by re-running audits to compare before and after metrics. Set up Real User Monitoring (RUM) to validate real-user performance improvements and ensure load times remain optimized.

Related Skills

Explore More Software Engineering Skills→
damadorPLdamadorPL
1

performance-audit

Diagnoses website performance bottlenecks via Chrome DevTools and Lighthouse metrics.

Community
Advanced
TheGreatLTheGreatL

performance-engineer

Analyzes application performance and implements observability with OpenTelemetry and distributed tracing.

Community
Advanced
cenjiecenjie

bundle-size-optimization

Analyze JavaScript and CSS bundles to identify code-splitting and tree-shaking opportunities.

Community
Intermediate
zm2231zm2231

asset-optimization

Convert design assets to WebP, AVIF, and responsive variants.

Community
Advanced