ตั้งแต่วันนี้เป็นต้นไป เราได้เปิดตัวการเปลี่ยนแปลงใน CLS บนแพลตฟอร์มเครื่องมือเว็บของ Chrome จำนวนหนึ่ง ซึ่งรวมถึง Lighthouse, PageSpeed Insights และรายงาน UX ของ Chrome
วันนี้เราจะมาแชร์วิธีที่เราพัฒนาการวัดเมตริก Cumulative Layout Shift (CLS) ในแพลตฟอร์มเครื่องมือเว็บต่างๆ ของ Chrome สำหรับนักพัฒนาซอฟต์แวร์ การเปลี่ยนแปลงเหล่านี้จะช่วยสะท้อนประสบการณ์ของผู้ใช้สำหรับหน้าเว็บที่มีอายุยาวนานได้ดีกว่า (เช่น แอปที่มีการเลื่อนได้ไม่รู้จบหรือแอปแบบหน้าเดียว) การอัปเดต CLS เหล่านี้จะเปิดตัวในเครื่องมือต่างๆ เช่น Lighthouse, PageSpeed Insights และรายงาน UX ของ Chrome
เราทุกคนหวังว่าเราจะเห็นการเปลี่ยนแปลงเลย์เอาต์ในเว็บน้อยลง นี่เป็นที่มาของเมตริก CLS ว่ามีประโยชน์ในการวัดความเสถียรของภาพของหน้าเว็บ โดยจะช่วยกระตุ้นเว็บไซต์ให้กำหนดขนาดเนื้อหาได้ดีขึ้น เช่น รูปภาพหรือโฆษณา ซึ่งอาจทําให้ผู้ใช้เห็นเนื้อหาเพิ่มขึ้นอย่างน่าประหลาดใจ
เมตริกนี้มีชื่อว่า "��่าสะสม" เนื่องจากระบบจะรวมคะแนนของการเปลี่ยนแปลงแต่ละรายการไว้ตลอดอายุการใช้งานของหน้าเว็บ ในขณะที่การเปลี่ยนเลย์เอาต์ทั้งหมดในเว็บทําให้ผู้ใช้ได้รับประสบการณ์ที่ไม่ดี หน้าเว็บที่มีอายุยาวนาน เช่น แอปหน้าเว็บเดียว (SPA) หรือแอปแบบเลื่อนได้ไม่รู้จบ จะมี CLS เพิ่มขึ้นโดยธรรมชาติเมื่อเวลาผ่านไป ด้วยการกำหนดขีดจำกัดการรวมไว้ที่ช่วง "กรอบเวลา" ที่แย่ที่สุด ทำให้สามารถวัด CLS ได้อย่างสม่ำเสมอมากขึ้นไม่ว่าจะอยู่ในเซสชันใด
ตามที่ได้ประกาศไว้ในการพัฒนาเมตริก CLS เรากำลังปรับเมตริก CLS เป็นกรอบเวลาเซสชันสูงสุดซึ่งมีช่องว่าง 1 วินาที สูงสุดไม่เกิน 5 วินาที การอัปเดตนี้จะสะท้อนถึงประสบการณ์ของผู้ใช้สำหรับหน้าเว็บที่ใช้งานได้นานได้ดีขึ้น การเปลี่ยนแปลงนี้ทำให้ 70% ของต้นทางไม่น่าจะเห็นการเปลี่ยนแปลง CLS ที่เปอร์เซ็นไทล์ที่ 75 และต้นทาง 30% ที่เหลือจะเห็นการเปลี่ยนแปลง
การเปิดตัวการปรับกรอบเวลาไปยัง CLS
เราได้กล่าวถึงการกำหนด CLS ที่อัปเดตซึ่งเป็นกรอบเวลาเซสชันสูงสุดที่มีช่องว่าง 1 วินาที ซึ่งจำกัดไว้ที่ 5 วินาที ผลกระทบต่อเครื่องมือ
ตั้งแต่วันนี้เป็นต้นไป การเปลี่ยนแปลงที่เกิดขึ้นกับ CLS นี้ได้เปิดตัวในแพลตฟอร์มเครื่องมือเว็บของ Chrome จำนวนมาก ซึ่งรวมถึง Lighthouse, PageSpeed Insights และรายงาน UX ของ Chrome คุณจะดูสรุปการเปิดตัวการปรับกรอบเวลา CLS ได้ที่ด้านล่าง รวมถึงเครื่องมือที่ยังคงสามารถเปรียบเทียบกับการใช้งานเดิมได้
เครื่องมือ | การปรับกรอบเวลา CLS "เผยแพร่อยู่" | ความพร้อมใช้งาน CLS ระดับ "เก่า" |
---|---|---|
แผงเครื่องมือสำหรับนักพัฒนาเว็บของ Lighthouse | เวอร์ชัน Canary, 2 มิถุนายน 2021 | ไม่มีข้อมูล |
Lighthouse CLI | v8 เปิดตัวเมื่อวันที่ 1 มิถุนายน 2021 | พร้อมให้ใช้งานเป็น totalCumulativeLayoutShift ใน Lighthouse v8 |
CI ของ Lighthouse | v0.7.3, 3 มิถุนายน 2021 | ไม่มีข้อมูล |
PageSpeed Insights (PSI) | 1 มิถุนายน 2021 | ไม่มี |
PSI API | 1 มิถุนายน 2021 | มีให้บริการใน lighthouseResult เป็น totalCumulativeLayoutShift ไม่พร้อมใช้งานในช่องข้อมูล loadingExperience |
รายงาน Chrome UX (CrUX) - BigQuery | ชุดข้อมูลปี 202105 เผยแพร่เมื่อวันที่ 8 มิถุนายน 2021 | ใช้ได้ตั้งแต่ experimental.uncapped_cumulative_layout_shift จนถึง 202111 |
รายงาน UX ของ Chrome (CrUX) - API | 1 มิถุนายน 2021 | หลังจากวันที่ 1 มิถุนายน 2021 พร้อมให้ใช้งานใน
experimental_uncapped_cumulative_layout_shift
วันที่ 14 ธันวาคม 2021 |
ในเร็วๆ นี้จะมีการอัปเดตเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อให้รองรับการปรับกรอบเวลาด้วย การอัปเดต CLS ยังส่งผลต่อ Search Console อีกด้วย และจะมีผลตั้งแต่วันที่ 1 มิถุนายน 2021 เป็นต้นไป
สำหรับนักพัฒนาซอฟต์แวร์ส่วนใหญ่ การเปลี่ยนแปลงนี้คาดว่าจะเกิดขึ้นได้อย่างราบรื่นและไม่จำเป็นต้องดำเนินการใดๆ เพื่อใช้ประโยชน์จากข้อมูลจากการแก้ไขนี้
CLS "เก่า"
โปรดทราบว่า CLS "เก่า" จะวัดการเปลี่ยนแปลงเลย์เอาต์ตลอดอายุการใช้งานหน้าเว็บ เนื่องจากนักพัฒนาซอฟต์แวร์บางรายอาจต้องการติดตามคำจำกัดความเดิมของ CLS ควบคู่ไปกับการปรับเปลี่ยนกรอบเวลา เรามีข่าวดีมาแจ้งให้ทราบว่าเราจะใช้ "CLS แบบเดิม" ใน Lighthouse และ CrUX
ใน Lighthouse v8
จะมีอยู่ใน JSON เป็น audits['cumulative-layout-shift'].details.items[0].totalCumulativeLayoutShift
ซึ่งจะอยู่ในรูปแบบ
experimental_uncapped_cumulative_layout_shift
ใน CrUX API และใน
experimental.uncapped_cumulative_layout_shift
ใน CrUX BigQuery
หลังจากวันที่ 1 มิถุนายน คำขอ CrUX API จะแสดงเมตริก "CLS เดิม" ดังนี้
{
"origin": "https://web.dev",
"metrics": [
"experimental_uncapped_cumulative_layout_shift"
]
}
หลังจากวันที่ 8 มิถุนายน CrUX BigQuery ต่อไปนี้จะเปรียบเทียบ CLS แบบเก่าและแบบใหม่
WITH
new_data AS (
SELECT
cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(layout_instability.cumulative_layout_shift.histogram.bin) AS cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone'),
old_data AS (
SELECT
uncapped_cls
FROM
`chrome-ux-report.all.202105`,
UNNEST(experimental.uncapped_cumulative_layout_shift.histogram.bin) AS uncapped_cls
WHERE
origin = 'https://web.dev'
AND effective_connection_type.name = '4G'
AND form_factor.name = 'phone')
SELECT
cls.start AS start,
cls.`END` AS `end`,
cls.density AS cls_density,
uncapped_cls.density AS uncapped_cls_density
FROM
new_data
INNER JOIN
old_data
ON
new_data.cls.start = old_data.uncapped_cls.start
คุณจะใช้งานข้อมูลนี้ต่อไปได้นานสูงสุด 6 เดือน โดยเราจะเลิกใช้งาน "CLS แบบเก่า" ในวันที่ 14 ธันวาคม 2021
กำลังอัปเดตการถ่วงน้ำหนัก CLS ใน Lighthouse
หลังจากเปิดตัว CLS เป็นครั้งแรกใน Lighthouse ก็เป็นเมตริกที่สดใสใหม่ล่าสุด ดังนั้น เพื่อให้มั่นใจว่านักพัฒนาซอฟต์แวร์มีเวลาในการทดสอบ เปรียบเทียบ และเพิ่มประสิทธิภาพ CLS จึงให้น้ำหนักคะแนนประสิทธิภาพน้อยลงมาก
หลังจากที่นักพัฒนาซอฟต์แวร์ได้มีเวลาไปบ้างแล้ว คะแนน Lighthouse ก็ได้เพิ่มน้ำหนักของ CLS จาก 5% เป็น 15% ซึ่งสอดคล้องกับวิธีการทำให้ Core Web Vitals เป็นเมตริกที่มีน้ำหนักมากที่สุดในคะแนน Lighthouse
คุณดูการถ่วงน้ำหนักเมตริกที่อัปเดตได้ใน Lighthouse v8 ในเครื่องคำนวณคะแนน
การใช้ CLS ของ Lighthouse 8.0 มีทั้งการจัดกรอบเวลาและการมีส่วนร่วม CLS จากเฟรมย่อย ก่อน 8.0 CLS ใน Lighthouse ไม่ได้รวม CLS ��องเฟรมย่อยในการคำนวณเมตริก แต่ขณะนี้จะรวม CLS ของเฟรมย่อย เพื่อเป็นการยืนยัน ช่อง CLS ที่วัดโดย CrUX ก็จัดการกรอบเวลาและเฟรมย่อยในทำนองเดียวกันด้วย
อย่างไรก็ตาม ความแตกต่างหลักระหว่าง CLS ในห้องปฏิบัติการและ CLS คือหน้าต่างการสังเกตการณ์ของ CLS ในห้องทดลองจะสิ้นสุดที่ "โหลดอย่างสมบูรณ์" ตามสภาพของห้องทดลอง ในขณะที่ภาคสนาม หน้าต่างการสังเกตการณ์ขยายไปตลอดอายุการใช้งานของหน้า รวมถึงกิจกรรมหลังการโหลด อย่างไรก็ตาม การปรับกรอบเวลาจะลดความแตกต่างนี้อย่างมาก
การวัดด้วยตัวเอง
หากต้องการวัดการใช้ CLS ล่าสุด ให้บันทึกค่านี้เป็นข้อมูลภาคสนามผ่านทาง RUM โดยใช้ข้อมูลโค้ด PerformanceObserver ต่อไปนี้
หรือจะใช้ไลบรารี JavaScript ของ Web Vitals โดยตรง ซึ่งก็ได้รับการอัปเดตตามการเปลี่ยนแปลงนี้ด้วย
การอัปเดตเพิ่มเติม
นอกจากการอัปเดต Cumulative Layout Shift แล้ว เรายังได้อัปเดตเครื่องมือบนเว็บเกี่ยวกับเมตริกต่อไปนี้ด้วย
- เรากําลังอัปเดตคําจํากัดความล่าสุดของเมตริก Largest Contentful Paint CrUX API, PSI, PSI API, Search Console จะอัปเดตในวันที่ 1 มิถุนายน 2021 CrUX BigQuery จะอัปเดตในวันที่ 8 มิถุนายน 2021
- ใน CrUX เกณฑ์ Tri-Binning ของ First Contentful Paint ได้รับการอัปเดตเป็น ดี: [0-1.8s], ต้องปรับปรุง: (1.8-3 วินาที), แย่: [3s-∞]
บทสรุป
เราหวังว่าการเปลี่ยนแปลงนี้จะแสดงให้เห็นถึงการเปลี่ยนแปลงที่ราบรื่นสำหรับเว็บไซต์ส่วนใหญ่ และขอแนะนำให้คุณดู Web Vitals และ เพิ่มประสิทธิภาพ CLS เพื่อดูกลเม็ดเคล็ดลับใ��การวัดและเพิ่มประสิทธิภาพเลย์เอาต์ที่เลิกใช้ไปแล้ว และเช่นเคย โปรดติดต่อกลุ่ม web-vitals-feedback สำหรับความคิดเห็นเกี่ยวกับเมตริกและฟอรัมความคิดเห็นที่เจาะจงเกี่ยวกับเครื่องมือของเราสำหรับ Lighthouse และรายงาน UX ของ Chrome สำหรับปัญหาด้านเครื่องมือ ไชโย!
ขอขอบคุณ Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose และ Paul Ireland ที่แสดงความคิดเห็น
รูปภาพหลักโดย Barn Images / @barnimages ใน Unsplash