آزمایش مبدا زمان‌بندی کانتینر

Barry Pollard

Jason Williams

José Dapena Paz

منتشر شده: ۱ مه ۲۰۲۶

کروم در حال راه‌اندازی یک نسخه آزمایشی از کروم ۱۴۸ برای رابط برنامه‌نویسی کاربردی عملکرد زمان‌بندی کانتینر است.

معیارهایی مانند Largest Contentful Paint (LCP) با بررسی زمان بارگذاری بزرگترین بخش محتوا، یک نمای کلی سطح بالا از زمانی که یک صفحه احتمالاً توسط کاربر "بارگذاری شده" در نظر گرفته می‌شود، ارائه می‌دهند. با این حال، سایت‌ها ممکن است به زمان بارگذاری بخش‌های خاصی از صفحه نیز علاقه‌مند باشند، و نه فقط "بزرگترین" بخش.

زمان‌بندی عنصر به سایت‌ها اجازه می‌دهد تا عناصر را با ویژگی elementtiming علامت‌گذاری کنند تا زمان بارگذاری آنها را بفهمند، چه عنصر LCP باشند چه نباشند. با این حال، مانند LCP، محدود به اندازه‌گیری زمان رندر عناصر منفرد است.

زمان‌بندی کانتینر، مفهوم زمان‌بندی عناصر را برای اندازه‌گیری «بلوک‌های محتوا» (یا «کانتینرها») گسترش می‌دهد. این به شما امکان می‌دهد بفهمید که چه زمانی کل یک جزء مانند ابزارک‌ها، کارت‌ها، بخش‌های محتوا، نوارهای کناری... در دسترس کاربر بوده است! این ابزار اطلاعات عملکرد اضافی را برای سایت‌هایی که می‌خواهند از بینش‌های اضافی آن بهره‌مند شوند، ارائه می‌دهد.

زمان‌بندی کانتینر، که توسط بلومبرگ توسعه داده شده و توسط ایگالیا در کروم پیاده‌سازی شده است، در پشت یک پرچم برای کاربران کروم و سایر مرورگرهای مبتنی بر کرومیوم در دسترس است و همچنین برای سایت‌ها جهت آزمایش میدانی از طریق یک نسخه آزمایشی مبدا در دسترس است.

نسخه آزمایشی اولیه یکی از مراحل نهایی راه‌اندازی یک API است که در آن توسعه‌دهندگان می‌توانند این ویژگی را قبل از راه‌اندازی پیش‌فرض، در سایت‌های خود فعال کنند تا آن را آزمایش کنند و به تیم اطلاع دهند که آیا طبق انتظار کار می‌کند و مفید است یا خیر. همچنین به توسعه‌دهندگان اجازه می‌دهد قبل از راه‌اندازی، هرگونه تغییری را در طراحی API پیشنهاد دهند.

نحوه عملکرد API زمان‌بندی کانتینر

مانند زمان‌بندی عنصر، زمان‌بندی ظرف با اضافه کردن یک ویژگی ( containertiming ) به عناصر مختلف HTML کار می‌کند تا به مرورگر نشان دهد که این عناصر باید اندازه‌گیری شوند:

<div containertiming="my-component">
  <h2>Title</h2>
  <div>...</div>
</div>

سپس یک PerformanceObserver به شما امکان می‌دهد رنگ‌های درون آن کانتینر را مانند سایر معیارهای عملکرد مشاهده کنید:

<script>
  const observer = new PerformanceObserver((entryList) => {
    for (const entry of entryList.getEntries()) {
      console.log("Container painted:", entry.identifier);
      console.log("First render:", entry.firstRenderTime);
      console.log("Latest paint:", entry.startTime);
      console.log("Painted area:", entry.size);
      console.log("Last painted element:", entry.lastPaintedElement);
    }
  });
  observer.observe({ type: "container", buffered: true });
</script>

همزمان با اضافه شدن عناصر جدید در کانتینر، ورودی‌های عملکردی جدید با اطلاعات به‌روز شده منتشر می‌شوند. از آنجایی که عناصر جدید می‌توانند در طول عمر صفحه اضافه شوند، هیچ نقطه تکمیل واحدی وجود ندارد. این مشابه LCP است که معمولاً در انتهای صفحه، هنگام پیمایش به سمت خارج، اندازه‌گیری می‌شود.

این معیارهای عملکرد سپس می‌توانند برای نظارت و تجزیه و تحلیل به بخش تجزیه و تحلیل ارسال شوند.

کانتینرهای فرزند را می‌توان با استفاده از ویژگی containertiming-ignore نیز نادیده گرفت:

<div containertiming="main-content">

  <main>...</main>
  
  <!-- This aside and its children will be ignored -->
  <aside containertiming-ignore>...</aside>

</div>

نسخه آزمایشی

کدپن زیر، API زمان‌بندی کانتینر را در عمل نشان می‌دهد:

اگر مرورگر شما از API زمان‌بندی کانتینر پشتیبانی نمی‌کند، می‌توانید این مورد را در ویدیوی زیر نیز مشاهده کنید:

چه به‌روزرسانی‌هایی برای زمان‌بندی کانتینر مهم هستند؟

