Alandaki yavaş etkileşimleri bulma

Web sitenizin alan verilerindeki yavaş etkileşimleri nasıl bulacağınızı öğrenerek Interaction to Next Paint metriğini iyileştirme fırsatlarını keşfedebilirsiniz.

Jeremy Wagner

Saha 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) söz konusu olduğunda, alan verileri yavaş etkileşimleri belirlemek için gereklidir ve bunları 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 işlenmesi uzun süren animasyon çerçeveleri 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 verileri toplamıyorsanız CrUX iyi bir başlangıç noktası olabilir. CrUX, telemetri verilerini göndermeyi seçen gerçek Chrome kullanıcılarından alan verileri toplar.

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

• PageSpeed Insights'ı kullanarak tek tek sayfalar ve tüm kaynaklar.
• 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ürleri için CrUX verilerini Search Console'da bulabilirsiniz.

Başlangıç olarak web sitenizin URL'sini PageSpeed Insights'a girebilirsiniz. URL'yi girdikten sonra, varsa URL'nin alan verileri 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.

Bu veriler, bir sorun olup olmadığını gösterdiği için faydalıdır. Ancak CrUX, sorunlara neyin neden olduğunu 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 seçeneklerden biri, web-vitals JavaScript kitaplığını kullanarak bu alan verilerini kendiniz toplamanızdı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. Bu kitaplığı, destekleyen tarayıcılarda INP dahil olmak üzere çeşitli metrikleri kaydetmek için kullanabilirsiniz.

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'ten daha fazla bilgi vermez. web-vitals kitaplığının ilişkilendirme derlemesi bu noktada 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 verileri gösterir. Bu verilere, kitaplığın onINP() yönteminde gösterilen attribution nesnesi üzerinden 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
});

İlişkilendirme derlemesi, sayfanın INP'sinin yanı sıra, etkileşimin hangi bölümüne odaklanmanız gerektiği de dahil olmak üzere yavaş etkileşimlerin nedenlerini anlamanıza yardımcı olacak birçok veri sağlar. Bu rapor, aşağıdaki gibi önemli soruları yanıtlamanıza yardımcı olabilir:

• "Kullanıcı, sayfa yüklenirken sayfayla etkileşim kurdu mu?"
• "Etkileşimin etkinlik işleyicileri uzun süre çalıştı mı?"
• "Etkileşim etkinlik işleyici kodunun başlatılması gecikti mi? Öyleyse o sırada ana iş parçacığında başka neler oluyordu?"
• "Etkileşim, sonraki karenin boyanmasını geciktiren çok sayıda oluşturma işlemine neden oldu mu?"

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

web-vitals kitaplığının 4. sürümünden itibaren, INP aşama dökümleri (giriş gecikmesi, işleme süresi ve sunum gecikmesi) ve işlenmesi uzun süren animasyon çerçevesi API'si (LoAF) ile sağladığı veriler aracılığıyla sorunlu etkileşimler hakkında daha ayrıntılı bilgi edinebilirsiniz.

İşlenmesi Uzun Süren Animasyon Çerçeveleri API'si (LoAF)

Saha verilerini kullanarak etkileşimlerde hata ayıklamak zor bir iştir. Ancak LoAF'tan elde edilen veriler sayesinde, yavaş etkileşimlerin nedenleri hakkında daha iyi analizler elde etmek artık mümkün. LoAF, kesin nedenleri ve daha da önemlisi, sorunun kaynağının web sitenizin kodunda nerede olduğunu belirlemek için kullanabileceğiniz bir dizi ayrıntılı zamanlama ve diğer verileri gösterir.

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

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

Bu dizideki her giriş, bu tabloda gösterilen verileri içerir. Bu veriler, yavaş etkileşimden sorumlu olan 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 belirleme

Bu bilgileri nasıl kullanabileceğiniz hakkında fikir vermek için bu kılavuzda, yavaş etkileşimlerin ardındaki bazı nedenleri belirlemek üzere web-vitals kitaplığında gösterilen LoAF verilerini nasıl kullanabileceğiniz açıklanmaktadır.

