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

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

Addy Osmani

Elizabeth Sweeny

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

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