Back to Glossary

Core Web Vitals

مؤشرات الويب الأساسية

Intermediateperformance1 min read
Web VitalsCWVLCPFIDCLSINP
Official DocsSign in to save & take notes

Definition

Google's three key metrics for user experience quality: Largest Contentful Paint (loading), Interaction to Next Paint (interactivity), and Cumulative Layout Shift (visual stability).

مقاييس Google الثلاثة الرئيسية لجودة تجربة المستخدم: أكبر عرض للمحتوى (التحميل) والتفاعل حتى الطلاء التالي (التفاعلية) وانزياح التخطيط التراكمي (الاستقرار البصري).

Why It Matters

Poor Core Web Vitals hurt SEO ranking, user retention, and brand perception. A glossary page that takes 4 seconds to show content will have a higher bounce rate and lower search visibility. Every 100ms reduction in LCP improves conversion rate measurably.

تُضرّ مؤشرات الويب الأساسية السيئة بترتيب SEO والاحتفاظ بالمستخدمين وتصور العلامة التجارية. صفحة قاموس تستغرق 4 ثوانٍ لعرض المحتوى ستكون لها نسبة ارتداد أعلى ورؤية أقل في البحث. كل تخفيض 100 ميلي ثانية في LCP يُحسّن معدل التحويل بشكل قابل للقياس.

Full Definition

Core Web Vitals are Google's standardized metrics for measuring the quality of user experience on the web: LCP (Largest Contentful Paint) — how fast the main content loads (good: < 2.5s), INP (Interaction to Next Paint) — how quickly the page responds to user interactions (good: < 200ms), CLS (Cumulative Layout Shift) — how much the layout jumps unexpectedly (good: < 0.1). These metrics affect Google search ranking. Next.js's image optimization, font optimization, and code splitting are all designed to improve Core Web Vitals out of the box.
مؤشرات الويب الأساسية هي مقاييس Google القياسية لقياس جودة تجربة المستخدم على الويب: LCP (أكبر عرض للمحتوى) — مدى سرعة تحميل المحتوى الرئيسي (جيد: < 2.5 ثانية) وINP (التفاعل حتى الطلاء التالي) — مدى سرعة استجابة الصفحة لتفاعلات المستخدم (جيد: < 200 ميلي ثانية) وCLS (انزياح التخطيط التراكمي) — مقدار القفز غير المتوقع في التخطيط (جيد: < 0.1). تؤثر هذه المقاييس على ترتيب بحث Google. تحسين الصور وتحسين الخطوط وتقسيم الكود في Next.js مصممة جميعاً لتحسين مؤشرات الويب الأساسية مباشرةً.

Example Usage

“LCP on 404Fault glossary page: the H1 term title is the LCP element. If the title loads from a Firestore client query (slow), LCP will be poor. Fix: use Next.js `generateStaticParams` to pre-render the top 100 glossary terms as static HTML at build time — LCP becomes sub-500ms because the HTML is already there.”

“LCP في صفحة قاموس 404Fault: عنوان المصطلح H1 هو عنصر LCP. إذا تحمّل العنوان من استعلام عميل Firestore (بطيء)، سيكون LCP سيئاً. الإصلاح: استخدم Next.js `generateStaticParams` لعرض أفضل 100 مصطلح قاموس مسبقاً كـ HTML ثابت وقت البناء — يصبح LCP أقل من 500 ميلي ثانية لأن HTML موجود بالفعل.”

Knowledge Graph

AI Builder Tips

Sign in for more features

Avoid these mistakes when using Core Web Vitals:

1

Measuring Web Vitals only in development — dev mode is slower; always measure production builds using Chrome DevTools Lighthouse or PageSpeed Insights

2

Ignoring CLS — layout shifts happen when fonts, images without dimensions, or async-loaded content push existing content down; always reserve space

3

Not measuring real user data — lab data (Lighthouse) differs from field data (real users on mobile); use Google Search Console for field CWV data

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 Core Web Vitals.

Explain:
1. What is Core Web Vitals and why it matters
2. The core architecture and required tools
3. Step-by-step implementation plan
4. Common mistakes to avoid: Measuring Web Vitals only in development — dev mode is slower; always measure production builds using Chrome DevTools Lighthouse or PageSpeed Insights, Ignoring CLS — layout shifts happen when fonts, images without dimensions, or async-loaded content push existing content down; always reserve space, Not measuring real user data — lab data (Lighthouse) differs from field data (real users on mobile); use Google Search Console for field CWV data
5. Best practices and production tips

Official Resources

Official Documentation
Browse all AI termsCreate free account