برمجة

content-visibility: auto لا تؤجل تنزيل الصور بالضرورة

فريق فايندو جروب2 دقائق قراءة0 مشاهدة0 تعليقات
مشاركة:
شاشة أدوات متصفح تعرض أقسام صفحة طويلة مع مساحة محفوظة ومخطط تكلفة الرسم

قد تكون صفحة الخدمات طويلة وثقيلة رغم ضغط الصور. يمكن أن تتعلق الكلفة بتخطيط أقسام بعيدة ورسمها، لكن تقليل هذا العمل ليس مساويًا لتأجيل تحميل مواردها. افصل القياسين قبل اختيار content-visibility: auto كحل.

ما الذي تتجاوزه الخاصية؟

تشرح وثائق MDN تخطي أعمال عرض محتوى بعيد عن مجال الرؤية عند استخدام auto، مع بقاء المحتوى في DOM وشجرة الإتاحة. وتعرض contain-intrinsic-size لتقدير المساحة. لا تعني هذه الآلية تلقائيًا منع كل طلب صورة أو تضمين من الوصول إلى الشبكة.

اختبر صفحة فعلية لا كتلة فارغة

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

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

الحجم التقديري يحتاج مراجعة

تقدير بعيد عن ارتفاع القسم قد يغير طول الصفحة أثناء التمرير. اختبر نصًا عربيًا أطول وعرض هاتف وصورًا بطيئة، لا عينة قصيرة فقط. والفرق بين hidden وauto مهم؛ لا تستبدل إخفاء عنصر مقصود بآلية تحسين رسم ثم تفترض أن الإتاحة بقيت كما كانت.

لا تستخدم aria-hidden على قسم مفيد لمجرد التخلص من ملاحظة في أداة قياس. راجع العناصر التي يُفترض إخفاؤها داخل القسم وفق سلوك المتصفحات المستهدفة، وحدد بديلًا عند غياب الدعم.

افصل النتيجة عن الوعد

تراجع تصميمات الواجهات التمرير وحجز المساحة، وتقيس المراجعة التقنية الكلفة قبل التعديل وبعده. تحسن تجربة محلية لا يثبت أن كل زائر حصل على التحسن نفسه، ولا أن فهرسة Google أو درجة الأداء تحسنت دون اختبار مستقل.

صورة توضيحية أصلية لشرح الفكرة، وليست لقطة نظام عميل أو نتيجة قياس فعلية.

التصنيفات:برمجة
شارك:

التعليقات

لا توجد تعليقات بعد

أضف تعليقك

كن أول من يعلق على هذا المقال

02 · تابع القراءة

مقالات ذات صلة