Alandaki yavaş etkileşimleri bulma

Web sitenizin alan verilerindeki yavaş etkileşimleri nasıl bulacağınızı öğrenin. Böylece, web sitenizin Sonraki Boyamayla Etkileşimini iyileştirme fırsatlarını keşfedebilirsiniz.

Alan verileri, gerçek kullanıcıların web sitenizde nasıl bir deneyim yaşadığını belirten verilerdir. Yalnızca laboratuvar verilerinde bulamadığınız sorunlar gösterilir. Sonraki Boyamayla Etkileşim (INP) söz konusu olduğunda, alan verileri yavaş etkileşimlerin tanımlanmasında kritik öneme sahiptir ve bu sorunları düzeltmenize yardımcı olacak önemli ipuçları sağlar.

Bu kılavuzda, web sitenizde 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 hızlı bir şekilde nasıl değerlendireceğinizi öğreneceksiniz. Ardından, web sitenizdeki yavaş etkileşimlere ilişkin alan verilerini toplayıp yorumlamak için web-vitals JavaScript kitaplığının ilişkilendirme derlemesini ve Long Animation Frames API (LoAF) tarafından sağlanan 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 topluyorsanız CrUX iyi bir başlangıç noktası olabilir. CrUX, telemetri verileri göndermeyi tercih eden gerçek Chrome kullanıcılarından alan verilerini toplar.

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

• PageSpeed Insights'ı kullanarak farklı sayfalar ve kaynakların tamamı.
• 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ıç noktası olarak, web sitenizin URL'sini PageSpeed Insights'a girebilirsiniz. URL'yi girdikten sonra, INP dahil olmak üzere birden fazla metrik için (varsa) alan verileri gösterilir. Açma/kapatma düğmelerini kullanarak mobil ve masaüstü boyutları için INP değerlerinizi kontrol edebilirsiniz.

Bu veriler, yaşadığınız soruna dair fikir sunduğu için yararlıdır. Ancak CrUX, size nenin sorunlara neden olduğunu söyleyemez. Bu sorunu gidermek 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. Seçeneklerden biri, web'deki önemli JavaScript kitaplığını kullanarak bu alan verilerini kendiniz toplamaktır.

web-vitals JavaScript kitaplığıyla alan verilerini toplayın

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ılardaki INP dahil olmak üzere çeşitli metrikleri kaydetmek için kullanabilirsiniz.

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 verilerini 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'in sunabileceğinden daha fazlasını ifade etmez. Web-vitals kitaplığının ilişkilendirme yapısı burada devreye girer.

Web-vitals kitaplığının ilişkilendirme yapısıyla daha ileriye gidin

Web kaynakları kitaplığının ilişkilendirme derlemesi, 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 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
});

Sayfanın INP'sine ek olarak, ilişkilendirme derlemesi, yavaş etkileşimlerin nedenlerini (etkileşimin hangi bölümüne odaklanmanız gerektiği dahil) anlamanıza yardımcı olmak için kullanabileceğiniz birçok veri sağlar. Bu kılavuz, aşağıdakiler 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üredir çalışıyor muydu?"
• "Etkileşim etkinlik işleyici kodunun başlaması gecikti mi? Cevabınız evet ise o sırada ana ileti dizisinde başka neler vardı?"
• "Etkileşim, sonraki karenin boyanmasını geciktiren çok fazla oluşturma çalışmasına neden oldu mu?"

Aşağıdaki tabloda, web sitenizdeki yavaş etkileşimlerin üst düzey nedenlerini belirlemenize yardımcı olabilecek, kitaplıktan alabileceğiniz bazı temel ilişkilendirme verileri 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 Long Animation Frame API (LoAF) aracılığıyla sağladığı verilerle sorunlu etkileşimler hakkında daha da ayrıntılı bilgi edinebilirsiniz.

Long Animation Frame API (LoAF)

