การเปลี่ยนเลย์เอาต์เกิดขึ้นเมื่อองค์ประกอบที่มองเห็นได้ในหน้าเว็บเปลี่ยนตำแหน่งหรือขนาด ซึ่งส่งผลต่อตำแหน่งของเนื้อหารอบๆ บางครั้งการเปลี่ยนแปลงก็เกิดขึ้นโดยตั้งใจ เช่น เมื่อคอนเทนเนอร์ขยายขึ้นเนื่องจากการดําเนินการของผู้ใช้ อย่างไรก็ตาม ลักษณะแบบไดนามิกของโฆษณาอาจทําให้เกิดการเปลี่ยนแปลงเลย์เอาต์โดยไม่คาดคิด ซึ่งส่งผลเสียต่อประสบการณ์ของผู้ใช้และอาจก่อให้เกิดปัญหาด้านความสามารถในการใช้งานอย่างร้ายแรง
คู่มือนี้จะอธิบายวิธีวัดและลดการเปลี่ยนแปลงของเลย์เอาต์เมื่อทํางานกับแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT)
วิธีที่โฆษณาทําให้เลย์เอาต์เปลี่ยน
โดยปกติแล้ว ระบบจะส่งคำขอโฆษณาแบบไม่พร้อมกันและเพิ่มเนื้อหาลงในหน้าเว็บแบบไดนามิกในระหว่างหรือหลังการโหลดหน้าเว็บ ขณะดึงข้อมูลโฆษณา หน้าเว็บส่วนที่เหลือจะยังคงโหลดต่อไปและผู้ใช้อาจเห็นเนื้อหาที่ไม่ใช่โฆษณา หากคุณไม่จัดสรรพื้นที่เพียงพอสําหรับโฆษณาที่กําลังโหลด โฆษณาอาจไปแทนที่เนื้อหาที่ไม่ใช่โฆษณาที่มองเห็นได้เมื่อเพิ่มลงในหน้าเว็บในท้ายที่สุด
เมื่อใช้แท็กผู้เผยแพร่โฆษณาของ Google จะมีจุดในวงจรโฆษณา 2-3 จุดที่อาจเกิดการเปลี่ยนแปลงเลย์เอาต์
- เมื่อเรียก
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 เพื่อนำแนวทางปฏิบัติแนะนำต่อไปนี้ไปใช้
- ช่องที่มีแนวโน้มจะเต็มควรขยายไว้เสมอ
- ช่องที่มีแนวโน้มจะว่างควรยุบไว้เสมอ
ดูตัวอย่างการใช้งานได้ที่ตัวอย่างยุบช่องโฆษณาว่าง