แก้ไขข้อบกพร่องการเปลี่ยนเลย์เอาต์

ดูวิธีระบุและแก้ไขการเปลี่ยนแปลงของเลย์เอาต์

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

การใช้เครื่องมือ

API ความเสถียรของเลย์เอาต์

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

การใช้งาน

คุณสามารถใช้ข้อมูลโค้ดเดียวกับที่วัด Cumulative Layout Shift (CLS) เพื่อแก้ไขข้อบกพร่องของการเปลี่ยนแปลงเลย์เอาต์ได้ด้วย ข้อมูลโค้ดด้านล่างจะบันทึกข้อมูลเกี่ยวกับ การเปลี่ยนเลย์เอาต์ไปยังคอนโซล การตรวจสอบบันทึกนี้จะให้ข้อมูล เกี่ยวกับเวลา ตำแหน่ง และลักษณะการเปลี่ยนเลย์เอาต์เกิดขึ้น

let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

เมื่อเรียกใช้สคริปต์นี้ โปรดทราบว่า

• ตัวเลือก buffered: true บ่งบอกว่า PerformanceObserver ควรตรวจสอบบัฟเฟอร์รายการประสิทธิภาพของเบราว์เซอร์เพื่อหารายการประสิทธิภาพที่สร้างขึ้นก่อนการเริ่มต้นของผู้สังเกตการณ์ ด้วยเหตุนี้ PerformanceObserver จะรายงานการเปลี่ยนเลย์เอาต์ที่เกิดขึ้นทั้งก่อนและหลังการเริ่มต้น โปรดคำนึงถึงเรื่องนี้เมื่อตรวจสอบบันทึกของคอนโซล การเปลี่ยนแปลงเลย์เอาต์ที่เกิดขึ้นครั้งแรกอาจสะท้อนให้เห็นงานที่ทำค้างไว้ในการรายงาน แทนที่จะเป็นการเปลี่ยนแปลงเลย์เอาต์จำนวนมากที่เกิดขึ้นอย่างกะทันหัน
• PerformanceObserver จะรอจนกว่าเทรดหลักไม่มีการใช้งานเพื่อรายงานเกี่ยวกับการเปลี่ยนเลย์เอาต์เพื่อหลีกเลี่ยงไม่ให้เกิดผลกระทบต่อประสิทธิภาพ ดังนั้นอาจมีความล่าช้าเล็กน้อยระหว่างเวลาที่มีการเปลี่ยนแปลงเลย์เอาต์กับเวลาที่บันทึกในคอนโซล ทั้งนี้ขึ้นอยู่กับความพลุกพล่านของเทรดหลัก
• สคริปต์นี้ไม่สนใจการเปลี่ยนเลย์เอาต์ที่เกิดขึ้นภายใน 500 มิลลิวินาทีของการป้อนข้อมูลของผู้ใช้ ดังนั้นจึงไม่นับรวมใน CLS

ระบบจะรายงานข้อมูลเกี่ยวกับการเปลี่ยนเลย์เอาต์โดยใช้ API ร่วมกัน 2 รายการ ได้แก่ อินเทอร์เฟซ LayoutShift และ LayoutShiftAttribution อินเทอร์เฟซแต่ละแบบได้รับการอธิบายรายละเอียดเพิ่มเติมในส่วนต่อไปนี้

LayoutShift

ระบบจะรายงานการเปลี่ยนเลย์เอาต์แต่ละครั้งโดยใช้อินเทอร์เฟซ LayoutShift เนื้อหาของ รายการมีลักษณะดังนี้

duration: 0
entryType: "layout-shift"
hadRecentInput: false
lastInputTime: 0
name: ""
sources: (3) [LayoutShiftAttribution, LayoutShiftAttribution, LayoutShiftAttribution]
startTime: 11317.934999999125
value: 0.17508567530168798

รายการด้านบนแสดงถึงการเปลี่ยนเลย์เอาต์ในระหว่างที่องค์ประกอบ DOM 3 รายการเปลี่ยนตำแหน่ง คะแนนการเปลี่ยนเลย์เอาต์ของการเปลี่ยนเลย์เอาต์นี้คือ 0.175

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

