Content-Visibility لتسريع العرض

content-visibility: ثورة في سرعة عرض المواقع

content-visibility هي أقوى أداة CSS لتسريع عرض المحتوى وتحسين Core Web Vitals

تخيل معي: صفحة ويب تحتوي على 100 مقالة، كل مقالة فيها صور ونصوص وتفاصيل. المتصفح يحاول تحميل كل هذه المحتويات دفعة واحدة، مما يسبب بطئاً كبيراً في التحميل وتجربة مستخدم سيئة. ولكن ماذا لو أخبرنا المتصفح: "لا تقلق، لن تحتاج لتحميل هذه المحتويات إلا عندما يقترب المستخدم منها"؟ هذا بالضبط ما تفعله خاصية content-visibility.

في هذا الدليل الشامل من أكاديمية الجندي سيوتربو، راح نتعلم سوا كل شيء عن content-visibility: ما هي، كيف تعمل، وكيف نستخدمها لتحسين Core Web Vitals وترتيبنا في جوجل. كل هذا يتماشى مع رؤية المملكة 2030 في تحسين جودة المحتوى الرقمي وتجربة المستخدم.

ما هي content-visibility وكيف تعمل؟

content-visibility هي خاصية CSS جديدة (مدعومة في جميع المتصفحات الحديثة اعتباراً من سبتمبر 2024) تسمح للمتصفح بتأجيل تحميل وعرض المحتوى الذي ليس ظاهراً للمستخدم حالياً.[citation:9][citation:6]

كيف تعمل بالضبط؟

عندما تضيف `content-visibility: auto` لعنصر ما، يخبر المتصفح بأنه يمكنه "تخطي" كل أعمال التصيير (rendering) لهذا العنصر ومحتوياته إذا كان خارج الشاشة. هذا يعني تخطي حساب الأنماط (styles)، التخطيط (layout)، والرسم (paint) بالكامل.[citation:13]

تخيل أن صفحتك تحتوي على 50 قسمًا من المحتوى. بدون content-visibility، يقوم المتصفح بحساب تخطيط ورسم كل هذه الأقسام عند التحميل الأولي. مع `content-visibility: auto`، يقوم المتصفح بحساب تخطيط ورسم الأقسام الظاهرة فقط (الجزء العلوي من الصفحة)، ويترك الباقي لحين الحاجة إليه.[citation:13]

القيم الثلاث لـ content-visibility:[citation:1][citation:6]

1. visible (القيمة الافتراضية): يتم معالجة المحتوى وعرضه بشكل طبيعي.

2. hidden: يتم تخطي المحتوى ولا يكون مرئياً أو قابلاً للوصول (مشابه لـ display: none)، لكن حالة التصيير تُحفظ للظهور السريع لاحقاً.[citation:6]

3. auto (الأهم للتحسين): يتم تصيير المحتوى فقط عندما يكون قريباً من منطقة العرض (viewport) أو مطلوباً. هذه القيمة تعطي أكبر تحسين في الأداء.[citation:1][citation:6]

جدول: مقارنة قيم content-visibility

كيف تعمل content-visibility: auto بالتفصيل

عندما تطبق `content-visibility: auto` على عنصر ما، يقوم المتصفح بتطبيق مجموعة من "الحاويات" (containments) تلقائياً على هذا العنصر:[citation:13]

1. Layout Containment: يضمن أن العناصر الداخلية لا تؤثر على تخطيط العناصر الخارجية.[citation:13]

2. Style Containment: يضمن أن الأنماط الداخلية لا تؤثر على العناصر الخارجية (مثل العدادات).[citation:13]

3. Paint Containment: يضمن أن المحتوى لا يفيض خارج حدود العنصر، مما يسمح بتخطي عملية الرسم للعناصر خارج الشاشة.[citation:13]

