การพัฒนา 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 ได้ในเครื่องคำนวณคะแนน

การติดตั้งใช้งาน CLS ของ Lighthouse 8.0 ประกอบด้วยทั้งการแบ่งกรอบเวลาและการมีส่วนร่วมของ CLS จากเฟรมย่อย ก่อนหน้าเวอร์ชัน 8.0 นั้น CLS ใน Lighthouse ไม่ได้รวม CLS ของเฟรมย่อยในการคำนวณเมตริก แต่ตอนนี้ได้รวม CLS ไว้แล้ว ขอยืนยันอีกครั้งว่า CLS ของช่องที่ CrUX วัดจะจัดการกับกรอบหน้าต่างและเฟรมย่อยในลักษณะเดียวกันด้วย

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

การวัดในพื้นที่ด้วยตนเอง

หากต้องการวัดการติดตั้งใช้งาน CLS ล่าสุด คุณยังบันทึกข้อมูลนี้สําหรับข้อมูลภาคสนามผ่าน RUM ได้ด้วยโดยใช้ข้อมูลโค้ด PerformanceObserver ต่อไปนี้

หรือจะใช้ไลบรารี JavaScript ของ Web Vitals โดยตรงก็ได้ ซึ่งก็ได้รับการอัปเดตด้วยการเปลี่ยนแปลงนี้เช่นกัน

การอัปเดตเพิ่มเติม

นอกจากการอัปเดตการเปลี่ยนแปลงเลย์เอาต์แบบสะสมแล้ว เรายังได้ทำการอัปเดตเครื่องมือทางเว็บที่เกี่ยวข้องกับเมตริกต่อไปนี้ด้วย

• เรากําลังอัปเดตคําจํากัดความล่าสุดของเมตริก Largest Contentful Paint CrUX API, PSI, PSI API, Search Console จะอัปเดตในวันที่ 1 มิถุนายน 2021 CrUX BigQuery จะอัปเดตในวันที่ 8 มิถุนายน 2021
• ใน CrUX เกณฑ์การจัดกลุ่ม 3 กลุ่มของ First Contentful Paint ได้รับการอัปเดตเป็น "ดี: [0-1.8 วินาที] ต้องปรับปรุง: (1.8-3 วินาที) แย่: [3 วินาที-∞]"

สรุป

เราคาดว่าการเปลี่ยนแปลงนี้จะทําให้เว็บไซต์ส่วนใหญ่เปลี่ยนผ่านได้อย่างราบรื่น และขอแนะนําให้คุณดูเคล็ดลับเกี่ยวกับวิธีวัดและเพิ่มประสิทธิภาพการเปลี่ยนเลย์เอาต์ใน Web Vitals และ Optimize CLS และเช่นเคย โปรดติดต่อเราที่กลุ่ม web-vitals-feedback เพื่อแสดงความคิดเห็นเกี่ยวกับเมตริกและฟอรัมความคิดเห็นเกี่ยวกับเครื่องมือสำหรับ Lighthouse และรายงาน UX ของ Chrome เพื่อแจ้งปัญหาเกี่ยวกับเครื่องมือ ขอแสดงความนับถือ

ขอขอบคุณ Johannes Henkel, Rick Viscomi, Vivek Sekhar, Rachel Andrew, Milica Mihajlija, Jeff Jose และ Paul Irish สำหรับความคิดเห็น

รูปภาพหลักโดย Barn Images / @barnimages ใน Unsplash