พร็อพเพอร์ตี้	คำอธิบาย
sources	พร็อพเพอร์ตี้ sources แสดงองค์ประกอบ DOM ที่ย้ายระหว่างการเปลี่ยนเลย์เอาต์ อาร์เรย์นี้มีแหล่งที่มาได้สูงสุด 5 รายการ ในกรณีที่มีองค์ประกอบมากกว่า 5 อย่างที่ได้รับผลกระทบจากการเปลี่ยนเลย์เอาต์ ระบบจะรายงานแหล่งที่มาของการเปลี่ยนเลย์เอาต์จาก 5 แหล่งใหญ่ที่สุด (วัดจากผลกระทบต่อความเสถียรของเลย์เอาต์) ข้อมูลนี้จะรายงานโดยใช้อินเทอร์เฟซการระบุแหล่งที่มา LayoutShift (อธิบายอย่างละเอียดด้านล่าง)
value	พร็อพเพอร์ตี้ value จะรายงานคะแนนการเปลี่ยนแปลงของเลย์เอาต์สำหรับการเปลี่ยนเลย์เอาต์หนึ่งๆ
hadRecentInput	พร็อพเพอร์ตี้ hadRecentInput จะระบุว่าการเปลี่ยนเลย์เอาต์เกิดขึ้นภายใน 500 มิลลิวินาทีอินพุตของผู้ใช้หรือไม่
startTime	พร็อพเพอร์ตี้ startTime ระบุเมื่อเกิดการเปลี่ยนแปลงเลย์เอาต์ startTime จะระบุเป็นหน่วยมิลลิวินาทีและมีการวัดสัมพัทธ์กับเวลาที่หน้าเว็บเริ่มต้น
duration	ระบบจะตั้งค่าพร็อพเพอร์ตี้ duration เป็น 0 เสมอ พร็อพเพอร์ตี้นี้รับช่วงมาจากอินเทอร์เฟซ PerformanceEntry (อินเทอร์เฟซ LayoutShift ขยายอินเทอร์เฟซ PerformanceEntry) แต่แนวคิดของระยะเวลาไม่มีผลกับเหตุการณ์การเปลี่ยนเลย์เอาต์ ดังนั้นจึงมีการตั้งค่าเป็น 0 ดูข้อมูลเกี่ยวกับอินเทอร์เฟซ PerformanceEntry ได้ในspec

LayoutShiftAttribution

อินเทอร์เฟซ LayoutShiftAttribution อธิบายการเปลี่ยนองค์ประกอบ DOM เดียวเพียงครั้งเดียว หากองค์ประกอบหลายรายการมีการเปลี่ยนแปลงระหว่างการเปลี่ยนเลย์เอาต์ พร็อพเพอร์ตี้ sources จะมีหลายรายการ

ตัวอย่างเช่น JSON ด้านล่างสอดคล้องกับการเปลี่ยนเลย์เอาต์ที่มีแหล่งที่มาเดียว: การเปลี่ยนแปลงที่ลดลงขององค์ประกอบ DOM <div id='banner'> จาก y: 76 เป็น y:246

// ...
  "sources": [
    {
      "node": "div#banner",
      "previousRect": {
        "x": 311,
        "y": 76,
        "width": 4,
        "height": 18,
        "top": 76,
        "right": 315,
        "bottom": 94,
        "left": 311
      },
      "currentRect": {
        "x": 311,
        "y": 246,
        "width": 4,
        "height": 18,
        "top": 246,
        "right": 315,
        "bottom": 264,
        "left": 311
      }
    }
  ]

พร็อพเพอร์ตี้ node ระบุองค์ประกอบ HTML ที่ขยับ เมื่อวางเมาส์เหนือพร็อพเพอร์ตี้นี้ในเครื่องมือสำหรับนักพัฒนาเว็บจะไฮไลต์องค์ประกอบของหน้าที่เกี่ยวข้อง

พร็อพเพอร์ตี้ previousRect และ currentRect จะรายงานขนาดและตำแหน่งของโหนด

• พิกัด x และ y จะรายงานพิกัด x และพิกัด y ตามลำดับมุมซ้ายบนขององค์ประกอบ
• พร็อพเพอร์ตี้ width และ height จะรายงานความกว้างและความสูงขององค์ประกอบตามลำดับ
• พร็อพเพอร์ตี้ top, right, bottom และ left จะรายงานค่าพิกัด x หรือ y ที่สอดคล้องกับขอบที่ระบุขององค์ประกอบ กล่าวคือ ค่าของ top เท่ากับ y และค่าของ bottom เท่ากับ y+height

หากพร็อพเพอร์ตี้ทั้งหมดของ previousRect ตั้งค่าเป็น 0 หมายความว่าองค์ประกอบได้เปลี่ยนเป็นมุมมอง หากพร็อพเพอร์ตี้ทั้งหมดของ currentRect ตั้งค่าเป็น 0 หมายความว่าองค์ประกอบเลื่อนออกจากมุมมอง

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

ตัวอย่างที่ 1

ระบบจะรายงานการเปลี่ยนเลย์เอาต์นี้โดยมีแหล่งที่มาเดียวคือ องค์ประกอบ B แต่สาเหตุหลักของการเปลี่ยนเลย์เอาต์นี้คือการเปลี่ยนแปลงขนาดขององค์ประกอบ A

ตัวอย่าง #2

ระบบจะรายงานการเปลี่ยนเลย์เอาต์ในตัวอย่างนี้ด้วยแหล่งที่มา 2 แหล่ง ได้แก่ องค์ประกอบ A และองค์ประกอบ B สาเหตุหลักของการเปลี่ยนเลย์เอาต์นี้คือการเปลี่ยนแปลงตำแหน่งองค์ประกอบ A

ตัวอย่างที่ 3

ระบบจะรายงานการเปลี่ยนเลย์เอาต์ในตัวอย่างนี้ด้วยแหล่งที่มา 1 รายการคือ องค์ประกอบ B การเปลี่ยนตำแหน่งองค์ประกอบ B ส่งผลให้เกิดการเปลี่ยนเลย์เอาต์นี้

ตัวอย่างที่ 4

แม้ว่าองค์ประกอบ B จะเปลี่ยนขนาด แต่ก็ไม่มีการเปลี่ยนเลย์เอาต์ในตัวอย่างนี้

ดูการสาธิตวิธีที่ Layout Instability API รายงานการเปลี่ยนแปลง DOM

DevTools

แผงประสิทธิภาพ

แผงประสบการณ์ของแผงประสิทธิภาพของเครื่องมือสําหรับนักพัฒนาเว็บจะแสดงการเปลี่ยนแปลงของเลย์เอาต์ทั้งหมดที่เกิดขึ้นระหว่างการติดตามประสิทธิภาพหนึ่งๆ แม้ว่าจะเกิดขึ้นภายใน 500 มิลลิวินาทีหลังจากการโต้ตอบของผู้ใช้ จึงไม่นับรวมใน CLS การวางเมาส์เหนือการเปลี่ยนเลย์เอาต์หนึ่งๆ ในแผงประสบการณ์จะไฮไลต์องค์ประกอบ DOM ที่ได้รับผลกระทบ

หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนเลย์เอาต์ ให้คลิกการเปลี่ยนเลย์เอาต์ จากนั้น เปิดลิ้นชักสรุป การเปลี่ยนแปลงขนาดขององค์ประกอบจะแสดงโดยใช้รูปแบบ [width, height] ส่วนการเปลี่ยนแปลงตำแหน่งองค์ประกอบจะแสดงรายการโดยใช้รูปแบบ [x,y] พร็อพเพอร์ตี้มีอินพุตล่าสุดจะระบุว่าการเปลี่ยนเลย์เอาต์เกิดขึ้นภายใน 500 มิลลิวินาทีหลังจากการโต้ตอบของผู้ใช้หรือไม่

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

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

ไฮไลต์บริเวณที่มีการเปลี่ยนเลย์เอาต์

การไฮไลต์บริเวณที่มีการเปลี่ยนเลย์เอาต์เป็นเทคนิคที่มีประโยชน์ในการสร้างรูปลักษณ์แบบคร่าวๆ ของตำแหน่งและช่วงเวลาของการเปลี่ยนเลย์เอาต์ที่เกิดขึ้นในหน้าเว็บ

หากต้องการเปิดใช้ Layout Shift Regions ในเครื่องมือสำหรับนักพัฒนาเว็บ ให้ไปที่การตั้งค่า > เครื่องมือเพิ่มเติม > การแสดงผล > Layout Shift Regions แล้วรีเฟรชหน้าที่คุณต้องการแก้ไขข้อบกพร่อง พื้นที่ที่มีการเปลี่ยนเลย์เอาต์จะไฮไลต์เป็นเวลาสั้นๆ เป็นสีม่วง

กระบวนการคิดสำหรับการระบุสาเหตุของการเปลี่ยนเลย์เอาต์

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

ระบุสาเหตุของการเปลี่ยนเลย์เอาต์

