Alandaki yavaş etkileşimleri bulma

Web sitenizin alan verilerinde yavaş etkileşimleri nasıl bulacağınızı öğrenin. Böylece, Sonraki Boyamayla Etkileşim metriğini iyileştirme fırsatları bulabilirsiniz.

Jeremy Wagner

Alan verileri, gerçek kullanıcıların web sitenizi nasıl deneyimlediğini gösteren verilerdir. Yalnızca laboratuvar verilerinde bulamayacağınız sorunları ortaya çıkarır. Interaction to Next Paint (INP) ile ilgili olarak, alan verileri yavaş etkileşimleri belirlemede çok önemlidir ve bu sorunları düzeltmenize yardımcı olacak önemli ipuçları sağlar.

Bu kılavuzda, web sitenizin INP ile ilgili sorunları olup olmadığını görmek için Chrome Kullanıcı Deneyimi Raporu'ndaki (CrUX) alan verilerini kullanarak web sitenizin INP'sini nasıl hızlı bir şekilde değerlendireceğinizi öğreneceksiniz. Ardından, web sitenizdeki yavaş etkileşimlerle ilgili alan verilerini toplamak ve yorumlamak için web-vitals JavaScript kitaplığının ilişkilendirme derlemesini ve Long Animation Frames API (LoAF)'den sağladığı yeni analizleri nasıl kullanacağınızı öğreneceksiniz.

Web sitenizin INP'sini değerlendirmek için CrUX'ten başlayın

Web sitenizin kullanıcılarından alan verileri toplamıyorsanız CrUX iyi bir başlangıç noktası olabilir. CrUX, telemetri verileri göndermeyi etkinleştirmiş gerçek Chrome kullanıcılarından alan verileri toplar.

CrUX verileri, aradığınız bilgilerin kapsamına bağlı olarak çeşitli farklı alanlarda gösterilir. CrUX, aşağıdakiler için INP ve diğer Core Web Vitals ile ilgili veriler sağlayabilir:

  • PageSpeed Insights'ı kullanarak tek tek sayfaları ve kaynaklarının tamamını.
  • Sayfa türleri. Örneğin, birçok e-ticaret web sitesinde Ürün Ayrıntıları Sayfası ve Ürün Listeleme Sayfası türleri bulunur. Benzersiz sayfa türleriyle ilgili CrUX verilerini Search Console'da bulabilirsiniz.

Başlangıç noktası olarak PageSpeed Insights'a web sitenizin URL'sini girebilirsiniz. URL'yi girdikten sonra, ilgili alan verileri (varsa) INP dahil olmak üzere birden fazla metrik için gösterilir. Mobil ve masaüstü boyutları için INP değerlerinizi kontrol etmek üzere açma/kapatma düğmelerini de kullanabilirsiniz.

PageSpeed Insights'ta CrUX tarafından gösterilen alan verileri. Üç Core Web Vitals metriği olarak LCP, INP ve CLS'yi, teşhis metrikleri olarak TTFB ve FCP'yi ve desteği sonlandırılmış bir Core Web Vitals metriği olarak FID'yi gösterir.
PageSpeed Insights'ta gösterilen CrUX verilerinin okuması. Bu örnekte, belirtilen web sayfasının INP'sinin iyileştirilmesi gerekiyor.

Bu veriler, sorununuz olup olmadığını size bildirdiği için yararlıdır. Ancak CrUX, sorunlara nelerin neden olduğunu size söyleyemez. Bu soruyu yanıtlamanıza yardımcı olmak için web sitenizin kullanıcılarından kendi alan verilerinizi toplamanıza yardımcı olacak birçok Gerçek Kullanıcı İzleme (RUM) çözümü mevcuttur. Bu alan verilerini web-vitals JavaScript kitaplığını kullanarak kendiniz toplama seçeneği de vardır.

web-vitals JavaScript kitaplığıyla alan verileri toplama

web-vitals JavaScript kitaplığı, web sitenizin kullanıcılarından alan verileri toplamak için web sitenize yükleyebileceğiniz bir komut dosyasıdır. Bu aracı, destekleyen tarayıcılarda INP dahil olmak üzere çeşitli metrikleri kaydetmek için kullanabilirsiniz.

