يمكنك تحسين وقت التحميل الأوّلي من خلال تخطّي عرض المحتوى خارج الشاشة.
قد يكون
السمة
content-visibility
، التي سيتم إطلاقها في Chromium 85، أحد أكثر خصائص CSS الجديدة تأثيرًا
لتحسين أداء تحميل الصفحات. ويسمح content-visibility
لوكيل المستخدم بتخطّي عملية عرض العنصر إلى أن تكون هناك حاجة إليه، بما في ذلك التنسيق والرسم. بما أنّه يتم تخطّي العرض، إذا كان جزء كبير من المحتوى خارج الشاشة، تؤدي الاستفادة من السمة content-visibility
إلى زيادة سرعة التحميل الأوّلي للمستخدم. ويتيح ذلك أيضًا التفاعل بشكل أسرع
مع المحتوى المعروض على الشاشة. أنيق جدًا.
المتصفحات المتوافقة
يعتمد content-visibility
على الأساسيات ضمن مواصفات احتواء CSS. على الرغم من أنّ content-visibility
متوافق فقط في Chromium 85 في الوقت الحالي (ويُعتبر "يستحق نموذجًا أوليًا" بالنسبة إلى Firefox)، تتوفّر مواصفات الاحتواء في أحدث المتصفحات.
احتواء CSS
يتمثّل الهدف الأساسي والأخير لاحتواء CSS في تفعيل تحسينات أداء عرض محتوى الويب من خلال توفير عزل يمكن التنبؤ به لشجرة DOM الفرعية من بقية الصفحة.
يمكن للمطوّر بشكل أساسي إعلام المتصفّح بأجزاء الصفحة التي يتم تغليفها كمجموعة من المحتوى، ما يسمح للمتصفحات بالتفكير في المحتوى بدون الحاجة إلى مراعاة الحالة خارج الشجرة الفرعية. لذا فإن معرفة أجزاء المحتوى (الأشجار الفرعية) التي تتضمن محتوى معزولاً تتيح للمتصفح اتخاذ قرارات تحسين لعرض الصفحة.
هناك أربعة أنواع من احتواء CSS،
وكل قيمة محتملة لخاصية CSS contain
والتي يمكن دمجها في قائمة قيم مفصولة بمسافات:
size
: تضمن ميزة احتواء الحجم على عنصر إمكانية وضع مربّع العنصر بدون الحاجة إلى فحص العناصر التابعة له. هذا يعني أنه من المحتمل أن نتخطى تخطيط العناصر التابعة إذا كان كل ما نحتاجه هو حجم العنصر.layout
: يعني احتواء التنسيق أنّ العناصر التابعة لا تؤثر في التنسيق الخارجي للمربّعات الأخرى على الصفحة. يتيح لنا هذا إمكانية تخطي تخطيط العناصر التابعة إذا كان كل ما نريد فعله هو وضع مربعات أخرى.style
: يضمن احتواء النمط أنّ السمات التي يمكن أن يكون لها تأثيرات في عناصر أخرى غير تابعة له (مثل العدّادات) لا تستبعد العنصر (مثل العدّادات). يتيح لنا هذا إمكانية تخطي العمليات الحسابية للأنماط للعناصر التابعة إذا كان كل ما نريده هو حساب الأنماط على عناصر أخرى.paint
: يضمن خيار "احتواء الطلاء" عدم ظهور العناصر التابعة للمربّع الذي يحتوي على الصورة خارج حدود المربّع. ولا يمكن أن يتخطى أي عنصر العنصر بشكل واضح، وإذا كان أحد العناصر خارج الشاشة أو غير مرئي بأي شكل آخر، لن تكون العناصر التابعة له مرئية أيضًا. يتيح لنا هذا إمكانية تخطي طلاء الأحفاد إذا كان العنصر خارج الشاشة.
جارٍ تخطّي عملية العرض باستخدام "content-visibility
"
قد يكون من الصعب معرفة قيم الاحتواء المطلوب استخدامها، لأنّ تحسينات المتصفّح قد لا تبدأ إلا عند تحديد مجموعة مناسبة. يمكنك تغيير القيم من أجل تحديد أفضل ما يناسبك، أو يمكنك استخدام سمة CSS أخرى اسمها content-visibility
لتطبيق القيم المطلوبة تلقائيًا. يضمن content-visibility
حصولك على أعلى مستويات الأداء التي يمكن أن يوفرها المتصفّح بأقل جهد ممكن
بصفتك مطوِّرًا.
تقبل سمة المحتوى-رؤية المحتوى عدة قيم، ولكن auto
هو القيمة التي توفّر تحسينات فورية في الأداء. العنصر الذي يحتوي على content-visibility: auto
يكتسب يحتوي على layout
وstyle
وpaint
. وإذا كان العنصر خارج الشاشة (ولا يكون مرتبطًا بالمستخدم بأي شكل آخر، ستكون العناصر ذات الصلة هي العناصر التي تركّز أو تختار في شجرته الفرعية)، يتم أيضًا احتواء العنصر على size
(ويتوقف أيضًا عن تلوين المحتوى واختباره).
فما معنى ذلك؟ باختصار، إذا كان العنصر خارج الشاشة، لن يتم عرض العناصر التابعة له. يحدد المتصفح حجم العنصر دون مراعاة أي من محتوياته، ويتوقف عند هذا الحد. يتم تخطي معظم العرض، مثل نمط وتنسيق الشجرة الفرعية للعنصر.
وعندما يقترب العنصر من إطار العرض، يتوقف المتصفّح عن إضافة احتواء العنصر على size
ويبدأ في رسم محتوى العنصر واختباره الناتج عن تجربة النتائج. ويسمح هذا الإجراء للمستخدم بإنجاز العمل في الوقت المناسب.
ملاحظة حول إمكانية الوصول
تتمثّل إحدى ميزات content-visibility: auto
في أنّ المحتوى خارج الشاشة يظلّ متاحًا في نموذج كائن المستند، وبالتالي في شجرة تسهيل الاستخدام (على عكس visibility: hidden
). وهذا يعني أنّه يمكن البحث عن هذا المحتوى على الصفحة والانتقال إليه بدون انتظار تحميله أو التضحية بأداء العرض.
أمّا الجانب الآخر، فهو أنّ العناصر المَعلمة التي تتضمّن ميزات نمط، مثل display: none
أو visibility: hidden
ستظهر أيضًا في شجرة تسهيل الاستخدام عندما تكون خارج الشاشة، لأنّ المتصفّح لن يعرض هذه الأنماط إلا عند الدخول إلى إطار العرض. لمنع ظهور هذه العناصر في شجرة تسهيل الاستخدام، ما قد يتسبّب في حدوث فوضى، تأكَّد أيضًا من إضافة aria-hidden="true"
.
مثال: مدونة سفر
عادةً ما تحتوي مدونة السفر على مجموعة من القصص التي تتضمن بعض الصور وبعض النصوص الوصفية. وإليك ما يحدث في المتصفح العادي عند الانتقال إلى مدونة سفر:
- يتم تنزيل جزء من الصفحة من الشبكة، مع أي موارد لازمة.
- أنماط المتصفّح وينظّم جميع محتويات الصفحة، بدون مراعاة ما إذا كان المحتوى مرئيًا للمستخدم
- يعود المتصفّح إلى الخطوة 1 حتى يتم تنزيل جميع الصفحات والموارد.
في الخطوة الثانية، يعالج المتصفّح جميع المحتوى بحثًا عن عناصر يُحتمل أن تكون قد تغيّرت. فهو يقوم بتحديث نمط وتخطيط أي عناصر جديدة، إلى جانب العناصر التي ربما تغيرت نتيجة التحديثات الجديدة. هذا هو عرض العمل. تستغرق هذه العملية بعض الوقت.
والآن، فكِّر في ما يحدث إذا أضفت content-visibility: auto
إلى كل قصة من القصص الفردية في المدونة. التكرار الحلقي العام هو نفسه: يقوم المتصفح
بتنزيل وعرض أجزاء من الصفحة. ومع ذلك، فإن الفرق في مقدار
العمل الذي يقوم به في الخطوة 2.
أما من خلال ميزة "رؤية المحتوى"، ستعمل على تصميم وتنسيق جميع المحتويات التي تظهر للمستخدم حاليًا (تظهر على الشاشة). ومع ذلك، عند معالجة القصة التي تظهر خارج الشاشة بالكامل، سيتخطّى المتصفّح عملية العرض، وسيقوم فقط بتصميم مربّع العنصر نفسه وتنسيقه.
ويبدو أداء تحميل هذه الصفحة كما لو كانت تحتوي على قصص كاملة على الشاشة ومربّعات فارغة لكل خبر من خارج الشاشة. ويؤدي ذلك إلى تحقيق أداء أفضل، من خلال انخفاض متوقّع بنسبة 50% أو أكثر من تكلفة العرض الالتحميل. في المثال الذي عرضناه، نلاحظ زيادة من 232 ملّي ثانية إلى وقت عرض يبلغ 30 ملي ثانية. وهذا يعني تحسُّن الأداء بمقدار 7 مرّات.
ما هو العمل الذي عليك تنفيذه للاستفادة من هذه الفوائد؟ أولاً، يتم تقسيم المحتوى إلى أقسام:
ثم نطبق قاعدة النمط التالية على الأقسام:
.story {
content-visibility: auto;
contain-intrinsic-size: 1000px; /* Explained in the next section. */
}
تحديد الحجم الطبيعي لعنصر باستخدام contain-intrinsic-size
للاستفادة من المزايا المحتمَلة لـ content-visibility
، يحتاج المتصفّح إلى تطبيق احتواء الحجم لضمان عدم تأثير نتائج عرض المحتوى في حجم العنصر بأي شكل من الأشكال. هذا يعني أن العنصر سيتم
تخطيطه كما لو كان فارغًا. إذا لم يكن ارتفاع العنصر محددًا في تخطيط كتلة عادي، فسيكون 0 ارتفاع.
قد لا يكون هذا مثاليًا، حيث سيتغير حجم شريط التمرير، حيث يعتمد على كل قصة ليس لها ارتفاع غير صفري.
لحسن الحظ، توفر CSS سمة أخرى، contain-intrinsic-size
، تحدد بشكل فعّال الحجم الطبيعي للعنصر إذا كان العنصر متأثرًا باحتواء الحجم. في المثال الذي طرحناه، سنضبطه على 1000px
كتقدير لطول الأقسام وعرضها.
وهذا يعني أنه سيتم تنسيقها كما لو كانت تحتوي على عنصر ثانوي واحد من الأبعاد "الحجم الجوهري"،
مع ضمان أن تشغل عناصر div غير الحجم مساحة.
يعمل contain-intrinsic-size
كحجم عنصر نائب بدلاً من المحتوى المعروض.
في Chromium 98 والإصدارات اللاحقة، تتوفّر كلمة رئيسية auto
جديدة للسمة contain-intrinsic-size
. عند التحديد، سيتذكّر المتصفّح آخر حجم تم عرضه، إن وجد، وسيستخدمه بدلاً من حجم العنصر النائب الذي قدّمه المطوّر. على سبيل المثال، إذا حدّدت contain-intrinsic-size: auto 300px
، سيبدأ العنصر بقياس 300px
الأساسي في كل سمة، ولكن بعد عرض محتوى العنصر، سيحتفظ بالحجم الأساسي المعروض.
سيتم أيضًا تذكُّر أي تغييرات لاحقة في حجم العرض. من الناحية العملية، يعني ذلك أنّك في حال تمرير عنصر مع تطبيق content-visibility: auto
، ثم تمريره بعيدًا عن الشاشة، سيحتفظ تلقائيًا بعرضه وارتفاعه المثاليَين، ولن يعود إلى حجم العنصر النائب. هذه الميزة مفيدة بشكل خاص للاعبي التمرير اللانهائيين، والتي يمكنها الآن تحسين تقدير الحجم تلقائيًا بمرور الوقت أثناء استكشاف المستخدم للصفحة.
إخفاء المحتوى باستخدام content-visibility: hidden
ماذا لو أردت إبقاء المحتوى بدون عرض بغض النظر عما إذا كان معروضًا على الشاشة أم لا، مع الاستفادة من مزايا حالة العرض المخزن مؤقتًا؟ أدخِل:
content-visibility: hidden
.
تقدّم لك السمة content-visibility: hidden
كل مزايا المحتوى غير المعروض وحالة العرض المخزّنة مؤقتًا نفسها التي توفّرها السمة content-visibility: auto
خارج الشاشة. ومع ذلك، بعكس auto
، لا يبدأ العرض على الشاشة تلقائيًا.
يمنحك هذا مزيدًا من التحكم، مما يسمح لك بإخفاء محتويات عنصر وإظهارها بسرعة لاحقًا.
مقارنته بالطرق الشائعة الأخرى لإخفاء محتوى العنصر:
display: none
: يخفي العنصر ويؤدي إلى إتلاف حالة عرضه. وهذا يعني أن إلغاء إخفاء العنصر يكون مكلفًا مثل عرض عنصر جديد بنفس المحتويات.visibility: hidden
: يخفي العنصر ويحافظ على حالة العرض. لا يؤدي هذا إلى إزالة العنصر من المستند، لأنه (وشجرة فرعية له) لا يزال يشغل مساحة هندسية على الصفحة مع إمكانية النقر عليه. وهي تعمل أيضًا على تعديل حالة العرض في أيّ وقت حتى عندما تكون مخفية.
من ناحية أخرى، يخفي content-visibility: hidden
العنصر مع الحفاظ على حالة عرضه، فإذا كانت هناك أي تغييرات تحتاج إلى حدوثها، لن تحدث إلا عند عرض العنصر مجددًا (أي إزالة السمة content-visibility: hidden
).
بعض حالات الاستخدام الرائعة لـ content-visibility: hidden
هي عند تنفيذ
أشرطة التمرير الافتراضية المتقدمة وقياس تخطيط القياس. كما أنها رائعة أيضًا لتطبيقات
الصفحة الواحدة (SPA). يمكن ترك طرق العرض غير النشطة للتطبيقات في نموذج كائن المستند (DOM) مع تطبيق
content-visibility: hidden
لمنع عرضها مع الحفاظ على
حالة التخزين المؤقت. ويؤدي ذلك إلى سرعة عرض العرض عندما يصبح نشطًا مرة أخرى.
التأثيرات على مدى استجابة الصفحة لتفاعلات المستخدم (INP)
مدى استجابة الصفحة لتفاعلات المستخدم (INP) هو مقياس يقيّم قدرة الصفحة على الاستجابة بشكل موثوق لإدخالات المستخدم. يمكن أن تتأثر سرعة الاستجابة بأي مقدار زائد من العمل يتم في سلسلة التعليمات الرئيسية، بما في ذلك عرض العمل.
وكلما كان بإمكانك تقليل عمل العرض على أي صفحة، يعني ذلك منح سلسلة المحادثات الرئيسية فرصة للاستجابة إلى البيانات التي أدخلها المستخدمون بسرعة أكبر. ويشمل ذلك عرض العمل، واستخدام سمة content-visiblity
في CSS عند اللزوم يمكن أن يقلل من عملية العرض، خاصة أثناء بدء التشغيل، عندما يتم تنفيذ معظم أعمال العرض والتنسيق.
يؤثّر تقليل محتوى العرض بشكل مباشر في مقياس INP. عندما يحاول المستخدمون التفاعل مع صفحة تستخدم السمة content-visibility
بشكل صحيح لتأجيل التنسيق وعرض العناصر خارج الشاشة، يعني ذلك منح سلسلة المحادثات الرئيسية فرصة للاستجابة إلى الأعمال المهمة المرئية للمستخدم. ويمكن أن يؤدي ذلك إلى تحسين INP لصفحتك في بعض الحالات.
الخلاصة
تعني content-visibility
ومواصفات احتواء CSS بعض تحسينات الأداء الرائعة سيتم تطبيقها مباشرةً على ملف CSS. لمزيد من المعلومات حول هذه الخصائص، اطلع على: