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

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

Katie Hempenius

ส่วนแรกของบทความนี้กล่าวถึงเครื่องมือสำหรับ ดีบักการเปลี่ยนเลย์เอาต์ ขณะที่ส่วนที่ 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 จะรอจนกว่าจะส่งคำขอหลักเพื่อหลีกเลี่ยงไม่ให้ส่งผลต่อประสิทธิภาพ ชุดข้อความไม่มีความเคลื่อนไหวเพื่อรายงานเกี่ยวกับการเปลี่ยนแปลงเลย์เอาต์ ดังนั้น ขึ้นอยู่กับว่า เทรดหลักไม่ว่าง อาจมีความล่าช้าเล็กน้อยระหว่างเวลาที่เลย์เอาต์ Shift จะเกิดขึ้นและเมื่อมีการบันทึกในคอนโซล
• สคริปต์นี้จะไม่สนใจการเปลี่ยนแปลงเลย์เอาต์ที่เกิดขึ้นภายใน 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 ที่เกี่ยวข้องมากที่สุด การแก้ไขข้อบกพร่องเกี่ยวกับการเปลี่ยนเลย์เอาต์:

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

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

ตัวอย่าง #4

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

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

เครื่องมือสำหรับนักพัฒนาเว็บ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

วันที่

ลักษณะการทำงานบางอย่างเหล่านี้มักทำให้เกิดการเปลี่ยนเลย์เอาต์บ่อยที่สุด กิจกรรม:

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

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

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

การเปลี่ยนแปลงมิติข้อมูลขององค์ประกอบ

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

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

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

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

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

ภาพเคลื่อนไหวที่เรียกให้เลย์เอาต์แสดง

เอฟเฟ็กต์ภาพเคลื่อนไหวบางอย่างสามารถทริกเกอร์ เลย์เอาต์ ทั่วไป ตัวอย่างของกรณีนี้คือเมื่อองค์ประกอบ DOM เป็น "ภาพเคลื่อนไหว" โดยเพิ่มพร็อพเพอร์ตี้ เช่น top หรือ left แทนที่จะใช้ transform อ่านวิธีสร้างภาพเคลื่อนไหว 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 ร่วมกับเครื่องมือการบันทึกฟรอนท์เอนด์ ที่จะรวบรวมข้อมูลเพิ่มเติมในประเด็นเหล่านี้ เช็คเอาต์ ตัวอย่างโค้ดสำหรับวิธีติดตามองค์ประกอบที่ขยับขนาดใหญ่ที่สุดในหน้าเว็บ