هدف از زمان‌بندی کانتینر، ثبت زمان بارگذاری کانتینر با تمام عناصر فرزند است. این زمان‌بندی برای اندازه‌گیری تک تک رنگ‌های آینده در نظر گرفته نشده است - بسیاری از آنها ممکن است خیلی دیرتر و با تعامل کاربر با کانتینر یا صفحه از راه برسند. به همین دلیل، مشابه LCP و زمان‌بندی عنصر، زمان‌بندی کانتینر به "رنگ‌های محتوا" بستگی دارد و همچنین ورودی‌های رنگ جدید را برای عناصری که قبلاً به عنوان رنگ محتوا شمرده شده‌اند، منتشر نمی‌کند.

برای مثال، اگر یک کانتینر در ابتدا فقط با یک رنگ پس‌زمینه رندر شود، یا فقط شامل عناصر غیرمحتوا (مثلاً صفحات اسکلتی) باشد، تا زمانی که محتوایی به کانتینر اضافه نشود، هیچ ورودی container منتشر نخواهد شد.

برای مثال، به‌روزرسانی متن روی یک عنصر موجود در کانتینر منجر به ایجاد ورودی جدید container برای آن به‌روزرسانی نمی‌شود، زیرا فقط اولین مرحله از محتوای یک عنصر در نظر گرفته می‌شود. با این حال، اگر متنی به یک عنصر خالی اضافه شود، یا یک عنصر جدید دیگر برای آن متن اضافه شود، یک ورودی جدید container منتشر می‌شود، زیرا این اولین مرحله از آن عنصر خواهد بود.

پشتیبانی از زمان‌بندی کانتینر با قابلیت تشخیص ویژگی

ویژگی containertiming برای مرورگرهایی که از آن پشتیبانی نمی‌کنند مشکلی ایجاد نمی‌کند، بنابراین نیازی به شناسایی ویژگی ندارد.

PerformanceObserver هر ورودی جدیدی را نادیده می‌گیرد، اما می‌تواند باعث ایجاد هشدار در DevTools شود، بنابراین بهتر است قبل از اضافه کردن یک ناظر با کدی مانند زیر، از feature-detect استفاده کنید:

if (typeof PerformanceContainerTiming !== "undefined") {
  // Container Timing is supported
}

بهترین شیوه‌ها

برای استفاده بهینه از زمان‌بندی کانتینر، باید برخی از بهترین شیوه‌ها را دنبال کنید:

• ویژگی‌ها را زود تنظیم کنید: ویژگی containertiming را در سند HTML یا قبل از اضافه شدن عنصر به سند برای ردیابی کامل اضافه کنید. اضافه کردن این ویژگی پس از آن با جاوا اسکریپت ممکن است منجر به از دست رفتن رنگ‌ها شود.
• از شناسه‌های معنادار استفاده کنید: برای ویژگی containertiming نام‌های توصیفی انتخاب کنید تا تجزیه و تحلیل آسان‌تر شود.
• جایگذاری استراتژیک: زمان‌بندی containertiming برای بخش‌های معنایی که برای معیارهای شما مهم هستند، مانند hero-section ، product-grid ، checkout-form اعمال کنید. لازم نیست هر کانتینری اندازه‌گیری شود.
• نادیده گرفتن محتوای نامرتبط: از containertiming-ignore روی عناصر فرزندی استفاده کنید که نباید روی معیارهای کامپوننت شما مانند تبلیغات یا عناصر تزئینی تأثیر بگذارند.

چگونه زمان‌بندی کانتینر را فعال کنیم؟

API زمان‌بندی کانتینر را می‌توان از طریق کروم ۱۴۷ با استفاده از پرچم chrome://flags/#enable-experimental-web-platform-features و از طریق خط فرمان با استفاده از پرچم --enable-blink-features=ContainerTiming فعال کرد.

از کروم ۱۴۸، سایت‌ها می‌توانند برای دریافت توکن آزمایشی Origin ثبت‌نام کنند و آن را به صفحه خود اضافه کنند تا این ویژگی به طور خودکار فعال شود. این به شما امکان می‌دهد API را در محل روی کاربران واقعی آزمایش کنید. معیارهای زمان‌بندی کانتینر را می‌توان در آنالیتیکس ثبت و تجزیه و تحلیل کرد تا تأیید شود که آیا API طبق انتظار کار می‌کند و بینش‌هایی جمع‌آوری شود.

بازخورد و جزئیات بیشتر

بازخورد در مورد API زمان‌بندی کانتینر باید به عنوان مشکل در GitHub مطرح شود.

همچنین مشخصاتی در حال طی کردن فرآیند استانداردسازی است. برای کسانی که علاقه‌مند به نحوه عملکرد داخلی این API هستند، Igalia پستی در مورد نحوه پیاده‌سازی فنی API منتشر کرده است.

نتیجه‌گیری

خیلی خوبه که این API به زودی منتشر میشه و ما خیلی هیجان‌زده‌ایم که اون رو به دست توسعه‌دهندگان می‌رسونیم تا بینش‌های جدیدی در مورد مشکلات عملکرد به دست بیاریم. ما مشتاقانه منتظر دریافت بازخوردها در مورد API هستیم و اگر همه چیز خوب پیش بره، کمی بعد از اون، اون رو منتشر می‌کنیم.