Uzun işleme süreleri

Bir etkileşimin işlenme süresi, etkileşimin kayıtlı etkinlik işleyici geri çağırmalarının tamamlanması için gereken süreyi ve bunlar arasında gerçekleşebilecek diğer her şeyi ifade eder. Uzun süren işlemler, web-vitals kitaplığı tarafından gösterilir:

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

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

Yavaş bir etkileşimin arkasındaki temel nedenin, etkinlik işleyici kodunuzun çalışmasının çok uzun sürmesi olduğunu düşünmek doğaldır ancak bu her zaman geçerli değildir. Sorunun bu olduğunu doğruladıktan sonra LoAF verileriyle daha ayrıntılı 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.toSorted((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'
  }
});

Yukarıdaki kod snippet'inde görebileceğiniz gibi, yüksek işlem süresi değerlerine sahip bir etkileşimin kesin nedenini bulmak için LoAF verileriyle çalışabilirsiniz. Bu nedenler arasında şunlar yer alır:

• Öğe ve kayıtlı etkinlik işleyicisi.
• Uzun süren etkinlik işleyici kodunu içeren komut dosyası ve bu dosyadaki karakter konumu.
• İşlevin adı.

Bu tür veriler paha biçilmezdir. Yüksek işlem süresi değerlerinden tam olarak hangi etkileşimin veya etkinlik işleyicilerinin sorumlu olduğunu bulmak için artık uğraşmanız gerekmez. Ayrıca, üçüncü taraf komut dosyaları genellikle kendi etkinlik işleyicilerini kaydedebildiğinden, sorumlu olanın sizin kodunuz olup olmadığını belirleyebilirsiniz. Kontrol ettiğiniz kod için uzun süren görevleri optimize etme konusunu incelemeniz 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. Bir bölüm, işleme süresinden önce gerçekleşir ve 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ığı başka bir görevi işlerken gerçekleşir. web-vitals kitaplığının ilişkilendirme derlemesi, bir etkileşim için giriş gecikmesinin süresini size söyleyebilir:

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

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

Bazı etkileşimlerde yüksek giriş gecikmeleri olduğunu fark ederseniz etkileşim sırasında sayfada uzun giriş gecikmesine neden olan durumu belirlemeniz gerekir. Bu durum genellikle etkileşimin sayfa yüklenirken mi yoksa yüklendikten sonra mı gerçekleştiğiyle ilgilidir.

Sayfa yüklenirken mi?

