ویژگی CSS content-visibility اکنون Baseline به تازگی در دسترس است

تاریخ انتشار: 30 اکتبر 2024

معرفی Interaction to Next Paint (INP) به عنوان معیار Core Web Vital در اوایل سال 2024 علاقه بیشتری به عملکرد رندر ایجاد کرده است. بخشی از INP بر روی آنچه که لازم است مرورگر برای رنگ آمیزی قاب بعدی پس از شروع تعامل کاربر با صفحه تمرکز دارد. پایین نگه داشتن INP وب سایت به این معنی است که کاربران احساس می کنند که به تعاملات آنها در سریع ترین زمان ممکن و روان پاسخ می دهد.

آنچه همچنین مهم است، کار رندری است که باید هنگام بارگیری صفحه انجام شود، که این پتانسیل را دارد که تعاملات را از ابتدا به تاخیر بیندازد . یافتن راه‌هایی برای کاهش میزان کاری که در این بخش حیاتی از چرخه عمر صفحه رخ می‌دهد، ارزش دارد. ویژگی CSS content-visibility یکی از راه‌هایی است که می‌توانید به این هدف دست یابید، و ما خوشحالیم که اعلام کنیم که اکنون از سپتامبر 2024 به تازگی در دسترس است!

content-visibility یک ویژگی CSS است که به عامل کاربر می‌گوید رندر عناصر را تا زمانی که به viewport نزدیک شوند به تعویق بیاندازد. برای صفحاتی که عناصر DOM زیادی دارند، این می تواند مفید باشد، زیرا به این معنی است که بارگذاری اولیه یک صفحه کار رندر کمتری را آغاز می کند. در عوض، کار درست قبل از اینکه کاربر نیاز به دیدن آن داشته باشد اتفاق می افتد.

نسخه ی نمایشی با ارقام نشان دهنده نتایج شبکه
در نسخه ی نمایشی مقاله ما، اعمال content-visibility: auto در قسمت های محتوای تکه تکه شده، عملکرد رندر 7 برابری را در بارگذاری اولیه افزایش می دهد. برای کسب اطلاعات بیشتر به ادامه مطلب مراجعه کنید.

برای فعال کردن این بهینه‌سازی برای عناصر خارج از صفحه، قانون content-visibility: auto را در CSS وب‌سایت خود برای آنها اعمال کنید:

.render-me-later {
  content-visibility: auto;
}

content-visibility توسط برخی از رفتارهای تعریف شده برای ویژگی contain در CSS containment عمل می کند. هدف مهار CSS این است که بخش هایی از درخت DOM را ایزوله کند. این اجازه می دهد تا عملیات رندر به بخش خاصی از درخت DOM محدود شود، بنابراین طرح بندی نامعتبر شده و تنها برای زیر مجموعه ای از درخت DOM دوباره انجام می شود. در حالی که استفاده از این برای عملکرد رندر، نیاز به کمی آشنایی با مقادیر مختلف ویژگی contain و نحوه استفاده موثر از آنها دارد.

هنگامی که content-visibility: auto به عناصر اعمال می شود، برخی از ویژگی های ارائه شده توسط ویژگی contain را به طور خودکار می گیرند. نتیجه این است که عناصر تحت تأثیر در ابتدا با ارتفاع 0px رندر می شوند، در واقع به این معنی که رندر نمی شوند.

با این حال، این عوارض جانبی دارد. برای مثال، هنگامی که کاربر به سمت عناصری که قبلاً رندر نشده‌اند حرکت می‌کند، نوار پیمایش صفحه ممکن است تغییر کند و ارتفاع آن را تغییر دهد که دقیقاً به موقع نمایش داده می‌شوند تا کاربر آنها را ببیند. برای کاهش این مورد، ویژگی contain-intrinsic-size را اعمال کنید.

از آنجایی که content-visibility اخیراً Baseline به تازگی در دسترس است، ممکن است در مورد کاربران دارای مرورگرهایی که هنوز برای استفاده از ویژگی جدید به روز نشده اند، نگرانی هایی داشته باشید. با توجه به اینکه content-visibility یک ویژگی CSS است، نباید بیش از حد نگران باشید! مرورگرهایی که آن را درک می کنند از آن استفاده می کنند و آنهایی که نمی دانند از آن استفاده نمی کنند. این بدان معنی است که - جدا از مزایای عملکردی که از مرورگرهایی که از content-visibility پشتیبانی می کنند - می توانید انتظار داشته باشید که صفحات تا حد زیادی یکسان عمل کنند.

content-visibility یک مزیت افزودنی ایجاد می کند - و اگر مواردی وجود دارد که می توانید از آن برای کاهش کار رندر در حین بارگذاری صفحه استفاده کنید، باید استفاده از آن را در نظر بگیرید تا اطمینان حاصل کنید که صفحات شما در صورت نیاز حداکثر قدرت پردازشی را در اختیار آنها قرار می دهد. بیشتر اکنون که این ویژگی مفید Baseline به تازگی در دسترس است، باید با خیال راحت از آن استفاده کنید تا کاربران بتوانند تا زمانی که لازم باشد از رندر کاری که از آن اجتناب می‌کند بهره ببرند.