تأجيل عرض المحتوى الثقيل

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

لتحسين العرض، يمكنك استخدام سمة CSS‏ content-visibility وسمة HTML‏ hidden="until-found". على الرغم من أنّ كليهما يساعد في تحسين الأداء، إلا أنّهما يخدمان حالات استخدام مختلفة.

حالات استخدام كل منهما

كيفية إعداد content-visibility: auto

اختيار محتوى خارج الشاشة

إلزامي: يجب تحديد العناصر التي تتلقّى content-visibility: auto بعناية.

• يُرجى استهداف مجموعات كبيرة ومستقلة من التنسيقات التي تقع بدقة أسفل الجزء المرئي الأولي من الصفحة (مثل عناصر البطاقات في خلاصة لا نهائية أو التعليقات اللاحقة أو أقسام التنسيق التي تتركّز في الأسفل).
• لا تطبّق هذه السمة على العناصر ضمن إطار العرض الأولي في الجزء المرئي من الصفحة. ويؤدي ذلك إلى إجبار المتصفّح على تقييم حدود مستوى العرض قبل العرض، ما يؤدي إلى تأخير أداء تحميل الصفحة المهمة بشكل متناقض.
• يجب استهداف العناصر التي تتضمّن بنى DOM داخلية عميقة أو معقّدة لزيادة نسبة التوفير في تكاليف العرض إلى أقصى حدّ.

خطوات التنفيذ

1. إلزامي: حدِّد الأقسام الثقيلة التي تم التأكّد من أنّها خارج الشاشة عند التحميل الأولي.
2. إجراء إلزامي: يجب تطبيق السمة content-visibility: auto على كل عنصر من هذه العناصر التي تظهر خارج الشاشة.
3. إلزامي: يجب تقديم حجم تقديري لبنية التنسيق باستخدام السمة contain-intrinsic-size في كل عنصر.

طريقة استخدام بطاقة contain-intrinsic-size

إلزامي: يجب إقران "content-visibility: auto" بـ "contain-intrinsic-size". وإذا لم يتم ذلك، سيضطر المتصفّح إلى تصغير العنصر إلى ارتفاع 0 بكسل عندما يكون خارج الشاشة، ما يؤدي إلى تغييرات شديدة في التصميم وقفز شريط التمرير أثناء انتقال المستخدم للأسفل أو للأعلى.

تعمل السمة المختصرة contain-intrinsic-size في CSS كسمة عنصر نائب. يتيح استخدام الكلمة الرئيسية auto للمتصفّح "تذكُّر" الحجم الدقيق بعد عرض العنصر أخيرًا، وذلك باستخدام هذا الحجم المحسوب بدلاً من العنصر النائب إذا خرج العنصر من الشاشة مرة أخرى.

مثال على الرمز

/* DO ONLY apply this class to items OUTSIDE the initial layout viewport */
.heavy-section-deferred {
  /* MANDATORY: Skips rendering calculations when off-screen */
  content-visibility: auto;
  
  /* Mandatory: Provide an estimated size to prevent layouts shifts.
    - 'auto' is optional and enables the browser to remember the actual size
      once rendered. It must be paired with a <length> value to be used for
      the first render.
    - 'none' tells the browser not to apply any intrinsic width to this element.
      It can be used for either the height or the width value.
    - '150px' is the estimated height of this element. This can be any valid
      CSS <length> value.
   */
  contain-intrinsic-size: auto none auto 150px; 
}

كيفية إعداد content-visibility: hidden

1. تحديد الأقسام الثقيلة: حدِّد مجموعات التنسيق المخفية في البداية (مثل الصفوف الإضافية في جدول بيانات كبير).
2. تطبيق CSS: أضِف content-visibility: hidden إلى العنصر.
3. إظهار العنصر: عندما يحين وقت إظهار العنصر، غيِّر السمة content-visibility إلى visible أو auto.

مثال على الرمز

.cached-view {
  /* Hides content but caches rendering state */
  content-visibility: hidden;
}

.cached-view.is-active {
  content-visibility: visible;
}

بما أنّ السمة content-visibility: hidden تستبعد العنصر والعناصر الثانوية من شجرة تسهيل الاستخدام والبحث في الصفحة، لا تستخدِمها إذا كان يجب أن يظل المحتوى قابلاً للاكتشاف أثناء إخفائه. إذا كنت بحاجة إلى أن يظل المحتوى المخفي قابلاً للبحث من خلال ميزة "البحث في الصفحة" المضمّنة، استخدِم السمة hidden="until-found" كما هو موضّح في مقالة البحث في المحتوى المخفي.

أفضل الممارسات

• يجب استخدام contain-intrinsic-size مع content-visibility: auto. يؤدي عدم الالتزام بذلك إلى إعادة احتساب الارتفاع عند الانتقال للأعلى أو الأسفل، ما يؤدي إلى حدوث قفزات في تنسيق إطار العرض أو خلل مرئي.
• لا تطبّق السمة content-visibility: auto على العناصر داخل إطار العرض الأولي للجزء المرئي من الصفحة، لأنّ ذلك يؤدي إلى تأخير عرض الصفحة المهمة.
• التحقّق الإلزامي من أدوات تسهيل الاستخدام: عند تطبيق content-visibility: auto، يجب التحقّق من إمكانية الوصول المتسلسل إلى لوحة المفاتيح. في بعض إعدادات التكنولوجيا المساعِدة، قد يتم استبعاد العُقَد خارج الشاشة التي تستخدم content-visibility: auto من شجرة تسهيل الاستخدام أو مسارات التنقّل المتسلسلة إلى أن يتم نقل التركيز إليها بالقوة. اختبر التنقل الخطي عبر الحدود خارج الشاشة باستخدام لوحة المفاتيح وحدها.

استراتيجيات احتياطية

الخيار الاحتياطي: content-visibility

وعندما لا تكون السمة content-visibility متوافقة، سيتجاهلها المتصفّح. في معظم الحالات، لن يحتاج content-visibility: auto إلى إجراء احتياطي، ولكن بدونه ستفقد تحسينات الأداء. سيترك المتصفّح غير المتوافق عناصر content-visibility: hidden مرئية بالكامل. استخدِم ميزة "رصد الميزات" لتنفيذ إجراء احتياطي.

/* Default for everyone */
.inactive {
  display: none;
}

/* Modern Browsers only */
@supports (content-visibility: hidden) {
 .inactive {
    display: block; /* Turn the layout box back on */
    content-visibility: hidden;
  }
}