مؤشرات Core Web Vitals للمصممين
المؤشرات الثلاثة
مؤشرات Core Web Vitals هي مجموعة مقاييس أداء من Google تتمحور حول المستخدم. ويؤثر المصممون في الثلاثة عبر قرارات التخطيط والوسائط والحركة.
مؤشر LCP
Largest Contentful Paint: سرعة ظهور المحتوى الرئيسي. الجيد 2.5 ثانية أو أقل.
مؤشر INP
Interaction to Next Paint: سرعة استجابة الصفحة للإدخال. الجيد 200 ميلي ثانية أو أقل.
مؤشر CLS
Cumulative Layout Shift: مقدار قفز المحتوى. الجيد 0.1 أو أقل.
هذه العتبات من web.dev وتُقاس عند المئين 75 لتحميلات الصفحة.
التصميم لـ LCP سريع
في صفحات كثيرة يكون أكبر عنصر صورة رئيسية أو عنوانًا كبيرًا. والصور الكبيرة هي السبب الأشيع لبطء LCP.
- اختر صورة رئيسية لا تزيد عن الحاجة وصدّرها بصيغة حديثة مضغوطة.
- اجعل الصورة الرئيسية ذات أولوية عالية ولا تؤجل تحميلها. يمكن للمطورين استخدام <code>;fetchpriority="high"</code>;.
- تجنب إخفاء المحتوى الرئيسي خلف حركة أو شريحة يجب أن تُحمَّل أولًا.
منع تغيّر التخطيط
- احجز مساحة للصور والمحتوى المضمّن عبر الخاصيتين <code>;width<;/code>; و<code>;height<;/code>; أو خاصية CSS <code>;aspect-ratio<;/code>;.
- امنح اللافتات المتأخرة وإشعارات الكوكيز والإعلانات مساحة ثابتة، أو اعرضها فوق المحتوى بدل دفعه للأسفل.
- قلّل عدد الخطوط واختر خطًا احتياطيًا بأبعاد مشابهة لئلا يقفز النص عند تحميل الخط.
الحركة والاستجابة
- حرّك <code>;transform<;/code>; و<code>;opacity<;/code>;. يمكن تنفيذهما دون إعادة حساب التخطيط، بخلاف width وheight وtop.
- قلّل الأدوات الخارجية الثقيلة كأدوات الدردشة وأدوات التتبع والمحتوى المضمّن الكبير. فهي تنافس صفحتك على المعالجة وقد تبطّئ الاستجابة.
- قدّم تغذية راجعة بصرية فورية عند الضغط، كحالة الضغط، حتى لو تأخرت النتيجة الكاملة.
ناقش هذه النقاط مع المطورين مبكرًا. تُظهر أدوات القياس مثل PageSpeed Insights وLighthouse أي عنصر هو LCP وأين تحدث التغيّرات.
لا يضبط المصممون الأداء وحدهم، لكن قراراتهم تضع السقف. الصفحة المبنية من صور ضخمة وخطوط كثيرة وأدوات متراكمة بطيئة قبل أي تحسين للكود.
- اتفق مع المطورين على ميزانية بسيطة: أحجام الصور وعدد الخطوط والسكربتات الخارجية.
- حدّد في التصميم العنصر المرجّح أن يكون LCP ليعرف الجميع الأصل ذا الأولوية.
- راجع الصفحة الحية بـ PageSpeed Insights أو Lighthouse بعد كل تغيير كبير.
الصفحات السريعة فائدة لإمكانية الوصول والشمول أيضًا، فالاتصالات البطيئة والأجهزة القديمة شائعة.
المصادر
- web.dev. Web Vitals. https://web.dev/articles/vitals
- web.dev. Optimize Cumulative Layout Shift. https://web.dev/articles/optimize-cls
صيغ هذا الدليل بمساعدة الذكاء الاصطناعي اعتمادًا على معايير ومراجع عامة. وللنص الدقيق لأي معيار، ارجع إلى المصادر المذكورة أعلاه.