ثبات صفحة الخدمات على الهاتف: صورة البطل وشريط التنبيه وزر الطلب
المشكلة التي يلاحظها الزائر قبل المطوّر
يفتح الزائر صفحة خدمات من هاتفه ويهمّ بالضغط على زر «اطلب الخدمة»، فتظهر صورة كبيرة أو شريط تنبيه في الأعلى فينزلق الزر إلى الأسفل ويضغط الزائر على شيء آخر. هذا هو ما يقيسه مؤشر CLS، أي الاستقرار البصري للصفحة.
ما توضحه الوثيقة
يشرح موقع web.dev أن المؤشر يجمع مقدار المحتوى الذي تحرك وبعد المسافة التي تحركها. ويوصي بأن تبقى القيمة 0.1 أو أقل في 75% على الأقل من زيارات الصفحة، وتُعدّ القيمة الأكبر من 0.25 سيئة. ومن أشهر الأسباب صور بلا أبعاد ومحتوى يُضاف ديناميكيًا. والحل الموثق للصور هو تحديد width وheight أو حجز المساحة بخاصية aspect-ratio، لأن المتصفح عندها يحسب الارتفاع قبل أن تنتهي الصورة من التحميل.
أما ترتيب الخطوات أدناه وقراراتها فهي توصيات هندسية مني وليست نصًا في الوثيقة.
مثال افتراضي
شركة أردنية خيالية، «الصفا لصيانة المكيفات» في عمّان، لديها صفحة خدمات عربية. في الأعلى شريط تنبيه عن مواعيد العمل في العيد، ثم صورة بطل لفني يعمل، ثم عنوان وزر «اطلب زيارة». لا توجد هنا أي أرقام قياس حقيقية، وهذا المثال لتوضيح طريقة التفكير فقط.
القرار التشغيلي
- صورة البطل: أضف لها أبعادها الحقيقية في الوسم، وأبقِ في الأنماط عرضًا كاملًا وارتفاعًا تلقائيًا. بهذا يحجز المتصفح المساحة مسبقًا.
- شريط التنبيه: إن كان سيظهر لبعض الزوار فقط، فاحجز له ارتفاعه دائمًا، أو اجعله يغطي الصفحة دون دفع المحتوى. القرار الأفضل لصفحة الطلب هو ألا يتحرك الزر إطلاقًا.
- زر الطلب: ضعه في موضع لا يتأثر بما يُحمَّل فوقه، أو ثبّته أسفل الشاشة.
- اتجاه الصفحة: تأكد أن اتجاه الكتابة من اليمين لا يغيّر ترتيب العناصر عند ظهور الشريط.
كيف تفحص
تنبّه الوثيقة إلى أن أدوات المختبر مثل Lighthouse تقيس عادة تحميل الصفحة الأولي فقط، بينما تقيس بيانات الميدان عمر الصفحة كله. لذلك قد تظهر الصفحة سليمة في المختبر وفيها قفزات بعد التمرير. افتح لوحة الأداء في أدوات المطور واستعرض مسار تحرك التخطيط، وجرّب الصفحة على هاتف فعلي أو بمحاكاة شاشة صغيرة مع اتصال بطيء.
معالجة الفشل
- يقفز الزر عند ظهور الشريط: ثبّت ارتفاع الشريط أو غيّر موضعه.
- تتحرك الصورة بعد التحميل: راجع أبعادها المكتوبة، فإن اختلفت عن الحقيقية فسيبقى بعض الانزياح.
- تظهر قفزات عند التمرير: افحص المحتوى المؤجل التحميل وأعطه مساحة محجوزة.
- تتفاوت نتيجة المختبر عن بيانات الميدان: ابحث عن انزياحات بعد التحميل، وانتبه إلى أن الأداة قد تعرض بيانات المصدر كله إذا لم تتوفر بيانات للرابط.
- يؤخر الحل ظهور الصورة: ارجع إلى حجم الصورة وضغطها، فهذه مشكلة مستقلة.
قائمة قبول مقترحة (لم تُنفَّذ)
هذه القائمة اقتراح فقط، ولم يُجرَ أي فحص منها.
- كل صورة في أعلى الصفحة لها عرض وارتفاع صحيحان.
- شريط التنبيه يظهر ويختفي دون تحريك الزر.
- زر الطلب في المكان نفسه قبل تحميل الصورة وبعده على شاشة هاتف صغيرة.
- جُرّب التمرير حتى آخر الصفحة دون قفزات ملحوظة.
- فُحصت الصفحة بالاتجاه العربي وبأكثر من حجم شاشة.
- سُجّلت قيم المختبر والميدان، إن توفرت، مع تاريخ كل منها.
- حُدّد مسؤول يعيد الفحص عند إضافة شريط أو إعلان جديد.
حدود هذا المقال
لا يعد المقال بتحسين الترتيب في البحث ولا بنتيجة محددة. هدفه تجربة أوضح للزائر الذي يريد أن يطلب خدمة بسرعة.