ความมุ่งมั่นต่อ Core Web Vitals เพิ่มรายได้จากโฆษณาของ Netzwelt ถึง 18% ได้อย่างไร

นอกจากนี้ เว็บไซต์ที่เพิ่งเปิดตัวใหม่ยังมีการมองเห็นโฆษณามากกว่า 75% อัตราตีกลับลดลง 50% และการดูหน้าเว็บเพิ่มขึ้น 27%

Martin Schierle

เมื่อ Google ประกาศโครงการริเริ่ม Core Web Vitals ผู้เผยแพร่เนื้อหาชาวเยอรมัน Netzwelt ทราบอย่างรวดเร็วถึงศักยภาพของเมตริกใหม่เหล่านี้ซึ่งจะนำไปสู่ประสบการณ์การใช้งานหน้าเว็บที่ยอดเยี่ยมและการสร้างรายได้ที่อิงตามการโฆษณา พวกเขาจึงเริ่มขั้นตอนการเปิดตัวเว็บไซต์อีกครั้ง โดยใช้แนวทางปฏิบัติแนะนำด้านประสิทธิภาพทั่วไปในขณะที่เพิ่มประสิทธิภาพแท็กโฆษณาและตำแหน่งโฆษณาไปพร้อมๆ กัน การยอมรับ UX ที่ยอดเยี่ยมและหน้าเว็บที่เร็วพิสูจน์ให้เห็นแล้วว่าเป็นวิธีที่ช่วยเพิ่มการมีส่วนร่วมและรายได้จากโฆษณาได้อย่างมีประสิทธิภาพ โดยการดูหน้าเว็บเพิ่มขึ้น 27% การมองเห็นโฆษณามากกว่า 75% และรายได้จากโฆษณาเพิ่มขึ้น 18%

27_%

ยอดดูหน้าเว็บเพิ่มขึ้น

18_%

รายได้จากโฆษณาที่เพิ่มขึ้น

75_%

การมองเห็นโฆษณา

ความท้าทาย

เช่นเดียวกับผู้เผยแพร่เนื้อหาข่าวรายอื่นๆ Netzwelt พบปัญหาในการค้นหาสมดุลที่เหมาะสมระหว่างการเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้กับความเร็วหน้าเว็บในขณะที่รักษารายได้จากโฆษณาให้สูงอยู่เสมอ ปัญหาหลักที่พวกเขาพบคือ

• Cumulative Layout Shift (CLS) สูงเนื่องจากมีการเปลี่ยนเลย์เอาต์ที่เกิดจากโฆษณา โดยเฉพาะจากช่องแบบหลายขนาดและแบนเนอร์ด้านบน
• Largest Contentful Paint (LCP) มาช้าเนื่องจากโฆษณาเป็นการแสดงผลที่ใหญ่ที่สุดหรือแย่งแบนด์วิดท์จากการโหลดรูปภาพหลัก
• First Input Delay (FID) สูงซึ่งเกิดจาก JavaScript ของบุคคลที่สามที่จำเป็นสำหรับการโฆษณา การเสนอราคาส่วนหัว และวัตถุประสงค์อื่นๆ
• ผลข้างเคียงใน Core Web Vitals จากกล่องโต้ตอบความยินยอมที่ควบคุมโดยผู้ให้บริการบุคคลที่สาม ซึ่งรวมอยู่ในการเปลี่ยนแปลงเลย์เอาต์ด้วยและอาจตรวจพบว่าเป็นการแสดงผลขนาดใหญ่ที่สุดในภายหลัง

การเพิ่มประสิทธิภาพเว็บไซต์ข่าวสำหรับ Core Web Vitals

เมื่อ Netzwelt เริ่มทำงานเกี่ยวกับเว็บ Vitals หลัก พวกเขาก็สังเกตเห็นอย่างรวดเร็วว่าการเพิ่มประสิทธิภาพ Core Web Vitals ไม่จำเป็นต้องส่งผลกระทบเชิงลบต่อโฆษณา แต่สามารถใช้เป็นโอกาสในการปรับปรุงการมองเห็นโฆษณาได้ ดังนั้น ทีม Netzwelt จึงเพิ่มประสิทธิภาพ Core Web Vitals เพื่อเพิ่มการมองเห็นโฆษณา ให้สูงกว่า 75% เพื่อดึงดูดโฆษณาที่มีมูลค่าสูงกว่า (ค่าเฉลี่ยทั่วโลกสำหรับโฆษณาแบบดิสเพลย์น้อยกว่า 50%)

การเพิ่มประสิทธิภาพ CLS

โฆษณามักจะโหลดล่าช้า (บางครั้งก็ทราบตัวด้วยการโหลดแบบ Lazy Loading) และมักจะไม่ทราบขนาดจริงล่วงหน้าเนื่องจากตำแหน่งโฆษณาหลายขนาดและแบบยืดหยุ่น

ปัญหาอาจแบ่งออกเป็น 2 ส่วน ได้แก่ โฆษณาครึ่งหน้าบนและครึ่งหน้าล่าง

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

ข้อมูลย้อนหลังและการทดสอบ A/B ช่วยให้ Netzwelt ค้นพบขนาดและตําแหน่งที่เหมาะสมสําหรับอุปกรณ์และขนาดหน้าจอที่แตกต่างกัน รวมถึงกฎสื่อ CSS ที่ใช้ในการจองพื้นที่

โฆษณาที่อยู่ในครึ่งหน้าล่างช่วยให้การปรับปรุงอย่างเห็นได้ชัด

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

Netzwelt ใช้การโหลดแบบ Lazy Loading และจองพื้นที่ไว้สำหรับขนาดของตัวส่วนทั่วไปที่ต่ำที่สุด เพื่อรักษาประสบการณ์การใช้งานหน้าเว็บที่ดีและมีการมองเห็นโฆษณาสูง ในโซนหลายขนาด แบนเนอร์ที่ขอในขนาด 300x250 ถึง 300x600 โดยสงวนความสูง 250 พิกเซลไว้ เพื่อช่วยลดการเปลี่ยนเลย์เอาต์ของขนาดที่เล็กลงและลดขนาดลงอย่างมากสำหรับแบนเนอร์ขนาดใหญ่ แนวทางนี้ไม่ใช่แนวทางที่ดีที่สุด แต่ก็เป็นการเริ่มต้นและประนีประนอมที่ดี

และเพื่อเพิ่มประสิทธิภาพต่อไป Netzwelt ใช้ Intersection Observer และ Network Information API เพื่อควบคุมตำแหน่งโฆษณาและลดการเปลี่ยนแปลงของเลย์เอาต์ ระบบจะใช้อันดับโฆษณาและกลยุทธ์การโหลดแบบ Lazy Loading ที่แตกต่างกันโดยขึ้นอยู่กับตำแหน่งการเลื่อนและคุณภาพการเชื่อมต่อเครือข่าย และโฆษณาอาจมีการเปลี่ยนจากหลายขนาดเป็นขนาดคงที่ วัตถุประสงค์ของอัลกอริทึมคือการเพิ่มการมองเห็นโฆษณาให้มากที่สุด ในขณะที่ลดการเปลี่ยนแปลงของเลย์เอาต์ เบราว์เซอร์ที่ไม่รองรับ NetworkInfo API จะใช้ค่าพร็อกซีโดยอิงตามการรวมอุปกรณ์และประเภทเครือข่ายที่ได้มาจาก IP กลยุทธ์การโหลดแบบปรับอัตโนมัตินี้ช่วยลด CLS สำหรับผู้ใช้ที่การเชื่อมต่ออินเทอร์เน็ตช้าเป็นพิเศษ

การเพิ่มประสิทธิภาพ FID

First Input Delay อาจเป็นปัญหาสำหรับผู้เผยแพร่เนื้อหาข่าว เนื่องจากโฆษณามักจะมีไลบรารี JavaScript เพิ่มเติมอีกมากมาย และดูเหมือนว่าจะมีผลกระทบในแง่ลบเมื่อดูข้อมูลในห้องทดลอง เช่น Lighthouse อย่างไรก็ตาม เมื่อดูข้อมูลช่องในตารางรวบรวมข้อมูลเว็บปี 2020 เว็บไซต์จำนวนมากมีการตอบสนองอย่างรวดเร็วพอ ส่วนหนึ่งเกิดจากการที่ JavaScript ของโฆษณาโหลดล่าช้า (หลังจากป้อนข้อมูลครั้งแรก) การแคชที่ดี (เช่น ได้รับการจัดการการแคชโค้ด v8) หรือได้รับการเพิ่มประสิทธิภาพโดยผู้ให้บริการโฆษณา เครื่องมือติดตามการมองเห็นโฆษณาของผู้ให้บริการจะหลีกเลี่ยงงานที่ใช้เวลานาน แม้ว่ารันไทม์จะยาวนานก็ตาม เวลาในการบล็อกทั้งหมด (TBT) และ FID จะไม่ได้รับผลกระทบ แม้ว่า FID จะไม่ใช่ปัญหาใหญ่สำหรับ Netzwelt แต่ก็ยังมีการเพิ่มประสิทธิภาพบางอย่างที่ต้องทำ ดังนี้