Tarayıcı desteği

  • Chrome: 96.
  • Edge: 96.
  • Firefox: Desteklenmez.
  • Safari: Desteklenmez.

Kaynak

Web Vitals kitaplığının standart derlemesi, sahadaki kullanıcılardan temel INP verilerini almak için kullanılabilir:

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  console.log(name);    // 'INP'
  console.log(value);   // 512
  console.log(rating);  // 'poor'
});

Kullanıcılarınızdan gelen alan verilerinizi analiz etmek için bu verileri bir yere göndermeniz gerekir:

import {onINP} from 'web-vitals';

onINP(({name, value, rating}) => {
  // Prepare JSON to be sent for collection. Note that
  // you can add anything else you'd want to collect here:
  const body = JSON.stringify({name, value, rating});

  // Use `sendBeacon` to send data to an analytics endpoint.
  // For Google Analytics, see https://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics.
  navigator.sendBeacon('/analytics', body);
});

Ancak bu veriler tek başına CrUX'tan çok daha fazla bilgi vermez. Bu noktada web vitals kitaplığının ilişkilendirme derlemesi devreye girer.

Web Vitals kitaplığının ilişkilendirme derlemesiyle daha fazlasını yapın

Web Vitals kitaplığının ilişkilendirme derlemesi, web sitenizin INP'sini etkileyen sorunlu etkileşimleri daha iyi gidermenize yardımcı olmak için sahadaki kullanıcılardan alabileceğiniz ek veriler gösterir. Bu verilere, kitaplığın onINP() yönteminde gösterilen attribution nesnesi aracılığıyla erişilebilir:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, rating, attribution}) => {
  console.log(name);         // 'INP'
  console.log(value);        // 56
  console.log(rating);       // 'good'
  console.log(attribution);  // Attribution data object
});
web-vitals kitaplığındaki konsol günlüklerinin görünümü. Bu örnekteki konsolda, metriğin adı (INP), INP değeri (56) ve bu değerin INP eşikleri içinde bulunduğu yer (iyi) gösterilmektedir. Ayrıca, Long Animation Frames API'deki girişler de dahil olmak üzere ilişkilendirme nesnesinde gösterilen çeşitli bilgi parçaları gösterilmektedir.
Web Vitals kitaplığındaki veriler konsolda nasıl görünür?

İlişkilendirme derlemesi, sayfanın INP'sine ek olarak, etkileşimin hangi bölümüne odaklanmanız gerektiği de dahil olmak üzere yavaş etkileşimlerin nedenlerini anlamak için kullanabileceğiniz birçok veri sağlar. Bu yöntem, aşağıdaki gibi önemli soruları yanıtlamanıza yardımcı olabilir:

  • "Kullanıcı, sayfa yüklenirken sayfayla etkileşime geçti mi?"
  • "Etkileşimdeki etkinlik işleyicileri uzun süre çalıştı mı?"
  • "Etkileşim etkinlik işleyici kodu başlatılırken gecikme yaşandı mı? Öyleyse o sırada ana mesaj dizisinde başka neler oluyordu?"
  • "Etkileşim, sonraki karenin boyanmasını geciktiren çok fazla oluşturma çalışmasına neden oldu mu?"

Aşağıdaki tabloda, kitaplıktan alabileceğiniz ve web sitenizdeki yavaş etkileşimlerin bazı üst düzey nedenlerini belirlemenize yardımcı olabilecek temel ilişkilendirme verilerinden bazıları gösterilmektedir:

attribution nesne anahtarı Veriler
interactionTarget Sayfanın INP değerini oluşturan öğeyi işaret eden bir CSS seçici (ör. button#save).
interactionType Tıklamalar, dokunmalar veya klavye girişlerinden gelen etkileşimin türü.
inputDelay* Etkileşimin giriş gecikmesi.
processingDuration* İlk etkinlik dinleyicisinin kullanıcı etkileşimine yanıt olarak çalışmaya başladığı andan tüm etkinlik dinleyicisi işlemlerinin tamamlandığı ana kadar geçen süre.
presentationDelay* Etkileşimin sunum gecikmesi. Bu gecikme, etkinlik işleyicilerinin bitmesinden sonraki karenin boyanmasına kadar sürer.
longAnimationFrameEntries* Etkileşimle ilişkili LoAF girişleri. Daha fazla bilgi için sonraki bölüme bakın.
*4. sürümde yeni

Web Vitals kitaplığının 4. sürümünden itibaren, INP aşaması dökümleri (giriş gecikmesi, işleme süresi ve sunum gecikmesi) ve Long Animation Frames API (LoAF) ile sağladığı veriler sayesinde sorunlu etkileşimler hakkında daha da ayrıntılı analizler elde edebilirsiniz.

Long Animation Frames API (LoAF)

Tarayıcı desteği

  • Chrome: 123.
  • Edge: 123.
  • Firefox: Desteklenmez.
  • Safari: Desteklenmez.

Kaynak

Alan verilerini kullanarak etkileşimlerde hata ayıklama zor bir iştir. Ancak LoAF'tan alınan verilerle artık yavaş etkileşimlerin nedenleri hakkında daha iyi analizler elde etmek mümkün. LoAF, kesin nedenleri ve daha da önemlisi sorunun web sitenizin kodunda nerede olduğunu belirlemek için kullanabileceğiniz çeşitli ayrıntılı zamanlamalar ve diğer verileri gösterir.

web-vitals kitaplığının ilişkilendirme derlemesi, attribution nesnesinin longAnimationFrameEntries anahtarı altında bir dizi LoAF girişi gösterir. Aşağıdaki tabloda, her LoAF girişinde bulabileceğiniz birkaç önemli veri parçası listelenmiştir:

LoAF girişi nesne anahtarı Veriler
duration Boyama ve kompozisyon hariç olmak üzere, düzenin tamamlanmasına kadar olan uzun animasyon çerçevesinin süresi.
blockingDuration Çerçevedeki toplam süre, tarayıcı uzun görevler nedeniyle hızlı yanıt verememiştir. Bu engelleme süresi, JavaScript çalıştıran uzun görevlerin yanı sıra çerçevedeki sonraki uzun oluşturma görevlerini içerebilir.
firstUIEventTimestamp Çerçeve sırasında etkinliğin sıraya alındığı zamanı gösteren zaman damgası. Bir etkileşimin giriş gecikmesinin başlangıcını belirlemek için yararlıdır.
startTime Karenin başlangıç zaman damgası.
renderStart Kare için oluşturma işleminin başladığı zaman. Tüm requestAnimationFrame geri çağırmaları (ve varsa ResizeObserver geri çağırmaları) buna dahildir ancak stil/düzenleme çalışması başlamadan önce olabilir.
styleAndLayoutStart Çerçevede stil/düzenleme çalışması yapıldığında. Mevcut diğer zaman damgalarını hesaba katarken stil/düzen çalışmasının uzunluğunu belirlemede yararlı olabilir.
scripts Sayfanın INP'sine katkıda bulunan komut dosyası ilişkilendirme bilgilerini içeren bir öğe dizisi.
LoAF modeline göre işlenmesi uzun süren bir animasyon çerçevesinin görselleştirmesi.
LoAF API'ye göre bir uzun animasyon çerçevesinin zamanlamaları (blockingDuration hariç) şeması.

Tüm bu bilgiler, bir etkileşimin yavaşlamasına neyin neden olduğu hakkında size çok şey söyleyebilir. Ancak LoAF girişlerinin gösterdiği scripts dizisi özellikle ilgi çekicidir:

Komut dosyası ilişkilendirmesi nesne anahtarı Veriler
invoker Çağırıcı. Bu, sonraki satırda açıklanan çağıran türüne göre değişiklik gösterebilir. Çağırıcı örnekleri 'IMG#id.onload', 'Window.requestAnimationFrame' veya 'Response.json.then' gibi değerler olabilir.
invokerType Çağırıcı türü. 'user-callback', 'event-listener', 'resolve-promise', 'reject-promise', 'classic-script' veya 'module-script' olabilir.
sourceURL İşlenmesi uzun süren animasyon çerçevesinin alındığı komut dosyasının URL'si.
sourceCharPosition Komut dosyasında sourceURL ile tanımlanan karakter konumu.
sourceFunctionName Tanımlanan komut dosyasında işlevin adı.

Bu dizideki her giriş, bu tabloda gösterilen verileri içerir. Bu veriler, yavaş etkileşimden sorumlu komut dosyası ve bu komut dosyasının nasıl sorumlu olduğu hakkında bilgi verir.

Yavaş etkileşimlerin yaygın nedenlerini ölçme ve tanımlama

Bu bilgileri nasıl kullanabileceğiniz hakkında fikir edinmeniz için bu kılavuzda, yavaş etkileşimlerin bazı nedenlerini belirlemek amacıyla web-vitals kitaplığında gösterilen LoAF verilerini nasıl kullanabileceğiniz açıklanmaktadır.

Uzun işlem süreleri

Bir etkileşimin işleme süresi, etkileşimin kayıtlı etkinlik işleyici geri çağırmalarının tamamlanması için geçen süre ve bu süreler arasında gerçekleşebilecek diğer tüm işlemlerdir. Web Vitals kitaplığı, yüksek işlem sürelerini gösterir:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5
});