4. Size Containment (تطبق فقط خارج الشاشة): عندما يكون العنصر خارج الشاشة، يضيف المتصفح أيضاً Size Containment، مما يعني أنه يحسب حجم العنصر دون النظر إلى محتوياته، ثم يتوقف. معظم أعمال التصيير (مثل تنسيق وتخطيط العناصر الداخلية) تُتخطى بالكامل.[citation:13]

نتيجة هذا السلوك: يصبح التحميل الأولي للصفحة أسرع بكثير لأن المتصفح يقوم بعمل أقل. عندما يقترب المستخدم من التمرير إلى العنصر، يبدأ المتصفح في تصيير محتوياته "في الوقت المناسب" (Just-in-Time) لتكون جاهزة عند وصول المستخدم إليها.[citation:1][citation:13]

contain-intrinsic-size: مفتاح استقرار التخطيط

عند استخدام `content-visibility: auto`، يواجه المطورون مشكلة: المتصفح لا يعرف حجم المحتوى المؤجل. في هذه الحالة، يفترض المتصفح أن الارتفاع هو 0، مما قد يتسبب في تزحزح شريط التمرير بشكل مفاجئ عندما يُعرض المحتوى لاحقاً.[citation:1][citation:4]

هنا يأتي دور contain-intrinsic-size. هذه الخاصية تسمح لك بتحديد حجم "بديل" (placeholder) للعنصر حتى يعرف المتصفح كم مساحة يحتاجها قبل تحميل المحتوى الفعلي.[citation:1][citation:4]

مثال:

.section {
  content-visibility: auto;
  contain-intrinsic-size: auto 600px; /* عرض تلقائي، ارتفاع 600 بكسل */
}

هذا الكود يخبر المتصفح: "هذا القسم سيكون عرضه تلقائياً، وارتفاعه التقريبي 600 بكسل. استخدم هذه القيم كحجم بديل حتى يتم تحميل المحتوى الفعلي".[citation:1]

استخدام `contain-intrinsic-size` يمنع تزحزح التخطيط (Layout Shifts) التي تؤثر سلباً على CLS (Cumulative Layout Shift) - أحد مقاييس Core Web Vitals.[citation:4][citation:12]

متى تستخدم content-visibility؟

ليس كل عنصر يحتاج إلى `content-visibility: auto`. يجب استخدامها بحكمة في المواقع المناسبة.

✓ استخدامات مثالية (ممتاز):

1. القوائم الطويلة: مثل قوائم المنتجات، المقالات في صفحة المدونة، أو نتائج البحث.[citation:1][citation:8]

2. التعليقات المتسلسلة الطويلة: سلاسل التعليقات التي تحتوي على عشرات أو مئات الردود.[citation:1]

3. الأقسام الكبيرة ذات التصيير المكثف: مثل الجداول المعقدة، المخططات، أو الرسوم التفاعلية خارج الشاشة.[citation:1][citation:12]

4. مكونات واجهة المستخدم المتكررة: مثل البطاقات (Cards) في خلاصات المحتوى.[citation:1]

✗ تجنب استخدامها في:

1. المحتوى في الجزء العلوي من الصفحة (Above the fold): تطبيقها هنا يشبه "التحميل البطيء" لصورة LCP، مما يضر بالأداء.[citation:1]

2. العناصر الصغيرة ذات تكلفة تصيير منخفضة: لا تستخدمها حيث لا يوجد تحسين يذكر (تحسين مبكر غير ضروري).[citation:1]

3. العناصر التي قد يؤثر حجمها بشكل كبير على تخطيط الصفحة: حيث قد يتسبب الحجم البديل غير الدقيق في نتائج غير متوقعة.[citation:1]

مثال عملي: تطبيق content-visibility على مدونة

تخيل أن لديك صفحة مدونة تعرض 20 مقالة، كل مقالة تحتوي على صورة، عنوان، مقتطف، وتاريخ. يمكنك تطبيق `content-visibility: auto` على كل بطاقة مقالة لتسريع تحميل الصفحة.

