Angular Academy · درس

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

تتبّع مقاييس الأداء وحسّنها

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

أهمية مؤشرات الأداء الحيوية

تُعد Core Web Vitals مقاييس أداء Google المتمحورة حول المستخدم. وهي تقيس التحميل والتفاعلية والاستقرار البصري، وتؤثر في تجربة المستخدم وترتيب البحث معًا.

المقاييس الثلاثة

تتكون المجموعة من LCP (أكبر رسم للمحتوى)، وCLS (الإزاحة التراكمية للتخطيط)، وINP (التفاعل حتى الرسم التالي). ويستهدف كل مقياس جانبًا مختلفًا من الأداء المُدرَك.

LCP

يقيس LCP الوقت الذي يكتمل فيه عرض أكبر عنصر ظاهر (مثل صورة رئيسية أو عنوان). وتُعد النتيجة الجيدة أقل من 2.5 ثانية. ويساعد SSR على ذلك عبر إيصال هذا المحتوى في HTML الأولي.

CLS

يقيس CLS تحولات التخطيط غير المتوقعة أثناء تحميل الصفحة. وتُعد النتيجة الجيدة أقل من 0.1. احجز مساحة للصور والإعلانات، وتجنب إدراج محتوى فوق محتوى موجود.

<img src="hero.jpg" width="800" height="450" alt="...">
<!-- explicit dimensions prevent shift -->

INP

يقيس INP سرعة الاستجابة لتفاعلات المستخدم طوال فترة حياة الصفحة، وهو يحل محل FID الأقدم. وتُعد النتيجة الجيدة أقل من 200 ms. ويؤثر JavaScript الثقيل في الخيط الرئيسي سلبًا في INP.

كيف يساعد SSR مؤشرات الأداء الحيوية

يحسّن SSR قيمة LCP عبر عرض المحتوى في وقت أبكر، ويمكنه تقليل CLS عبر تقديم تخطيط مستقر مبكرًا. كما يحسّن الترطيب التدريجي INP من خلال إرسال JavaScript أقل مسبقًا.

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

تأتي بيانات المختبر من أدوات اصطناعية مثل Lighthouse في بيئة مضبوطة. أما البيانات الميدانية (CrUX وRUM) فتأتي من مستخدمين حقيقيين. حسّن الأداء باستخدام النوعين؛ فالبيانات الميدانية هي التي يعتمد عليها الترتيب.

القياس باستخدام Lighthouse

شغّل Lighthouse في Chrome DevTools أو ضمن CI للحصول على قيم LCP وCLS المختبرية، ووكيل عن إجمالي وقت الحجب بالنسبة إلى INP، إضافةً إلى تشخيصات قابلة للتنفيذ.

// npx lighthouse https://example.com --view

مكتبة web-vitals

اجمع مؤشرات الأداء الحيوية من مستخدمين حقيقيين في المتصفح باستخدام مكتبة web-vitals، وأرسلها إلى نقطة نهاية التحليلات لديك.

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

onLCP(console.log);
onCLS(console.log);
onINP(console.log);

تقليل JavaScript

تحسّن الحزم الأصغر INP وزمن الوصول إلى التفاعلية. استخدم التحميل الكسول على مستوى المسارات، و@defer، والترطيب التدريجي، وtree-shaking لتقليل JavaScript المُرسَل.

التكرار والتحقق

يتطلب تحسين الأداء القياس، ثم التغيير، ثم القياس مرة أخرى. بعد تفعيل SSR أو الترطيب أو defer، أعد تشغيل Lighthouse وتابع اتجاه البيانات الميدانية على مدار أسابيع للتأكد من المكاسب الحقيقية.

تحقق سريع

تحقق من معرفتك بـ Core Web Vitals.

مراجعة

تعلّمت مؤشرات Core Web Vitals (LCP وCLS وINP)، وكيف يحسّنها SSR والترطيب التدريجي، والفرق بين بيانات المختبر والبيانات الميدانية، وكيفية القياس باستخدام Lighthouse ومكتبة web-vitals، ثم التكرار بإعادة القياس.

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

هل درس «قياس مؤشرات الويب الأساسية» مجاني؟

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

ماذا ستتعلم في «قياس مؤشرات الويب الأساسية»؟

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

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

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

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

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

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

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

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

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