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

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

Guilherme Moser de Souza

Thierno Thiam

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

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

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

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

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

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

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

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

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

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

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

เมตริก	อุปกรณ์เคลื่อนที่	เดสก์ท็อป
CTR ของโฆษณา	+11%	+30%
การมองเห็นโฆษณา	เพิ่มขึ้น 10.5%	+6%
LCP	ลดลง 51%	ลดลง 73%
TTFB	ลดลง 83%	ลดลง 84%

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

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

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

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 เมื่อเทรดหลักไม่มีการใช้งาน

บทสรุป

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

ขอขอบคุณเป็นพิเศษสำหรับ Gilberto Cocchi, Harry Theodoulou, Miguel Carlos Martínez Díaz, Barry Pollard, Jeremy Wagner และ Leonardo Bellini และ Lucca Paradeda จากทีมวิศวกรของ Terradeda ที่ร่วมให้ข้อมูลในงานนี้