การเปลี่ยนเลย์เอาต์อาจเกิดจากเหตุการณ์ต่อไปนี้

• การเปลี่ยนแปลงตําแหน่งขององค์ประกอบ DOM
• การเปลี่ยนแปลงขนาดขององค์ประกอบ DOM
• การแทรกหรือการนําองค์ประกอบ DOM ออก
• ภาพเคลื่อนไหวที่ทริกเกอร์เลย์เอาต์

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

• ตำแหน่งหรือมิติข้อมูลขององค์ประกอบก่อนหน้ามีการเปลี่ยนแปลงไหม
• องค์ประกอบ DOM ถูกแทรกหรือนำออกก่อนองค์ประกอบที่เลื่อนหรือไม่
• ตำแหน่งขององค์ประกอบที่เลื่อนมีการเปลี่ยนแปลงอย่างชัดเจนใช่ไหม

หากองค์ประกอบก่อนหน้าไม่ทําให้เลย์เอาต์เปลี่ยนแปลง ให้ค้นหาต่อไปโดยพิจารณาองค์ประกอบที่อยู่ก่อนหน้าและใกล้เคียงอื่นๆ

นอกจากนี้ ทิศทางและระยะห่างของการเปลี่ยนเลย์เอาต์ยังให้คําแนะนําเกี่ยวกับสาเหตุของปัญหาได้ด้วย ตัวอย่างเช่น การเลื่อนลงอย่างมากมักจะบ่งบอกถึงการแทรกองค์ประกอบ DOM ในขณะที่การเปลี่ยนเลย์เอาต์ขนาด 1 พิกเซลหรือ 2 พิกเซลมักจะบ่งบอกถึงการใช้สไตล์ CSS ที่ขัดแย้งกัน หรือการโหลดและการใช้แบบอักษรของเว็บ

ต่อไปนี้เป็นลักษณะการทำงานเฉพาะบางส่วนที่ก่อให้เกิดเหตุการณ์การเปลี่ยนเลย์เอาต์บ่อยที่สุด

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

การเปลี่ยนแปลงประเภทนี้มักเป็นผลมาจากสิ่งต่อไปนี้

• สไตล์ชีตที่โหลดล่าช้าหรือเขียนทับสไตล์ที่ประกาศไว้ก่อนหน้านี้
• ภาพเคลื่อนไหวและเอฟเฟกต์การเปลี่ยน

การเปลี่ยนแปลงขนาดขององค์ประกอบ

การเปลี่ยนแปลงประเภทนี้มักเป็นผลมาจากสิ่งต่อไปนี้

• สไตล์ชีตที่โหลดล่าช้าหรือเขียนทับสไตล์ที่ประกาศไว้ก่อนหน้านี้
• รูปภาพและ iframe ที่ไม่มีแอตทริบิวต์ width และ height ที่โหลดหลังจากที่แสดงผล "ช่อง" แล้ว
• บล็อกข้อความที่ไม่มีแอตทริบิวต์ width หรือ height ซึ่งสลับแบบอักษรหลังจากแสดงผลข้อความแล้ว

การแทรกหรือการนำองค์ประกอบ DOM ออก

ซึ่งมักเป็นผลมาจากสิ่งต่อไปนี้

• การแทรกโฆษณาและการฝังของบุคคลที่สามอื่นๆ
• การแทรกแบนเนอร์ การแจ้งเตือน และโมดัล
• การเลื่อนได้ไม่รู้จบและรูปแบบ UX อื่นๆ ที่โหลดเนื้อหาเพิ่มเติมเหนือเนื้อหาที่มีอยู่

ภาพเคลื่อนไหวที่ทริกเกอร์เลย์เอาต์

เอฟเฟกต์ภาพเคลื่อนไหวบางอย่างจะทริกเกอร์เลย์เอาต์ได้ ตัวอย่างทั่วไปคือเมื่อองค์ประกอบ DOM ทำงาน "เคลื่อนไหว" โดยเพิ่มพร็อพเพอร์ตี้ เช่น top หรือ left แทนการใช้พร็อพเพอร์ตี้ transform ของ CSS อ่านวิธีสร้างภาพเคลื่อนไหว CSS ประสิทธิภาพสูงเพื่อดูข้อมูลเพิ่มเติม

ทำซ้ำการเปลี่ยนแปลงเลย์เอาต์

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

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

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      debugger;
      console.log('Current CLS value:', cls, entry);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

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