Back to Glossary

Web Vitals

مؤشرات الويب الحيوية (Web Vitals)

Intermediateperformance1 min read
core web vitalscwvlcpclsfidinpttfbperformance metrics
Official DocsSign in to save & take notes

Definition

Google's standardized performance metrics that measure real-user experience: loading, interactivity, and visual stability.

مقاييس الأداء المعيارية من Google التي تقيس تجربة المستخدم الحقيقية: التحميل والتفاعل والثبات المرئي.

Why It Matters

Poor Web Vitals hurt 404Fault's Google ranking and user experience. Using next/image instead of <img>, system fonts or font-display:swap, and avoiding layout shifts directly improve these scores.

مؤشرات الويب الحيوية السيئة تضر بترتيب 404Fault في Google وتجربة المستخدم. استخدام next/image بدلاً من <img> والخطوط النظامية وتجنب تحولات التخطيط يُحسّن هذه الدرجات مباشرةً.

Full Definition

Core Web Vitals are three metrics: LCP (Largest Contentful Paint — loading speed, target < 2.5s), INP/FID (Interaction to Next Paint / First Input Delay — interactivity, target < 200ms), CLS (Cumulative Layout Shift — visual stability, target < 0.1). Google uses Web Vitals as a ranking signal. Next.js Image component and proper font loading directly improve LCP and CLS. Vercel Analytics tracks Web Vitals automatically.
مؤشرات الويب الحيوية الأساسية هي ثلاثة مقاييس: LCP (أكبر رسم محتوى — سرعة التحميل، الهدف < 2.5 ثانية)، INP (التفاعلية)، CLS (الثبات المرئي، الهدف < 0.1). Google تستخدم Web Vitals كإشارة ترتيب.

Example Usage

“Vercel Speed Insights shows LCP, CLS, INP per page automatically — target all green (LCP < 2.5s, CLS < 0.1, INP < 200ms)”

“Vercel Speed Insights يُظهر LCP وCLS وINP لكل صفحة تلقائيًا — الهدف كل الأخضر”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Web Vitals:

1

Optimizing for Lighthouse lab score only — it differs from field data (real user Web Vitals)

2

Ignoring CLS — layout shifts from unresized images and dynamic content are easy to fix

Sign in to unlock guided AI explanations from AI Teacher.

Generate a Prompt

Copy this prompt and use it directly with any AI model — no setup needed.

Ready-to-Use Prompt
Help me build a project using Web Vitals.

Explain:
1. What is Web Vitals and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Optimizing for Lighthouse lab score only — it differs from field data (real user Web Vitals), Ignoring CLS — layout shifts from unresized images and dynamic content are easy to fix
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account