การเปลี่ยนเลย์เอาต์จะเกิดขึ้นเมื่อองค์ประกอบที่มองเห็นได้ในหน้าเว็บเปลี่ยนตำแหน่งหรือขนาด ซึ่งส่งผลต่อตำแหน่งของเนื้อหารอบๆ บางครั้งการเปลี่ยนแปลงจะเกิดขึ้นอย่างตั้งใจ เช่น เมื่อคอนเทนเนอร์ขยายขึ้นจากการกระทำของผู้ใช้ อย่างไรก็ตาม ลักษณะแบบไดนามิกของโฆษณาอาจทำให้เกิดการเปลี่ยนแปลงเลย์เอาต์ที่ไม่คาดคิด ซึ่งส่งผลลบต่อประสบการณ์ของผู้ใช้และอาจทำให้เกิดปัญหาความสามารถในการใช้งานที่ร้ายแรงได้
คู่มือนี้อธิบายวิธีวัดและลดการเปลี่ยนแปลงของเลย์เอาต์เมื่อทำงานกับแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT)
โฆษณาทําให้เลย์เอาต์เปลี่ยนแปลงอย่างไร
โฆษณามักจะได้รับคำขอแบบไม่พร้อมกันและเพิ่มเนื้อหาแบบไดนามิกไปยังหน้าเว็บของคุณระหว่างหรือหลังการโหลดหน้าเว็บ ขณะที่โฆษณากำลังถูกดึง ส่วนที่เหลือของหน้าเว็บจะโหลดต่อไปและผู้ใช้อาจเห็นเนื้อหาที่ไม่ใช่โฆษณา หากคุณไม่จองพื้นที่ให้เพียงพอสำหรับการโหลดโฆษณา โฆษณาเหล่านั้นอาจกลายเป็นเนื้อหาที่ไม่ใช่โฆษณาซึ่งมองเห็นได้เมื่อเพิ่มโฆษณานั้นในหน้าเว็บในที่สุด
เมื่อทำงานกับแท็กผู้เผยแพร่โฆษณาผ่าน Google วงจรโฆษณาอาจเกิดการเปลี่ยนแปลงได้จาก 2-3 จุด ได้แก่
- เมื่อมีการโทรหา
display()ช่องโฆษณาอาจขยายหรือยุบ ขึ้นอยู่กับการกำหนดค่า - เมื่อมีการแสดงเนื้อหาโฆษณา ช่องโฆษณาอาจถูกปรับขนาดหากแสดงโฆษณาแบบไหลหรือหากมีพื้นที่ไม่เพียงพอ ช่องโฆษณาอาจขยายหรือยุบในจุดนี้ได้ด้วย ทั้งนี้ขึ้นอยู่กับการกำหนดค่า
- หลังจากแสดงเนื้อหาโฆษณาแล้ว โฆษณาบางประเภทได้รับการออกแบบมาเพื่อขยาย หลังจากที่ปรากฏในหน้า
โปรดทราบว่ายิ่งช่องโฆษณาอยู่ในวิวพอร์ตสูงเท่าใด เนื้อหาก็ยิ่งมีโอกาสที่จะแทนที่มากขึ้นเท่านั้น โปรดดูแลเป็นพิเศษกับช่องโฆษณาใกล้กับด้านบนของวิวพอร์ตเริ่มต้น (ครึ่งหน้าบน) ช่องเหล่านี้อาจส่งผลให้เกิดการเปลี่ยนแปลงของเลย์เอาต์ในสัดส่วนที่ไม่เหมาะสม เนื่องจากช่องเหล่านี้มีแนวโน้มที่จะมองเห็นได้มากขึ้นเมื่อโหลดเนื้อหาโฆษณา
การวัดการเปลี่ยนเลย์เอาต์
Cumulative Layout Shift (CLS) คือเมตริก Core Web Vitals ที่ใช้วัดผลกระทบของการเปลี่ยนเลย์เอาต์ในเว็บไซต์ได้ ทั้งในห้องทดลองและในภาคสนาม
ในห้องทดลอง
เครื่องมือสำหรับห้องทดลองจะวัด CLS แบบสังเคราะห์ ซึ่งหมายความว่าโปรแกรมเหล่านี้ไม่ต้องอาศัยการโต้ตอบของผู้ใช้จริง ทำให้เหมาะสำหรับการใช้งานในการผสานรวมอย่างต่อเนื่องและเวิร์กโฟลว์การพัฒนาในเครื่อง อย่างไรก็ตาม เครื่องมือเหล่านี้มักจะวัดประสิทธิภาพในระหว่างการโหลดหน้าเว็บและถูกจำกัดอยู่ในสภาวะที่สามารถจำลองได้ ดังนั้นค่าที่รายงานอาจต่ำกว่าที่ผู้ใช้จริงจะได้รับ
Publisher Ads Audits for Lighthouse คือเครื่องมือที่ใช้เพื่อวัด CLS โดยเฉพาะที่มาจากโฆษณา GPT ได้ ดูรายละเอียดได้ในเอกสารประกอบการตรวจสอบลดการเปลี่ยนเลย์เอาต์ที่เกี่ยวข้องกับโฆษณา
นอกจากนี้ คุณยังกำหนดค่าเครื่องมือสำหรับนักพัฒนาเว็บใน Chrome ให้ไฮไลต์การเปลี่ยนเลย์เอาต์ขณะที่ไปยังส่วนต่างๆ ของเว็บไซต์ได้ด้วย ซึ่งคุณจะใช้เพื่อระบุการเปลี่ยนเลย์เอาต์ที่เกิดขึ้นใกล้กับช่องโฆษณาในหน้าเว็บด้วยตนเองได้
ในช่อง
เครื่องมือภาคสนามจะวัด 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 screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
ควรหลีกเลี่ยงการสงวนพื้นที่สำหรับ JavaScript เนื่องจากอาจส่งผลให้เกิดการเปลี่ยนเลย์เอาต์ในขณะที่กำลังโหลดสคริปต์ การจองพื้นที่กับ CSS จะช่วยหลีกเลี่ยงความเสี่ยงนี้
ช่องโฆษณาแบบไหล
ช่องโฆษณาแบบไหลไม่ได้ระบุชุดขนาดคงที่ที่รองรับ แต่ช่องโฆษณาเหล่านี้จะปรับขนาดโดยอัตโนมัติเพื่อให้พอดีกับเนื้อหาครีเอทีฟโฆษณาที่แสดงแทน ซึ่งช่วยให้ช่องรองรับครีเอทีฟโฆษณาที่ไม่ทราบขนาดได้ ด้วยเหตุนี้ คุณจึงไม่สามารถจองพื้นที่สำหรับช่องเหล่านี้ก่อนที่จะขอเนื้อหาโฆษณาได้ และโฆษณาที่มีขนาดแบบไหลก็ทำให้เกิดการเปลี่ยนแปลงของเลย์เอาต์อยู่เสมอ
เราขอแนะนำให้ทำดังนี้เพื่อลดผลกระทบของการเปลี่ยนเลย์เอาต์เมื่อทำงานกับช่องโฆษณาแบบไหล
- ใช้ขนาด
fluidสำหรับช่องโฆษณาที่อยู่ครึ่งหน้าล่างเท่านั้น - ดึงข้อมูลช่องโฆษณาแบบไหลโดยเร็วที่สุดเพื่อลดโอกาสที่ผู้ใช้จะเลื่อนช่องโฆษณามาดูก่อนปรับขนาดช่องโฆษณา
การยุบและขยายช่องโฆษณา
เมธอด collapseEmptyDivs() ช่วยให้คุณยุบ div ของช่องโฆษณาเพื่อไม่ให้ใช้พื้นที่ในหน้าเว็บเมื่อไม่มีเนื้อหาโฆษณาที่จะแสดงได้ อย่างไรก็ตาม คุณควรใช้ฟีเจอร์นี้ด้วยความระมัดระวัง เพราะอาจทำให้เกิดการเปลี่ยนเลย์เอาต์โดยไม่ตั้งใจได้ ดังที่ระบุไว้ในส่วนก่อนหน้า การยุบและขยายช่องโฆษณาอาจทำให้เลย์เอาต์เกิดการเปลี่ยนแปลงใน 2 จุดที่ต่างกันในวงจรโฆษณา
หากต้องการใช้ฟีเจอร์นี้ คุณลดผลกระทบจากการเปลี่ยนเลย์เอาต์ได้โดยใช้ข้อมูลย้อนหลังจากการรายงานของ Ad Manager ในการทำตามแนวทางปฏิบัติแนะนำต่อไปนี้
- ช่องโฆษณาที่น่าจะมีการเติมโฆษณาควรเริ่มจากขยายเสมอ
- ช่องโฆษณาที่มีแนวโน้มว่าจะเติมโฆษณาไม่เต็มที่ควรจะเป็นแบบยุบเสมอ
ดูตัวอย่างการใช้งานได้ที่ตัวอย่างยุบช่องโฆษณาที่ว่างเปล่า