چگونه واکشی اولیه به Terra کمک کرد نرخ کلیک تبلیغات را تا 30 درصد افزایش دهد و بزرگترین رنگ محتوای محتوا را سرعت بخشد.

واکشی اولیه منابع زمان بارگذاری صفحه را سرعت می بخشد و معیارهای کسب و کار را بهبود می بخشد.

Guilherme Moser de Souza

Thierno Thiam

واکشی اولیه تکنیکی است که برای سرعت بخشیدن به بارگذاری صفحه با دانلود منابع - یا حتی کل صفحات - که احتمالاً در آینده نزدیک مورد نیاز خواهند بود استفاده می شود. تحقیقات نشان داده است که زمان بارگذاری سریعتر منجر به نرخ تبدیل بالاتر و تجربه کاربری بهتر می شود.

Terra یکی از بزرگترین پورتال های محتوای برزیل است که سرگرمی، اخبار و ورزش را با بیش از 63 میلیون بازدید کننده منحصر به فرد در ماه ارائه می دهد. ما با تیم مهندسی Terra همکاری کرده‌ایم تا زمان بارگذاری مقالات را با استفاده از تکنیک‌های واکشی اولیه در بخش‌های خاصی از وب‌سایت آنها بهبود بخشیم.

این مطالعه موردی پیاده‌سازی سفر Terra را توصیف می‌کند که منجر به افزایش 11 درصدی نرخ کلیک تبلیغات (CTR) در تلفن همراه، 30 درصد CTR تبلیغات در دسک‌تاپ و 50 درصد کاهش در زمان‌های بزرگترین رنگ محتوایی (LCP) شد.

استراتژی پیش واکشی

واکشی اولیه مدتی است که وجود داشته است، اما مهم است که از آن با دقت استفاده کنید زیرا پهنای باند اضافی را برای منابعی که فوراً ضروری نیستند مصرف می کند. برای جلوگیری از استفاده غیرضروری از داده، این تکنیک باید به طور متفکرانه اعمال شود. در مورد Terra، مقالات در صورت داشتن شرایط زیر از قبل واکشی می شوند:

قابل مشاهده بودن پیوندها به مقالات از پیش واکشی شده: Terra از Intersection Observer API برای تشخیص قابلیت مشاهده بخشی حاوی مقالاتی که می خواستند از قبل واکشی کنند استفاده کرد.
شرایط مساعد برای افزایش استفاده از داده: همانطور که قبلاً ذکر شد، واکشی اولیه یک بهبود عملکرد گمانه‌زنی است که داده‌های اضافی را مصرف می‌کند و ممکن است در هر موقعیتی نتیجه مطلوبی نباشد. برای کاهش احتمال هدر رفتن پهنای باند، Terra از API اطلاعات شبکه به همراه API حافظه دستگاه استفاده می‌کند تا تعیین کند مقاله بعدی را واکشی کند یا خیر. Terra مقاله بعدی را تنها زمانی واکشی می کند که:
- سرعت اتصال حداقل 3G است و دستگاه حداقل 4 گیگابایت حافظه دارد.
- یا اگر دستگاه دارای iOS است.
CPU idle: در نهایت، Terra با استفاده از requestIdleCallback ، بررسی می‌کند که آیا CPU بی‌حرکت است و می‌تواند کار اضافی انجام دهد، که زمانی که رشته اصلی بی‌حرکت است، یک callback پردازش می‌شود، یا با یک ضرب‌الاجل خاص (اختیاری) – هرکدام که اول باشد.

رعایت این شرایط تضمین می‌کند که Terra فقط در صورت لزوم داده‌ها را واکشی می‌کند، که باعث صرفه‌جویی در پهنای باند و عمر باتری می‌شود و تأثیر واکشی‌های اولیه که در نهایت بلااستفاده می‌شوند را به حداقل می‌رساند.

هنگامی که این شرایط برآورده شد، Terra مقالات موجود در بخش‌ها را از قبل واکشی می‌کند: «محتوای مرتبط» و «توصیه شده برای شما» که در زیر با رنگ آبی مشخص شده‌اند.

تصویری از دو بخش در وب سایت Terra که در آن پیوندها از قبل واکشی شده بودند. در سمت چپ، بخش "محتوای مرتبط" برجسته شده است، در حالی که در سمت راست، بخش "توصیه شده برای شما" برجسته شده است.

