การเปลี่ยนเลย์เอาต์เกิดขึ้นเมื่อองค์ประกอบที่มองเห็นได้ในหน้าเว็บเปลี่ยนตำแหน่งหรือขนาด ซึ่งส่งผลต่อตำแหน่งของเนื้อหารอบๆ บางครั้งการเปลี่ยนแปลงก็เกิดขึ้นโดยตั้งใจ เช่น เมื่อคอนเทนเนอร์ขยายขึ้นเนื่องจากการดําเนินการของผู้ใช้ อย่างไรก็ตาม ลักษณะแบบไดนามิกของโฆษณาอาจทําให้เกิดการเปลี่ยนแปลงเลย์เอาต์โดยไม่คาดคิด ซึ่งส่งผลเสียต่อประสบการณ์ของผู้ใช้และอาจก่อให้เกิดปัญหาด้านความสามารถในการใช้งานอย่างร้ายแรง
คู่มือนี้จะอธิบายวิธีวัดและลดการเปลี่ยนแปลงของเลย์เอาต์เมื่อทํางานกับแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT)
วิธีที่โฆษณาทําให้เลย์เอาต์เปลี่ยน
โดยปกติแล้ว ระบบจะส่งคำขอโฆษณาแบบไม่พร้อมกันและเพิ่มเนื้อหาลงในหน้าเว็บแบบไดนามิกในระหว่างหรือหลังการโหลดหน้าเว็บ ขณะดึงข้อมูลโฆษณา หน้าเว็บส่วนที่เหลือจะยังคงโหลดต่อไปและผู้ใช้อาจเห็นเนื้อหาที่ไม่ใช่โฆษณา หากคุณไม่สำรองที่ที่เพียงพอสำหรับการโหลดโฆษณา ในท้ายที่สุด โฆษณาอาจถูกแทนที่เนื้อหาที่ไม่ใช่โฆษณาที่มองเห็นได้เมื่อมีการเพิ่มโฆษณานั้นลงในหน้านั้นในที่สุด
เมื่อใช้แท็กผู้เผยแพร่โฆษณาผ่าน Google ในวงจรโฆษณาอาจมีการเปลี่ยนแปลงเลย์เอาต์อยู่บ้าง เช่น
- เมื่อเรียก
display()ช่องอาจขยายหรือยุบได้ ทั้งนี้ขึ้นอยู่กับวิธีกำหนดค่า - เมื่อระบบแสดงผลเนื้อหาโฆษณา ระบบอาจปรับขนาดช่องหากแสดงโฆษณาแบบยืดหยุ่นหรือหากมีพื้นที่ไม่เพียงพอ ช่องอาจขยายหรือยุบตัวในขั้นตอนนี้ด้วย โดยขึ้นอยู่กับวิธีกำหนดค่า
- หลังจากแสดงเนื้อหาโฆษณา ครีเอทีฟโฆษณาบางประเภทออกแบบมาเพื่อขยายหลังจากปรากฏในหน้า
โปรดทราบว่ายิ่งช่องโฆษณาอยู่ในวิวพอร์ตสูงขึ้นเท่าใด โอกาสที่โฆษณาจะดันเนื้อหาอื่นๆ ออกก็ยิ่งมากขึ้นเท่านั้น โปรดระมัดระวังเป็นพิเศษกับช่องที่อยู่ใกล้กับด้านบนของวิวพอร์ตเริ่มต้น (เหนือการแบ่งหน้า) ช่องเหล่านี้อาจทําให้เลย์เอาต์เปลี่ยนตำแหน่งในปริมาณที่ไม่สมดุล เนื่องจากมีแนวโน้มที่จะแสดงเมื่อโหลดเนื้อหาโฆษณา
การวัดการเปลี่ยนเลย์เอาต์
การเปลี่ยนแปลงเลย์เอาต์สะสม (CLS) คือเมตริก Core Web Vitals ที่คุณสามารถใช้เพื่อวัดผลของการเปลี่ยนแปลงเลย์เอาต์ในเว็บไซต์ ทั้งในห้องทดลองและในการใช้งานจริง
ในห้องทดลอง
เครื่องมือทดสอบจะวัด CLS จากการสังเคราะห์ ซึ่งหมายความว่าไม่อาศัยการโต้ตอบของผู้ใช้จริง จึงเหมาะสําหรับใช้ในเวิร์กโฟลว์การผสานรวมและการพัฒนาในเครื่องอย่างต่อเนื่อง อย่างไรก็ตาม โดยทั่วไปแล้ว เครื่องมือเหล่านี้จะวัดประสิทธิภาพระหว่างการโหลดหน้าเว็บเท่านั้น และจํากัดเงื่อนไขที่จะจําลองได้ ค่าที่รายงานจึงอาจต่ำกว่าที่ผู้ใช้จริงจะได้รับ
การตรวจสอบโฆษณาของผู้เผยแพร่โฆษณาสําหรับ Lighthouse เป็นเครื่องมือที่ใช้ในการวัด CLS ที่มาจากโฆษณา GPT โดยเฉพาะ โปรดดูรายละเอียดในเอกสารประกอบการตรวจสอบลดการเปลี่ยนแปลงของเลย์เอาต์ซึ่งเกี่ยวข้องกับโฆษณา
นอกจากนี้ คุณยังกำหนดค่า Chrome DevTools ให้ไฮไลต์การเปลี่ยนแปลงเลย์เอาต์ขณะไปยังส่วนต่างๆ ของเว็บไซต์ได้ด้วย ซึ่งสามารถใช้เพื่อระบุการเปลี่ยนแปลงเลย์เอาต์ที่เกิดขึ้นใกล้กับช่องโฆษณาในหน้าเว็บด้วยตนเอง
ภาคสนาม
เครื่องมือภาคสนามจะวัด CLS ที่ผู้ใช้จริงพบขณะโต้ตอบกับเว็บไซต์ของคุณ กระบวนการนี้เรียกกันโดยทั่วไปว่าการตรวจสอบผู้ใช้จริง (RUM) RUM จะช่วยให้คุณสังเกตเห็นว่า CLS ได้รับผลกระทบจากปัจจัยในชีวิตจริง เช่น ความสามารถของอุปกรณ์ เงื่อนไขของเครือข่าย การโต้ตอบของผู้ใช้ และการปรับเปลี่ยนหน้าเว็บในแบบของคุณ ซึ่งมักจะจำลองได้ยากหรือไม่สามารถจำลองได้ด้วยการทดสอบสังเคราะห์
การลดการเปลี่ยนแปลงของเลย์เอาต์ให้เหลือน้อยที่สุด
วิธีเดียวที่รับประกันได้ว่าจะหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ได้คือการจัดสรรพื้นที่โฆษณาให้เพียงพอสำหรับแต่ละช่องโฆษณาโดยใช้ CSS การตั้งค่าความสูงและความกว้างแบบคงที่ในช่องโฆษณา div โดยตรงเป็นวิธีที่มีประสิทธิภาพมากที่สุด อย่างไรก็ตาม แม้ว่าวิธีนี้จะได้ผลดีกับขนาดโฆษณาแบบคงที่และแบบตายตัว แต่สถานการณ์ที่ซับซ้อนมากขึ้นอาจต้องใช้แนวทางที่ละเอียดยิ่งขึ้น สถานการณ์ทั่วไปบางประการจะอธิบายไว้ในส่วนต่อไปนี้
ช่องโฆษณาหลายขนาด
สําหรับช่องโฆษณาที่รองรับขนาดหลายขนาด เราขอแนะนําให้ใช้แนวทางใดแนวทางหนึ่งต่อไปนี้
- สำรองพื้นที่สำหรับขนาดที่ใหญ่ที่สุดที่กำหนดค่าให้แสดง
- จองพื้นที่สำหรับขนาดที่เล็กที่สุดที่กำหนดค่าให้แสดง
- จองพื้นที่สำหรับขนาดที่มีแนวโน้มจะแสดงมากที่สุด ซึ่งกำหนดโดยการตรวจสอบข้อมูลย้อนหลังของการเติมข้อมูลจากการรายงานของ Google Ad Manager
การเลือกแนวทางที่เหมาะสม
การจองพื้นที่สำหรับขนาดที่ใหญ่ที่สุดที่กำหนดค่าให้แสดงผลเป็นวิธีที่มีประสิทธิภาพมากที่สุดในการขจัดการเปลี่ยนแปลงของเลย์เอาต์ อย่างไรก็ตาม วิธีนี้อาจส่งผลให้มีพื้นที่ว่างรอบโฆษณามากเกินไปในกรณีที่แสดงครีเอทีฟโฆษณาที่เล็กกว่าขนาดที่สงวนไว้ การย่อช่องโฆษณาเพื่อให้ตรงกับขนาดของครีเอทีฟโฆษณาที่แสดงจะทำให้เกิดการเปลี่ยนเลย์เอาต์เพิ่มเติม เราจึงขอแนะนำว่าไม่ควรทำเช่นนี้ แต่ให้ใช้การกึ่งกลางแนวตั้งและแนวนอนเพื่อลดผลกระทบที่สายตามองเห็นจากพื้นที่ว่างส่วนเกิน
ในทางกลับกัน การจองพื้นที่สำหรับขนาดที่เล็กที่สุดที่กำหนดค่าให้แสดงจะช่วยหลีกเลี่ยงพื้นที่ว่างรอบโฆษณาที่มากเกินไป ตัวเลือกนี้อาจเป็นตัวเลือกที่ดีหากช่องโฆษณาของคุณมักจะแสดงครีเอทีฟโฆษณาขนาดเล็ก หรือในกรณีที่ขนาดทั้งหมดที่ช่องรองรับนั้นคล้ายกัน อย่างไรก็ตาม วิธีนี้จะทำให้เลย์เอาต์เปลี่ยนไปในกรณีที่มีการแสดงครีเอทีฟโฆษณาที่ใหญ่กว่าขนาดที่จองไว้ (แม้ว่าโดยทั่วไปแล้วการเปลี่ยนแปลงดังกล่าวจะน้อยกว่าเมื่อเทียบกับการไม่จองพื้นที่เลย)
คุณสามารถจองพื้นที่
"เฉลี่ย" สำหรับช่องโฆษณาได้ เพื่อสร้างความสมดุลระหว่างพื้นที่ว่างและการเปลี่ยนเลย์เอาต์ เช่น การจอง 100px ในแนวตั้งจะทำให้มีพื้นที่ว่างเล็กน้อยเมื่อแสดงครีเอทีฟโฆษณา 320x50 แต่ลดคะแนน CLS เมื่อเทียบกับการไม่มีพื้นที่ว่างเลย คุณจะต้องทดลองใช้ขนาดต่างๆ เพื่อหาจุดสมดุลที่ดีที่สุดสำหรับเว็บไซต์ของคุณเอง
เมื่อต้องพิจารณาจํานวนพื้นที่ที่จะจองสําหรับช่องหนึ่งๆ การตรวจสอบข้อมูลการบรรจุโฆษณาที่ผ่านมาจากการรายงานของ Google Ad Manager จะช่วยให้คุณมีข้อมูลประกอบการตัดสินใจมากขึ้น ตัวอย่างต่อไปนี้จะช่วยอธิบายเรื่องนี้ได้ดีที่สุด
ตัวอย่าง #1
| ขนาดโฆษณา (แสดงแล้ว) | การแสดงผลของเซิร์ฟเวอร์โฆษณา (%) |
|---|---|
300x250 |
70% |
320x50 |
30% |
ในกรณีนี้ การจอง 250px ในแนวตั้งอาจช่วยลด CLS ได้อย่างมากเนื่องจากครีเอทีฟโฆษณาส่วนใหญ่ที่แสดงคือ 300x250
ตัวอย่างที่ 2
| ขนาดโฆษณา (ที่แสดง) | การแสดงผลของเซิร์ฟเวอร์โฆษณา (%) |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
ในกรณีนี้ โฆษณาส่วนใหญ่มีความสูงไม่เกิน 90px ดังนั้นการจองพื้นที่แนวตั้ง 90px ควรช่วยหลีกเลี่ยงการเปลี่ยนเลย์เอาต์ได้เกือบตลอดเวลา
วิธีจองพื้นที่
เราขอแนะนำให้แก้ไขปัญหานี้โดยการระบุขนาดช่องโฆษณาผ่านพร็อพเพอร์ตี้ CSS min-height และ min-width ดังนี้
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
การใช้แอตทริบิวต์ min-height และ min-width จะช่วยให้คุณสามารถจองพื้นที่ขั้นต่ำสำหรับช่องโฆษณาของคุณ ในขณะที่ยังคงอนุญาตให้เบราว์เซอร์เพิ่มขนาดของคอนเทนเนอร์ได้ตามความจำเป็น เพื่อไม่ให้เนื้อหาถูกตัดออกในกรณีที่มีการแสดงครีเอทีฟโฆษณาที่มีขนาดใหญ่
คุณสามารถใช้เทคนิคนี้ร่วมกับ CSS Media Queries เพื่อระบุค่าต่ำสุดที่แตกต่างกันสำหรับหน้าจอขนาดต่างๆ ดังนี้
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
คุณควรหลีกเลี่ยงการจองพื้นที่ด้วย JavaScript เนื่องจากอาจส่งผลให้เลย์เอาต์เปลี่ยนเมื่อสคริปต์โหลด การจองพื้นที่ด้วย CSS ช่วยหลีกเลี่ยงความเสี่ยงนี้ได้
ช่องโฆษณาแบบไหล
ช่องโฆษณาแบบไหลไม่ได้ระบุชุดขนาดที่รองรับ แต่ช่องเหล่านี้จะปรับขนาดโดยอัตโนมัติเพื่อให้พอดีกับเนื้อหาครีเอทีฟโฆษณาที่แสดง ทำให้รองรับครีเอทีฟโฆษณาที่มีขนาดไม่กำหนดได้ ด้วยเหตุนี้ คุณจึงไม่สามารถจองพื้นที่สําหรับช่องเหล่านี้ก่อนขอเนื้อหาโฆษณาได้ และโฆษณาขนาดยืดหยุ่นจะทําให้เลย์เอาต์เปลี่ยนแปลงเสมอ
เราขอแนะนําให้ทําดังนี้เพื่อลดผลกระทบจากการเปลี่ยนแปลงเลย์เอาต์เมื่อใช้ช่องโฆษณาแบบยืดหยุ่น
- ใช้ขนาด
fluidสำหรับช่องที่อยู่ครึ่งหน้าล่างเท่านั้น - ดึงข้อมูลช่องโฆษณาแบบยืดหยุ่นให้เร็วที่สุดเพื่อลดโอกาสที่ผู้ใช้จะเลื่อนช่องโฆษณาเข้ามาอยู่ในมุมมองก่อนที่ระบบจะปรับขนาดช่องโฆษณา
การยุบและขยายช่องโฆษณา
เมธอด collapseEmptyDivs() ช่วยให้คุณยุบ div ช่องโฆษณา เพื่อไม่ให้กินพื้นที่บนหน้าเว็บเมื่อไม่มีเนื้อหาโฆษณาที่จะแสดง อย่างไรก็ตาม คุณควรใช้ฟีเจอร์นี้ด้วยความระมัดระวังเนื่องจากอาจทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์โดยไม่ตั้งใจ ตามที่ระบุไว้ในส่วนก่อนหน้า การยุบและขยายช่องโฆษณาอาจทําให้เลย์เอาต์เกิดการเปลี่ยนแปลง 2 จุดในวงจรโฆษณา
หากต้องการใช้ฟีเจอร์นี้ คุณสามารถลดผลกระทบของการเปลี่ยนแปลงเลย์เอาต์ได้โดยใช้ข้อมูลการแทนที่ที่ผ่านมาจากการรายงานของ Ad Manager เพื่อนำแนวทางปฏิบัติแนะนำต่อไปนี้ไปใช้
- ช่องโฆษณาที่น่าจะได้รับการเติมโฆษณาควรเริ่มต้นแบบขยายเสมอ
- ช่องที่มีแนวโน้มจะว่างควรยุบไว้เสมอ
ดูตัวอย่างการติดตั้งใช้งานได้ที่ตัวอย่างยุบช่องโฆษณาว่าง