นอกจากนี้ เว็บไซต์ที่เปิดตัวอีกครั้งยังช่วยให้อัตราการมองเห็นโฆษณาเพิ่มขึ้นกว่า 75%, อัตราตีกลับลดลง 50% และการดูหน้าเว็บเพิ่มขึ้น 27%
เมื่อ Google ประกาศโครงการริเริ่ม Core Web Vitals ผู้เผยแพร่โฆษณาชาวเยอรมันอย่าง Netzwelt ตระหนักถึงศักยภาพของเมตริกใหม่เหล่านี้อย่างรวดเร็วว่าจะช่วยสร้างประสบการณ์การใช้งานหน้าเว็บที่ยอดเยี่ยมและเพิ่มรายได้จากโฆษณา พวกเขาได้เริ่มดำเนินการเพื่อเปิดตัวเว็บไซต์อีกครั้ง โดยนําแนวทางปฏิบัติแนะนำด้านประสิทธิภาพที่พบได้ทั่วไปมาใช้ไปพร้อมกับการเพิ่มประสิทธิภาพแท็กโฆษณาและตําแหน่งโฆษณาไปพร้อมกัน การมุ่งมั่นที่จะมอบประสบการณ์ผู้ใช้ที่ยอดเยี่ยมและหน้าเว็บที่รวดเร็วพิสูจน์แล้วว่าช่วยเพิ่มประสิทธิภาพการมีส่วนร่วมและรายได้จากโฆษณาไปพร้อมๆ กัน โดยมีการดูหน้าเว็บเพิ่มขึ้น 27% ความสามารถในการแสดงโฆษณาได้มากกว่า 75% และรายได้จากโฆษณาเพิ่มขึ้น 18%
27%
การดูหน้าเว็บเพิ่มขึ้น
18%
รายได้จากโฆษณาเพิ่มขึ้น
75%
การมองเห็นโฆษณา
ความท้าทาย
Netzwelt พยายามหาจุดสมดุลที่เหมาะสมระหว่างการเพิ่มประสิทธิภาพประสบการณ์ของผู้ใช้กับความเร็วหน้าเว็บ เช่นเดียวกับผู้เผยแพร่ข่าวรายอื่นๆ อีกมากมาย ขณะเดียวกันก็รักษารายได้จากโฆษณาให้สูงไว้ได้ ปัญหาหลักที่พบมีดังนี้
- Cumulative Layout Shift (CLS) สูงเนื่องจากการเปลี่ยนเลย์เอาต์ที่เกิดจากโฆษณา โดยเฉพาะจากช่องหลายขนาดและแบนเนอร์ด้านบน
- Largest Contentful Paint (LCP) แสดงผลช้าเนื่องจากโฆษณาเป็นองค์ประกอบที่ใช้เวลาในการโหลดนานที่สุด หรือใช้แบนด์วิดท์จากการโหลดรูปภาพหลัก
- เวลาในการตอบสนองครั้งแรก (FID) สูงที่เกิดจาก JavaScript ของบุคคลที่สามที่จําเป็นสําหรับการโฆษณา การเสนอราคาส่วนหัว และวัตถุประสงค์อื่นๆ
- ผลข้างเคียงของ Core Web Vitals จากกล่องโต้ตอบขอความยินยอมที่ควบคุมโดยผู้ให้บริการบุคคลที่สาม ซึ่งยังเพิ่มการเปลี่ยนแปลงเลย์เอาต์และอาจตรวจพบเป็น Largest Paint ที่ล่าช้า
การเพิ่มประสิทธิภาพเว็บไซต์ข่าวสําหรับ Core Web Vitals
เมื่อ Netzwelt เริ่มทํางานกับ Core Web Vitals ทางบริษัทก็สังเกตได้อย่างรวดเร็วว่าการเพิ่มประสิทธิภาพ Core Web Vitals ไม่ได้ส่งผลเสียต่อโฆษณา แต่สามารถใช้เป็นโอกาสในการปรับปรุงการแสดงโฆษณา ด้วยเหตุนี้ ทีม Netzwelt จึงเพิ่มประสิทธิภาพ Core Web Vitals เพื่อเพิ่มการแสดงโฆษณาที่มองเห็นได้ให้มากกว่า 75% เพื่อดึงดูดการโฆษณาที่มีมูลค่าสูงขึ้น (ค่าเฉลี่ยทั่วโลกสําหรับโฆษณา Display น้อยกว่า 50%)
การเพิ่มประสิทธิภาพ CLS
โฆษณามักโหลดช้า (บางครั้งเป็นเพราะการโหลดแบบเลื่อนเวลา) และขนาดจริงของโฆษณามักไม่ทราบล่วงหน้าเนื่องจากตําแหน่งโฆษณาแบบหลายขนาดและแบบยืดหยุ่น
ปัญหานี้แบ่งออกเป็น 2 ส่วน ได้แก่ โฆษณาที่อยู่ครึ่งหน้าบนและครึ่งหน้าล่าง
โฆษณาเหนือส่วนที่มีการมองเห็นอาจทําให้เลย์เอาต์กระโดดอย่างมากเนื่องจากการโหลดช้าและมีขนาดที่ไม่รู้จัก การบล็อกพื้นที่โฆษณาขนาดใหญ่ที่สุดที่อาจต้องใช้อาจส่งผลให้ UX ไม่ดี ในขณะที่การขอให้ผู้ลงโฆษณาใช้ขนาดโฆษณาคงที่อาจทำให้รายได้จากโฆษณาลดลง Netzwelt แก้ปัญหานี้ด้วยการทำให้โฆษณาด้านบนติดอยู่และนำแบนเนอร์ขนาดที่ใหญ่กว่าซึ่งได้รับอนุญาตออก โฆษณาที่วางซ้อนกันจะช่วยป้องกันไม่ให้เกิดการกระโดดของเลย์เอาต์สําหรับโฆษณาขนาดต่างๆ แม้ว่าขนาดที่มีสิทธิ์ลดลงจะส่งผลต่อยอดขายโฆษณา แต่ความสามารถในการแสดงตัวโฆษณาที่ดีขึ้นก็ชดเชยเรื่องนี้ได้อย่างง่ายดาย
ข้อมูลย้อนหลังและการทดสอบ A/B ช่วยให้ Netzwelt พบขนาดและตําแหน่งที่เหมาะสมสําหรับอุปกรณ์และขนาดหน้าจอต่างๆ รวมถึงกฎสื่อ CSS ที่ใช้เพื่อจองพื้นที่
โฆษณาในครึ่งหน้าล่างมีศักยภาพในการปรับปรุงได้อย่างมาก ดังนี้
- แบนเนอร์ที่ผู้ใช้มองไม่เห็นแต่โหลดแล้วทําให้ความสามารถในการแสดงโฆษณาไม่ดีและทําให้ประสบการณ์การใช้งานหน้าเว็บแย่ลง
- แบนเนอร์ที่โหลดเมื่อผู้ใช้เลื่อนผ่านอาจทำให้เนื้อหาข้ามไปมา
Netzwelt ใช้การโหลดแบบเลื่อนเวลาและจองพื้นที่สำหรับขนาดของส่วนร่วมต่ำสุดเพื่อรักษาประสบการณ์การใช้งานหน้าเว็บที่ดีและการมองเห็นโฆษณาที่สูง ในโซนหลายขนาด แบนเนอร์ที่ขอในขนาด 300x250 ถึง 300x600 จะจองพื้นที่โฆษณาสูง 250 พิกเซล วิธีนี้ช่วยขจัดการเปลี่ยนแปลงเลย์เอาต์สำหรับขนาดที่เล็กลง และลดการเปลี่ยนแปลงอย่างมากสำหรับแบนเนอร์ขนาดใหญ่ แนวทางนี้อาจไม่ใช่วิธีที่ดีที่สุด แต่ก็เป็นจุดเริ่มต้นและการประนีประนอมที่ดี
เพื่อเพิ่มประสิทธิภาพให้ดียิ่งขึ้น Netzwelt ใช้ Intersection Observer และ Network Information API เพื่อควบคุมตําแหน่งโฆษณาและลดการเปลี่ยนเลย์เอาต์ ระบบจะใช้ตําแหน่งโฆษณาและกลยุทธ์การโหลดแบบเลื่อนดูเมื่อพร้อม (Lazy Loading) ที่แตกต่างกัน ทั้งนี้ขึ้นอยู่กับตําแหน่งการเลื่อนและคุณภาพการเชื่อมต่อเครือข่าย และอาจเปลี่ยนโฆษณาจากหลายขนาดเป็นขนาดคงที่ เป้าหมายของอัลกอริทึมคือการเพิ่มอัตราการมองเห็นโฆษณาให้สูงสุดในขณะที่ลดการเปลี่ยนเลย์เอาต์ให้น้อยที่สุด เบราว์เซอร์ที่ไม่รองรับ NetworkInfo API จะใช้ค่าพร็อกซีตามการผสมผสานประเภทเครือข่ายที่ได้จากอุปกรณ์และ IP กลยุทธ์การโหลดแบบปรับเปลี่ยนได้นี้ช่วยลด CLS ให้กับผู้ใช้ที่เชื่อมต่ออินเทอร์เน็ตด้วยความเร็วต่ำโดยเฉพาะ
การเพิ่มประสิทธิภาพ FID
ความล่าช้าในการป้อนข้อมูลครั้งแรกอาจดูเหมือนจะเป็นปัญหาสําหรับผู้เผยแพร่ข่าว เนื่องจากโฆษณามักจะมาพร้อมกับไลบรารี JavaScript เพิ่มเติมจํานวนมาก และดูเหมือนว่าจะมีผลกระทบเชิงลบเมื่อดูข้อมูลการทดสอบ เช่น Lighthouse อย่างไรก็ตาม เมื่อดูข้อมูลภาคสนามในสารานุกรมเว็บปี 2020 พบว่าเว็บไซต์จำนวนมากมีการตอบสนองที่รวดเร็วเพียงพอ สาเหตุส่วนหนึ่งมาจาก JavaScript ของโฆษณาโหลดช้า (หลังจากอินพุตแรก) แคชได้ดี (เช่น การจัดการการแคชโค้ด v8) หรือได้รับการเพิ่มประสิทธิภาพอย่างดีจากผู้ให้บริการโฆษณา เครื่องมือติดตามการแสดงผลได้ของผู้ให้บริการจะหลีกเลี่ยงงานที่ใช้เวลานาน ดังนั้นแม้ว่าผลรวมของรันไทม์จะนาน เวลาในการบล็อกทั้งหมด (TBT) และ FID จะไม่ได้รับผลกระทบ แม้ว่า FID จะไม่ได้เป็นปัญหาใหญ่สำหรับ Netzwelt แต่ก็ยังต้องมีการเพิ่มประสิทธิภาพบางอย่าง
- ลดสคริปต์และผู้ให้บริการโฆษณา โดยมุ่งเน้นที่กองเดียวหากเป็นไปได้
- การโหลดสคริปต์ทั้งหมดด้วยคำสั่งเลื่อนหรือคำสั่ง async
- การใช้ Webpack หรือเทคโนโลยีที่คล้ายกันสำหรับ Tree Shaking และการแยกกลุ่ม
- ใช้กฎ 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 วิธี ดังนี้
- อย่างชัดเจนหากตรวจพบว่าเป็นการแสดงผลที่ใหญ่ที่สุดหรือทําให้เลย์เอาต์เปลี่ยน
- โดยนัยแล้ว คือการแย่งแบนด์วิดท์จาก Largest Paint จริง บล็อกเส้นทางที่สำคัญไปยัง Largest Paint หรือเลื่อนโฆษณาออกไปจนกว่าจะได้รับความยินยอม ซึ่งอาจทริกเกอร์การเปลี่ยนแปลงเลย์เอาต์ได้
Netzwelt ทํางานร่วมกับผู้ให้บริการความยินยอมบุคคลที่สาม ซึ่งได้เพิ่มประสิทธิภาพด้วย ขั้นแรก Netzwelt หลีกเลี่ยงข้อผิดพลาดที่เห็นได้ชัด ดังนี้
- สคริปต์ความยินยอมจะโหลดแบบไม่พร้อมกันเพื่อไม่ให้บล็อกทรัพยากรสําคัญ
- รูปแบบความยินยอมจะกำหนดให้องค์ประกอบขนาดใหญ่ไม่มีสิทธิ์เป็นองค์ประกอบที่ใหญ่ที่สุดภายใน LCP
- การวางซ้อนความยินยอมใช้
position: fixedเพื่อหลีกเลี่ยงการเปลี่ยนแปลง - แม้ว่าโฆษณาจะแสดงหลังจากได้รับความยินยอมเท่านั้น แต่ระบบจะสงวนพื้นที่ว่างไว้ล่วงหน้าอย่างเพียงพอเพื่อหลีกเลี่ยงการเปลี่ยนแปลงเลย์เอาต์เมื่อโฆษณาโหลด
- ตรวจสอบว่าการแสดงผลและการวางตำแหน่งของกล่องโต้ตอบความยินยอมไม่ได้ทริกเกอร์การเปลี่ยนแปลงเลย์เอาต์ ปัญหาหนึ่งที่พบและแก้ไขได้คือตัวเลือกการล็อกการเลื่อนของผู้ให้บริการ ซึ่งปิดใช้การเลื่อนขณะที่แสดงความยินยอมโดยการย้ายเนื้อหาหลักของบทความเมื่อเลื่อน ทำให้เลย์เอาต์เปลี่ยน
หลังจากทํางานนี้แล้ว CLS ภาคสนามและจากห้องทดลองยังคงมีความคลาดเคลื่อนกันมาก แม้ว่า CLS ของห้องทดลองจะใกล้เคียงกับ 0 แต่ค่าในช่องสูงกว่าเกณฑ์อย่างมาก หลังจากตรวจสอบแล้ว พบว่าปัญหาเกิดจากการเปลี่ยนแปลงเลย์เอาต์ภายใน iframe ของคําขอความยินยอม ซึ่งปัจจุบันระบบบันทึกข้อมูลในช่องอย่างถูกต้องเท่านั้น Netzwelt ยังคงทํางานร่วมกับผู้ให้บริการความยินยอมบุคคลที่สามเพื่อแก้ไขปัญหานี้
รูปแบบการสมัครรับข้อมูลข่าวสารและ Core Web Vitals
ผู้เผยแพร่ข่าวกําลังเปลี่ยนไปใช้รูปแบบการสมัครใช้บริการเพื่อหาเงินทุนสนับสนุนงานข่าว รูปแบบนี้เกี่ยวข้องกับ Core Web Vitals เนื่องจากผู้ใช้จะไม่ติดตามเว็บไซต์ที่มอบประสบการณ์การใช้งานที่ไม่ดี นอกจากนี้ ผู้ติดตามไม่คาดหวังว่าจะเห็นโฆษณาในเนื้อหาแบบชำระเงิน แต่การซ่อนโฆษณาอาจทำให้เลย์เอาต์เปลี่ยน เว็บไซต์ต้องตรวจสอบว่าผู้ใช้มีสิทธิ์ดูเนื้อหาหรือไม่และควรแสดงโฆษณาหรือไม่ การตรวจสอบเหล่านี้อาจทำให้เกิดเวลาในการตอบสนองเพิ่มขึ้น ซึ่งส่งผลให้เนื้อหาเปลี่ยนหรือผู้ใช้ได้รับประสบการณ์ที่ไม่ดี
Netzwelt ใช้รูปแบบที่เนื้อหาไม่มีค่าใช้จ่ายเสมอ แต่สมาชิกจะไม่เห็นโฆษณา พวกเขาได้ตรวจสอบวิธีต่างๆ ในการค้นหาและจัดเก็บการให้สิทธิ์เพื่อลดเวลาในการตอบสนองและการเปลี่ยนแปลงเลย์เอาต์
การค้นหาสิทธิ์ครั้งแรกจะทำให้เกิดเวลาในการตอบสนองเสมอ ดังนั้นหากการค้นหาสิทธิ์ใช้เวลานานเกินไป เว็บไซต์จะแสดงสถานะที่แคชไว้ล่าสุด สําหรับสมาชิกใหม่ การตั้งค่านี้หมายความว่าผู้ใช้ที่ชําระเงินมีความเสี่ยงเพียงเล็กน้อยที่จะเห็นโฆษณา 1 ครั้ง ผู้ใช้ที่เพิ่งสิ้นสุดการสมัครใช้บริการอาจเห็นการโหลด 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 Apps (PWA), เนื้อหาแบบออฟไลน์, โหมดมืด, Web Share API และกิจกรรมบนเว็บที่เชื่อถือได้ (TWA) โดยใช้ Digital Goods API ใหม่