Long Animation Frames API'den (LoAF) yararlanmak ve akıllı bir getiri stratejisi benimsemek, Taboola'nın yayıncıların oyun ve yanıt hızında artış elde edebilirsiniz.
Sonraki Boyamayla Etkileşim (INP), web sitesinin kullanıcı girişine duyarlılığını değerlendiren bir metriktir. INP, kullanıcının bir etkileşime (ör. tıklama, dokunma veya yazma) başlamasından, sonuç olarak ortaya çıkan görsel geri bildirime kadar geçen süreyi ölçer. INP, Mart 2024'te Core Web Vitals olarak First Giriş Gecikmesi (FID) özelliğinin yerini alması nedeniyle gereklidir.
Taboola, açık web'de her saniye 500.000 öneriyi destekleyen,dünyanın önde gelen içerik keşif platformudur. Bu öneriler,Taboola'nın 9.000 özel yayıncı iş ortağının kitlelerinden para kazanmasını ve onlarla etkileşim kurmasını sağlıyor. Yayıncılar, sayfalarında JavaScript kullanarak öneriler oluşturur.
Üçüncü taraf JavaScript'in bir sayfanın kullanıcı girişlerine hızlı yanıt verme yetisini etkileyebileceğinden, Taboola, JavaScript dosya boyutlarını ve yürütme süresini azaltmak için büyük yatırım yaptı. Taboola, oluşturma motorunun tamamını yeniden tasarlıyor. Ayrıca, INP üzerindeki etkisini en aza indirmek için tarayıcı API'lerini soyutlama olmadan doğrudan kullanıyor.
Bu örnek olay incelemesinde, Taboola'nın INP'yi iyileştirme yolculuğu ele alınmıştır. Bu yolculukta, yeni Long Animation Frames (LoAF) API'sini kullanarak bu API'nin alandaki sayfa duyarlılığı üzerindeki etkisini ölçebilir ve kullanıcı deneyimini iyileştirmek için belirli optimizasyonlar uygulayabilir.
INP proxy'si olarak TBT
Toplam Engelleme Süresi (TBT), ana iş parçacığının sayfa yanıtlama düzeyini etkileyecek kadar uzun süre engellendiği yeri tanımlayan laboratuvar tabanlı bir metriktir. Yanıt verme süresini ölçen alan metrikleri (INP gibi) yüksek TBT'den etkilenebilir. Annie Sullivan tarafından mobil cihazlarda TBT ve INP arasındaki korelasyon üzerine yapılan araştırma, ana iş parçacığı engelleme süresi en aza indirildiğinde sitelerin iyi INP puanları elde etme olasılığının daha yüksek olduğunu gösteriyor.
Bu bağıntı, Taboola'nın yayıncılarının yüksek TBT ile ilgili endişeleri nedeniyle Taboola, bu metriğe katkısını en aza indirmeye odaklandı.
RELEASE.js gibi komut dosyaları 691 milisaniye boyunca ana iş parçacığını engeller.
INP için proxy metriği olarak TBT'yi kullanan Taboola, Core Web Vitals üzerindeki potansiyel etkisini sınırlandırmak amacıyla JavaScript yürütme süresini izleyip optimize etmeye başladı. Ekip, şunları yaparak başladı:
- Long Tasks API'yi kullanarak alandaki sorunlu komut dosyalarını belirleme ve optimize etme.
- PageSpeed Insights API'sini kullanarak her gün 10.000 ila 15.000 URL'yi değerlendirerek TBT katkılarını tahmin etme.
Ancak Taboola, TBT'yi bu araçlarla analiz etmenin bazı sınırlamaları olduğunu fark etti:
- Long Tasks API, görevi kaynak alan adıyla veya belirli bir komut dosyasıyla ilişkilendiremediği için uzun görevlerin kaynaklarının tanımlanmasını zorlaştırır.
- Long Tasks API, oluşturma gecikmesine neden olabilecek görevlerin ve düzen değişikliklerinin bir birleşimini değil, yalnızca uzun görevleri tanımlar.
Taboola, bu zorlukların üstesinden gelmek için Long Animation Frames (LoAF) API kaynak denemesine katıldı ve bunun kullanıcı girişi duyarlılığı üzerindeki gerçek etkisini daha iyi anladı. Kaynak denemeleri, yeni veya deneysel özelliklere erişim sağlayarak geliştiricilerin, kullanıcılarının sınırlı bir süre boyunca deneyebilecekleri yeni özellikleri test etmesine olanak tanır.
Bu zorluğun en zor yanı, reklam TPG'sinden(Temel Performans Göstergesi) ödün vermeden veya yayıncılarımız için kaynak gecikmelerine neden olmadan INP'yi başarılı bir şekilde iyileştirmekti.
INP etkisini değerlendirmek için LoAF'yi kullanma
Oluşturma güncellemesi 50 milisaniyeden fazla geciktiğinde uzun bir animasyon karesi oluşur. Taboola, tek başına uzun görevler yerine yavaş kullanıcı arayüzü güncellemelerinin nedenlerini belirleyerek bunun alandaki sayfa duyarlılığı üzerindeki etkisini analiz etmeyi başardı. LoAF'yi gözlemlemek, Taboola'nın şunları yapmasına olanak tanıdı:
- Girişleri belirli Taboola görevleriyle ilişkilendirin.
- Üretime dağıtılmadan önce belirli özelliklerdeki performans sorunlarını gözlemleyin.
- A/B testlerinde farklı kod sürümlerini karşılaştırmak ve önemli başarı metriklerini raporlamak için birleştirilmiş veri toplayın.
Aşağıdaki JavaScript, Taboola'nın etkisini izole etmek amacıyla LoAF'yi toplamak için üretimde kullanılan basitleştirilmiş bir sürümdür.
function loafEntryAnalysis (entry) {
if (entry.blockingDuration === 0) {
return;
}
let taboolaIsMajor = false;
const hasInteraction = entry.firstUIEventTimestamp > 0;
let taboolaDuration = 0;
const nonTaboolaLoafReport = {};
const taboolaLoafReport = {};
entry.scripts.forEach((script) => {
const taboolaScriptBlockingDuration = handleLongAnimationFrameScript(script, taboolaLoafReport, nonTaboolaLoafReport);
taboolaDuration += taboolaScriptBlockingDuration;
if (taboolaScriptBlockingDuration > 0 || taboolaDuration > entry.duration / 2) {
taboolaIsMajor = true;
}
});
generateToboolaLoafReport(taboolaLoafReport, nonTaboolaLoafReport, hasInteraction, taboolaIsMajor);
if (hasInteraction) {
const global = _longAnimationFramesReport.global;
global.inpBlockingDuration = Math.max(global.inpBlockingDuration, entry.blockingDuration);
if (taboolaIsMajor) {
global.taboolaInpBlockingDuration = Math.max(global.taboolaInpBlockingDuration, entry.blockingDuration);
}
}
}
const observer = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
loafEntryAnalysis(entry);
}
});
observer.observe({ type: 'long-animation-frame', buffered: true });
- Taboola'nın
loafEntryAnalysisişlevinin kullanılması, en fazla katkıda bulunan girişleri tanımlamasına olanak tanıdı. - Taboola, toplam komut dosyası süresinin yarısından fazlasının Taboola'dan kaynaklandığı veya bir Taboola komut dosyasının çalışması 50 milisaniyeden uzun sürüyorsa bu sorunun en önemli faktörlerden biri olduğu düşünülür.
- Kullanıcı etkileşimi, Uzun Animasyon Çerçevesi nedeniyle gecikirse bir
firstUIEventTimeStampoluşturulur. En uzun engelleme süresi, genel INP puanı olarak kabul edilir. Ayrıca, Taboola INP puanını hesaplamak için Taboola'nın ne zamanfirstUIEventTimeStamptetiklediğini de belirleyebiliriz.
LoAF ile toplanan veriler, Taboola'nın getiri fırsatlarını uygulayabileceği alanları belirleyen aşağıdaki ilişkilendirme tablosunu oluşturmasına yardımcı oldu.
TRECS Engine: Yeni getiri stratejisi
Taboola, komut dosyası optimizasyon fırsatlarını daha iyi anlamak için LoAF'yi kullanmanın yanı sıra, JavaScript yürütme ve engelleme süresini önemli ölçüde en aza indirmek amacıyla oluşturma motorunun tamamını yeniden tasarlıyor.
TRECS (Taboola Recommendations Genişletilebilir İstemci Hizmeti), Taboola'nın önerilerini yüklemek için gereken zorunlu dosyaların sayısını ve boyutunu azaltırken istemci tarafında oluşturmayı ve yayıncının geçerli JS kodunu korur.
Oluşturma engelleme görevleri LoAF kullanılarak belirlendikten sonra, "Performance Fader" scheduler.postTask() kullanarak ana iş parçacığına teslim etmeden önce bu görevleri bölebilir. Bu tasarım, ana iş parçacığını kaplayan mevcut görevlere bakılmaksızın, kullanıcılara yönelik önemli çalışmaların (ör. oluşturma güncellemeleri) mümkün olan en kısa sürede yürütülebilmesini sağlar.
Burada, "Performans Söndürücü"nün JS snippet'i verilmektedir görev yürütücü:
/**
* Send a task to run using the Fader. The task will run using the browser Scheduler, by the configuration settings, or immediately.
* @param task
* @param isBlocker
*/
function sendTaskToFader (task, isBlocker = true) {
const publisherFaderChoice = fillOptimizationGlobals(); // Loading publisher choice
const applyYielding = publisherFaderChoice === OptimizationFaderType.Responsiveness;
if (applyYielding) {
return runAsPostTask(task, isBlocker);
}
return runImmediately(task);
}
/**
* Yielding method using scheduler.postTask and falling back to setTimeout when it's not availabe based on the publisher choice
*/
function runAsPostTask (task, isBlocker = true) {
if ('scheduler' in window && 'postTask' in scheduler) {
const priority = isBlocker ? 'user-blocking': 'background';
return window?.scheduler?.postTask(task, { priority });
}
const publisherChoiceEnableFallback = fillPublisherChoices();
if (publisherChoiceEnableFallback) {
return new Promise(resolve => {
window.setTimeout(() => {
resolve(task());
}, 0);
});
}
return runImmediately(task);
}
sendTaskToFader fonksiyonu:
- Temelde
scheduler.postTask()kullanan (API kullanılabiliyorsa)runAsPostTaskkullanır veyasetTimeoutsürümüne geri döner. - Bu işlev, işlev çağrılarını uzun animasyon çerçeveleri ve INP'ye neden olan kod bölümlerinde sarmalar. Bu kod bölümlerini daha kısa görevlere bölerek INP'yi azaltır.
İşletme metrikleri
LoAF sayesinde Taboola, INP üzerindeki etkisini daha iyi anladı. Araç, yeni TRECS motorunun bir parçası olarak kullanılabilecek komut dosyası optimizasyonu fırsatlarını da vurguladı.
Taboola, TRECS ve Performance Fader'ın etkisini belirlemek için yayıncı iş ortaklarından oluşan bir panelde komut dosyası döndürülmeden mevcut motora karşı INP değerini ölçen bir A/B testi gerçekleştirdi.
Aşağıdaki tabloda, Taboola ağındaki dört anonim yayıncının 75. yüzdelik dilimindeki INP sonuçları milisaniye cinsinden gösterilmektedir.
Neyse ki test panelinde TRECS ve Performans Şeffaflaştırma Aracı etkinleştirildiğinde Reklam Tıklama Oranı ve 1.000 gösterim başına gelir (BGBG) gibi iş metrikleri olumsuz şekilde etkilenmedi. INP'deki bu olumlu iyileşmeyle birlikte, Taboola, reklam TPG'lerinde beklenen olumsuz sonuçlar olmadan yayıncılarını kademeli olarak iyileştirecek. müşteri memnuniyetini artırır.
Daha önce de vurguladığımız bir müşteri üzerinde çalışan başka bir Lighthouse, yeni motoru kullanırken Taboola'nın ana iş parçacığı engelleme süresinde önemli bir iyileşme olduğunu gösteriyor.
RELEASE.js gibi komut dosyalarının TBT süresini 485 ms (-%70) azaltmasına yardımcı oldu.
Bu, INP'nin nedenlerini belirlemek için LoAF'nin kullanılması ve sonraki getiri tekniklerinin Performance Fader ile uygulanmasının, Taboola'nın iş ortaklarının reklam ve sayfa performansında maksimum başarı elde etmesini sağladığını göstermektedir.
Sonuç
INP'yi optimize etmek, özellikle iş ortağı web sitelerinde üçüncü taraf komut dosyaları kullanıldığında karmaşık bir süreçtir. Optimizasyon başlamadan önce, INP'nin belirli komut dosyalarıyla ilişkilendirilmesi, tahmin yürütmeyi ve diğer site performansı metriklerine olası zararı ortadan kaldırır.LoAF API'sinin, özellikle yerleştirilmiş 3P'lerin belirli SDK iyileştirme fırsatlarını belirlemelerine olanak tanıyarak sayfadaki diğer teknolojiler ile olan girişimleri ortadan kaldırmalarını sağlayarak INP sorunlarını tanımlamak ve ele almak için değerli bir araç olduğu kanıtlanmıştır.
LoAF, iyi bir getiri stratejisiyle (ör. scheduler.postTask()) birlikte kullanıldığında, sayfa duyarlılığındaki zayıflığın nedenini gözlemleyip anlamanıza yardımcı olabilir. Bu da size web sitenizin INP'sini iyileştirmek için ihtiyaç duyduğunuz bilgileri sağlar.
Bu çalışmaya yaptıkları katkılardan dolayı, Gilberto Cocchi, Noam Rosenthal ve Google'dan Rick Viscomi ve Taboola'nın Mühendislik ve Ürün ekibinden Dedi Hakak, Anat Dagan ve Omri Ariav'a özel teşekkürlerimizi sunuyoruz.