ช่วงทดลองใช้จากต้นทางของ Container Timing

Barry Pollard

Jason Williams

José Dapena Paz

Published: May 01, 2026

Chrome จะเปิดตัวช่วงทดลองใช้จากต้นทางตั้งแต่ Chrome 148 สำหรับContainer Timing Performance API

เมตริกต่างๆ เช่น Largest Contentful Paint (LCP) จะให้ภาพรวมระดับสูงเกี่ยวกับเวลาที่ผู้ใช้มีแนวโน้มที่จะพิจารณาว่าหน้าเว็บ "โหลดแล้ว" โดยดูจากเวลาในการแสดงผลเนื้อหาขนาดใหญ่ที่สุด อย่างไรก็ตาม เว็บไซต์อาจสนใจเวลาที่ส่วนใดส่วนหนึ่งของหน้าเว็บโหลด ไม่ใช่แค่ส่วน "ใหญ่ที่สุด" เท่านั้น

Element Timing ช่วยให้เว็บไซต์มาร์กอัปองค์ประกอบด้วยแอตทริบิวต์ elementtiming เพื่อทำความเข้าใจเวลาที่องค์ประกอบโหลด ไม่ว่าจะเป็นองค์ประกอบ LCP หรือไม่ก็ตาม อย่างไรก็ตาม เช่นเดียวกับ LCP ฟีเจอร์นี้จำกัดอยู่เพียงการวัดเวลาในการแสดงผลของแต่ละองค์ประกอบ

Container Timing ขยายแนวคิด Element Timing เพื่อวัด "บล็อกเนื้อหา" (หรือ "คอนเทนเนอร์") ซึ่งช่วยให้คุณเข้าใจเวลาที่คอมโพเนนต์ทั้งหมดพร้อมใช้งานสำหรับผู้ใช้ เช่น วิดเจ็ต การ์ด ส่วนเนื้อหา แถบด้านข้าง และอื่นๆ โดยจะให้ข้อมูลประสิทธิภาพเพิ่มเติมสำหรับเว็บไซต์ที่ต้องการข้อมูลเชิงลึกเพิ่มเติม

Container Timing ซึ่งพัฒนาโดย Bloomberg และใช้งานใน Chrome โดย Igalia พร้อมใช้งานหลังแฟล็กสำหรับผู้ใช้ Chrome และเบราว์เซอร์อื่นๆ ที่ใช้ Chromium รวมถึงพร้อมให้เว็บไซต์ทดสอบในสภาพแวดล้อมจริงผ่านช่วงทดลองใช้จากต้นทาง

ช่วงทดลองใช้จากต้นทางเป็นขั้นตอนสุดท้ายขั้นตอนหนึ่งในการเปิดตัว API ซึ่งนักพัฒนาซอฟต์แวร์สามารถเปิดใช้ฟีเจอร์ในเว็บไซต์ของตนก่อนที่จะเปิดตัวโดยค่าเริ่มต้นเพื่อทดสอบ และแจ้งให้ทีมทราบว่าฟีเจอร์ทำงานตามที่คาดไว้และมีประโยชน์หรือไม่ นอกจากนี้ยังช่วยให้นักพัฒนาซอฟต์แวร์แนะนำการเปลี่ยนแปลงการออกแบบ API ก่อนเปิดตัวได้ด้วย

วิธีการทำงานของ Container Timing API

Container Timing ทำงานโดยการเพิ่มแอตทริบิวต์ (containertiming) ลงในองค์ประกอบ HTML ต่างๆ เพื่อระบุให้เบราว์เซอร์วัดองค์ประกอบเหล่านี้ เช่นเดียวกับ Element Timing

<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 ซึ่งโดยทั่วไปจะวัดที่ส่วนท้ายของหน้าเว็บเมื่อมีการไปยังหน้าอื่น

จากนั้นระบบจะส่งเมตริกประสิทธิภาพเหล่านี้กลับไปยัง Analytics เพื่อตรวจสอบและวิเคราะห์

นอกจากนี้ยังสามารถละเว้นคอนเทนเนอร์ย่อยได้ด้วยแอตทริบิวต์ containertiming-ignore

<div containertiming="main-content">

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

</div>

สาธิต

CodePen ต่อไปนี้แสดง Container Timing API ที่ทำงานจริง

นอกจากนี้ คุณยังดูการทำงานจริงได้ในวิดีโอต่อไปนี้หากเบราว์เซอร์ไม่รองรับ Container Timing API

การอัปเดตใดบ้างที่นับรวมใน Container Timing

Container Timing มีจุดประสงค์เพื่อบันทึกเวลาที่คอนเทนเนอร์โหลดองค์ประกอบย่อยทั้งหมด โดยไม่ได้มีจุดประสงค์เพื่อวัดการแสดงผลในอนาคตทุกครั้ง ซึ่งหลายครั้งอาจเกิดขึ้นในภายหลังมากเมื่อผู้ใช้โต้ตอบกับคอนเทนเนอร์หรือหน้าเว็บ ด้วยเหตุนี้ Container Timing จึงขึ้นอยู่กับ "การแสดงผลที่มีเนื้อหา" และไม่ส่งรายการการแสดงผลใหม่สำหรับองค์ประกอบที่นับว่ามีการแสดงผลที่มีเนื้อหาแล้ว เช่นเดียวกับ LCP และ Element Timing

