web-performance-optimization

Optimize web performance using Lighthouse reports and Core Web Vitals best practices.

Updated Aug 27, 2026
One-click install
npx skills add https://github.com/javierveloso/documentia --skill web-performance-optimization-javierveloso
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-performance-optimization
Source: https://github.com/javierveloso/documentia/tree/main/.claude/skills/web-performance-optimization
Command: npx skills add https://github.com/javierveloso/documentia --skill web-performance-optimization-javierveloso

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill addresses slow website loading times and poor user experience by optimizing critical performance metrics and implementing modern web performance patterns.

Core Features & Use Cases

  • Core Web Vitals Optimization: Improve LCP, INP, and CLS scores for better SEO and user satisfaction.
  • Modern Pattern Implementation: Leverage View Transitions, Speculation Rules, and Server Components for cutting-edge performance.
  • Framework-Specific Tuning: Apply tailored optimizations for popular frameworks like Next.js, React, Vue, and Astro.
  • Use Case: A marketing website is experiencing high bounce rates due to slow load times. This Skill can be used to diagnose bottlenecks, implement quick wins like image optimization and code splitting, and significantly improve Lighthouse scores, leading to better user engagement and conversion rates.

Quick Start

Use the web performance optimization skill to audit the current website's performance using Lighthouse and identify the top three areas for improvement.

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 Lighthouse scores?

Improve Core Web Vitals and Lighthouse scores by analyzing performance reports to implement image optimization, code splitting, caching, and modern resource loading strategies for faster load times and better interactivity.

What's the best way to fix slow load times and poor interactivity on a frontend application?

Fix slow load times and poor interactivity by applying framework-specific tuning for Next.js, React, Vue, or Astro, utilizing code splitting and caching to reduce bottlenecks and improve user engagement.

How do modern browser APIs like View Transitions and Speculation Rules help web performance?

Modern browser APIs like View Transitions and Speculation Rules help web performance by enabling cutting-edge rendering patterns and predictive prefetching, which significantly reduce visual instability and improve navigation speed.

Can I use this web performance optimization approach for my Next.js or Vue marketing site?

Yes, you can use this approach for Next.js, Vue, React, or Astro sites to apply tailored framework optimizations that diagnose performance bottlenecks and significantly boost user conversion rates.

Why does my website experience visual instability and poor LCP scores?

Websites experience poor LCP and visual instability due to unoptimized resources and layout shifts, which can be resolved by implementing image optimization, proper resource loading, and Core Web Vitals best practices.

Do I need a Lighthouse report to start optimizing frontend performance?

You need a Lighthouse report to start optimizing frontend performance because it identifies the top critical areas for improvement, allowing targeted implementation of caching and code splitting strategies.