วิธีที่แพลตฟอร์มการจัดการความยินยอมของ PubTech ลด INP ของเว็บไซต์ของลูกค้าได้มากถึง 64% และเพิ่มการมองเห็นโฆษณาได้ถึง 1.5%

วิธีที่ PubConsent CMP ลด INP ของลูกค้าได้ถึง 64% โดยใช้กลยุทธ์ผลตอบแทนที่ใช้ API ของ Scheduler ของเบราว์เซอร์เพื่อแก้ไขปัญหาด้านการตอบสนองตามอุปกรณ์ที่พบโดยใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome

Marco Prontera

Gilberto Cocchi

แพลตฟอร์มการจัดการความยินยอม (CMP) เป็นเครื่องมือที่ช่วยให้เว็บไซต์ปฏิบัติตามกฎระเบียบด้านความเป็นส่วนตัวด้วยการขอความยินยอมจากผู้ใช้ให้ใช้คุกกี้และเทคโนโลยีการติดตาม นอกจากเป้าหมายหลักในการปฏิบัติตามกฎหมายแล้ว CMP ที่เป็นสคริปต์ของบุคคลที่สามยังต้องดูแลให้เกิดผลกระทบต่อประสิทธิภาพและประสบการณ์ของผู้ใช้น้อยที่สุด

PubConsent CMP เป็นผลิตภัณฑ์ล่าสุดจาก PubTech CMP ของ PubConsent ที่พัฒนาขึ้นโดยมุ่งเน้นที่ประสิทธิภาพเป็นหลัก ทำให้มั่นใจได้ว่าจะมีการใช้งานที่ง่ายดาย เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุด และส่งผลต่อประสิทธิภาพโดยรวมของเว็บไซต์น้อยที่สุด

การเปิดตัวเมตริกการโต้ตอบกับ Next Paint (INP) ช่วยให้ PubTech ค้นพบปัญหาเกี่ยวกับการตอบสนองของ CMP ของเราได้ ในกรณีศึกษานี้ PubTech แสดงวิธีที่พวกเขาแก้ปัญหาด้วยการตอบสนองในแพลตฟอร์ม PubConsent CMP และการปรับปรุง INP ก่อนที่จะกลายเป็น Core Web Vitals ในเดือนมีนาคม 2024 ซึ่งแสดงให้เห็นถึงความมุ่งมั่นในการมอบประสิทธิภาพที่ดีที่สุดเท่าที่จะเป็นไปได้ในผลิตภัณฑ์ CMP

เหตุใด PubTech จึงให้ความสำคัญกับประสิทธิภาพ

CMP ของ PubConsent เช่น CMP ส่วนใหญ่ มีฟังก์ชันการจัดการความยินยอมที่ใช้เป็นสคริปต์ของบุคคลที่สามในหน้าเว็บไซต์ การลดผลกระทบด้านประสิทธิภาพของข้อเสนอ CMP ซึ่งรวมถึงการตอบสนองอย่างรวดเร็วเป็นสิ่งสำคัญในการรับประกันว่าการผสานรวม CMP จะประสบความสำเร็จ

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

สําคัญ: อ่านข้อมูลเพิ่มเติมเกี่ยวกับผลกระทบของ JavaScript ต่อประสิทธิภาพของหน้าเว็บได้ในการประเมินสคริปต์และงานที่ใช้เวลานาน

CMP ให้ความสำคัญของฟังก์ชันและผลกระทบที่อาจมีต่อประสิทธิภาพ PubTech จึงกำหนดเป้าหมายต่อไปนี้

1. ลดผลกระทบที่ผลิตภัณฑ์ CMP เกี่ยวกับ PubConsent ต่อ INP ให้เหลือน้อยที่สุด
2. ลดงานที่ใช้เวลานานซึ่งเป็นผลมาจากผลิตภัณฑ์ CMP
3. ลด Total block Time (TBT) ซึ่งอาจส่งผลเสียต่อ INP ของหน้าเว็บ

วิธีวัด INP