/* تطبيق content-visibility على بطاقات المقالات */
.blog-post {
  content-visibility: auto;
  contain-intrinsic-size: auto 350px; /* ارتفاع تقريبي لكل مقالة */
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
}

/* تأكد من عدم تطبيقها على أول 5 مقالات (في الشاشة) */
.blog-post:nth-child(-n+5) {
  content-visibility: visible; /* عرض عادي للعناصر المرئية */
}

في هذا المثال، أول 5 مقالات تُعرض بشكل طبيعي. أما المقالات الـ 15 التالية، فيتم تأجيل تصييرها حتى يقترب المستخدم من التمرير إليها.[citation:1]

إمكانية الوصول (Accessibility) مع content-visibility

من المهم فهم كيف تؤثر content-visibility على إمكانية الوصول.

content-visibility: auto تبقي المحتوى خارج الشاشة موجوداً في DOM وشجرة إمكانية الوصول. وهذا يسمح بما يلي:[citation:6][citation:13]

- البحث في الصفحة (Ctrl+F): يمكن للمستخدمين البحث عن محتوى في الأجزاء غير المعروضة.[citation:6]

- التنقل عبر لوحة المفاتيح (Tab): يمكن الوصول إلى العناصر غير المعروضة عبر التنقل باستخدام لوحة المفاتيح.[citation:6]

- قارئات الشاشة: تبقى العناصر متاحة لقارئات الشاشة.[citation:6][citation:13]

بالمقابل، content-visibility: hidden تتصرف بشكل مشابه لـ `display: none` من حيث إمكانية الوصول: المحتوى لا يمكن الوصول إليه ولا يمكن البحث فيه.[citation:6]

ملاحظة هامة: في بعض المتصفحات، قد تظهر العناصر المخفية باستخدام `display: none` أو `visibility: hidden` في شجرة إمكانية الوصول عند استخدام `content-visibility: auto` (لأن المتصفح لا يقوم بتصيير هذه العناصر حتى تدخل الشاشة، وبالتالي لا يعرف أنها مخفية). لمنع ذلك، استخدم `aria-hidden="true"` على العناصر التي تريد إخفاءها تماماً.[citation:6][citation:13]

دعم المتصفحات والتوافق

الخبر السار: خاصية content-visibility أصبحت Baseline Newly Available (معياراً متاحاً جديداً) اعتباراً من سبتمبر 2024، وتدعمها جميع المتصفحات الحديثة:[citation:9]

- Chrome (من الإصدار 85): دعم كامل.

- Edge (من الإصدار 85): دعم كامل.

- Firefox (من الإصدار 121): دعم كامل (مع بعض الاختلافات البسيطة).

- Safari (من الإصدار 18): دعم كامل (تم إضافة الدعم في 2024).[citation:8]

نظراً لأن content-visibility هي خاصية CSS، فالمتصفحات التي لا تدعمها ستتجاهلها ببساطة، وستظل الصفحة تعمل بشكل طبيعي (بدون التحسين). هذا يجعلها ترقية تدريجية (Progressive Enhancement) آمنة تماماً.[citation:9]

content-visibility ورؤية المملكة 2030

استخدام content-visibility لتسريع عرض المحتوى ليس مجرد تحسين تقني، بل هو جزء من التحول الرقمي الشامل اللي تشهده المملكة العربية السعودية تحت راية رؤية 2030. الرؤية تسعى لتحسين جودة الخدمات الرقمية ورفع كفاءة المنشآت الصغيرة والمتوسطة.

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

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

في الختام، تذكر أن content-visibility هي أداة قوية لتسريع عرض المحتوى. استخدمها بحكمة مع الصفحات الطويلة، ولا تنسَ تحديد الحجم البديل باستخدام contain-intrinsic-size لتجنب تزحزح التخطيط. اختبر موقعك مع PageSpeed Insights لترى الفرق المذهل في الأداء.