การดึงข้อมูลล่วงหน้าช่วยให้ Terra เพิ่มอัตราการคลิกผ่านโฆษณา 30% และทำให้ Largest Contentful Paint เร็วขึ้นได้อย่างไร

การดึงข้อมูลล่วงหน้าจะเพิ่มความเร็วในการโหลดหน้าเว็บและปรับปรุงเมตริกทางธุรกิจ

Guilherme Moser de Souza

Thierno Thiam

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

ter เป็นพอร์ทัลเนื้อหาที่ใหญ่ที่สุดแห่งหนึ่งจากบราซิล ซึ่งนำเสนอความบันเทิง ข่าวสาร และกีฬา โดยมีผู้เข้าชมที่ไม่ซ้ำกันกว่า 63 ล้านคนต่อเดือน เราได้ทำงานร่วมกับทีมวิศวกรของ Terra เพื่อปรับปรุงเวลาในการโหลดบทความโดยใช้เทคนิคการโหลดล่วงหน้าในบางส่วนในเว็บไซต์

กรณีศึกษานี้อธิบายการใช้งานเส้นทางของ Terra ซึ่งส่งผลให้อัตราการคลิกผ่าน (CTR) ของโฆษณาในอุปกรณ์เคลื่อนที่เพิ่มขึ้น 11%, CTR ของโฆษณาในเดสก์ท็อปเพิ่มขึ้น 30% และเวลา Largest Contentful Paint (LCP) ลดลง 50%

กลยุทธ์การดึงข้อมูลล่วงหน้า

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

• ระดับการเข้าถึงลิงก์ไปยังบทความที่ดึงข้อมูลล่วงหน้า: Terra ใช้ Intersection Observer API ในการตรวจจับการมองเห็นโฆษณาของหัวข้อที่มีบทความที่ต้องการดึงข้อมูลล่วงหน้า
• เงื่อนไขที่เหมาะสําหรับการใช้อินเทอร์เน็ตเพิ่มขึ้น: ตามที่กล่าวไว้ก่อนหน้านี้ การจําล่วงหน้าเป็นการปรับปรุงประสิทธิภาพโดยประมาณซึ่งจะใช้อินเทอร์เน็ตเพิ่ม และอาจไม่ใช่ผลลัพธ์ที่ต้องการในทุกสถานการณ์ Terra ใช้ Network Information API ร่วมกับ Device Memory API เพื่อพิจารณาว่าจะดึงข้อมูลบทความถัดไปหรือไม่ เพื่อลดโอกาสที่จะเกิดการสิ้นเปลืองแบนด์วิดท์ Terra จะดึงข้อมูลบทความถัดไปเฉพาะในกรณีต่อไปนี้
  • ความเร็วการเชื่อมต่ออย่างน้อย 3G และอุปกรณ์มีหน่วยความจำอย่างน้อย 4 GB
  • หรือหากอุปกรณ์ใช้ iOS
• CPU ไม่ได้ใช้งาน: สุดท้าย Terra จะตรวจสอบว่า CPU ไม่ได้ใช้งานและสามารถทํางานเพิ่มเติมได้หรือไม่โดยใช้ requestIdleCallback ซึ่งจะใช้การเรียกกลับเพื่อประมวลผลเมื่อเธรดหลักไม่ได้ใช้งาน หรือตามกำหนดเวลา (ไม่บังคับ) ที่เจาะจง แล้วแต่ว่าอะไรจะเกิดขึ้นก่อน

การปฏิบัติตามเงื่อนไขเหล่านี้จะช่วยให้มั่นใจได้ว่า Terra จะดึงข้อมูลเฉพาะเมื่อจำเป็นเท่านั้น ซึ่งจะช่วยประหยัดแบนด์วิดท์และอายุการใช้งานแบตเตอรี่ รวมถึงลดผลกระทบของการเรียกข้อมูลล่วงหน้าที่ไม่ได้นำมาใช้

เมื่อเป็นไปตามเงื่อนไขเหล่านี้ Terra จะโหลดบทความล่วงหน้าในส่วน "เนื้อหาที่เกี่ยวข้อง" และ "แนะนำสำหรับคุณ" ที่ไฮไลต์สีน้ำเงินด้านล่าง

ผลกระทบทางธุรกิจ