PubTech ใช้เครื่องมือสำหรับนักพัฒนาเว็บใน Chrome เพื่อทำการวิเคราะห์เบื้องต้นและวินิจฉัยการโต้ตอบที่ช้าด้วยตนเอง เวิร์กโฟลว์นี้ช่วยให้ PubTech ระบุปัญหาที่เฉพาะเจาะจงซึ่งส่งผลต่อการตอบสนองของหน้าเว็บได้ เช่น การโต้ตอบการคลิกภายในผลิตภัณฑ์ CMP เพื่อยอมรับคุกกี้ทั้งหมด และจากนั้นก็ปิดกล่องโต้ตอบความยินยอมในการใช้คุกกี้ ส่งผลให้เกิดงานที่ใช้เวลานานซึ่งทําให้การอัปเดตอินเทอร์เฟซผู้ใช้ล่าช้า จากภาพต่อไปนี้ อินเทอร์เฟซผู้ใช้ไม่ได้รับการอัปเดตเพื่อแสดงว่ากล่องโต้ตอบถูกปิดลงจนกว่างานที่ใช้เวลานานจะเสร็จสิ้น

เช่นเดียวกับปุ่มยอมรับคุกกี้ทั้งหมด ปุ่มสำหรับปฏิเสธคุกกี้ทั้งหมดหรือปรับแต่งค่ากำหนดคุกกี้ทั้งหมดจะมีเวิร์กโฟลว์เดียวกันในสถาปัตยกรรม CMP ของ PubConsent ด้วยเหตุนี้ การปรับปรุงที่มีรายละเอียดในกรณีศึกษานี้จึงส่งผลต่อชุดการโต้ตอบของผู้ใช้ในผลิตภัณฑ์ CMP

วันที่

การนำเสนอภาพของสิ่งที่เกิดขึ้นเมื่อผู้ใช้คลิกปุ่ม "ยอมรับทั้งหมด"

ความล่าช้านี้ส่งผลให้ภาพของแผงอยู่ในสถานะถูกล็อกในระหว่างการทำงาน เนื่องจากเป็นการบล็อกการอัปเดตการแสดงผลเป็นระยะเวลานานที่อาจรับรู้ได้ INP ของหน้าเว็บจึงได้รับผลกระทบในเชิงลบ

หมายเหตุ: สิ่งที่มีบทบาทสำคัญที่สุดของงานที่ใช้เวลานานที่สุดคือการคลิกอินเทอร์เฟซผู้ใช้ CMP มักจะเป็นสคริปต์อื่นๆ ของบุคคลที่สาม (เช่น สคริปต์จากข้อมูลวิเคราะห์หรือผู้ให้บริการโฆษณา)

วิธีที่ PubTech เพิ่มประสิทธิภาพ INP สำหรับปุ่มและลิงก์

ปรับปรุง INP โดยใช้กลยุทธ์ผลตอบแทนแบบต่างๆ ใน CMP ของ PubConsent

ให้งานที่มีความสำคัญสูง

เมธอด yieldToMainUiBlocking ที่แสดงในข้อมูลโค้ดต่อไปนี้ได้รับการออกแบบมาเพื่อเพิ่มประสิทธิภาพงาน JavaScript ที่มีลำดับความสำคัญสูงโดยเพิ่มผลตอบแทนด้วย scheduler.yield (หากมี) แต่กลับไปเหลือ postTask ที่มีลำดับความสำคัญ user-blocking (สูง) หากมี postTask อยู่ สุดท้ายก็กลับไปใช้ค่าเดิมไม่ได้

เราหลีกเลี่ยง setTimeout ในที่นี้เนื่องจากเมธอด yieldToMainUiBlocking ออกแบบมาเพื่อรองรับการดำเนินการตั้งค่า CMP ภายในและงานที่มีลำดับความสำคัญสูงซึ่งควรรักษาลำดับความสำคัญดังกล่าวไว้ในขณะที่ให้ผลตอบแทน การเปลี่ยนแปลงนี้ไม่หมายความว่าเฉพาะเบราว์เซอร์ที่ใช้ API การตั้งเวลาเหล่านี้ ซึ่งขณะนี้ใช้ได้เฉพาะในเบราว์เซอร์ที่ใช้ Chromium ขณะเขียนข้อมูลเท่านั้นที่จะได้รับประโยชน์จากการปรับปรุงที่อธิบายไว้ในกรณีศึกษานี้ ถึงอย่างนั้น วิธีการนี้ก็ถือว่าเป็นการเพิ่มประสิทธิภาพแบบต่อเนื่องที่ยอมรับได้สำหรับงานที่มีลําดับความสําคัญสูงเหล่านี้

function yieldToMainUiBlocking () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-blocking' });
      }
    }

    resolve(false);
  });
};

ผลตอบแทนจากงานขนาดกลางและเบื้องหลัง

