عداد لا يُفسد تخطيط الصفحة

إن إدراج صورة خارجية في صفحة ويب مبنية بعناية ينطوي دائمًا على خطر الإخلال بالبنية البصرية القائمة. فعندما يبني المتصفح الصفحة، يحسب موضع كل كتلة نصية وكل رسم لتقديم تجربة قراءة سلسة.

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

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

رقمان في الوسم يحجزان المساحة

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

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

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

ما يظهر حين لا تظهر الصورة

في الحالات التي يتعثر فيها الاتصال بالشبكة أو ينقطع تمامًا، قد تترك الصورة المفقودة أيقونة مكسورة قبيحة على الشاشة. وللتعامل مع ذلك بلباقة، تؤدي سمة النص البديل المعروفة بالسمة alt دورًا حاسمًا.

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

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

يُحمَّل أخيرًا، عن قصد

توفر معايير الويب الحديثة أدوات إضافية للتحكم في تأثير الرسوم الخارجية على سرعة تحميل المستند إجمالًا. وتُرشد سمتان محددتان، هما loading و decoding، المتصفحَ إلى كيفية ترتيب أولوية الصورة.

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

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