skills.rest
emilneuraz-ai
emilneuraz-aiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

core-web-vitals

Optimize LCP, INP, and CLS metrics with SSR/SSG and image optimizations.

Updated Apr 4, 2026
Search Tags:#web performance#core web vitals#lcp#page speed#inp#cls#frontend optimization
One-click install
npx skills add https://github.com/emilneuraz-ai/neuraz-web --skill core-web-vitals-emilneuraz-ai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: core-web-vitals
Source: https://github.com/emilneuraz-ai/neuraz-web/tree/main/.agents/skills/.agents/skills/core-web-vitals
Command: npx skills add https://github.com/emilneuraz-ai/neuraz-web --skill core-web-vitals-emilneuraz-ai

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

The skill helps developers and teams improve page experience by systematically optimizing Core Web Vitals metrics (LCP, INP, CLS) to boost performance scores and search ranking.

Core Features & Use Cases

  • Provides guidance on identifying and fixing main LCP triggers, such as slow server responses, render-blocking resources, and large assets.
  • Offers actionable patterns for reducing input delay (INP) and layout shifts (CLS) across typical front-end setups.
  • Use case: as a performance engineer, when a page scores poorly on Core Web Vitals, apply the optimization checklist and implement SSR/SSG improvements, image optimization, and font handling to bring metrics into the Good range.

Quick Start

Identify LCP bottlenecks on your page and implement SSR/SSG where possible, preload critical images, inline essential CSS, and optimize resource loading.

Frequently Asked Questions about core-web-vitals

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

FAQPage Schema
How do I optimize Core Web Vitals for better search ranking and page experience?▼

Improve LCP, INP, and CLS metrics by implementing SSR/SSG, preloading critical assets, inlining essential CSS, and applying resource hints to achieve faster, stable pages and better search ranking.

What causes poor LCP scores and how can I fix render-blocking resources?▼

Poor LCP scores stem from slow server responses, render-blocking resources, and large assets. Fix them by implementing SSR/SSG, preloading critical images, and inlining essential CSS to accelerate largest contentful paint.

What is the best way to reduce input delay and layout shifts on frontend pages?▼

Reduce input delay and layout shifts by applying actionable frontend patterns that optimize resource loading, handle fonts properly, and reserve space for dynamic content, ensuring stable visual elements and responsive interactions.

Do I need server-side rendering to improve Core Web Vitals, or can I optimize client-side?▼

Server-side rendering or static site generation is recommended to improve Core Web Vitals by reducing server response times and delivering initial HTML faster, though client-side optimizations like preloading and CSS inlining also help.

How does image format and font loading strategy affect page speed and CLS?▼

Image format and font loading strategies directly impact page speed and CLS. Optimizing images and properly handling font loading prevents layout shifts and reduces the time to load critical visual elements.

Related Skills

Explore More Software Engineering Skills→
BigPapiCBBigPapiCB
2

performance-audit

Guide phased profiling workflows to identify performance bottlenecks in applications.

Community
Advanced
SylphxAISylphxAI
4

performance

Analyze Next.js frontend performance for Core Web Vitals and bundle size.

Official
Intermediate
PatternsDevPatternsDev
235

compression

Apply Gzip and Brotli compression to JavaScript assets in build pipelines.

Official
Advanced
daloyjsdaloyjs
18

vercel-react-best-practices

Apply React and Next.js performance patterns to components, pages, and data fetching.

Official
Intermediate