Ana iş parçacığı genellikle sayfa yüklenirken en yoğun halindedir. Bu süre zarfında her türlü görev sıraya alınır ve işlenir. Tüm bu işlemler gerçekleşirken kullanıcı sayfayla etkileşim kurmaya çalışırsa etkileşim gecikebilir. Çok fazla JavaScript yükleyen sayfalar, komut dosyalarını derleyip değerlendirme ve sayfayı kullanıcı etkileşimlerine hazır hale getiren işlevleri yürütme işlemlerini başlatabilir. Bu işlem, kullanıcı bu etkinlik gerçekleşirken etkileşimde bulunursa engel olabilir. Web sitenizin kullanıcıları için durumun böyle 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.toSorted((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 kaydediyorsanız ve yüksek giriş gecikmeleri ile 'classic-script' veya 'module-script' çağırıcı türleri görüyorsanız sitenizdeki komut dosyalarının değerlendirilmesinin uzun sürdüğünü ve ana iş parçacığını etkileşimleri geciktirecek kadar uzun süre engellediğini söyleyebiliriz. Komut dosyalarınızı daha küçük paketlere bölerek, başlangıçta kullanılmayan kodun daha sonra yüklenmesini sağlayarak ve sitenizi tamamen kaldırabileceğiniz kullanılmayan kodlar açısından denetleyerek bu engelleme süresini azaltabilirsiniz.

Sayfa yüklendikten sonra mı?

Giriş gecikmeleri genellikle sayfa yüklenirken meydana gelse de sayfa yüklendikten sonra tamamen farklı bir nedenden dolayı da meydana gelebilir. Sayfa yüklendikten sonra giriş gecikmelerinin yaygın nedenleri, daha önceki bir setInterval çağrısı nedeniyle düzenli olarak çalışan kodlar veya daha önce çalıştırılmak üzere sıraya alınmış ve hâlâ işlenmekte olan 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.toSorted((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ı gidermede olduğu gibi, daha önce bahsedilen nedenlerden kaynaklanan yüksek giriş gecikmeleri, size ayrıntılı komut dosyası ilişkilendirme verileri sağlar. Ancak farklı olan, çağırıcı türünün etkileşimi geciktiren işin niteliğine göre değişmesidir:

• 'user-callback', engelleyici görevin setInterval, setTimeout, hatta requestAnimationFrame tarafından oluşturulduğunu gösterir.
• 'event-listener', engelleme görevinin sıraya alınmış ve hâlâ işlenmekte olan daha önceki bir girişten kaynaklandığını gösterir.
• 'resolve-promise' ve 'reject-promise', engelleme görevinin daha önce başlatılan ve kullanıcının sayfayla etkileşim kurmaya çalıştığı sırada çözülen veya reddedilen, etkileşimi geciktiren eşzamansız bir çalışmadan kaynaklandığı anlamına gelir.

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

Uzun sunum gecikmeleri

Sunu gecikmeleri, bir etkileşimin son aşamasıdır ve etkileşimin etkinlik işleyicileri tamamlandığında başlar ve bir sonraki karenin boyandığı noktaya kadar devam eder. Bunlar, 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 olduğunu 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şimler için yüksek sunum gecikmeleri görürseniz bunun çeşitli nedenleri olabilir. Dikkat etmeniz gereken birkaç neden aşağıda verilmiştir.

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

Uzun sunum gecikmeleri, karmaşık CSS seçiciler ve büyük DOM boyutları gibi çeşitli nedenlerden kaynaklanan maliyetli 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.toSorted((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, bir kare için stil ve düzen çalışmasının süresini değil, ne zaman başladığını gösterir. Bu başlangıç zaman damgasıyla, LoAF'taki diğer verileri kullanarak karenin bitiş zamanını belirleyip stil ve düzen çalışmasının başlangıç zaman damgasını bundan çıkararak bu çalışmanın doğru süresini hesaplayabilirsiniz.

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

Uzun sunum gecikmelerinin olası nedenlerinden biri, requestAnimationFrame geri çağırmada aşırı çalışma yapılmasıdır. Bu geri çağırmanın içeriği, etkinlik işleyiciler çalışmayı tamamladıktan sonra ancak stil yeniden hesaplama ve düzen çalışmasından hemen önce yürütülür.

Bu geri çağırmaların tamamlanması, içlerinde yapılan iş karmaşıksa uzun sürebilir. Yüksek sunum gecikmesi değerlerinin requestAnimationFrame ile yaptığınız çalışmalardan kaynaklandığından şüpheleniyorsanız bu 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.toSorted((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 kısmının requestAnimationFrame geri çağırmada harcandığını görürseniz bu geri çağırmalarda 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'a dokunmayan veya stilleri güncellemeyen diğer tüm çalışmalar, bir sonraki karenin boyanmasını gereksiz yere geciktirir. Bu nedenle dikkatli olun.

Sonuç

Saha verileri, sahadaki gerçek kullanıcılar için hangi etkileşimlerin sorunlu olduğunu anlamak için yararlanabileceğiniz en iyi bilgi kaynağıdır. web-vitals JavaScript kitaplığı (veya bir RUM sağlayıcısı) gibi alan verisi toplama araçlarını kullanarak hangi etkileşimlerin en sorunlu olduğu konusunda daha emin olabilir, ardından sorunlu etkileşimleri laboratuvarda yeniden oluşturma ve düzeltme aşamasına geçebilirsiniz.