كيف تحدد أولويات تحسين سرعة موقعك باستخدام Core Web Vitals؟

قد يكون ملف صورة المنتج صغيرًا ومع ذلك يتأخر ظهورها على الهاتف. إذا لم يكتشف المتصفح رابطها إلا بعد تشغيل سكربت، فلن يعالج ضغط الصورة وحده وقت الانتظار الذي سبق تنزيلها.

لترتيب تحسينات Core Web Vitals أربط كل مقياس بملاحظة من الصفحة. ما أكبر عنصر ظهر؟ ما التفاعل الذي تأخر أثره على الشاشة؟ وهل تحرك زر أثناء محاولة العميل الضغط عليه؟

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

تقيس المؤشرات الثلاثة جوانب مختلفة من تجربة الصفحة:

المقياس	ما الذي يرصده؟	الحد الجيد
LCP	وقت ظهور أكبر عنصر محتوى مرئي مؤهل للقياس	2.5 ثانية أو أقل
INP	استجابة الصفحة لتفاعلات المستخدم	200 مللي ثانية أو أقل
CLS	مقدار تغير مواضع العناصر بشكل غير متوقع	0.1 أو أقل

تُقيّم الحدود في البيانات الميدانية عند المئين الخامس والسبعين. قبل تفسير الرقم، افحص المجموعة التي يمثلها: هاتف أم حاسوب؟ رابط بعينه أم مجموعة صفحات أم الموقع عمومًا؟ نتيجة المجموعة لا تصف بالضرورة تجربة كل زائر على صفحة منتج محددة.

افصل بيانات الميدان عن المعمل

تسجيل التحميل في المختبر يجعل الاختبار قابلًا للتكرار على الجهاز والشبكة والإعدادات نفسها. أستخدمه لتشخيص تأخر صورة أو أثر تغيير في القالب. أما البيانات الميدانية فتأتي من مستخدمين توفرت قياساتهم، على أجهزة وشبكات وظروف حقيقية مختلفة.

إذا لم تتوفر عينة ميدانية كافية لرابط، وضّح ذلك. استخدم اختبار المختبر للتشخيص ثم تابع البيانات الفعلية عندما تتوفر. ولقياس قائمة أو فلتر، جرّب التفاعل نفسه. مراقبة التحميل الأولي لا تكشف ما يحدث بعد ضغط العميل.

ابدأ من الصفحات التي تخدم القرار

اختر عينة من القوالب المهمة: الرئيسية وصفحة خدمة أو منتج ومقال وخطوة إتمام الطلب إن كانت لديك. أضف صفحة يصل إليها جمهور أساسي من البحث أو من حملة. اختبار عشرة روابط من قالب واحد قد يفوّت خللًا في قالب آخر.

رتّب الأولويات بحسب عدد المتأثرين وأهمية المهمة وشدة المشكلة. إصلاح تأخر زر الشراء على هواتف العملاء قد يستحق وقت الفريق قبل تحسين صفحة قليلة الاستخدام تحقق أصلًا نتيجة جيدة.

شخّص LCP قبل ضغط كل الصور

افتح تسجيل تحميل لصفحة المنتج وحدّد عنصر LCP. إذا كان الصورة الرئيسية، فمتى اكتشف المتصفح رابطها؟ ومتى بدأ تنزيلها ومتى ظهرت؟ أطول فترة انتظار بين هذه المراحل هي نقطة البداية في التشخيص.

استجابة الصفحةوصل HTML إلى المتصفح.

اكتشاف الصورةظهر رابط الصورة بعد تشغيل سكربت.

تنزيل الملفبدأ طلب الصورة.

العرضظهرت الصورة على الشاشة.

في هذا المثال بدأ التأخير قبل تنزيل الصورة. قارن توقيت اكتشاف المورد في تسجيلين، أحدهما قبل التعديل والآخر بعده.

فتح الصورة بالحجم الكامل ↗

بالنسبة للصورة راجع الحجم والأبعاد والصيغة وطريقة التحميل، وتجنب تأخير مورد تحتاجه الشاشة الأولى. وإذا كان العنصر نصًا، فافحص الخطوط والأنماط التي تعوق عرضه. استخدم دليل web.dev لتحسين LCP لتفصيل السبب قبل تغيير القالب.

افحص التفاعل والاستقرار أثناء الاستخدام

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

لفحص CLS، تابع موضع زر الشراء بينما تُحمّل الصور أو تظهر لافتة فوق المحتوى. إذا تحرك الزر، راجع أبعاد المورد والمساحة المحجوزة قبل التحميل. وإذا ظهر التحرك بعد التفاعل، سجّل خطوات إعادة المشكلة بدل الاكتفاء بفحص أول شاشة.

بطاقة تحسين أداء واحدة

افتح مهمة لصفحة المنتج المتأخرة وأرفق تسجيل التحميل واسم عنصر LCP وتوقيت اكتشافه. إذا بدأ التأخير قبل التنزيل، اقترح تعديل طريقة إدراج المورد. احتفظ بلقطة من تسجيل ما قبل التعديل للمقارنة.

كرر التسجيل بعد النشر في الظروف نفسها وقارن وقت اكتشاف الرابط ووقت العرض. افتح الصفحة بعرض هاتف وتحقق من دقة صورة المنتج. إذا لم يتغير التوقيت الذي استهدفته، ارجع إلى التشخيص قبل تعميم التعديل.

وثق قبل وبعد وحدود النتيجة

اشرح لصاحب المتجر أي عنصر كان يتأخر وما الذي تغيّر في مسار تحميله. حدّد الجهاز والشبكة إذا كانت النتيجة من المختبر. وللمقارنة الميدانية انتظر حتى تتجمع بيانات كافية بعد النشر. تجنب وعد رقمي لا تدعمه قياسات الموقع.

احفظ التسجيلين ورابط الصفحة والجهاز ووصف التعديل. جرّب مسار الشراء بنفسك، خصوصًا إذا مسّ التغيير الصور أو الفلاتر. وإذا ظلت العينة الميدانية صغيرة، فاذكر ذلك وانتظر نافذة قياس مناسبة. استعن بـمراجعة CRO لربط الأداء بمشكلات الاستخدام.