1. Giriş
Bu etkileşimli codelab'de, web-vitals kitaplığını kullanarak Interaction to Next Paint (INP) metriğinin nasıl ölçüleceğini öğreneceksiniz.
Ön koşullar
- HTML ve JavaScript geliştirme bilgisi
- Önerilen: web.dev INP metriği belgelerini okuyun.
Öğrenecekleriniz
web-vitalskitaplığını sayfanıza ekleme ve ilişkilendirme verilerini kullanma- INP'yi iyileştirmeye nereden ve nasıl başlayacağınızı teşhis etmek için ilişkilendirme verilerini kullanın.
İhtiyacınız olanlar
- GitHub'dan kod klonlayabilen ve npm komutlarını çalıştırabilen bir bilgisayar.
- Metin düzenleyici
- Tüm etkileşim ölçümlerinin çalışması için Chrome'un son sürümü.
2. Hazırlanın
Kodu alıp çalıştırma
Kod, web-vitals-codelabs deposunda bulunur.
- Depoyu terminalinizde klonlayın:
git clone https://github.com/GoogleChromeLabs/web-vitals-codelabs.git. - Klonlanan dizine gidin:
cd web-vitals-codelabs/measuring-inp. - Bağımlılıkları yükleyin:
npm ci. - Web sunucusunu başlatın:
npm run start. - Tarayıcınızda http://localhost:8080/ adresini ziyaret edin.
Sayfayı deneyin
Bu codelab'de, INP ile ilgili olası sorunları keşfetmek için Gastropodicon (popüler bir salyangoz anatomisi referans sitesi) kullanılır.
Hangi etkileşimlerin yavaş olduğunu anlamak için sayfayla etkileşimde bulunmayı deneyin.
3. Chrome Geliştirici Araçları'nda gezinme
Diğer Araçlar > Geliştirici Araçları menüsünden, sayfayı sağ tıklayıp İncele'yi seçerek veya klavye kısayolu kullanarak Geliştirici Araçları'nı açın.
Bu codelab'de hem Performans panelini hem de Konsol'u kullanacağız. Dilediğiniz zaman DevTools'un üst kısmındaki sekmelerden bu araçlar arasında geçiş yapabilirsiniz.
- INP sorunları en sık mobil cihazlarda yaşandığı için mobil ekran emülasyonuna geçin.
- Masaüstü veya dizüstü bilgisayarda test yapıyorsanız performans, gerçek bir mobil cihazdaki performanstan muhtemelen çok daha iyi olacaktır. Performansı daha gerçekçi bir şekilde görmek için Performans panelinin sağ üst kısmındaki dişli simgesini tıklayın ve CPU 4x slowdown'u (CPU 4 kat yavaşlatma) seçin.
4. web-vitals'ı yükleme
web-vitals, kullanıcılarınızın deneyimlediği Web Verileri metriklerini ölçmek için kullanılan bir JavaScript kitaplığıdır. Bu değerleri yakalamak için kitaplığı kullanabilir, ardından bunları daha sonra analiz etmek üzere bir Analytics uç noktasına gönderebilirsiniz. Bizim amacımız, yavaş etkileşimlerin ne zaman ve nerede gerçekleştiğini belirlemektir.
Kitaplığı bir sayfaya eklemenin birkaç farklı yolu vardır. Kitaplığı kendi sitenize nasıl yükleyeceğiniz; bağımlılıkları, derleme işlemini ve diğer faktörleri nasıl yönettiğinize bağlıdır. Tüm seçenekleriniz için kitaplığın dokümanlarını inceleyin.
Bu codelab, belirli bir derleme işlemi sürecine girmeden doğrudan komut dosyasını yüklemek için npm'den yüklenir.
Kullanabileceğiniz iki web-vitals sürümü vardır:
- Bir sayfa yüklemesinde Core Web Vitals'ın metrik değerlerini izlemek istiyorsanız "standart" derleme kullanılmalıdır.
- "İlişkilendirme" derlemesi, bir metriğin neden belirli bir değerle sonuçlandığını teşhis etmek için her metriğe ek hata ayıklama bilgileri ekler.
Bu codelab'de INP'yi ölçmek için ilişkilendirme derlemesini istiyoruz.
npm install -D web-vitals komutunu çalıştırarak web-vitals öğesini projenin devDependencies bölümüne ekleyin.
Sayfaya web-vitals ekleme:
Komut dosyasının ilişkilendirme sürümünü index.html bölümünün en altına ekleyin ve sonuçları konsola kaydedin:
<script type="module">
import {onINP} from './node_modules/web-vitals/dist/web-vitals.attribution.js';
onINP(console.log);
</script>
Deneyin
Konsol açıkken sayfayla tekrar etkileşim kurmayı deneyin. Sayfada tıkladığınız hiçbir şey kaydedilmez.
INP, bir sayfanın tüm yaşam döngüsü boyunca ölçülür. Bu nedenle, web-vitals varsayılan olarak kullanıcı sayfadan ayrılana veya sayfayı kapatana kadar INP'yi bildirmez. Bu, analiz gibi işlemler için sinyal gönderme açısından ideal bir davranıştır ancak etkileşimli hata ayıklama için daha az idealdir.
web-vitals, daha ayrıntılı raporlama için reportAllChanges seçeneğini sunar. Etkinleştirildiğinde her etkileşim raporlanmaz ancak önceki etkileşimlerden daha yavaş olan her etkileşim raporlanır.
Seçeneği komut dosyasına eklemeyi ve sayfayla tekrar etkileşim kurmayı deneyin:
<script type="module">
import {onINP} from './node_modules/web-vitals/dist/web-vitals.attribution.js';
onINP(console.log, {reportAllChanges: true});
</script>
Sayfayı yenilediğinizde etkileşimler konsola raporlanmaya başlar ve yeni bir en yavaş etkileşim olduğunda güncellenir. Örneğin, arama kutusuna bir şeyler yazıp girişi silmeyi deneyin.
5. İlişkilendirme ne içerir?
Çoğu kullanıcının sayfayla kuracağı ilk etkileşim olan çerez izni iletişim kutusuyla başlayalım.
Birçok sayfada, kullanıcılar çerezleri kabul ettiğinde çerezlerin eşzamanlı olarak tetiklenmesini gerektiren komut dosyaları bulunur. Bu durum, tıklamanın yavaş bir etkileşim olmasına neden olur. Burada olan da budur.
(Demo) çerezleri kabul etmek için Evet'i tıklayın ve şu anda DevTools konsoluna kaydedilen INP verilerine göz atın.
Bu üst düzey bilgiler hem standart hem de ilişkilendirme web hayati bileşenleri derlemelerinde kullanılabilir:
{
name: 'INP',
value: 344,
rating: 'needs-improvement',
entries: [...],
id: 'v4-1715732159298-8028729544485',
navigationType: 'reload',
attribution: {...},
}
Kullanıcının tıklamasından sonraki boyamaya kadar geçen süre 344 milisaniye oldu. Bu, "iyileştirilmesi gereken" bir INP değeridir. entries dizisinde bu etkileşimle ilişkili tüm PerformanceEntry değerleri bulunur. Bu örnekte yalnızca bir tıklama etkinliği vardır.
Ancak bu süre zarfında neler olduğunu öğrenmek için en çok attribution özelliğiyle ilgileniyoruz. İlişkilendirme verilerini oluşturmak için web-vitals, tıklama etkinliğiyle hangi uzun animasyon çerçevesinin (LoAF) çakıştığını bulur. LoAF, bu kare sırasında harcanan süreyle ilgili ayrıntılı veriler sağlayabilir. Bu veriler, çalıştırılan komut dosyalarından requestAnimationFrame geri çağırma, stil ve düzende harcanan süreye kadar her şeyi kapsar.
Daha fazla bilgi için attribution özelliğini genişletin. Veriler çok daha zengin.
attribution: {
interactionTargetElement: Element,
interactionTarget: '#confirm',
interactionType: 'pointer',
inputDelay: 27,
processingDuration: 295.6,
presentationDelay: 21.4,
processedEventEntries: [...],
longAnimationFrameEntries: [...],
}
İlk olarak, etkileşimde bulunulan öğelerle ilgili bilgiler yer alır:
interactionTargetElement: Etkileşimde bulunulan öğeye canlı referans (öğe DOM'dan kaldırılmamışsa).interactionTarget: Sayfadaki öğeyi bulmak için kullanılan seçici.
Ardından, zamanlama genel hatlarıyla açıklanır:
inputDelay: Kullanıcının etkileşimi başlattığı (ör. fareyi tıkladığı) an ile bu etkileşimin etkinlik işleyicisinin çalışmaya başladığı an arasındaki süre. Bu durumda, CPU sınırlaması açıkken bile giriş gecikmesi yalnızca 27 milisaniye civarındaydı.processingDuration: Etkinlik işleyicilerinin tamamlanması için gereken süre. Genellikle sayfalar tek bir etkinlik için birden fazla dinleyiciye (ör.pointerdown,pointerupveclick) sahip olur. Bunların tümü aynı animasyon karesinde çalışırsa bu süreye birleştirilir. Bu durumda, işleme süresi 295,6 milisaniye sürer.Bu süre, INP süresinin büyük bir kısmını oluşturur.presentationDelay: Etkinlik işleyicilerin tamamlanmasından tarayıcının sonraki kareyi boyamayı bitirmesine kadar geçen süre. Bu durumda 21, 4 milisaniye.
Bu INP aşamaları, nelerin optimize edilmesi gerektiğini teşhis etmek için önemli bir sinyal olabilir. INP'yi optimize etme kılavuzunda bu konu hakkında daha fazla bilgi edinebilirsiniz.
Biraz daha ayrıntılı incelediğimizde, üst düzey INP entries dizisindeki tek etkinliğin aksine processedEventEntries içinde beş etkinlik olduğunu görüyoruz. Farkı nedir?
processedEventEntries: [
{
name: 'mouseover',
entryType: 'event',
startTime: 1801.6,
duration: 344,
processingStart: 1825.3,
processingEnd: 1825.3,
cancelable: true
},
{
name: 'mousedown',
entryType: 'event',
startTime: 1801.6,
duration: 344,
processingStart: 1825.3,
processingEnd: 1825.3,
cancelable: true
},
{name: 'mousedown', ...},
{name: 'mouseup', ...},
{name: 'click', ...},
],
En üst düzey giriş, INP etkinliğidir. Bu örnekte tıklama etkinliği kullanılmıştır. İlişkilendirme processedEventEntries, aynı çerçeve sırasında işlenen tüm etkinliklerdir. Yalnızca tıklama etkinliğini değil, mouseover ve mousedown gibi diğer etkinlikleri de içerdiğini unutmayın. Diğer etkinliklerin de yavaş olması durumunda bu etkinlikler de yavaş yanıt vermeye katkıda bulunduğundan bu etkinlikler hakkında bilgi sahibi olmak çok önemlidir.
Son olarak, longAnimationFrameEntries dizisi vardır. Bu tek bir giriş olabilir ancak etkileşimin birden fazla kareye yayılabileceği durumlar da vardır. Burada, tek bir işlenmesi uzun süren animasyon çerçevesi içeren en basit durumu görüyoruz.
longAnimationFrameEntries
LoAF girişini genişletme:
longAnimationFrameEntries: [{
name: 'long-animation-frame',
startTime: 1823,
duration: 319,
renderStart: 2139.5,
styleAndLayoutStart: 2139.7,
firstUIEventTimestamp: 1801.6,
blockingDuration: 268,
scripts: [{...}]
}],
Burada, stil oluşturmaya harcanan süreyi ayrıntılı olarak göstermek gibi bir dizi faydalı değer bulunur. Long Animation Frames API makalesinde bu özellikler daha ayrıntılı olarak ele alınmaktadır. Şu anda öncelikle scripts özelliğiyle ilgileniyoruz. Bu özellik, uzun süren karelerden sorumlu komut dosyalarıyla ilgili ayrıntılar sağlayan girişler içerir:
scripts: [{
name: 'script',
invoker: 'BUTTON#confirm.onclick',
invokerType: 'event-listener',
startTime: 1828.6,
executionStart: 1828.6,
duration: 294,
sourceURL: 'http://localhost:8080/third-party/cmp.js',
sourceFunctionName: '',
sourceCharPosition: 1144
}]
Bu durumda, zamanın öncelikle BUTTON#confirm.onclick üzerinde çağrılan tek bir event-listener içinde geçirildiğini söyleyebiliriz. Hatta komut dosyası kaynağı URL'sini ve işlevin tanımlandığı karakter konumunu bile görebiliriz.
Önemli nokta
Bu ilişkilendirme verilerinden bu olayla ilgili ne belirlenebilir?
- Etkileşim,
button#confirmöğesinin (bir komut dosyası ilişkilendirme girişindekiattribution.interactionTargetveinvokermülkünden) tıklanmasıyla tetiklendi. - Zamanın büyük bir kısmı etkinlik dinleyicilerini yürütmekle geçti (toplam metrik
valueile karşılaştırıldığındaattribution.processingDuration). - Yavaş etkinlik işleyici kodu,
third-party/cmp.jsiçinde tanımlanan bir tıklama işleyiciden (scripts.sourceURLiçinden) başlar.
Bu veriler, nerede optimizasyon yapmamız gerektiğini anlamak için yeterlidir.
6. Birden fazla etkinlik işleyici
Geliştirici Araçları konsolunun temizlenmesi ve çerez izni etkileşiminin artık en uzun etkileşim olmaması için sayfayı yenileyin.
Arama kutusuna yazmaya başlayın. İlişkilendirme verileri neyi gösterir? Ne olduğunu düşünüyorsunuz?
İlişkilendirme verileri
İlk olarak, demoyu test etme örneğinin üst düzey bir taramasını yapalım:
{
name: 'INP',
value: 1072,
rating: 'poor',
attribution: {
interactionTargetElement: Element,
interactionTarget: '#search-terms',
interactionType: 'keyboard',
inputDelay: 3.3,
processingDuration: 1060.6,
presentationDelay: 8.1,
processedEventEntries: [...],
longAnimationFrameEntries: [...],
}
}
Bu, input#search-terms öğesiyle klavye etkileşiminden elde edilen kötü bir INP değeridir (CPU sınırlaması etkinleştirilmiş). Zamanın büyük bir kısmı (toplam 1.072 milisaniyelik INP'nin 1.061 milisaniyesi) işleme süresinde harcandı.
Ancak scripts girişleri daha ilgi çekicidir.
Düzen karmaşası
scripts dizisinin ilk girişi bize değerli bir bağlam sunuyor:
scripts: [{
name: 'script',
invoker: 'BUTTON#confirm.onclick',
invokerType: 'event-listener',
startTime: 4875.6,
executionStart: 4875.6,
duration: 497,
forcedStyleAndLayoutDuration: 388,
sourceURL: 'http://localhost:8080/js/index.js',
sourceFunctionName: 'handleSearch',
sourceCharPosition: 940
},
...]
İşleme süresinin büyük bir kısmı, bu komut dosyası yürütülürken gerçekleşir. Bu, bir input dinleyicidir (çağıran INPUT#search-terms.oninput). İşlev adı (handleSearch) ve index.js kaynak dosyasındaki karakter konumu verilir.
Ancak yeni bir özellik var: forcedStyleAndLayoutDuration. Bu, tarayıcının sayfayı yeniden düzenlemeye zorlandığı bu komut dosyası çağrısında harcanan süredir. Diğer bir deyişle, bu etkinlik işleyicinin yürütülmesinde harcanan sürenin% 78'i (497 milisaniyenin 388 milisaniyesi) aslında düzen karmaşasıyla harcanmıştır.
Bu sorun, düzeltilmesi gereken en önemli sorunlardan biridir.
Tekrar dinleyenler
Aşağıdaki iki komut dosyası girişinde tek tek ele alındığında özellikle dikkat çekici bir durum yoktur:
scripts: [...,
{
name: 'script',
invoker: '#document.onkeyup',
invokerType: 'event-listener',
startTime: 5375.3,
executionStart: 5375.3,
duration: 124,
sourceURL: 'http://localhost:8080/js/index.js',
sourceFunctionName: '',
sourceCharPosition: 1526,
},
{
name: 'script',
invoker: '#document.onkeyup',
invokerType: 'event-listener',
startTime: 5673.9,
executionStart: 5673.9,
duration: 95,
sourceURL: 'http://localhost:8080/js/index.js',
sourceFunctionName: '',
sourceCharPosition: 1526
}]
Her iki giriş de keyup dinleyicidir ve biri diğerinin hemen ardından yürütülür. Dinleyiciler anonim işlevlerdir (bu nedenle sourceFunctionName mülkünde hiçbir şey raporlanmaz) ancak yine de bir kaynak dosyamız ve karakter konumumuz vardır. Bu sayede kodun nerede olduğunu bulabiliriz.
İlginç olan, her ikisinin de aynı kaynak dosyadan ve karakter konumundan gelmesidir.
Tarayıcı, tek bir animasyon karesinde birden fazla tuşa basma işlemini işlediğinden bu etkinlik işleyicisi, herhangi bir şey çizilmeden önce iki kez çalıştı.
Bu etki, etkinlik dinleyicilerinin tamamlanması ne kadar uzun sürerse o kadar fazla ek giriş etkinliğinin gelmesiyle birleşebilir ve yavaş etkileşimi daha da uzatabilir.
Bu bir arama/otomatik tamamlama etkileşimi olduğundan, girişi ardışık tekrar işlemiyle işlemek iyi bir strateji olacaktır. Böylece, kare başına en fazla bir tuşa basma işlemi işlenir.
7. Giriş gecikmesi
Giriş gecikmelerinin (kullanıcının etkileşime girmesinden etkinlik işleyicinin etkileşimi işlemeye başlayabileceği zamana kadar geçen süre) tipik nedeni, ana iş parçacığının meşgul olmasıdır. Bunun birden fazla nedeni olabilir:
- Sayfa yükleniyor ve ana iş parçacığı, DOM'u ayarlama, sayfayı düzenleme ve stil verme, komut dosyalarını değerlendirme ve çalıştırma gibi ilk işlemleri yapmakla meşgul.
- Sayfa genellikle yoğundur (ör. hesaplamalar, komut dosyasına dayalı animasyonlar veya reklamlar çalıştırılıyordur).
- Önceki etkileşimlerin işlenmesi çok uzun sürdüğünden gelecekteki etkileşimler gecikir. Bu durum, son örnekte görülmüştür.
Demo sayfasında, sayfanın üst kısmındaki salyangoz logosunu tıkladığınızda animasyonun başlayacağı ve ana iş parçacığında yoğun JavaScript çalışması yapılacağı gizli bir özellik vardır.
- Animasyonu başlatmak için salyangoz logosunu tıklayın.
- JavaScript görevleri, salyangoz zıplamanın en alt noktasında olduğunda tetiklenir. Sayfayla, hemen çıkma işleminin en alt kısmına mümkün olduğunca yakın bir noktada etkileşim kurmayı deneyin ve tetikleyebileceğiniz INP değerinin ne kadar yüksek olduğunu görün.
Örneğin, salyangoz zıplarken arama kutusunu tıklayıp odaklama gibi başka hiçbir etkinlik dinleyiciyi tetiklemeseniz bile ana iş parçacığı çalışması, sayfanın fark edilebilir bir süre boyunca yanıt vermemesine neden olur.
Birçok sayfada, ana iş parçacığındaki yoğun çalışma bu kadar iyi davranmayacaktır ancak bu, INP ilişkilendirme verilerinde nasıl tanımlanabileceğini görmek için iyi bir gösterimdir.
Aşağıda, salyangoz sıçraması sırasında yalnızca arama kutusuna odaklanmaya dayalı bir ilişkilendirme örneği verilmiştir:
{
name: 'INP',
value: 728,
rating: 'poor',
attribution: {
interactionTargetElement: Element,
interactionTarget: '#search-terms',
interactionType: 'pointer',
inputDelay: 702.3,
processingDuration: 4.9,
presentationDelay: 20.8,
longAnimationFrameEntries: [{
name: 'long-animation-frame',
startTime: 2064.8,
duration: 790,
renderStart: 2065,
styleAndLayoutStart: 2854.2,
firstUIEventTimestamp: 0,
blockingDuration: 740,
scripts: [{...}]
}]
}
}
Tahmin edildiği gibi, etkinlik dinleyicileri hızlı bir şekilde yürütüldü.İşleme süresi 4, 9 milisaniye olarak gösterildi ve kötü etkileşimin büyük çoğunluğu giriş gecikmesinde harcandı.Toplam 728 milisaniyenin 702, 3 milisaniyesi giriş gecikmesiyle geçti.
Bu durumu ayıklamak zor olabilir. Kullanıcının neyle ve nasıl etkileşimde bulunduğunu bilmemize rağmen, etkileşimin bu kısmının hızlıca tamamlandığını ve sorun olmadığını da biliyoruz. Bunun yerine, sayfadaki başka bir şey etkileşimin işlenmeye başlamasını geciktiriyordu. Ancak aramaya nereden başlayacağımızı nasıl bilebilirdik?
LoAF komut dosyası girişleri, bu sorunu çözmek için kullanılabilir:
scripts: [{
name: 'script',
invoker: 'SPAN.onanimationiteration',
invokerType: 'event-listener',
startTime: 2065,
executionStart: 2065,
duration: 788,
sourceURL: 'http://localhost:8080/js/index.js',
sourceFunctionName: 'cryptodaphneCoinHandler',
sourceCharPosition: 1831
}]
Bu işlevin etkileşimle hiçbir ilgisi olmasa da animasyon karesini yavaşlattığı için etkileşim etkinliğiyle birleştirilen LoAF verilerine dahil edilir.
Bu sayede, etkileşim işlemeyi geciktiren işlevin nasıl tetiklendiğini (bir animationiteration dinleyicisi tarafından), tam olarak hangi işlevin sorumlu olduğunu ve kaynak dosyalarımızda nerede bulunduğunu görebiliriz.
8. Sunum gecikmesi: Güncelleme çizilemediğinde
Sunum gecikmesi, etkinlik dinleyicilerinin çalışması tamamlandıktan sonra tarayıcının ekrana yeni bir çerçeve çizerek kullanıcıya görünür geri bildirim göstermesine kadar geçen süreyi ölçer.
INP değerini tekrar sıfırlamak için sayfayı yenileyin, ardından hamburger menüsünü açın. Açıldığında kesinlikle bir aksaklık var.
Bu nasıl görünür?
{
name: 'INP',
value: 376,
rating: 'needs-improvement',
delta: 352,
attribution: {
interactionTarget: '#sidenav-button>svg',
interactionType: 'pointer',
inputDelay: 12.8,
processingDuration: 14.7,
presentationDelay: 348.5,
longAnimationFrameEntries: [{
name: 'long-animation-frame',
startTime: 651,
duration: 365,
renderStart: 673.2,
styleAndLayoutStart: 1004.3,
firstUIEventTimestamp: 138.6,
blockingDuration: 315,
scripts: [{...}]
}]
}
}
Bu sefer yavaş etkileşimin büyük bir kısmını sunum gecikmesi oluşturuyor. Yani ana iş parçacığını engelleyen her şey, etkinlik dinleyicileri tamamlandıktan sonra gerçekleşir.
scripts: [{
entryType: 'script',
invoker: 'FrameRequestCallback',
invokerType: 'user-callback',
startTime: 673.8,
executionStart: 673.8,
duration: 330,
sourceURL: 'http://localhost:8080/js/side-nav.js',
sourceFunctionName: '',
sourceCharPosition: 1193,
}]
scripts dizisindeki tek girişe baktığımızda, FrameRequestCallback konumundan user-callback konumuna scripts süresinin harcandığını görüyoruz. Bu kez sunu gecikmesi, requestAnimationFrame geri çağırmasından kaynaklanıyor.
9. Sonuç
Alan verilerini toplama
Tek bir sayfa yüklemesinden gelen tek bir INP ilişkilendirme girişine bakıldığında tüm bunların daha kolay olduğunu belirtmek gerekir. Bu veriler, saha verilerine dayalı INP hatalarını ayıklamak için nasıl toplanabilir? Faydalı ayrıntıların çok olması bu durumu daha da zorlaştırıyor.
Örneğin, hangi sayfa öğesinin yavaş etkileşimlerin yaygın bir kaynağı olduğunu bilmek son derece yararlıdır. Ancak sayfanızda derlenmiş ve derlemeden derlemeye değişen CSS sınıf adları varsa aynı öğedeki web-vitals seçicileri derlemeler arasında farklı olabilir.
Bunun yerine, neyin en faydalı olduğunu ve verilerin nasıl toplanabileceğini belirlemek için kendi uygulamanızı düşünmeniz gerekir. Örneğin, ilişkilendirme verilerini geri göndermeden önce web-vitals seçiciyi, hedefin bulunduğu bileşene veya hedefin karşıladığı ARIA rollerine göre kendi tanımlayıcınızla değiştirebilirsiniz.
Benzer şekilde, scripts girişlerinin sourceURL yollarında, birleştirilmelerini zorlaştıran dosya tabanlı karma değerler olabilir. Ancak verileri geri göndermeden önce bilinen derleme sürecinize göre karma değerleri kaldırabilirsiniz.
Maalesef bu kadar karmaşık verilerle kolay bir yol yoktur ancak verilerin bir alt kümesini kullanmak bile hata ayıklama sürecinde hiç ilişkilendirme verisi olmamasından daha değerlidir.
Her yerde atıf!
LoAF tabanlı INP ilişkilendirmesi, güçlü bir hata ayıklama aracıdır. INP sırasında tam olarak ne olduğu hakkında ayrıntılı veriler sunar. Çoğu durumda, optimizasyon çalışmalarınıza başlamanız gereken komut dosyasındaki tam konumu size gösterebilir.
Artık herhangi bir sitede INP ilişkilendirme verilerini kullanmaya hazırsınız.
Bir sayfayı düzenleme erişiminiz olmasa bile, bulabileceklerinizi görmek için Geliştirici Araçları konsolunda aşağıdaki snippet'i çalıştırarak bu codelab'deki süreci yeniden oluşturabilirsiniz:
const script = document.createElement('script');
script.src = 'https://unpkg.com/web-vitals@4/dist/web-vitals.attribution.iife.js';
script.onload = function () {
webVitals.onINP(console.log, {reportAllChanges: true});
};
document.head.appendChild(script);
Daha fazla bilgi
- web.dev: Interaction to Next Paint
- web.dev: Find slow interactions in the field (web.dev: Sahada yavaş etkileşimleri bulma)
- web.dev: Optimize Interaction to Next Paint
- INP'yi anlama Codelab'i