Yavaş etkileşimin birincil nedeninin, etkinlik işleyici kodunuzun çalışmasının çok uzun sürmesi olduğunu düşünmek doğaldır ancak bu her zaman doğru değildir. Sorunun bu olduğunu doğruladıktan sonra LoAF verileriyle daha ayrıntılı bir inceleme yapabilirsiniz:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {processingDuration} = attribution; // 512.5

  // Get the longest script from LoAF covering `processingDuration`:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Get attribution for the long-running event handler:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

Önceki kod snippet'inde görebileceğiniz gibi, yüksek işlem süresi değerlerine sahip bir etkileşimin tam nedenini bulmak için LoAF verileriyle çalışabilirsiniz. Örneğin:

  • Öğe ve kayıtlı etkinlik işleyicisi.
  • Uzun süre çalışan etkinlik işleyici kodunu içeren komut dosyası dosyası ve içindeki karakter konumu.
  • İşlevin adı.

Bu tür veriler çok değerlidir. Artık yüksek işlem süresi değerlerinden tam olarak hangi etkileşimin veya etkinlik işleyicilerinin sorumlu olduğunu bulmak için zahmetli bir çalışma yapmanız gerekmiyor. Ayrıca, üçüncü taraf komut dosyaları genellikle kendi etkinlik işleyicilerini kaydettiğinden, bu sorunun sorumlusunun kendi kodunuz olup olmadığını belirleyebilirsiniz. Kontrol sahibi olduğunuz kod için uzun görevleri optimize etme konusuna göz atmanız gerekir.

Uzun giriş gecikmeleri

Uzun süre çalışan etkinlik işleyiciler yaygın olsa da etkileşimin dikkate alınması gereken başka bölümleri de vardır. İşleme süresinden önce gerçekleşen bir kısım vardır. Bu kısım giriş gecikmesi olarak bilinir. Bu, kullanıcının etkileşimi başlattığı andan etkinlik işleyici geri çağırmalarının çalışmaya başladığı ana kadar geçen süredir ve ana iş parçacığı zaten başka bir görevi işlediğinde gerçekleşir. web-vitals kitaplığının ilişkilendirme derlemesi, bir etkileşim için giriş gecikmesinin uzunluğunu size söyleyebilir:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536
});

Bazı etkileşimlerde giriş gecikmesinin yüksek olduğunu fark ederseniz etkileşim sırasında sayfada ne olduğunu ve uzun giriş gecikmesine neyin neden olduğunu bulmanız gerekir. Bu genellikle etkileşimin sayfa yüklenirken mi yoksa yüklendikten sonra mı gerçekleştiğiyle ilgilidir.

Sayfa yüklenirken mi oldu?

Ana ileti dizisi, genellikle bir sayfa yüklenirken en yoğun olur. Bu süre zarfında çeşitli görevler sıraya alınır ve işlenir. Kullanıcı, tüm bu işlemler yapılırken sayfayla etkileşim kurmaya çalışırsa etkileşim gecikebilir. Çok fazla JavaScript yükleyen sayfalar, komut dosyalarını derleme ve değerlendirme çalışmalarının yanı sıra sayfayı kullanıcı etkileşimlerine hazır hale getiren işlevleri yürütebilir. Bu işlem, kullanıcı bu etkinlik gerçekleşirken etkileşime girerse engel teşkil edebilir. Web sitenizin kullanıcıları için bunun geçerli olup olmadığını öğrenebilirsiniz:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  if (script) {
    // Invoker types can describe if script eval blocked the main thread:
    const {invokerType} = script;    // 'classic-script' | 'module-script'
    const {sourceLocation} = script; // 'https://example.com/app.js'
  }
});

