Core Web Vitals: ما الذي يحرّك الأرقام فعلًا

تُعامَل مؤشرات Core Web Vitals كقائمة تحسينات تُطبَّق. لكن فهمها أفضل بوصفها ثلاثة أسئلة عن سلوك الصفحة: متى يظهر المحتوى الرئيسي، وبأي سرعة تستجيب الصفحة حين يتفاعل معها أحدهم، وهل يبقى التخطيط ثابتًا أثناء التحميل.

Largest Contentful Paint

يقيس LCP اللحظة التي ينتهي فيها عرض أكبر عنصر مرئي، وغالبًا ما يكون صورة رئيسية أو كتلة عنوان أو صورة غلاف فيديو. والخطأ الشائع هو تحسين كل شيء في الصفحة بدل تحديد ما هو عنصر LCP فعلًا وتقصير مساره.

1. حدّدوا عنصر LCP من بيانات الميدان لا بالتخمين من اختبار مخبري
2. تأكدوا من أنه قابل للاكتشاف في HTML الأولي لا مُحقَنًا عبر JavaScript
3. حمّلوه مسبقًا إن كان صورة، وقدّموه بصيغة حديثة وبالحجم الصحيح
4. أزيلوا الموارد التي تحجب العرض والواقعة قبله في المسار الحرج
5. افحصوا زمن استجابة الخادم، فلا قدر من العمل على الواجهة يصلح مصدرًا بطيئًا

Interaction to Next Paint

حلّ INP محل First Input Delay لأنه يقيس التفاعل كاملًا لا التأخير الأولي فقط. وهو يعكس حجم العمل الذي ينفّذه الخيط الرئيسي حين ينقر المستخدم أو يلمس.

• قلّلوا حجم JavaScript المُرسَل والمُحلَّل في كل مسار
• قسّموا المهام الطويلة ليستطيع الخيط الرئيسي الاستجابة بين الأجزاء
• تجنّبوا العمل الذي يستدعي إعادة التخطيط داخل معالجات التمرير وتغيير الحجم
• أبقوا حالة الرسوم المتحركة خارج حالة إطار العمل حيث ينتج عنها إعادة عرض لكل إطار
• أجّلوا السكربتات الخارجية غير الضرورية، فهي غالبًا أكبر مساهم في المشكلة

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

Cumulative Layout Shift

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

• حدّدوا العرض والارتفاع للصور والفيديو ليُحجَز المكان قبل التحميل
• احجزوا مساحة لكل ما يُحقَن لاحقًا: اللافتات والمحتوى المضمّن والمكوّنات الديناميكية
• استخدموا font-display وخطوطًا بديلة مضبوطة القياسات حتى لا يُعاد تدفق النص عند تبديل الخط
• لا تُدرجوا محتوى فوق محتوى قائم بعد أن تُرسَم الصفحة

بيانات المختبر وبيانات الميدان

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

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

أين يؤتي الجهد ثماره عادةً

بحسب خبرتنا، الترتيب ثابت إلى حد بعيد: زمن استجابة الخادم والموارد الحاجبة للعرض بالنسبة إلى LCP؛ والسكربتات الخارجية وحجم الحزمة بالنسبة إلى INP؛ والصور والمحتوى المحقون بالنسبة إلى CLS. ابدأوا من هناك قبل اللجوء إلى تحسينات صغيرة.