تاثیر کسب و کار

به منظور سنجش تاثیر این تکنیک، Terra ابتدا این ویژگی را در بخش "محتوای مرتبط" در صفحه مقاله راه اندازی کرد. یک کد UTM به آنها کمک کرد تا برای مقاصد مقایسه، بین مقالات از پیش واکشی شده و غیر واکشی شده تمایز قائل شوند. پس از دو هفته آزمایش موفقیت آمیز A/B، Terra تصمیم گرفت قابلیت پیش واکشی را به بخش "توصیه شده برای شما" اضافه کند.

در نتیجه واکشی اولیه مقالات، افزایش کلی معیارهای تبلیغات و کاهش زمان LCP و زمان تا اولین بایت (TTFB) مشاهده شد:

متریک	موبایل	دسکتاپ
CTR تبلیغات	+11٪	30%
قابلیت مشاهده تبلیغات	+10.5٪	+6٪
LCP	-51٪	-73٪
TTFB	-83٪	-84٪

واکشی اولیه - زمانی که با دقت استفاده می شود - زمان بارگذاری صفحه را به شدت بهبود می بخشد، معیارهای تبلیغات را افزایش می دهد و زمان LCP را کاهش می دهد.

جزئیات فنی

واکشی اولیه را می توان از طریق استفاده از نکات منابع مانند rel=prefetch یا rel=preload ، از طریق کتابخانه هایی مانند Quicklink یا Guess.js یا استفاده از API جدیدتر Speculation Rules به دست آورد. Terra این را با استفاده از fetch API با اولویت کم در ترکیب با یک نمونه Intersection Observer انتخاب کرده است. Terra این انتخاب را انجام داد زیرا به آنها اجازه می‌دهد از Safari پشتیبانی کنند، که هنوز از دیگر روش‌های واکشی اولیه مانند rel=prefetch یا Speculation Rules API پشتیبانی نمی‌کند، و یک کتابخانه جاوا اسکریپت با امکانات کامل برای نیازهای Terra ضروری نبود.

جاوا اسکریپت زیر تقریباً معادل کد مورد استفاده 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 برای نظارت بر زمانی که عناصر در viewport قابل مشاهده می شوند استفاده می کند و متعاقباً URL ها را برای واکشی اولیه به لیست اضافه می کند.
فرآیند واکشی اولیه با requestIdleCallback برنامه ریزی شده است، با هدف اجرای تابع prefetch زمانی که رشته اصلی بیکار است.

نتیجه گیری

هنگامی که با دقت استفاده می شود، واکشی اولیه می تواند زمان بارگذاری درخواست های ناوبری آینده را به میزان قابل توجهی کاهش دهد، در نتیجه اصطکاک در سفر کاربر را کاهش داده و تعامل را افزایش می دهد. واکشی اولیه منجر به بارگیری بایت‌های اضافی می‌شود که ممکن است مورد استفاده قرار نگیرند، بنابراین Terra اقدامات بیشتری را انجام داد تا فقط در شرایط شبکه خوب و در دستگاه‌های توانمندی که این اطلاعات در دسترس است، واکشی اولیه را انجام دهد.

از ژیلبرتو کوکی، هری تئودولو، میگل کارلوس مارتینز دیاز، بری پولارد، جرمی واگنر، و لئوناردو بلینی و لوکا پارادا از تیم مهندسی Terra به خاطر مشارکتشان در این کار تشکر ویژه داریم.

واکشی اولیه منابع زمان بارگذاری صفحه را سرعت می بخشد و معیارهای کسب و کار را بهبود می بخشد.

Guilherme Moser de Souza

Thierno Thiam

استراتژی پیش واکشی