Bu verileri alana kaydederseniz ve yüksek giriş gecikmeleri ile 'classic-script' veya 'module-script' çağrıcı türleri görürseniz sitenizdeki komut dosyalarının değerlendirilmesinin uzun sürdüğünü ve ana iş parçacığının etkileşimleri geciktirmeye yetecek kadar uzun süre engellendiğini söyleyebiliriz. Komut dosyalarınızı daha küçük paketlere ayırarak, başlangıçta kullanılmayan kodu daha sonra yüklenecek şekilde erteleyerek ve sitenizi tamamen kaldırabileceğiniz kullanılmayan kod açısından denetleyerek bu engelleme süresini azaltabilirsiniz.

Sayfa yüklendikten sonra mı oldu?

Giriş gecikmeleri genellikle sayfa yüklenirken gerçekleşse de tamamen farklı bir nedenden dolayı sayfa yüklendikten sonra da gerçekleşebilir. Sayfa yüklendikten sonra giriş gecikmesinin yaygın nedenleri, daha önceki bir setInterval çağrısı nedeniyle düzenli olarak çalışan kod veya daha önce çalıştırılmak üzere sıraya alınmış ve hâlâ işlenmekte olan etkinlik geri çağırma işlemleri olabilir.

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {inputDelay} = attribution; // 125.59439536

  // Get the longest script from the first LoAF entry:
  const loaf = attribution.longAnimationFrameEntries[0];
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  if (script) {
    const {invokerType} = script;        // 'user-callback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

Yüksek işlem süresi değerleriyle ilgili sorunları giderirken olduğu gibi, daha önce belirtilen nedenlerden kaynaklanan yüksek giriş gecikmeleri size ayrıntılı komut dosyası ilişkilendirme verileri sağlar. Ancak farklı olan, çağıran türünün, etkileşimi geciktiren işin niteliğine göre değişeceğidir:

  • 'user-callback', engelleme görevinin setInterval, setTimeout veya requestAnimationFrame'ten geldiğini gösterir.
  • 'event-listener', engelleme görevinin, sıraya alınmış ve hâlâ işlenmekte olan önceki bir girişten geldiğini gösterir.
  • 'resolve-promise' ve 'reject-promise', engelleme görevinin daha önce başlatılan bazı asenkron çalışmalardan kaynaklandığını ve kullanıcının sayfayla etkileşime geçmeye çalıştığı bir zamanda çözüldüğünü veya reddedildiğini, etkileşimin gecikmesine neden olduğunu gösterir.

Her durumda, komut dosyası ilişkilendirme verileri size nereden bakacağınız ve giriş gecikmesinin kendi kodunuzdan mı yoksa üçüncü taraf komut dosyasından mı kaynaklandığı hakkında fikir verir.

Uzun sunum gecikmeleri

Gösterim gecikmeleri, etkileşimin son aşamasıdır ve etkileşimin etkinlik işleyicileri bittiğinde bir sonraki karenin boyandığı noktaya kadar başlar. Bu tür olaylar, bir etkileşim nedeniyle etkinlik işleyicideki çalışma kullanıcı arayüzünün görsel durumunu değiştirdiğinde gerçekleşir. Web Vitals kitaplığı, işleme süreleri ve giriş gecikmelerinde olduğu gibi, bir etkileşim için sunum gecikmesinin ne kadar sürdüğünü size söyleyebilir:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691
});

Bu verileri kaydederseniz ve web sitenizin INP'sine katkıda bulunan etkileşimler için yüksek sunum gecikmeleri görürseniz bunun nedeni değişebilir. Ancak dikkat etmeniz gereken birkaç neden vardır.

Pahalı stil ve düzen çalışmaları

Uzun sunum gecikmeleri, karmaşık CSS seçicileri ve büyük DOM boyutları gibi çeşitli nedenlerden kaynaklanan pahalı stil yeniden hesaplama ve düzen çalışmaları olabilir. Bu çalışmanın süresini, web-vitals kitaplığında gösterilen LoAF zamanlamalarıyla ölçebilirsiniz:

