Frontend Academy · درس

مؤشرات أداء الويب الأساسية: LCP وFID وCLS

افهم ما الذي يقيسه Largest Contentful Paint وFirst Input Delay وCumulative Layout Shift، ولماذا تستخدمها Google إشارات لترتيب الصفحات.

الدرس 1 من 413 خطوة

مؤشرات أداء الويب الأساسية: LCP وFID وCLS درس مجاني في Frontend Academy على CoddyKit. هذا هو الدرس 1 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Frontend Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Frontend Academy 4 دروس في المجموع.

لماذا يهم الأداء

تؤدي الصفحات البطيئة إلى فقدان المستخدمين. وقد جعلت Google الأداء إشارةً للترتيب: إذ تحصل المواقع ذات النتائج الضعيفة في مؤشرات الويب الأساسية على ترتيب أقل في نتائج البحث. وبعيدًا عن تحسين محركات البحث، يؤدي كل تأخير قدره 100 مللي ثانية إلى انخفاض ملحوظ في التحويل والتفاعل.

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

تقيس Google ثلاثة مقاييس لتجربة المستخدم: LCP (سرعة التحميل)، وFID (التفاعلية)، وCLS (الاستقرار المرئي). ولكل منها حدود «جيد» و«يحتاج إلى تحسين» و«ضعيف».

أكبر رسم للمحتوى (LCP)

يقيس LCP الوقت الذي يكتمل فيه عرض أكبر عنصر محتوى مرئي، مثل صورة أو صورة مصغّرة لفيديو أو كتلة نصية. النتيجة الجيدة: أقل من 2.5 ثانية. والضعيفة: أكثر من 4 ثوانٍ. حسّن ذلك بتحميل صور الجزء الرئيسي مسبقًا، وتقليل الموارد التي تمنع العرض، واستخدام شبكة CDN سريعة.

تأخر الإدخال الأول (FID) وINP

يقيس FID التأخير بين أول تفاعل للمستخدم، مثل النقر أو اللمس، واستجابة المتصفح. النتيجة الجيدة: أقل من 100 مللي ثانية. وفي عام 2024، استُبدل FID بـ Interaction to Next Paint (INP)، الذي يقيس جميع التفاعلات، وليس التفاعل الأول فقط.

الإزاحة التراكمية للتخطيط (CLS)

يقيس CLS الإزاحات غير المتوقعة في التخطيط أثناء تحميل الصفحة. الجيد: أقل من 0.1. الضعيف: أكثر من 0.25. تحدث هذه الإزاحات بسبب الصور التي لا تحدد أبعادها، والخطوط التي تُحمّل متأخرًا، والإعلانات التي تُحقن بعد الرسم الأول.

قياس مؤشرات الويب الأساسية في المتصفح

استخدم حزمة npm المسماة web-vitals لالتقاط مقاييس المستخدمين الفعليين وإرسالها إلى نقطة نهاية التحليلات الخاصة بك.

import { onLCP, onINP, onCLS } from 'web-vitals';

onLCP(metric => sendToAnalytics(metric));
onINP(metric => sendToAnalytics(metric));
onCLS(metric => sendToAnalytics(metric));

function sendToAnalytics({ name, value, id }) {
  fetch('/analytics', {
    method: 'POST',
    body: JSON.stringify({ name, value, id }),
    keepalive: true
  });
}

إصلاح LCP: التحميل المسبق للصورة الرئيسية

أخبر المتصفح بتنزيل الصورة الرئيسية مبكرًا، قبل تحليل بقية HTML.

<!-- In <head> -->
<link rel="preload" as="image" href="/hero.webp" fetchpriority="high">

<!-- In <body> -->
<img src="/hero.webp" alt="Hero" width="1200" height="600" fetchpriority="high">

إصلاح CLS: حجز المساحة

حدّد دائمًا width وheight للصور والعناصر المضمّنة حتى يحجز المتصفح مساحة قبل وصول المورد. استخدم CSS الخاصية aspect-ratio للحاويات المتجاوبة.

.video-embed {
  aspect-ratio: 16 / 9;
  width: 100%;
}

/* HTML */
<img src="/photo.jpg" width="800" height="450" alt="">

إصلاح INP: تقسيم المهام الطويلة

تحظر مهام JavaScript الطويلة الخيط الرئيسي، مما يؤخر الاستجابة للنقرات. قسّم العمل إلى أجزاء باستخدام scheduler.yield() أو setTimeout حتى يتمكن المتصفح من الرسم والاستجابة للإدخال.

async function processLargeList(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 50 === 0) await new Promise(r => setTimeout(r, 0));
  }
}

بيانات المختبر مقابل البيانات الميدانية

بيانات المختبر (Lighthouse) هي اختبار اصطناعي في بيئة مضبوطة. أما البيانات الميدانية (CrUX وRUM) فتُجمع من مستخدمين فعليين على أجهزة فعلية. البيانات الميدانية هي المرجع المعتمد لترتيب نتائج SEO.

ميزانيات الأداء

حدّد حدودًا واضحة، مثل: أن يكون LCP أقل من ثانيتين، وحزمة JavaScript أقل من 200KB. طبّق هذه الحدود في CI باستخدام Lighthouse CI أو @bundle-analyzer لإفشال عمليات البناء التي تؤدي إلى تراجع الأداء.

تحقق سريع

أي مؤشرات الويب الأساسية يقيس القفزات المرئية غير المتوقعة أثناء تحميل الصفحة؟

أجب عليها في الدرس التفاعلي

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

LCP: سرعة تحميل أكبر عنصر، والهدف أقل من 2.5 ثانية. INP (المعروف سابقًا باسم FID): سرعة الاستجابة، والهدف أقل من 200ms. CLS: الاستقرار المرئي، والهدف أقل من 0.1. قِس هذه المؤشرات باستخدام حزمة web-vitals في بيئة الإنتاج، واستخدم Lighthouse في CI. البيانات الميدانية هي التي تؤثر في SEO، وليست بيانات المختبر.

البدء مجانًا

تعلم HTML مع معلم ذكاء اصطناعي — مجانًا

اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.

الدورات: 41
الدروس: 163

ابدأ التعلم مجانًا عرض الدورة الكاملة

الأسئلة الشائعة

هل درس «مؤشرات أداء الويب الأساسية: LCP وFID وCLS» مجاني؟

نعم — نص درس «مؤشرات أداء الويب الأساسية: LCP وFID وCLS» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Frontend Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Frontend Academy 4 دروس في المجموع.

ماذا ستتعلم في «مؤشرات أداء الويب الأساسية: LCP وFID وCLS»؟

افهم ما الذي يقيسه Largest Contentful Paint وFirst Input Delay وCumulative Layout Shift، ولماذا تستخدمها Google إشارات لترتيب الصفحات. تتمرن على Frontend Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Frontend Academy؟

لا تُشترط خبرة سابقة. Frontend Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 1 من أصل 4.

كم من الوقت يستغرق درس «مؤشرات أداء الويب الأساسية: LCP وFID وCLS»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Frontend Academy هذا؟

نعم. كل درس في Frontend Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

مؤشرات أداء الويب الأساسية: LCP وFID وCLS
عمليات تدقيق Lighthouse والتقييم
تحسين الصور: التحميل الكسول والصيغ وWebP
تقسيم الشيفرة والمسارات الكسولة

← العودة إلى Frontend Academy