قابل مشاهده بودن پیوندها به مقالات از پیش واکشی شده: Terra از Intersection Observer API برای تشخیص قابلیت مشاهده بخشی حاوی مقالاتی که می خواستند از قبل واکشی کنند استفاده کرد.
شرایط مساعد برای افزایش استفاده از داده: همانطور که قبلاً ذکر شد، واکشی اولیه یک بهبود عملکرد گمانه‌زنی است که داده‌های اضافی را مصرف می‌کند و ممکن است در هر موقعیتی نتیجه مطلوبی نباشد. برای کاهش احتمال هدر رفتن پهنای باند، Terra از API اطلاعات شبکه به همراه API حافظه دستگاه استفاده می‌کند تا تعیین کند مقاله بعدی را واکشی کند یا خیر. Terra مقاله بعدی را تنها زمانی واکشی می کند که:
- سرعت اتصال حداقل 3G است و دستگاه حداقل 4 گیگابایت حافظه دارد.
- یا اگر دستگاه دارای iOS است.
CPU idle: در نهایت، Terra با استفاده از requestIdleCallback ، بررسی می‌کند که آیا CPU بی‌حرکت است و می‌تواند کار اضافی انجام دهد، که زمانی که رشته اصلی بی‌حرکت است، یک callback پردازش می‌شود، یا با یک ضرب‌الاجل خاص (اختیاری) – هرکدام که اول باشد.

تاثیر کسب و کار

در نتیجه واکشی اولیه مقالات، افزایش کلی معیارهای تبلیغات و کاهش زمان LCP و زمان تا اولین بایت (TTFB) مشاهده شد:

متریک	موبایل	دسکتاپ
CTR تبلیغات	+11٪	30%
قابلیت مشاهده تبلیغات	+10.5٪	+6٪
LCP	-51٪	-73٪
TTFB	-83٪	-84٪

جزئیات فنی

جاوا اسکریپت زیر تقریباً معادل کد مورد استفاده 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 برای نظارت بر زمانی که عناصر در viewport قابل مشاهده می شوند استفاده می کند و متعاقباً URL ها را برای واکشی اولیه به لیست اضافه می کند.
فرآیند واکشی اولیه با requestIdleCallback برنامه ریزی شده است، با هدف اجرای تابع prefetch زمانی که رشته اصلی بیکار است.

نتیجه گیری

واکشی اولیه منابع زمان بارگذاری صفحه را سرعت می بخشد و معیارهای کسب و کار را بهبود می بخشد.

Guilherme Moser de Souza

Thierno Thiam

استراتژی پیش واکشی

قابل مشاهده بودن پیوندها به مقالات از پیش واکشی شده: Terra از Intersection Observer API برای تشخیص قابلیت مشاهده بخشی حاوی مقالاتی که می خواستند از قبل واکشی کنند استفاده کرد.
شرایط مساعد برای افزایش استفاده از داده: همانطور که قبلاً ذکر شد، واکشی اولیه یک بهبود عملکرد گمانه‌زنی است که داده‌های اضافی را مصرف می‌کند و ممکن است در هر موقعیتی نتیجه مطلوبی نباشد. برای کاهش احتمال هدر رفتن پهنای باند، Terra از API اطلاعات شبکه به همراه API حافظه دستگاه استفاده می‌کند تا تعیین کند مقاله بعدی را واکشی کند یا خیر. Terra مقاله بعدی را تنها زمانی واکشی می کند که:
- سرعت اتصال حداقل 3G است و دستگاه حداقل 4 گیگابایت حافظه دارد.
- یا اگر دستگاه دارای iOS است.
CPU idle: در نهایت، Terra با استفاده از requestIdleCallback ، بررسی می‌کند که آیا CPU بی‌حرکت است و می‌تواند کار اضافی انجام دهد، که زمانی که رشته اصلی بی‌حرکت است، یک callback پردازش می‌شود، یا با یک ضرب‌الاجل خاص (اختیاری) – هرکدام که اول باشد.

تاثیر کسب و کار

در نتیجه واکشی اولیه مقالات، افزایش کلی معیارهای تبلیغات و کاهش زمان LCP و زمان تا اولین بایت (TTFB) مشاهده شد:

متریک	موبایل	دسکتاپ
CTR تبلیغات	+11٪	30%
قابلیت مشاهده تبلیغات	+10.5٪	+6٪
LCP	-51٪	-73٪
TTFB	-83٪	-84٪

جزئیات فنی

جاوا اسکریپت زیر تقریباً معادل کد مورد استفاده 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 برای نظارت بر زمانی که عناصر در viewport قابل مشاهده می شوند استفاده می کند و متعاقباً URL ها را برای واکشی اولیه به لیست اضافه می کند.
فرآیند واکشی اولیه با requestIdleCallback برنامه ریزی شده است، با هدف اجرای تابع prefetch زمانی که رشته اصلی بیکار است.