import {onINP} from 'web-vitals/attribution';

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 113.32307691

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  // Get necessary timings:
  const {startTime} = loaf; // 2120.5
  const {duration} = loaf;  // 1002

  // Figure out the ending timestamp of the frame (approximate):
  const endTime = startTime + duration; // 3122.5

  // Get the start timestamp of the frame's style/layout work:
  const {styleAndLayoutStart} = loaf; // 3011.17692309

  // Calculate the total style/layout duration:
  const styleLayoutDuration = endTime - styleAndLayoutStart; // 111.32307691

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running style and layout operation:
    const {invokerType} = script;        // 'event-listener'
    const {invoker} = script;            // 'BUTTON#update.onclick'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

LoAF, stil ve düzen çalışmasının bir kare için ne kadar sürdüğünü söylemez ancak ne zaman başladığını gösterir. Bu başlangıç zaman damgasını kullanarak, çerçevenin bitiş zamanını belirleyip stil ve düzen çalışmasının başlangıç zaman damgasını bunlardan çıkararak söz konusu çalışmanın doğru süresini hesaplamak için LoAF'taki diğer verileri kullanabilirsiniz.

Uzun süreli requestAnimationFrame geri çağırmaları

Uzun sunum gecikmelerinin olası nedenlerinden biri, requestAnimationFrame geri çağırma sırasında yapılan aşırı çalışmadır. Bu geri çağırma işlevinin içeriği, etkinlik işleyiciler çalıştırıldıktan sonra ancak stilin yeniden hesaplanması ve düzen çalışmasının hemen öncesinde yürütülür.

Bu geri çağırmaların tamamlanması, içinde yapılan çalışma karmaşıksa oldukça uzun sürebilir. Yüksek sunum gecikmesi değerlerinin requestAnimationFrame ile yaptığınız çalışmadan kaynaklandığından şüpheleniyorsanız aşağıdaki senaryoları belirlemek için web-vitals kitaplığı tarafından sunulan LoAF verilerini kullanabilirsiniz:

onINP(({name, value, attribution}) => {
  const {presentationDelay} = attribution; // 543.1999999880791

  // Get the longest script from the last LoAF entry:
  const loaf = attribution.longAnimationFrameEntries.at(-1);
  const script = loaf?.scripts.sort((a, b) => b.duration - a.duration)[0];

  // Get the render start time and when style and layout began:
  const {renderStart} = loaf;         // 2489
  const {styleAndLayoutStart} = loaf; // 2989.5999999940395

  // Calculate the `requestAnimationFrame` callback's duration:
  const rafDuration = styleAndLayoutStart - renderStart; // 500.59999999403954

  if (script) {
    // Get attribution for the event handler that triggered
    // the long-running requestAnimationFrame callback:
    const {invokerType} = script;        // 'user-callback'
    const {invoker} = script;            // 'FrameRequestCallback'
    const {sourceURL} = script;          // 'https://example.com/app.js'
    const {sourceCharPosition} = script; // 83
    const {sourceFunctionName} = script; // 'update'
  }
});

Sunma gecikmesi süresinin önemli bir kısmının requestAnimationFrame geri çağırma işleminde harcandığını görürseniz bu geri çağırma işlemlerinde yaptığınız işin, kullanıcı arayüzünde gerçek bir güncellemeyle sonuçlanan işlemlerle sınırlı olduğundan emin olun. DOM'a dokunmayan veya stilleri güncellemeyen diğer tüm işlemler, bir sonraki karenin gereksiz yere boyanmasını geciktirir. Bu nedenle dikkatli olun.

Sonuç

Alan verileri, sahada bulunan gerçek kullanıcılar için hangi etkileşimlerin sorunlu olduğunu anlamak açısından yararlanabileceğiniz en iyi bilgi kaynağıdır. Web Vitals JavaScript kitaplığı (veya bir RUM sağlayıcısı) gibi saha veri toplama araçlarından yararlanarak en sorunlu etkileşimlerin hangileri olduğuna dair daha fazla bilgi edinebilir, ardından sorunlu etkileşimleri laboratuvarda yeniden oluşturabilir ve düzeltmeye başlayabilirsiniz.

Federico Respini tarafından Unsplash'tan alınan kahraman resim.