Alandaki yavaş etkileşimleri bulma

Web sitenizin alan verilerindeki yavaş etkileşimleri nasıl bulacağınızı öğrenin, böylece sonraki boyamayla etkileşimi iyileştirme fırsatlarını belirleyebilirsiniz.

Alan verileri, gerçek kullanıcıların web sitenizdeki deneyimini belirten verilerdir. Yalnızca laboratuvar verilerinde bulamayacağınız sorunları ortaya çıkarır. Sonraki Boyamayla Etkileşim (INP) söz konusu olduğunda, alan verileri yavaş etkileşimlerin tanımlanmasında önemlidir ve bunları düzeltmenize yardımcı olacak önemli ipuçları sağlar.

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

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

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

CrUX verileri, bir dizi farklı alanda sunulmaktadır ve bu, aradığınız bilginin kapsamına bağlıdır. CrUX, INP ve diğer Core Web Vitals verilerini aşağıdakiler için sağlayabilir:

  • PageSpeed Insights'ı kullanarak tek tek sayfalar ve kaynakların tamamı.
  • Sayfa türleri. Örneğin, birçok e-ticaret web sitesinin Ürün Ayrıntısı Sayfası ve Ürün Listeleme Sayfası türleri vardır. 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, URL'nin alan verileri (varsa) INP dahil birden fazla metrik için görüntülenir. Açma/kapatma düğmelerini kullanarak mobil ve masaüstü boyutları için INP değerlerinizi kontrol edebilirsiniz.

PageSpeed Insights'ta CrUX tarafından gösterildiği şekliyle, üç Core Web Vitals'ta LCP, INP, CLS, teşhis metriği olarak TTFB, FCP ve kullanımdan kaldırılan Core Web Vital metriği olarak FID'yi gösteren alan verileri.
PageSpeed Insights'ta gösterilen CrUX verilerinin okunması. Bu örnekte, belirtilen web sayfasının INP'sinin iyileştirilmesi gerekiyor.

Bu veriler, sorun olup olmadığını bildirdiği için yararlıdır. Ancak CrUX'in yapamadığı şey, sorunların neden kaynaklandığını size bildirmektir. 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ü vardır. Bunlardan biri, web-vitals JavaScript kitaplığını kullanarak bu alan verilerini kendiniz toplamaktır.

web-vitals JavaScript kitaplığıyla alan verilerini 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. Destekleyen tarayıcılarda INP de dahil olmak üzere çeşitli metrikleri kaydetmek için bunu kullanabilirsiniz.

Tarayıcı Desteği

  • 96
  • 96
  • x
  • x

Kaynak

Web-vitals kitaplığının standart derlemesi, alandaki 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önderebilirsiniz:

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 size CrUX'ten daha fazla bilgi vermez. Web-Hayati kitaplığının ilişkilendirme yapısı burada devreye girer.

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

Web vitals kitaplığının ilişkilendirme yapısı, web sitenizin INP'sini etkileyen sorunlu etkileşimlerle ilgili sorunları daha iyi gidermenize yardımcı olmak için alandaki kullanıcılardan alabileceğiniz ek verileri gösterir. Bu verilere, kitaplığın onINP() yönteminde bulunan 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);        // 512
  console.log(rating);       // 'poor'
  console.dir(attribution);  // Attribution data
});
Web-vitals kitaplığındaki konsol günlüklerinin görünüşü. Bu örnekteki konsolda metriğin adı (INP), INP değeri (56) ve bu değerin INP eşikleri (iyi) dahilinde olduğu INP değeri ve Long Animation Frame API'deki girişler de dahil olmak üzere ilişkilendirme nesnesinde gösterilen çeşitli bilgi parçaları gösterilmektedir.
Web hayati verileri kitaplığındaki verilerin konsolda gösterilme şekli.

Sayfanın INP'sinin kendisine ek olarak, ilişkilendirme derlemesi, yavaş etkileşimlerin nedenlerini anlamanıza yardımcı olmak için kullanabileceğiniz birçok veri sağlar. Bu veriler arasında etkileşimin hangi bölümüne odaklanmanız gerektiği de yer alır. Aşağıdaki gibi önemli soruları yanıtlamanıza yardımcı olabilir:

  • "Kullanıcı, sayfa yüklenirken sayfayla etkileşimde bulundu mu?"
  • "Etkileşimin etkinlik işleyicileri uzun süre çalıştı mı?"
  • "Etkileşim etkinlik işleyici kodunun başlaması gecikti mi? Cevabınız evet ise o sırada ana ileti dizisinde başka neler oluyordu?"
  • "Etkileşim, bir sonraki karenin boyanmasını geciktiren çok sayıda görüntü oluşturma çalışmasına neden oldu mu?"

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