Alan verilerini kullanarak etkileşimlerde hata ayıklamak zor bir iştir. Bununla birlikte, LoAF'den elde edilen verilerle, artık yavaş etkileşimlerin nedenlerini daha iyi anlamak mümkün. LoAF, bir dizi ayrıntılı zamanlamayı ve nedenleri kesin olarak ortaya koyan diğer verileri, daha da önemlisi, sorunun kaynağının web sitenizin kodundaki yerini belirlemek için kullanabilir.

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

Tüm bu bilgiler bir etkileşimi yavaşlatan şeyler hakkında size bilgi verebilir. 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 komut dosyası ve bunun nasıl sorumlu olduğu hakkında size bilgi verir.

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

Bu bilgileri nasıl kullanabileceğiniz konusunda size bir fikir vermek için bu kılavuzda, yavaş etkileşimlerin bazı nedenlerini belirlemek için web-vitals kitaplığında sunulan LoAF verilerini nasıl kullanabileceğiniz adım adım açıklanmıştı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 gereken süreyi ve bunlar arasında olabilecek diğer her şeyi ifade eder. Yüksek işleme süreleri 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 ardındaki ana nedenin, etkinlik işleyici kodunuzun çalışmasının çok uzun sürmesi olduğunu düşünebiliriz ancak bu durum her zaman geçerli olmayabilir. Sorunun bu olduğunu onayladıktan sonra, LoAF verilerini ayrıntılı olarak 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, aşağıdakiler dahil olmak üzere yüksek işleme süresi değerlerine sahip bir etkileşimin ardındaki tam nedeni bulmak için LoAF verileriyle çalışabilirsiniz:

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

Bu tür veriler paha biçilmezdir. Yüksek işleme süresi değerlerinden tam olarak hangi etkileşimin (veya hangi etkinlik işleyicilerin) sorumlu olduğunu bulma işini artık yapmanız gerekmiyor. Ayrıca, üçüncü taraf komut dosyaları genellikle kendi etkinlik işleyicilerini kaydedebildiğinden, bu komutlardan sorumlu olan kişinin siz olup olmadığını belirleyebilirsiniz. Kontrolü size ait olan kod için uzun görevleri optimize etme konusunu incelemeniz önerilir.

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. Buna 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ığı zaten başka bir görevi işlerken gerçekleşir. Web-vitals kitaplığının ilişkilendirme yapısı, bir etkileşimin giriş gecikmesinin uzunluğunu öğrenebilir:

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

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

Bazı etkileşimlerde giriş gecikmelerinin yüksek olduğunu fark ederseniz etkileşim anında uzun bir giriş gecikmesine neden olan etkileşim sırasında sayfada neler olduğunu anlamanız gerekir. Bu da 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 sayfa yüklenirken en yoğun olanıdır. Bu süre zarfında her tür görev sıraya alınır ve işlenir. Kullanıcı tüm çalışmalar gerçekleşirken sayfayla etkileşimde bulunmaya çalışırsa etkileşimi geciktirebilir. Çok fazla JavaScript yükleyen sayfalar, komut dosyalarını derlemek ve değerlendirmek için çalışmaya başlayabilir. Ayrıca, sayfayı kullanıcı etkileşimleri için hazırlayan işlevler yürütebilirler. Bu çalışma, kullanıcının söz konusu etkinlik gerçekleşirken etkileşimde bulunması durumunda engellenebilir ve bu durumun web sitenizin kullanıcıları için 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 'classic-script' veya 'module-script' türünde yüksek giriş gecikmeleri ve çağırıcı türleriyle karşılaşırsanız, sitenizdeki komut dosyalarının değerlendirmesinin uzun sürdüğünü ve ana iş parçacığını etkileşimleri geciktirecek kadar uzun sürdüğünü söyleyebilirsiniz. Komut dosyalarınızı daha küçük gruplara bölerek bu engelleme süresini azaltabilir, başlangıçta kullanılmayan kodun daha sonra yüklenmesini erteleyebilir ve sitenizde tamamen kaldırabileceğiniz kullanılmayan kodların olup olmadığını denetleyebilirsiniz.

