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