تاريخ النشر: 30 تشرين الأول (أكتوبر) 2024
أدّى طرح مقياس "مدى استجابة الصفحة لتفاعلات المستخدم" (INP) كأحد مقاييس "مؤشرات أداء الويب الأساسية" في أوائل عام 2024 إلى زيادة الاهتمام بأداء العرض. يركز جزء من مقياس INP على الوقت الذي يستغرقه المتصفّح لعرض اللقطة التالية بعد بدء تفاعل المستخدم مع الصفحة. يؤدي إبقاء مقياس INP منخفضًا لموقعك الإلكتروني إلى أن يشعر المستخدمون بأنّ الموقع الإلكتروني يستجيب لتفاعلاتهم بسرعة وسلاسة قدر الإمكان.
من المهم أيضًا تنفيذ عملية العرض أثناء تحميل الصفحة، ما يمكن أن يؤدي إلى تأخير التفاعلات من البداية. من المفيد العثور على طرق لتقليل مقدار العمل الذي يتم إجراؤه خلال هذا الجزء المهم من دورة حياة الصفحة. خاصية CSS content-visibility هي إحدى الطرق التي يمكنك من خلالها تحقيق ذلك، ويسعدنا الإعلان عن أنّها أصبحت الآن قاعدة بيانات جديدة متاحة اعتبارًا من أيلول (سبتمبر) 2024.
content-visibility هي سمة CSS تطلب من وكيل المستخدم تأجيل عرض العناصر إلى أن تقترب من مساحة العرض. بالنسبة إلى الصفحات التي تحتوي على العديد من عناصر DOM، يمكن أن يكون ذلك مفيدًا، لأنّه يعني أنّ التحميل الأولي للصفحة سيؤدي إلى بدء عملية عرض أقل. بدلاً من ذلك، يتم تنفيذ العمل قبل أن يحتاج المستخدم إلى رؤيته.
content-visibility: auto على أقسام المحتوى المقسَّمة في تحسين أداء العرض بمقدار 7 مرّات عند التحميل الأولي. اطّلِع على المزيد من المعلومات أدناه.
لتفعيل هذا التحسين للعناصر التي لا تظهر على الشاشة، طبِّق قاعدة content-visibility: auto عليها في ملف CSS لموقعك الإلكتروني:
.render-me-later {
content-visibility: auto;
}
يعمل content-visibility وفقًا لبعض السلوكيات المحدّدة للسمة contain في الحاويات في CSS. يهدف احتواء CSS إلى عزل أجزاء من شجرة نموذج DOM. يتيح ذلك حصر نطاق عمليات العرض في جزء معيّن من شجرة نموذج DOM، وبالتالي يتم إلغاء التنسيق وإعادة تنفيذه لمجموعة فرعية فقط من شجرة نموذج DOM. عند تطبيق ذلك على أداء العرض، يتطلّب الأمر بعض المعرفة بالقيم المختلفة للسمة contain وكيفية استخدامها بفعالية.
عند تطبيق content-visibility: auto على العناصر، تحصل تلقائيًا على بعض السمات التي تقدّمها السمة contain. والنتيجة هي أنه سيتم عرض العناصر المتأثرة في البداية بارتفاع 0px، ما يعني فعليًا أنه لن يتم عرضها.
ومع ذلك، فإن هذا له بعض الآثار الجانبية. على سبيل المثال، قد يتحرّك شريط التمرير في الصفحة ويتغيّر ارتفاعه عندما ينتقل المستخدم إلى العناصر التي لم يتم عرضها سابقًا والتي يتم عرضها في الوقت المناسب ليتمكن المستخدم من رؤيتها. للحدّ من هذه المشاكل، استخدِم السمة contain-intrinsic-size.
بما أنّ content-visibility أصبح متاحًا مؤخرًا في "المستوى الأساسي"، قد تكون لديك بعض المخاوف بشأن المستخدمين الذين لديهم متصفّحات لم يتم تحديثها بعد لاستخدام الموقع الجديد. بما أنّ content-visibility هي سمة CSS، لا داعي للقلق كثيرًا. ولكن المتصفحات التي تعرفها ستستخدم هذه المعلومات وتلك التي لا تفهمها. وهذا يعني أنّه، بالإضافة إلى مزايا الأداء التي يمكنك الحصول عليها من المتصفّحات المتوافقة مع content-visibility، يمكنك توقّع أن تعمل الصفحات بشكلٍ مشابه إلى حدٍ كبير.
توفّر content-visibility ميزة إضافية، وإذا كانت هناك حالات يمكنك فيها استخدامها لتقليل عمل العرض أثناء تحميل الصفحة، ننصحك باستخدامها لضمان توفّر أكبر قدر ممكن من طاقة المعالجة لصفحاتك عندما تكون في أمس الحاجة إليها. بما أنّ هذه الميزة المفيدة أصبحت متاحة حديثًا في "المستوى الأساسي"، يمكنك استخدامها لكي يستفيد المستخدمون من عمل التقديم الذي تتجنبه هذه الميزة إلى أن يصبح ضروريًا.