مؤشرات الويب الأساسية للمواقع العربية: أين تضيع الميلي ثانية

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

LCP: أكبر عنصر مرئي

يقيس الوقت حتى يظهر أكبر عنصر في الشاشة الأولى — غالبًا صورة البانر أو عنوان كبير. المستهدف أقل من ٢٫٥ ثانية.

السبب العربي الخاص: وزن الخط

الخط العربي أثقل من نظيره اللاتيني لأن تغطيته أوسع: لكل حرف عدة أشكال حسب موضعه، إضافة إلى التشكيل والأرقام بنوعيها. ثلاثة أوزان من خط عربي قد تقارب ٢٠٠ كيلوبايت. وإن كان العنوان الكبير هو أكبر عنصر في الصفحة، فإن LCP ينتظر وصول الخط.

العلاج: قلّل الأوزان إلى اثنين، وقلّم الخط ممّا لا تستخدمه، واستخدم font-display: swap، وحمّل مسبقًا ملف الخط الذي يظهر فوق الطيّة فقط.

الأسباب المشتركة

• صورة بانر غير مضغوطة أو بمقاس أكبر من المعروض.
• بطء الخادم في أول بايت — استضافة مشتركة مزدحمة.
• سكربتات تحجب الرسم قبل أن يظهر أي شيء.

INP: استجابة التفاعل

يقيس المدة بين ضغط المستخدم ورؤية نتيجة الضغط. المستهدف أقل من ٢٠٠ ميلي ثانية. السبب الأكثر شيوعًا: جافاسكربت كثير يشغل الخيط الرئيسي، فلا يستطيع المتصفح الاستجابة.

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

CLS: ثبات التخطيط

يقيس قفز العناصر أثناء التحميل. المستهدف أقل من ٠٫١، وهو الأسهل إصلاحًا والأكثر إزعاجًا للمستخدم: ضغطة تقع على الزر الخطأ لأن الصفحة تحرّكت.

ثلاثة أسباب تكاد تكون كل الحالات

1. صور بلا أبعاد: اكتب width وheight أو aspect-ratio ليحجز المتصفح المساحة قبل وصول الصورة.
2. تبديل الخط: حين يصل الخط العربي ويختلف في مقاييسه عن البديل، يتحرّك النص. اضبط size-adjust وascent-override على الخط الاحتياطي حتى يقارب الأصلي.
3. محتوى يُحقن فوق الصفحة: بانر، أو إشعار، أو إعلان يُدرَج بعد الرسم فيدفع كل شيء لأسفل. احجز مكانه مسبقًا.

القياس: بيانات المعمل مقابل بيانات الميدان

أداة مثل Lighthouse تعطيك قياسًا مخبريًا على جهاز وشبكة محاكاة — ممتاز للتشخيص، لكنه ليس ما يراه جوجل. ما يُحتسب هو بيانات المستخدمين الحقيقيين عبر ٢٨ يومًا. لذلك لا تنتظر تحسّن الرقم في اليوم التالي للإصلاح؛ النافذة تتحرّك ببطء.

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

الصور: أكبر مكسب سهل

بعد الخطوط، الصور هي البند الثاني في وزن الصفحة العربية النموذجية. ثلاث خطوات تعطي أثرًا فوريًا: قدّم صيغة حديثة مثل WebP أو AVIF؛ وقدّم مقاسات متعدّدة عبر srcset حتى لا يحمّل الجوّال صورة بعرض ١٩٢٠ بكسل؛ وأجّل تحميل ما هو خارج الشاشة بـloading="lazy" — مع استثناء صورة البانر، فتأجيلها يؤخّر LCP بدل أن يحسّنه. هذا الاستثناء يُنسى كثيرًا ويُنتج نتيجة معكوسة.

هل تؤثّر هذه المؤشرات في الترتيب فعلًا

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

ترتيب العمل

ابدأ بـCLS: أسهل الثلاثة وأثره فوري على الاستخدام. ثم LCP، وابدأ فيه بالخطوط والصور قبل أي شيء آخر. واترك INP إلى النهاية لأنه غالبًا يتطلّب مراجعة ما تحمّله من أدوات خارجية، وهو قرار يتجاوز الجانب التقني.

الأداء جزء من طريقة بنائنا في تطوير الويب، لا مرحلة تحسين بعد الإطلاق.