core-web-vitals

Improve Core Web Vitals by auditing pages to optimize Largest Contentful Paint, Interaction to Next Paint, and Cumulative Layout Shift thresholds. This skill generates actionable checklists for server response optimization, render-blocking resource handling, and layout-shift prevention to satisfy Google Search ranking requirements.

Fix Cumulative Layout Shift in Next.js and React by applying framework-specific quick fixes that prevent visual instability. This skill provides targeted code changes for rendering and layout improvements, ensuring stable pages and compliance with Web Vitals thresholds.

Optimize Interaction to Next Paint by improving event-handler efficiency to resolve unresponsive user interactions. The skill supplies optimization checklists and code changes targeting rendering and script execution to meet Good INP threshold standards.

You can measure Core Web Vitals performance using Chrome DevTools, Lighthouse, WebPageTest, and the web-vitals JavaScript library. This skill references these measurement tools to audit web pages and verify LCP, INP, and CLS metric thresholds.

Slow Largest Contentful Paint often stems from poor server response times and render-blocking resources. Optimize LCP by applying this skill's checklists for server response optimization, image preloading, and resource handling to achieve faster load times.

This Core Web Vitals skill supports Vue and Nuxt by supplying framework-specific quick fixes for rendering and layout improvements. It audits pages and suggests code changes tailored to these frameworks to resolve LCP, INP, and CLS performance issues.