เมธอด yieldToMainBackground ที่แสดงในข้อมูลโค้ดต่อไปนี้ใช้ในการแบ่งงานที่ใช้เวลานาน ซึ่งมีลำดับความสำคัญ user-visible (ปานกลาง) หรือ background ตรรกะนี้จะใช้ scheduler.yield() หากมีให้ใช้งาน แต่จะแตกต่างกันโดยใช้ postTask ที่มีลำดับความสำคัญปานกลาง และสุดท้ายก็กลับไปใช้ setTimeout ในเบราว์เซอร์ที่ไม่ใช่ Chromium

function yieldToMainBackground () {
  return new Promise((resolve) => {
    if ('scheduler' in window) {
      if ('yield' in window.scheduler) {
        return window.scheduler.yield().then(() => resolve(true));
      }

      if ('postTask' in window.scheduler) {
        return window.scheduler.postTask(() => resolve(true), { priority: 'user-visible' });
      }
    }

    setTimeout(() => { resolve(true) }, 0);
  });
};

การแสดงภาพผลตอบแทนเมื่อใช้ yieldToMainBackground จะช่วยให้เบราว์เซอร์แสดงผลเวอร์ชันถัดไป (ในกรณีนี้จะปิด UI ของ CMP) ได้เร็วขึ้น

วิธีที่ PubTech ลด TBT ลงอีกด้วยการเพิ่มประสิทธิภาพเลย์เอาต์การแสดงผล

หลังจากใช้กลยุทธ์ผลตอบแทนแล้ว พบว่า INP ดีขึ้นอย่างมากสำหรับ CMP อันที่จริง หลังจากลดระยะเวลาการประมวลผลของตัวแฮนเดิลเหตุการณ์ลงอย่างมาก ก็พบโอกาสในการปรับปรุงการแสดงผลเพิ่มเติมสำหรับการ Paint ถัดไปสำหรับการดำเนินการ Close UI เดิมทีการทำงานนี้ออกแบบมาเพื่อนำองค์ประกอบออกจาก DOM ซึ่งก่อให้เกิดความท้าทาย โดยเฉพาะในเว็บไซต์ที่มีโหนด DOM จำนวนมาก ทำให้การแสดงผลเพิ่มขึ้นโดยไม่คาดคิด

ในการจัดการกับปริมาณการแสดงผลที่เพิ่มขึ้นซึ่งจำเป็นต่อการนำองค์ประกอบออกจาก DOM เราจึงเปิดตัวโซลูชันที่ทีมใช้ชื่อว่า "การลดการแสดงผลแบบ Lazy Loading" แนวทางนี้จะนํากฎ CSS display: none ไปใช้กับกล่องโต้ตอบความยินยอม CMP ก่อนหลังจากที่ผู้ใช้ให้ความยินยอมเพื่อซ่อนข้อความ จากนั้น การนำโหนด DOM ที่เชื่อมโยงกับกล่องโต้ตอบ CMP ออกจะเปลี่ยนไปเป็นช่วงเวลาหลังจากที่เบราว์เซอร์ไม่มีการใช้งานโดยใช้ requestIdleCallback ซึ่งวิธีนี้พิสูจน์แล้วว่าเร็วกว่าการนำโหนด DOM ออกในขณะที่ผู้ใช้ปิดกล่องโต้ตอบความยินยอม

วันที่

ภาพหน้าจอของเครื่องมือสำหรับนักพัฒนาเว็บที่ไฮไลต์การปรับปรุง INP ด้วยการเปลี่ยนงานการนำ DOM ออก

วิธีที่ PubTech ลด INP ลงเพิ่มเติมด้วยการปรับปรุงไลบรารี TCF ของ IAB

หลังจากแก้ปัญหาการตอบสนองส่วนใหญ่ของ CMP เรียบร้อยแล้ว เราพบโอกาสในการปรับปรุงเพิ่มเติมในทรัพยากร Dependency หลักรายการใดรายการหนึ่ง ซึ่งก็คือไลบรารีกรอบความโปร่งใสและความยินยอม (TCF) ของ IAB

คอมโพเนนต์ที่ใช้การประมวลผลที่มีราคาแพงที่สุดของไลบรารีนี้คือ "สร้างสตริง" และ "มอบหมายความยินยอม" คอมโพเนนต์เหล่านี้เป็นส่วนสำคัญของไลบรารี TCF ของ IAB การเพิ่มประสิทธิภาพต่อไปนี้กับคอมโพเนนต์เหล่านี้ถูกนำไปใช้ในแยกสำหรับความต้องการของ PubTech โดยเฉพาะ

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

