core-web-vitals

Optimize LCP, INP, and CLS metrics with prioritized fixes.

1|Updated Dec 18, 2015
One-click install
npx skills add https://github.com/mathemagie/mathemagie.github.io --skill core-web-vitals-mathemagie
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/mathemagie/mathemagie.github.io/tree/main/bidouille/3615_terre/.agents/skills/core-web-vitals
Command: npx skills add https://github.com/mathemagie/mathemagie.github.io --skill core-web-vitals-mathemagie

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Core Web Vitals on modern pages often lag behind, causing slow loading, unresponsive interactivity, and layout shifts. This skill provides actionable guidance to optimize LCP, INP, and CLS for better user experience and SEO.

Core Features & Use Cases

  • Optimization strategies for LCP, INP, and CLS across server, resources, and rendering.
  • Practical checklists and recommended best practices for common sites (e.g., marketing pages, e-commerce product pages, content sites).
  • Use Case: When a site experiences slow LCP and noticeable CLS, apply the skill to identify bottlenecks and propose fixes.

Quick Start

Analyze a target page to identify LCP, INP, and CLS bottlenecks and propose concrete, prioritized fixes with measurable targets.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema
How do I improve Core Web Vitals for better search rankings?

To improve Core Web Vitals, optimize LCP, INP, and CLS by addressing server timing, resource loading, render-blocking resources, and font loading to deliver faster, more stable pages.

What is the best way to fix slow LCP and layout shifts on my website?

Fix slow LCP and layout shifts by auditing page performance to identify bottlenecks in server response and resource loading, then applying concrete thresholds and prioritized fixes for stability.

How do I optimize INP to reduce unresponsive interactivity on web pages?

Optimize INP by analyzing render-blocking resources and render timing during your development cycle, then applying practical implementation guidance to ensure faster interactivity response.

Does frontend optimization for Core Web Vitals cover different types of websites?

Frontend optimization for Core Web Vitals covers common sites like marketing pages, e-commerce product pages, and content sites using tailored checklists and recommended best practices.

Why does Core Web Vitals optimization focus on server timing and render-blocking resources?

Core Web Vitals optimization focuses on server timing and render-blocking resources because these elements directly impact page loading speed, interactivity, and visual stability metrics.

Can I use Core Web Vitals checklists during site migrations?

You can apply Core Web Vitals optimization during site migrations and ongoing development cycles to identify performance bottlenecks and propose concrete, measurable fixes.