ตัวอย่างเช่น หากคอนเทนเนอร์แสดงผลครั้งแรกด้วยสีพื้นหลังเพียงอย่างเดียว หรือมีเฉพาะองค์ประกอบที่ไม่มีเนื้อหา (เช่น หน้าจอโครงร่าง) ระบบจะไม่ส่งรายการ container จนกว่าจะมีการเพิ่มเนื้อหาลงในคอนเทนเนอร์

ตัวอย่างการอัปเดต การอัปเดตข้อความในองค์ประกอบที่มีอยู่ภายในคอนเทนเนอร์จะไม่ส่งผลให้เกิดรายการ container ใหม่สำหรับการอัปเดตนั้น เนื่องจากระบบจะพิจารณาเฉพาะ First Paint ของเนื้อหาสำหรับองค์ประกอบ อย่างไรก็ตาม หากมีการเพิ่มข้อความลงในองค์ประกอบที่ว่างเปล่า หรือมีการเพิ่มองค์ประกอบใหม่เพิ่มเติมสำหรับข้อความนั้น ระบบจะส่งรายการ container ใหม่เนื่องจากจะเป็น First Paint ขององค์ประกอบนั้น

การตรวจหาฟีเจอร์การรองรับ Container Timing

แอตทริบิวต์ containertiming จะไม่ทำให้เกิดปัญหาสำหรับเบราว์เซอร์ที่ไม่รองรับ จึงไม่จำเป็นต้องตรวจหาฟีเจอร์

PerformanceObserver จะละเว้นรายการใหม่ แต่รายการดังกล่าวอาจทำให้เกิดคำเตือนในเครื่องมือสำหรับนักพัฒนาเว็บ ดังนั้นแนวทางปฏิบัติแนะนำคือการตรวจหาฟีเจอร์ก่อนเพิ่ม Observer ด้วยโค้ด เช่น

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

แนวทางปฏิบัติแนะนำ

แนวทางปฏิบัติแนะนำสำหรับการใช้ Container Timing อย่างเหมาะสมมีดังนี้

• ตั้งค่าแอตทริบิวต์ตั้งแต่เนิ่นๆ: เพิ่มแอตทริบิวต์ containertiming ในเอกสาร HTML หรือก่อนที่จะเพิ่มองค์ประกอบลงในเอกสารเพื่อให้การติดตามสมบูรณ์ การเพิ่มแอตทริบิวต์ในภายหลังด้วย JavaScript อาจทำให้พลาดการแสดงผล
• ใช้ตัวระบุที่มีความหมาย: เลือกชื่อที่สื่อความหมายสำหรับแอตทริบิวต์ containertiming เพื่อให้การวิเคราะห์ง่ายขึ้น
• การจัดวางเชิงกลยุทธ์: ใช้ containertiming กับส่วนความหมายที่มีความสำคัญต่อเมตริกของคุณ เช่น hero-section, product-grid, checkout-form ไม่จำเป็นต้องวัดคอนเทนเนอร์ทุกรายการ
• ละเว้นเนื้อหาที่ไม่เกี่ยวข้อง: ใช้ containertiming-ignore กับองค์ประกอบย่อยที่ไม่ควรส่งผลต่อเมตริกคอมโพเนนต์ เช่น โฆษณาหรือองค์ประกอบตกแต่ง

วิธีเปิดใช้ Container Timing

คุณเปิดใช้ Container Timing API ได้ตั้งแต่ Chrome 147 โดยใช้แฟล็ก chrome://flags/#enable-experimental-web-platform-features และจากบรรทัดคำสั่งโดยใช้แฟล็ก --enable-blink-features=ContainerTiming

ตั้งแต่ Chrome 148 เป็นต้นไป เว็บไซต์สามารถลงทะเบียนขอโทเค็นช่วงทดลองใช้จากต้นทางและเพิ่มโทเค็นนี้ลงในหน้าเว็บเพื่อเปิดใช้ฟีเจอร์โดยอัตโนมัติ ซึ่งจะช่วยให้คุณทดสอบ API ในสภาพแวดล้อมจริงกับผู้ใช้จริงได้ คุณสามารถบันทึกเมตริก Container Timing ใน Analytics และวิเคราะห์เพื่อตรวจสอบว่า API ทำงานตามที่คาดไว้หรือไม่ รวมถึงรวบรวมข้อมูลเชิงลึก

ความคิดเห็นและรายละเอียดเพิ่มเติม

โปรดแจ้งความคิดเห็นเกี่ยวกับ Container Timing API เป็น ปัญหาใน GitHub

นอกจากนี้ยังมีข้อกำหนดจำเพาะที่อยู่ระหว่างกระบวนการกำหนดมาตรฐาน สำหรับผู้ที่สนใจวิธีการทำงานภายในของ API นี้ Igalia ได้เผยแพร่โพสต์เกี่ยวกับวิธีใช้งาน API ในทางเทคนิค

บทสรุป

เรายินดีเป็นอย่างยิ่งที่ API นี้ใกล้จะเปิดตัวแล้ว และตื่นเต้นที่จะให้นักพัฒนาซอฟต์แวร์ได้ใช้ API นี้เพื่อรับข้อมูลเชิงลึกใหม่ๆ เกี่ยวกับปัญหาด้านประสิทธิภาพ เราหวังว่าจะได้รับความคิดเห็นเกี่ยวกับ API และหากทุกอย่างเป็นไปด้วยดี เราจะเปิดตัว API นี้ในเร็วๆ นี้