attribution nesne anahtarı Veriler
interactionTarget Sayfanın INP değerini oluşturan öğeye işaret eden bir CSS seçici (örneğin, button#save).
interactionType Tıklama, dokunma veya klavye girişlerinden elde edilen etkileşimin türü.
inputDelay* Etkileşimin giriş gecikmesi.
processingDuration* Kullanıcı etkileşimine yanıt olarak ilk etkinlik işleyicinin çalışmaya başlamasından tüm etkinlik işleyici işlemesinin tamamlanmasına kadar geçen süre.
presentationDelay* Etkileşimin, etkinlik işleyicilerin bitmesinden sonraki karenin boyanmasına kadar geçen sunu gecikmesi.
longAnimationFrameEntries* Etkileşimle ilişkili LoAF'deki girişler. Daha fazla bilgi için sonrakine bakın.
*Sürüm 4'teki yenilikler

Web-vitals kitaplığının 4. sürümünden başlayarak, INP aşama dökümleri (giriş gecikmesi, işleme süresi ve sunum gecikmesi) ve Long Animation Frame API (LoAF) ile sağladığı veriler sayesinde sorunlu etkileşimlerle ilgili daha da derinlemesine bilgi edinebilirsiniz.

Long Animation Frame API (LoAF)

Tarayıcı Desteği

  • 123
  • 123
  • x
  • x

Kaynak

Alan verilerini kullanarak etkileşimlerde hata ayıklamak zor bir iştir. Bununla birlikte, LoAF, bir dizi ayrıntılı zamanlamanın yanı sıra kesin nedenleri ve daha da önemlisi, web sitenizin kodunda sorunun kaynağının nerede olduğunu belirlemek için kullanabileceğiniz başka veriler sunduğundan, LoAF'den alınan verilerle yavaş etkileşimlerin nedenlerini daha iyi anlamak mümkündür.

Web-vitals kitaplığının ilişkilendirme derlemesi, attribution nesnesinin longAnimationFrameEntries anahtarı altında bir dizi LoAF girişini gösterir. Aşağıdaki tabloda, her bir LoAF girişinde bulabileceğiniz birkaç önemli veri biti listelenmektedir:

LoAF giriş nesnesi anahtarı Veriler
duration Boyama ve birleştirme hariç olmak üzere düzenin bitmesine kadar olan uzun animasyon karesinin süresi.
blockingDuration Tarayıcının uzun görevler nedeniyle hızlı yanıt veremediği toplam süre. Bu engelleme süresi, JavaScript çalıştıran uzun görevlerin yanı sıra çerçevede sonraki uzun oluşturma görevlerini de içerebilir.
firstUIEventTimestamp Etkinliğin kare sırasında sıraya alındığı zamanın zaman damgası. Bir etkileşimin giriş gecikmesinin başlangıcını anlamak için kullanışlıdır.
startTime Karenin başlangıç zaman damgası.
renderStart Çerçeve için oluşturma işleminin başladığı zaman. Herhangi bir stil/düzen çalışması başlamadan önce, tüm requestAnimationFrame geri çağırmaları (ve varsa ResizeObserver geri çağırmaları) buna dahildir.
styleAndLayoutStart Kadrajda stil/düzen çalışması gerçekleştiğinde. Kullanılabilen diğer zaman damgalarını bulurken stil/düzen çalışmasının uzunluğunu bulmaya yardımcı olabilir.
scripts Sayfanın INP'sine katkıda bulunan komut dosyası ilişkilendirme bilgilerini içeren bir öğe dizisi.
LoAF modeline göre uzun bir animasyon çerçevesinin görselleştirmesi.
LoAF API'ye göre uzun bir animasyon karesinin zamanlamalarının zamanlama şeması (eksi blockingDuration).

Tüm bu bilgiler, etkileşimi yavaşlatan şeyler hakkında birçok fikir verebilir, ancak LoAF girişlerinin gösterdiği scripts dizisi özellikle ilginizi çekmelidir:

Komut dosyası ilişkilendirme nesne anahtarı Veriler
invoker Çağırıcı. Bu, sonraki satırda açıklanan çağırıcı türüne göre değişebilir. Çağırıcılara örnek olarak 'IMG#id.onload', 'Window.requestAnimationFrame' veya 'Response.json.then' gibi değerler verilebilir.
invokerType Çağrıyı yapanın türü. 'user-callback', 'event-listener', 'resolve-promise', 'reject-promise', 'classic-script' veya 'module-script' olabilir.
sourceURL Uzun animasyon çerçevesinin kaynağı olan komut dosyasının URL'si.
sourceCharPosition sourceURL ile tanımlanan alfabedeki karakter konumu.
sourceFunctionName Tanımlanan komut dosyasındaki işlevin adı.

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

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

Bu bilgileri nasıl kullanabileceğinize dair size bir fikir vermek amacıyla bu kılavuz şimdi, yavaş etkileşimlerin bazı nedenlerini belirlemek için web-vitals kitaplığında gösterilen LoAF verilerini nasıl kullanabileceğinizi adım adım açıklayacaktır.

Uzun işleme 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üredir ve bunlar arasında olabilecek diğer tüm işlemlerdir. Yüksek işleme süreleri, web-vitals kitaplığında gösterilir:

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

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

Yavaş bir etkileşimin ana nedeninin etkinlik işleyici kodunuzun çok uzun sürmesi olduğunu düşünmek doğaldır, ancak durum her zaman böyle değildir! Sorunun bu olduğunu doğruladıktan sonra LoAF verilerini daha ayrıntılı inceleyebilirsiniz:

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şleme süresi değerlerine sahip bir etkileşimin ardındaki kesin nedeni bulmak için LoAF verileriyle çalışabilirsiniz:

  • Öğe ve kayıtlı etkinlik işleyici.
  • Uzun süreli etkinlik işleyici kodunu içeren komut dosyası ve bu dosyanın içindeki karakter konumu.
  • İşlevin adı.

Bu tür veriler çok değerlidir. Artık yüksek işleme süresi değerlerinden tam olarak hangi etkileşimin veya hangi etkinlik işleyicilerin sorumlu olduğunu öğrenmeye çalışmanız gerekmiyor. Ayrıca, üçüncü taraf komut dosyaları genellikle kendi etkinlik işleyicilerini kaydedebildiği için sorumlunun kodunuz olup olmadığını belirleyebilirsiniz. Üzerinde kontrol sahibi olduğunuz kod için uzun görevleri optimize etmeyi düşünebilirsiniz.

Uzun giriş gecikmeleri

Uzun süreli etkinlik işleyiciler yaygın olsa da etkileşimin dikkate alınması gereken başka bölümleri de vardır. Bir kısım işleme süresinden önce gerçekleşir. Bu süreye giriş gecikmesi denir. 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ığı halihazırda başka bir görevi işlerken gerçekleşir. Web vitals kitaplığının ilişkilendirme yapısı, bir etkileşim için giriş gecikmesinin uzunluğunu size bildirebilir:

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

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

Bazı etkileşimlerin yüksek giriş gecikmelerine sahip olduğunu fark ederseniz etkileşim sırasında uzun giriş gecikmesine neden olan etkileşim sırasında sayfada neler olup bittiğini belirlemeniz gerekir. Bu genellikle etkileşimin sayfa yüklenirken mi yoksa sonrasında mı gerçekleştiğine bağlıdır.

Sayfa yüklenirken mi oluştu?

Ana ileti dizisi, genellikle bir sayfa yüklenirken en yoğun yoğunluktadır. Bu süre boyunca her tür görev sıraya alınır ve işlenir. Kullanıcı, tüm bu çalışmalar gerçekleşirken sayfayla etkileşime geçmeye çalışırsa etkileşimi geciktirebilir. Çok sayıda JavaScript yükleyen sayfalar, komut dosyalarını derleme ve değerlendirme işlerinin yanı sıra bir sayfayı kullanıcı etkileşimleri için hazırlayan işlevleri yürütebilir. Bu etkinlik sırasında kullanıcının etkileşimde bulunması durumunda bu işlem engellenebilir ve web sitenizin kullanıcıları için böyle bir durumun söz konusu 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 sahada kaydederseniz ve yüksek giriş gecikmelerinin yanı sıra 'classic-script' veya 'module-script' gibi çağırıcı türleriyle karşılaşırsanız sitenizdeki komut dosyalarının değerlendirmesi uzun sürdüğünü ve ana iş parçacığını etkileşimleri geciktirecek kadar uzun bir süre engellediğini söyleyebilirsiniz. Komut dosyalarınızı daha küçük gruplara bölerek, başlangıçta kullanılmayan kodun daha sonra yüklenmesini erteleyerek ve sitenizde kullanılmayan kodların tamamen kaldırılıp kaldırılmadığını denetleyerek bu engelleme süresini azaltabilirsiniz.

Sayfa yüklendikten sonra mı oluştu?

Giriş gecikmeleri genellikle sayfa yüklenirken meydana gelse de tamamen farklı bir nedenden ötürü, sayfa yüklendikten sonra da meydana gelebilir. Sayfa yüklendikten sonra karşılaşılan giriş gecikmelerinin yaygın nedenleri, ö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 işlenmeye devam eden etkinlik geri çağırmaları 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şleme süresi değerleriyle ilgili sorunların giderilmesinde olduğu gibi, daha önce bahsedilen nedenlerden dolayı 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 bağlı olarak değişmesidir:

  • 'user-callback', engelleme görevinin setInterval, setTimeout, hatta requestAnimationFrame tarafından yapıldığını belirtir.
  • 'event-listener', engelleme görevinin sıraya alınmış ve işlenmeye devam eden önceki bir girişten olduğunu belirtir.
  • 'resolve-promise' ve 'reject-promise', engelleme görevinin daha önce başlatılmış ve kullanıcı sayfayla etkileşimde bulunmaya çalıştığı bir anda çözülmüş ya da reddedilmiş bazı eşzamansız çalışmalardan kaynaklandığı anlamına gelir. Bu da etkileşimin gecikmesine neden olur.

Her durumda, komut dosyası ilişkilendirme verileri, aramaya nereden başlamanız gerektiği ve giriş gecikmesinin kendi kodunuzdan mı yoksa üçüncü taraf bir komut dosyasından mı kaynaklandığı konusunda size fikir verir.

Uzun sunum gecikmeleri

Sunum gecikmeleri bir etkileşimin son adımıdır ve etkileşimin etkinlik işleyicileri tamamlandığında, sonraki karenin boyandığı noktaya kadar başlar. Bir etkileşim nedeniyle etkinlik işleyicide yapılan çalışma, kullanıcı arayüzünün görsel durumunu değiştirdiğinde ortaya çıkarlar. İşleme süreleri ve giriş gecikmelerinde olduğu gibi, web-Önemliler kitaplığı 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 kaydeder ve web sitenizin INP'sine katkıda bulunan etkileşimlerde sunum gecikmelerinin yüksek olduğunu görürseniz, bunun nedenleri değişiklik gösterebilir. Ancak, dikkat etmeniz gereken bazı nedenler aşağıda belirtilmiştir.

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

Uzun sunum gecikmeleri, karmaşık CSS seçiciler ve büyük DOM boyutları da dahil olmak üzere çeşitli nedenlerden kaynaklanan, pahalı stil yeniden hesaplama ve düzen işlemleri gerektirebilir. 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 size bir kare için stil ve düzen çalışmasının süresini söylemez ancak ne zaman başladığını bildirir. Bu başlangıç zaman damgasıyla, karenin bitiş zamanını belirleyip stil ve düzen çalışmasının başlangıç zaman damgasını bundan çıkararak çalışmanın doğru süresini hesaplamak için LoAF'deki diğer verileri kullanabilirsiniz.

Uzun süreli requestAnimationFrame geri çağırma

Uzun sunu gecikmelerinin olası nedenlerinden biri, requestAnimationFrame geri çağırmasında aşırı iş yapılmasıdır. Bu geri çağırmanın içeriği, etkinlik işleyicilerin çalışması bittikten sonra, ancak stil yeniden hesaplama ve düzen çalışmasından hemen önce yürütülür.

Bunlar içindeki işler karmaşıksa bu geri çağırma işlemlerinin tamamlanması uzun sürebilir. Yüksek sunum gecikmesi değerlerinin requestAnimationFrame ile yapmakta olduğunuz çalışmadan kaynaklandığından şüpheleniyorsanız aşağıdaki senaryoları belirlemek için web-vitals kitaplığında gösterilen 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'
  }
});

Sunum gecikme süresinin önemli bir bölümünün requestAnimationFrame geri çağırmasında 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şlerle sınırlı olduğundan emin olun. DOM veya stilleri güncellemeyen diğer çalışmalar, sonraki karenin boyanmasını gereksiz şekilde geciktireceğinden dikkatli olun!

Sonuç

Alan verileri, alandaki gerçek kullanıcılar için hangi etkileşimlerin sorunlu olduğunu anlamak söz konusu olduğunda faydalanabileceğiniz en iyi bilgi kaynağıdır. Web-vitals JavaScript kitaplığı (veya bir RUM sağlayıcısı) gibi alan verisi toplama araçlarından yararlanarak, en sorunlu etkileşimlerin hangileri olduğu konusunda daha emin olabilir ve laboratuvarda sorunlu etkileşimleri yeniden üretmeye geçip bunları düzeltmeye geçebilirsiniz.

Unsplash'tan Federico Respini'nin hazırladığı hero resim.