How does it handle layout shifts (CLS)?

It identifies missing dimensions on media, optimizes font loading to prevent FOUT/FOIT, and provides strategies for injecting dynamic content without pushing existing elements down.

How does this skill improve Google Search rankings?

By providing code implementations that meet Google's 'Good' thresholds for page experience metrics, which are official ranking factors in the search algorithm.

What metrics does this Claude Code skill help optimize?

It focuses on the three primary Core Web Vitals: Largest Contentful Paint (LCP) for loading, Interaction to Next Paint (INP) for interactivity, and Cumulative Layout Shift (CLS) for visual stability.

Can it help with framework-specific performance issues?

Yes, it includes specialized optimization patterns for popular frameworks like Next.js, React, and Vue, such as utilizing next/image or implementing useTransition.

Does it provide tools for measurement and testing?

The skill includes PerformanceObserver snippets and guidance for using tools like Lighthouse and the Chrome User Experience Report (CrUX) to validate improvements.

Core Web Vitals Optimizer

Name: Core Web Vitals Optimizer
Author: bananayong

bybananayong

0•

营销自动化

Optimizes website performance metrics including LCP, INP, and CLS to improve search rankings and user experience.

The Core Web Vitals skill empowers Claude to diagnose and resolve critical performance bottlenecks that directly impact Google Search rankings. It provides targeted implementation patterns for reducing Largest Contentful Paint (LCP), stabilizing Cumulative Layout Shift (CLS), and improving Interaction to Next Paint (INP). By identifying render-blocking resources, implementing advanced loading strategies like preloading and critical CSS, and managing main-thread tasks, this skill ensures web applications meet the 'Good' thresholds required for a superior page experience.

主要功能

01Framework-specific performance fixes for Next.js, React, and Vue/Nuxt environments.

020 GitHub stars

03INP enhancement by breaking up long tasks, yielding to the main thread, and optimizing event handlers.

04Built-in debugging snippets for tracking layout shifts and slow interactions via PerformanceObserver.

05CLS stabilization using aspect-ratio containers, dimension attributes, and font-display strategies.

06LCP optimization through resource preloading, fetchpriority, and render-blocking resource elimination.

使用场景

01Eliminating visual instability and annoying layout shifts during dynamic content injection.

02Fixing 'Poor' or 'Needs Work' status in Google Search Console's Core Web Vitals report.

03Improving page load speed and perceived performance for mobile and low-bandwidth users.

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add bananayong/agent-sandbox core-web-vitals

For use in Claude.ai and ChatGPT

主要功能

01Framework-specific performance fixes for Next.js, React, and Vue/Nuxt environments.

020 GitHub stars

03INP enhancement by breaking up long tasks, yielding to the main thread, and optimizing event handlers.

04Built-in debugging snippets for tracking layout shifts and slow interactions via PerformanceObserver.

05CLS stabilization using aspect-ratio containers, dimension attributes, and font-display strategies.

06LCP optimization through resource preloading, fetchpriority, and render-blocking resource elimination.

使用场景

01Eliminating visual instability and annoying layout shifts during dynamic content injection.

02Fixing 'Poor' or 'Needs Work' status in Google Search Console's Core Web Vitals report.

03Improving page load speed and perceived performance for mobile and low-bandwidth users.