การพัฒนา Cumulative Layout Shift ในเครื่องมือเว็บ

ตั้งแต่วันนี้เป็นต้นไป การเปลี่ยนแปลง CLS ได้เริ่มใช้งานในแพลตฟอร์มเครื่องมือทางเว็บของ Chrome หลายแพลตฟอร์ม ซึ่งรวมถึง Lighthouse, PageSpeed Insights และรายงาน UX ของ Chrome

Addy Osmani

Elizabeth Sweeny

เผยแพร่เมื่อวันที่ 2 มิถุนายน 2021

วันนี้เราขอแชร์วิธีที่เราพัฒนาการวัดเมตริกการเปลี่ยนเลย์เอาต์แบบสะสม (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 ได้ที่ด้านล่าง รวมถึงเครื่องมือที่ยังคงสามารถเปรียบเทียบกับการติดตั้งใช้งานเดิมได้

นอกจากนี้ เราจะอัปเดตเครื่องมือสำหรับนักพัฒนาเว็บใน 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 ในคะแนนประสิทธิภาพเพื่อให้นักพัฒนาแอปมีเวลาทดสอบ เปรียบเทียบ และเพิ่มประสิทธิภาพกับ CLS

ตอนนี้หลังจากที่นักพัฒนาซอฟต์แวร์ได้ใช้งานไประยะหนึ่งแล้ว คะแนน Lighthouse ได้เพิ่มน้ำหนักของ CLS จาก 5% เป็น 15% ซึ่งสอดคล้องกับวิธีการที่มี Core Web Vitals เป็นเมตริกที่มีน้ำหนักมากที่สุดในคะแนน Lighthouse

คุณดูน้ำหนักที่อัปเดตแล้วของเมตริกใน Lighthouse v8 ได้ในเครื่องคำนวณคะแนน