• ลดสคริปต์โฆษณาและผู้ให้บริการ โดยมุ่งความสนใจไปที่กลุ่มข้อมูลเดียวหากเป็นไปได้
• การโหลดสคริปต์ทั้งหมดด้วยการเลื่อนเวลาขึ้นลงหรืออะซิงโครนัส
• การใช้ Webpack หรือเทคโนโลยีที่คล้ายกันในการปีนต้นไม้และเลิกรวมกลุ่ม
• ใช้กฎ CSS ง่ายๆ ที่เหมือนกับ BEM
• หลีกเลี่ยงงานที่ใช้เวลานานและใช้รูปแบบไม่อยู่จนกว่าจะเร่งด่วน
• การทํางานกับ RequestAnimationFrame ในที่ใดก็ได้ที่ได้รับผลกระทบ

การเพิ่มประสิทธิภาพ LCP

Largest Contentful Paint อาจได้รับผลจากโฆษณา 2 วิธี คือ การสังเกตโฆษณาว่าเป็นการแสดงผลขนาดใหญ่ที่สุด และโดยอ้อมแล้วทำให้แบนด์วิดท์ของเครือข่ายแออัด หรือกระทบเส้นทางวิกฤติ เพื่อให้การแสดงผลที่ใหญ่ที่สุดจริง (เช่น รูปภาพหลัก) โหลดได้ไม่นานพอ

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

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

นอกจากการเพิ่มประสิทธิภาพเหล่านี้แล้ว Netzwelt ยังทำตามแนวทางปฏิบัติแนะนำอื่นๆ ด้วย

• แยก CSS สำหรับเส้นทางการแสดงผลวิกฤติแล้วใส่ไว้ในส่วนหัว
• โหลดแบบอักษร สคริปต์ และรูปภาพที่สำคัญที่สุดไว้ล่วงหน้า
• หลีกเลี่ยงการโหลดรูปภาพแบบ Lazy Loading ในครึ่งหน้าบน
• ใช้เมื่อ font-display="swap"

ความยินยอมตาม GDPR และ Core Web Vitals

กล่องโต้ตอบความยินยอมมักส่งผลเสียต่อ Core Web Vitals กล่องโต้ตอบความยินยอมอาจส่งผลต่อ Core Web Vitals ได้ 2 วิธีเช่นเดียวกับโฆษณา ดังนี้

• โดยชัดแจ้งในกรณีที่ตรวจพบว่าเป็นการแสดงผลที่ใหญ่ที่สุด หรือทำให้เลย์เอาต์เปลี่ยนแปลง
• โดยวิธีการจะขโมยแบนด์วิดท์จากการแสดงผลที่ใหญ่ที่สุดจริงๆ บล็อกเส้นทางวิกฤติไปยังการแสดงผลขนาดใหญ่ที่สุด หรือหน่วงเวลาโฆษณาจนกว่าจะได้รับความยินยอม ซึ่งจะส่งผลให้เลย์เอาต์เกิดการเปลี่ยนแปลง

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

• สคริปต์ความยินยอมจะโหลดแบบไม่พร้อมกัน เพื่อไม่ให้บล็อกทรัพยากรที่สำคัญ
• ความยินยอมจะได้รับการจัดรูปแบบเพื่อให้องค์ประกอบขนาดใหญ่ไม่มีสิทธิ์เป็นองค์ประกอบที่ใหญ่ที่สุดภายใน LCP
• การวางซ้อนความยินยอมใช้ position: fixed เพื่อหลีกเลี่ยงการเปลี่ยนแปลง
• แม้ว่าโฆษณาจะแสดงหลังจากที่ได้รับความยินยอมเท่านั้น แต่ก็มีการเว้นพื้นที่ว่างเพียงพอไว้ล่วงหน้าเพื่อหลีกเลี่ยงการเปลี่ยนแปลงของเลย์เอาต์เมื่อโฆษณาโหลดเข้ามา
• ตรวจสอบว่าการแสดงและการวางตำแหน่งของกล่องโต้ตอบความยินยอมไม่ทำให้เกิดการเปลี่ยนแปลงของเลย์เอาต์ ปัญหาหนึ่งที่พบและแก้ไขได้ที่นี่คือตัวเลือกการล็อกการเลื่อนของผู้ให้บริการ ซึ่งปิดใช้การเลื่อนในขณะที่แสดงความยินยอมโดยการย้ายเนื้อหาหลักของบทความเมื่อเลื่อน ทำให้เลย์เอาต์เปลี่ยนแปลง