Terra ได้เปิดตัวฟีเจอร์นี้ในส่วน "เนื้อหาที่เกี่ยวข้อง" ของหน้าบทความก่อน เพื่อวัดผลลัพธ์ของเทคนิคนี้ โค้ด UTM ช่วยให้แยกความแตกต่างระหว่างบทความที่ดึงข้อมูลล่วงหน้าและไม่ดึงข้อมูลล่วงหน้าเพื่อวัตถุประสงค์ในการเปรียบเทียบได้ หลังจากการทดสอบ A/B ที่ประสบความสำเร็จเป็นเวลา 2 สัปดาห์ Terra ก็ตัดสินใจเพิ่มฟังก์ชันการดึงข้อมูลล่วงหน้าไว้ในส่วน "แนะนำสำหรับคุณ"

ผลการโหลดบทความล่วงหน้าคือเมตริกโฆษณาโดยรวมเพิ่มขึ้นและ LCP และเวลาในการตอบสนองครั้งแรก (TTFB) ลดลง

การใช้การดึงข้อมูลล่วงหน้าอย่างระมัดระวังจะช่วยปรับปรุงเวลาในการโหลดหน้าเว็บ เพิ่มเมตริกโฆษณา และลดเวลา LCP ได้มาก

รายละเอียดทางเทคนิค

การเรียกข้อมูลล่วงหน้าทำได้โดยใช้คำแนะนำทรัพยากร เช่น rel=prefetch หรือ rel=preload ผ่านไลบรารี เช่น quicklink หรือ Guess.js หรือใช้ Speculation Rules API เวอร์ชันใหม่ Terra เลือกที่จะดำเนินการดังกล่าวโดยใช้ fetch API ที่มีลำดับความสำคัญต่ำร่วมกับอินสแตนซ์ Intersection Observer Terra เลือกตัวเลือกนี้เนื่องจากช่วยให้รองรับ Safari ซึ่งยังไม่รองรับวิธีการดึงข้อมูลล่วงหน้าอื่นๆ เช่น rel=prefetch หรือ Speculation Rules API และไม่จำเป็นต้องใช้ไลบรารี JavaScript ที่มีฟีเจอร์เต็มรูปแบบตามความต้องการของ Terra

JavaScript ด้านล่างนี้เทียบเท่ากับโค้ดที่ Terra ใช้

function prefetch(nodeLists) {
  // Exclude slow ECTs < 3g
  if (navigator.connection &&
    (navigator.connection.effectiveType === 'slow-2g'
      || navigator.connection.effectiveType === '2g')
  ) {
    return;
  }

  // Exclude low end device which is device with memory <= 2GB
  if (navigator.deviceMemory && navigator.deviceMemory <= 2) {
    return;
  }

  const fetchLinkList = {};

  const observer = new IntersectionObserver(function (entries) {
    entries.forEach(function (entry) {
      if (entry.isIntersecting) {
        if (!fetchLinkList[entry.target.href]) {
          fetchLinkList[entry.target.href] = true;

          fetch(entry.target, {
            priority: 'low'
          });
        }

        observer.unobserve(entry = entry.target);
      }
    });
  });
}

const idleCallback = window.requestIdleCallback || function (cb) {
  let start = Date.now();

  return setTimeout(function () {
    cb({
      didTimeout: false,
      timeRemaining: function () {
        return Math.max(0, 50 - (Date.now() - start));
      }
    });
  }, 1);
}

idleCallback(function () {
  prefetch(nodeLists)
})

• ฟังก์ชัน prefetch จะตรวจสอบคุณภาพการเชื่อมต่อขั้นต่ำและหน่วยความจำของอุปกรณ์ก่อนเริ่มการโหลดล่วงหน้า
• จากนั้นจะใช้ IntersectionObserver เพื่อตรวจสอบเมื่อองค์ประกอบปรากฏในวิวพอร์ต และเพิ่ม URL ลงในรายการสําหรับการโหลดล่วงหน้าในภายหลัง
• กระบวนการดึงข้อมูลล่วงหน้าจะกำหนดเวลาไว้ที่ requestIdleCallback โดยมีเป้าหมายเพื่อดำเนินการฟังก์ชัน prefetch เมื่อเทรดหลักไม่มีการใช้งาน

บทสรุป

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

ขอขอบคุณ Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner และ Leonardo Bellini และ Lucca Paradeda จากทีมวิศวกรของ Terra ที่ให้ความร่วมมือในงานนี้