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 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 tercih eden gerçek Chrome kullanıcılarından alan verilerini 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, 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, sorununuz olup olmadığını anlamanıza yardımcı olduğundan yararlıdır. Ancak CrUX, sorunlara nelerin neden olduğunu size söyleyemez. Bu sorunun yanıtını bulmanı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.
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ö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
});
İ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. |
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 Frames API (LoAF) aracılığıyla sağladığı verilerle sorunlu etkileşimler hakkında daha da ayrıntılı bilgi edinebilirsiniz.
Long Animation Frames API (LoAF)
Alan verilerini kullanarak etkileşimlerde hata ayıklama zor bir iştir. Ancak LoAF'ın sağladığı verilerle artık yavaş etkileşimlerin nedenlerini daha iyi anlayabilirsiniz. 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 veriler sağlar.
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 birleştirme hariç düzenin bittiği zamana kadar olan uzun animasyon çerçevesinin süresi. |
blockingDuration
|
Çerçevede, uzun görevler nedeniyle tarayıcının hızlı yanıt veremediği toplam süre. 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üzen çalışması gerçekleştiğinde. 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. |
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şkilendirme nesnesi 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 tarafından 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 bunun nasıl sorumlu olduğu hakkında size bilgi verir.
Yavaş etkileşimlerin ardındaki yaygın nedenleri ö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ş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. 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ş etkileşimin temel 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, aşağıdakiler dahil olmak üzere 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ş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şlerken 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 olandır. 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örevininsetInterval
,setTimeout
veyarequestAnimationFrame
'ten geldiğini gösterir.'event-listener'
, engelleyen görevin, 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, 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.
Uzun sunum gecikmeleri
Gösterim gecikmeleri, etkileşimin son aşamasıdır ve etkileşimin etkinlik işleyicileri sona erdiğinden 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. İş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ş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ı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ı
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ığı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'
}
});
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 anlama konusunda 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şimler hakkında daha emin olabilirsiniz. Ardından laboratuvarda sorunlu etkileşimleri yeniden oluşturabilir ve düzeltmeye başlayabilirsiniz.
Federico Respini tarafından Unsplash'tan alınan kahraman resim.