หมายเหตุ: การปรับปรุงเหล่านี้อยู่ระหว่างการประเมิน และหวังว่าควรไปยังไลบรารีของ TCF ต้นทางของ IAB หลังการตรวจสอบโค้ด

การเพิ่มประสิทธิภาพวิธีแรกช่วยลดเวลาที่ CMP ใช้ในการ Callback ของบุคคลที่สามแต่ละรายการที่เชื่อมโยงกับไลบรารี TCF ของ IAB การเพิ่มประสิทธิภาพครั้งที่ 2 ลดระยะเวลาการประมวลผลที่เกิดจาก "สตริงการสร้าง" คอมโพเนนต์ อันที่จริงแล้ว การเพิ่มประสิทธิภาพนี้ช่วยลดการวนซ้ำสูงสุดถึง 60% ที่ดำเนินการทุกครั้งที่ผู้ใช้แสดงความยินยอม

ผลลัพธ์

จากกลยุทธ์ผลตอบแทนเดิมและการเพิ่มประสิทธิภาพเลย์เอาต์การแสดงผลใหม่ที่ใช้อยู่ INP ของ CMP เพิ่มขึ้นถึง 65% ส่งผลให้ประสบการณ์ของผู้ใช้ของ PubConsent CMP ตอบสนองดีขึ้นอย่างมาก และสำหรับโฆษณาบางรายการ การมองเห็นโฆษณาก็เพิ่มขึ้นถึง 1.5% ด้วยการเพิ่มประสิทธิภาพเมื่อมีการขอโฆษณา

นอกจากการปรับปรุงเหล่านี้แล้ว ในไลบรารี TCF ของ IAB ยังพบว่า INP ได้รับการปรับปรุงขึ้นสูงสุดถึง 77% ในอุปกรณ์เคลื่อนที่สําหรับลูกค้าที่ได้รับผลกระทบ ซึ่งเป็นผลมาจากการลดงานที่ใช้เวลานานซึ่งเกิดจาก TCF ได้ถึง 85% ซึ่งช่วยลดค่าใช้จ่ายในการเรียกกลับของบุคคลที่สามแต่ละรายการที่ดำเนินการในวงจรทั้งหมดของหน้าเว็บได้อย่างมาก

จำนวนต้นทางที่ส่ง INP เมื่อใช้ PubConsent CMP เพิ่มขึ้นมากกว่า 400% ซึ่งเพิ่มขึ้นจาก 13% เป็น 55% บนอุปกรณ์เคลื่อนที่ สำหรับลูกค้าบางราย INP ของหน้าเว็บลดลงเกินครึ่งจาก 470 มิลลิวินาทีเป็น 230 มิลลิวินาที เนื่องจากการเพิ่มประสิทธิภาพ PubTech SDK ที่เกิดขึ้น

วันที่

อัตราการส่ง INP ต้นทางสำหรับเว็บไซต์ที่ใช้ PubTech CMP ตามที่รายงานโดย HTTP Archive และรายงานประสบการณ์ของผู้ใช้ Chrome (CrUX)

แนวโน้มการปรับปรุงข้อมูล INP บนอุปกรณ์เคลื่อนที่ของลูกค้า PubConsent ซึ่งสัมพันธ์กับการเปลี่ยนแปลงของ SDK ที่อธิบายไว้ในกรณีศึกษานี้

บทสรุป

ลูกค้าของ PubTech ทราบได้อย่างรวดเร็วถึงผลลัพธ์ด้านเมตริกธุรกิจและ INP ในเชิงบวกซึ่งเกิดจากความพยายามเพิ่มประสิทธิภาพของเรา มีการพิจารณาการปรับปรุงประสิทธิภาพเพิ่มเติมสำหรับ PubConsent CMP โดยใช้ประโยชน์จากข้อมูลการตรวจสอบผู้ใช้จริง (RUM) อันมีค่าจากลูกค้า ข้อมูลนี้ติดตามทั้งการถดถอยและความก้าวหน้าอย่างใกล้ชิด ทำให้ PubTech มีความพยายามปรับปรุงอย่างต่อเนื่อง

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

ขอขอบคุณ Luca Coppola ประธานเจ้าหน้าที่ฝ่ายเทคโนโลยีของ PubTech ที่สนับสนุนงานด้านนวัตกรรมนี้ และขอขอบคุณ Jeremy Wagner, Michal Mocny และ Rick Viscomi จาก Google ด้วย