หลังจากงานนี้ CLS ภาคสนามและ CLS ยังคงมีความแตกต่างกันอยู่มาก แม้ว่า CLS ในห้องทดลองจะใกล้เคียง 0 แต่ค่าในช่องข้อมูลสูงกว่าเกณฑ์อย่างมีนัยสำคัญ หลังจากตรวจสอบ ผู้ต้องหาคือการเปลี่ยนแปลงเลย์เอาต์ใน iframe ความยินยอม ซึ่งปัจจุบันได้รับการบันทึกอย่างถูกต้องจากข้อมูลภาคสนามเท่านั้น Netzwelt จะยังคงทำงานร่วมกับผู้ให้บริการความยินยอมบุคคลที่สามเพื่อปรับปรุงปัญหานี้ต่อไป

โมเดลการสมัครใช้บริการ News และ Core Web Vitals

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

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

การค้นหาการให้สิทธิ์ครั้งแรกมักจะทำให้เกิดเวลาในการตอบสนองเสมอ ดังนั้นหากการค้นหาการให้สิทธิ์ใช้เวลานานเกินไป เว็บไซต์จะแสดงสถานะที่แคชไว้ล่าสุด สำหรับสมาชิกใหม่ ผู้ใช้ที่จ่ายเงินจะเห็นโฆษณาเพียงครั้งเดียวซึ่งเป็นความเสี่ยงเล็กน้อย ผู้ใช้ที่เพิ่งสิ้นสุดการสมัครใช้บริการอาจเห็นการโหลด 1 ครั้งโดยไม่มีโฆษณาก่อนที่ระบบจะอัปเดตการให้สิทธิ์ที่จัดเก็บไว้ในเครื่อง เมื่อทราบการให้สิทธิ์แล้ว ระบบจะจัดเก็บการให้สิทธิ์ไว้ในเครื่องโดยใช้ LocalStorage API เพื่อหลีกเลี่ยงเวลาในการตอบสนองเพิ่มเติมและการเปลี่ยนแปลงเลย์เอาต์ในระหว่างการนําทางในอนาคต

ผลการเพิ่มประสิทธิภาพ

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

การเพิ่มประสิทธิภาพนี้ช่วยปรับปรุงประสบการณ์การใช้งานหน้าเว็บ แต่เป็นการดำเนินการโดยคำนึงถึงธุรกิจเป็นหลัก และปรับปรุงประสบการณ์การใช้งานโฆษณา การมองเห็นโฆษณา และรายได้ หลังจากเปิดหน้าเว็บที่เพิ่มประสิทธิภาพอีกครั้ง Netzwelt พบว่า CPM เพิ่มขึ้น 20-30% โดยมีการมองเห็นโฆษณาสูงกว่า 75% อย่างไรก็ตาม Netzwelt ถือว่ารายได้โดยรวมเพิ่มขึ้นสูงกว่า การเข้าชมเพิ่มขึ้นตั้งแต่เปิดตัวอีกครั้ง ซึ่งอาจเป็นผลมาจากการมีส่วนร่วมของผู้ใช้ที่สูงขึ้นและอัตราตีกลับที่ลดลงเนื่องจาก UX ที่ปรับปรุงให้ดีขึ้น ผลกระทบเหล่านี้ยากต่อการระบุปริมาณและกำหนดโดยมีความสัมพันธ์กับการเปิดตัวอีกครั้ง เนื่องจากการเข้าชมมีความผันผวนตามปกติ และยังมีผลกระทบจากการแพร่ระบาดทั่วโลกด้วย ผลกระทบทางอ้อมเหล่านี้เป็นเหตุผลหนึ่งที่ทำให้ Netzwelt พิจารณาตัวเลขทั้งหมดทุกครั้งเมื่อตรวจสอบเว็บไซต์ ไม่ใช่แค่ CPM ซึ่งอาจทำให้เข้าใจผิด เมตริก Core Web Vitals และ UX เมื่อใช้ร่วมกับเมตริกที่เกี่ยวข้องกับโฆษณาทั้งหมดจะช่วยให้เห็นภาพที่แท้จริง

มองไปถึงอนาคต

Netzwelt เชื่อว่าในอนาคตเมื่อไม่มีคุกกี้ของบุคคลที่สาม การกำหนดเป้าหมายตามบริบทผ่านเนื้อหาร่วมกับ UX และประสบการณ์การใช้งานหน้าเว็บที่ดี (รวมถึงการมองเห็นโฆษณา) จะเป็นกุญแจสู่ความสำเร็จในฐานะผู้เผยแพร่เนื้อหาข่าว

ดังนั้น Netzwelt จึงไม่หยุดแค่จาก Core Web Vitals แต่จะเพิ่มความพิเศษด้วยการใช้ความสามารถของเว็บสมัยใหม่หลายอย่าง เช่น Progressive Web App (PWA), เนื้อหาออฟไลน์, โหมดมืด, Web Share API และกิจกรรมบนเว็บที่เชื่อถือได้ (TWA) โดยใช้ Digital Goods API ใหม่