ดูวิธีระบุและแก้ไขการเปลี่ยนเลย์เอาต์
ส่วนแรกของบทความนี้กล่าวถึงเครื่องมือสำหรับ ดีบักการเปลี่ยนเลย์เอาต์ ขณะที่ส่วนที่ 2 จะพูดถึงกระบวนการคิดที่ควรใช้ เพื่อหาสาเหตุของการเปลี่ยนเลย์เอาต์
เครื่องมือ
Layout Instability 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 ที่เกี่ยวข้องมากที่สุดกับการแก้ไขข้อบกพร่องของการเปลี่ยนเลย์เอาต์
| พร็อพเพอร์ตี้ | คำอธิบาย |
|---|---|
sources |
พร็อพเพอร์ตี้ sources จะแสดงองค์ประกอบ DOM ที่ย้ายระหว่างการเปลี่ยนเลย์เอาต์ อาร์เรย์นี้มีแหล่งที่มาได้สูงสุด 5 รายการ ในกรณีที่มีองค์ประกอบมากกว่า 5 อย่างที่ได้รับผลกระทบจากการเปลี่ยนเลย์เอาต์ จะมีการรายงานแหล่งที่มาของการเปลี่ยนเลย์เอาต์ที่ใหญ่ที่สุด 5 แหล่ง (วัดจากผลกระทบต่อความเสถียรของเลย์เอาต์) ข้อมูลนี้ถูกรายงานโดยใช้อินเทอร์เฟซ LayoutShiftAttribution (รายละเอียดเพิ่มเติมด้านล่าง) |
value |
พร็อพเพอร์ตี้ value จะรายงานคะแนนการเปลี่ยนเลย์เอาต์สําหรับการเปลี่ยนเลย์เอาต์หนึ่งๆ |
hadRecentInput |
พร็อพเพอร์ตี้ hadRecentInput จะระบุว่ามีการเปลี่ยนแปลงเลย์เอาต์ภายใน 500 มิลลิวินาทีหลังจากอินพุตของผู้ใช้หรือไม่ |
startTime |
พร็อพเพอร์ตี้ startTime จะระบุเมื่อมีการเปลี่ยนเลย์เอาต์ startTime จะแสดงเป็นมิลลิวินาทีและวัดจากเวลาที่เริ่มการโหลดหน้าเว็บ |
duration |
ระบบจะตั้งค่าพร็อพเพอร์ตี้ duration เป็น 0 เสมอ พร็อพเพอร์ตี้นี้รับมาจากอินเทอร์เฟซ PerformanceEntry (อินเทอร์เฟซ LayoutShift ขยายอินเทอร์เฟซ PerformanceEntry) แต่แนวคิดของระยะเวลาไม่มีผลกับเหตุการณ์ที่มีการเปลี่ยนเลย์เอาต์ ระบบจึงตั้งค่าเป็น 0 ดูข้อมูลเกี่ยวกับอินเทอร์เฟซของ PerformanceEntry ได้ที่ข้อกำหนด |
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
ระบบจะรายงานการเปลี่ยนแปลงเลย์เอาต์นี้ด้วยแหล่งที่มาเดียวคือองค์ประกอบ ข. อย่างไรก็ตาม สาเหตุที่แท้จริงของการเปลี่ยนเลย์เอาต์นี้คือการเปลี่ยนแปลงขนาดองค์ประกอบ A
ตัวอย่าง #2
การเปลี่ยนเลย์เอาต์ในตัวอย่างนี้จะได้รับการรายงานด้วยแหล่งที่มา 2 แหล่ง ได้แก่ องค์ประกอบ A และองค์ประกอบ B สาเหตุที่แท้จริงของการเปลี่ยนเลย์เอาต์นี้คือการเปลี่ยนตำแหน่งของ องค์ประกอบ A
ตัวอย่าง #3
การเปลี่ยนเลย์เอาต์ในตัวอย่างนี้จะได้รับการรายงานด้วยแหล่งที่มาเดียวคือองค์ประกอบ B การเปลี่ยนตำแหน่งขององค์ประกอบ B ส่งผลให้เกิดการเปลี่ยนเลย์เอาต์นี้
ตัวอย่าง #4
แม้ว่าองค์ประกอบ ข. จะเปลี่ยนขนาด แต่ไม่มีการเปลี่ยนแปลงเลย์เอาต์ในตัวอย่างนี้
ดูการสาธิตวิธีที่ Layout Instability API รายงานการเปลี่ยนแปลง DOM
เครื่องมือสำหรับนักพัฒนาเว็บ
แผงประสิทธิภาพ
แผงประสบการณ์ของแผงประสิทธิภาพของเครื่องมือสำหรับนักพัฒนาเว็บจะแสดงทั้งหมด การเปลี่ยนเลย์เอาต์ที่เกิดขึ้นระหว่างการติดตามประสิทธิภาพที่กำหนด แม้ว่าจะเกิดขึ้นก็ตาม ภายใน 500 มิลลิวินาทีหลังจากการโต้ตอบของผู้ใช้ ดังนั้นระบบจะไม่นับรวมใน CLS การวางเมาส์เหนือการเปลี่ยนเลย์เอาต์ที่เฉพาะเจาะจงในแผงประสบการณ์การใช้งานจะไฮไลต์องค์ประกอบ DOM ที่ได้รับผลกระทบ
หากต้องการดูข้อมูลเพิ่มเติมเกี่ยวกับการเปลี่ยนเลย์เอาต์ ให้คลิกการเปลี่ยนเลย์เอาต์ จากนั้น
เปิดลิ้นชักสรุป การเปลี่ยนแปลงขนาดขององค์ประกอบจะแสดงโดยใช้รูปแบบ [width, height] ส่วนการเปลี่ยนแปลงตำแหน่งขององค์ประกอบจะแสดงโดยใช้รูปแบบ [x,y] พร็อพเพอร์ตี้ Had recent input จะระบุว่ามีการเปลี่ยนแปลงเลย์เอาต์เกิดขึ้นภายใน 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 ร่วมกับเครื่องมือการบันทึกข้อมูลส่วนหน้าเพื่อรวบรวมข้อมูลเพิ่มเติมเกี่ยวกับปัญหาเหล่านี้ ดูตัวอย่างโค้ดสําหรับวิธีติดตามองค์ประกอบที่เลื่อนมากที่สุดในหน้าเว็บ