skills.rest
yonetim258852
yonetim258852COMMUNITY
Explore all skills by this author →
GitHub

performance-and-web-vitals

Audit web apps with Lighthouse to detect and fix Core Web Vitals issues.

Updated May 24, 2026
Search Tags:#performance#lighthouse#web-vitals#lcp#inp#cls
One-click install
npx skills add https://github.com/yonetim258852/ozgur-os --skill performance-and-web-vitals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: performance-and-web-vitals
Source: https://github.com/yonetim258852/ozgur-os/tree/main/.claude/skills/performance-and-web-vitals
Command: npx skills add https://github.com/yonetim258852/ozgur-os --skill performance-and-web-vitals

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps teams detect and fix performance bottlenecks impacting page load, interactivity, and layout stability by auditing with Lighthouse and targeting Core Web Vitals (LCP, CLS, INP).

Core Features & Use Cases

  • Perform end-to-end lighthouse audits to identify bottlenecks across images, fonts, render-blocking resources, and script execution.
  • Recommend and validate fixes for LCP, CLS, INP, and overall Lighthouse scores in development and production environments.
  • Use cases include optimizing hero images, reducing layout shifts, and lowering input latency for interactive components.

Quick Start

Run a Lighthouse audit on the target page to identify performance bottlenecks and actionable fixes.

Frequently Asked Questions about performance-and-web-vitals

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

FAQPage Schema
How do I identify and fix LCP, CLS, and INP bottlenecks in my web app?▼

You can identify and fix Core Web Vitals bottlenecks by running end-to-end Lighthouse audits to detect issues with hero images, fonts, render-blocking resources, and script execution. The process outlines actionable steps and recommended fixes for local development and CI environments.

What is the best way to optimize hero images and font loading for Core Web Vitals?▼

Optimizing hero images and font loading for Core Web Vitals involves using Lighthouse audits to detect render-blocking resources and layout shifts. You apply recommended fixes to lower input latency and improve overall Lighthouse performance scores.

How do I reduce layout shifts and improve input latency for interactive components?▼

To reduce layout shifts and improve input latency, perform Lighthouse audits to target CLS and INP metrics. The audits detect script execution and layout issues, providing actionable thresholds and fixes to validate improvements in development and production.

Can I use Lighthouse audits to validate performance fixes in CI and local development?▼

Yes, Lighthouse audits can validate performance fixes across both CI and local development environments. The audits outline specific steps, thresholds, and recommended fixes to ensure actionable outcomes for LCP, CLS, and INP problems in modern web apps.

Does this approach work for detecting render-blocking resources and script execution issues?▼

Yes, running Lighthouse audits detects render-blocking resources and script execution issues across modern web apps. It targets LCP, CLS, and INP problems, ensuring actionable outcomes by outlining steps, thresholds, and recommended fixes.

Related Skills

Explore More Software Engineering Skills→
sigmadigitalzasigmadigitalza
1

web-performance

Analyze web application performance against Core Web Vitals metrics.

Official
Advanced
aroidoaroido

web-vitals-monitoring

Measure Core Web Vitals and detect performance budget violations.

Official
Advanced
xenitV1xenitV1
132

performance-profiling

Automate Lighthouse-based performance profiling to identify web application bottlenecks.

Community
Advanced
ortus-docsortus-docs
16

boxlang-runtime-matchbox

Run BoxLang programs natively via the Rust-based MatchBox runtime.

Official
Advanced