Sayfa yüklendikten sonra mı geldi?

Giriş gecikmeleri genellikle sayfa yüklenirken meydana gelse de tamamen farklı bir nedenden dolayı sayfa yüklendikten sonra meydana gelebilir. Sayfa yüklendikten sonra giriş gecikmelerinin yaygın görülen nedenleri, daha önceki bir setInterval çağrısı nedeniyle düzenli olarak çalışan kod, hatta daha önce çalıştırılmak üzere sıraya konup 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ı gidermede olduğu gibi, daha önce bahsedilen sebeplerden kaynaklanan yüksek giriş gecikmeleri size ayrıntılı komut dosyası ilişkilendirme verileri sağlar. Ancak farklı olan, çağrıyı yapanın türünün etkileşimi geciktiren çalışmanın niteliğine bağlı olarak değişmesidir.

• 'user-callback', engelleme görevinin setInterval, setTimeout ve hatta requestAnimationFrame tarafından yapıldığını gösterir.
• 'event-listener', engelleme görevinin sıraya alınan ve işlenmeye devam eden önceki bir girişten olduğunu 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ığı bir zamanda çözülmüş ya da reddedildiği, dolayısıyla etkileşimin gecikmesine neden olan bazı eşzamansız çalışmalardan kaynaklandığı anlamına gelir.

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

Ekran göstermede uzun gecikmeler

Sunum gecikmeleri etkileşimin son aşaması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 çıkar. İşleme süreleri ve giriş gecikmelerinde olduğu gibi, Web-Önemli Bilgiler kitaplığı da bir etkileşimdeki sunum gecikmesinin ne kadar olduğunu size bildirebilir:

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şimlerde yüksek sunum gecikmeleri olduğunu fark ederseniz, bu durumun nedenleri farklı olabilir ancak dikkat etmeniz gereken birkaç neden vardır.

Stil ve düzen açısından pahalı bir çalışma

Uzun sunum gecikmeleri, karmaşık CSS seçiciler ve büyük DOM boyutları gibi çeşitli nedenlerden dolayı pahalı stil yeniden hesaplama ve düzen çalışmaları olabilir. Bu çalışmanın süresini, web-vitals kitaplığında gösterilen LoAF zamanlamaları ile ö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ü size söylemez, ancak ne zaman başladığını size 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'den alınan diğer verileri kullanabilirsiniz.

Uzun süreli requestAnimationFrame geri aramaları

Sunudaki uzun gecikmelerin olası nedenlerinden biri, requestAnimationFrame geri aramasında çok fazla 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.

Bu geri çağırmalar karmaşık bir iş içeriyorsa tamamlanması uzun sürebilir. Yüksek sunum gecikmesi değerlerinin requestAnimationFrame ile yaptığınız çalışmadan kaynaklandığını düşünüyorsanız aşağıdaki senaryoları belirlemek için web-vitals kitaplığının sunduğu 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 gecikmesi süresinin önemli bir kısmının requestAnimationFrame geri çağırmasında 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 veya güncelleme stillerine dokunmayan diğer tüm çalışmalar, sonraki karenin boyanmasını gereksiz şekilde geciktirir; bu nedenle dikkatli olun!

Sonuç

Alan verileri, alandaki gerçek kullanıcılar için hangi etkileşimlerin sorunlu olduğunu anlama konusunda 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ından yararlanarak hangi etkileşimlerin en sorunlu olduğu konusunda daha emin olabilir, ardından laboratuvarda sorunlu etkileşimleri yeniden oluşturmaya geçip bunları düzeltmeye geçebilirsiniz.

Federico Respini tarafından oluşturulan Unsplash'teki hero resim.