Web sitenizin Interaction to Next Paint metriğini nasıl optimize edeceğinizi öğrenin.
Yayınlanma tarihi: 19 Mayıs 2023, Son güncelleme tarihi: 2 Eylül 2025
Interaction to Next Paint (INP), kullanıcının sayfayı ziyaret ettiği süre boyunca meydana gelen tüm uygun etkileşimlerin gecikmesini gözlemleyerek bir sayfanın kullanıcı etkileşimlerine genel olarak yanıt verme oranını değerlendiren kararlı bir Önemli Web Verisi metriğidir. Nihai INP değeri, gözlemlenen en uzun etkileşimdir (bazen aykırı değerler göz ardı edilir).
İyi bir kullanıcı deneyimi sağlamak için web sitelerinde Interaction to Next Paint değeri 200 milisaniye veya daha az olmalıdır. Kullanıcılarınızın büyük çoğunluğu açısından bu hedefe ulaşmak için mobil ve masaüstü cihazlarda bölümlendirilmiş sayfa yüklemelerinin 75. yüzdelik dilim eşiğini ölçebilirsiniz.
Web sitesine bağlı olarak, etkileşim sayısı az olabilir veya hiç olmayabilir. Örneğin, çoğunlukla metin ve resimlerden oluşan, az sayıda veya hiç etkileşimli öğe içermeyen sayfalar olabilir. Metin düzenleyiciler veya oyunlar gibi web sitelerinde ise yüzlerce, hatta binlerce etkileşim olabilir. Her iki durumda da yüksek INP olduğunda kullanıcı deneyimi risk altındadır.
INP'yi iyileştirmek zaman ve çaba gerektirir ancak karşılığında daha iyi bir kullanıcı deneyimi elde edersiniz. Bu kılavuzda, INP'yi iyileştirme yolu ele alınacaktır.
Kötü INP'ye neyin neden olduğunu belirleme
Yavaş etkileşimleri düzeltebilmeniz için web sitenizin INP'sinin kötü olup olmadığını veya iyileştirilmesi gerekip gerekmediğini belirten verilere ihtiyacınız vardır. Bu bilgilere sahip olduğunuzda, yavaş etkileşimleri teşhis etmeye başlamak için laboratuvara geçebilir ve çözüm bulmak için çalışabilirsiniz.
Sahadaki yavaş etkileşimleri bulma
İdeal olarak, INP optimizasyonu yolculuğunuz alan verileriyle başlar. En iyi durumda, bir Gerçek Kullanıcı İzleme (RUM) sağlayıcısından alınan alan verileri size yalnızca bir sayfanın INP değerini değil, aynı zamanda INP değerinin kendisinden hangi etkileşimin sorumlu olduğunu, etkileşimin sayfa yükleme sırasında mı yoksa sonrasında mı gerçekleştiğini, etkileşimin türünü (tıklama, tuşa basma veya dokunma) ve diğer değerli bilgileri vurgulayan bağlamsal verileri de verir.
Alan verilerini almak için bir RUM sağlayıcısından yararlanmıyorsanız INP alan verileri kılavuzunda, boşlukları doldurmaya yardımcı olması için Chrome Kullanıcı Deneyimi Raporu (CrUX) verilerini görüntülemek üzere PageSpeed Insights'ı kullanmanız önerilir. CrUX, Core Web Vitals programının Google veri kümesidir ve INP dahil olmak üzere milyonlarca web sitesinin metrikleriyle ilgili üst düzey bir özet sağlar. Ancak CrUX, sorunları analiz etmenize yardımcı olmak için genellikle bir RUM sağlayıcısından alacağınız bağlamsal verileri sağlamaz. Bu nedenle, mümkün olduğunda sitelerin bir RUM sağlayıcısı kullanmasını veya CrUX'ta sunulanları tamamlamak için kendi RUM çözümlerini uygulamalarını öneririz.
Laboratuvarda yavaş etkileşimleri teşhis etme
İdeal olarak, yavaş etkileşimleriniz olduğunu gösteren saha verileriniz olduğunda laboratuvarda test yapmaya başlamak istersiniz. Alan verileri olmadığında laboratuvarda yavaş etkileşimleri belirlemek için bazı stratejiler vardır. Bu tür stratejiler arasında, yaygın kullanıcı akışlarını takip etme ve yol boyunca etkileşimleri test etmenin yanı sıra kullanıcı deneyiminin bu önemli bölümünde yavaş etkileşimleri belirlemek için ana iş parçacığı genellikle en yoğun olduğu sırada yükleme sırasında sayfayla etkileşim kurma yer alır.
Etkileşimleri optimize etme
Yavaş bir etkileşimi belirledikten ve laboratuvarda manuel olarak yeniden oluşturabildikten sonraki adım, bu etkileşimi optimize etmektir.
Etkileşimler üç alt bölüme ayrılabilir:
- Kullanıcı sayfayla etkileşime başladığında başlayan ve etkileşim için etkinlik geri çağırmaları çalışmaya başladığında sona eren giriş gecikmesi.
- Etkinlik geri çağırmalarının tamamlanması için gereken süreyi içeren işlem süresi.
- Sunum gecikmesi: Tarayıcının, etkileşimin görsel sonucunu içeren bir sonraki kareyi sunması için geçen süre.
Bu üç alt bölümün toplamı, toplam etkileşim gecikmesini oluşturur. Bir etkileşimin her bir alt bölümü, toplam etkileşim gecikmesine belirli bir süre katkıda bulunur. Bu nedenle, etkileşimin her bölümünü mümkün olduğunca kısa sürede çalışacak şekilde nasıl optimize edebileceğinizi bilmeniz önemlidir.
Giriş gecikmesini belirleme ve azaltma
Bir kullanıcı bir sayfayla etkileşimde bulunduğunda bu etkileşimin ilk kısmı giriş gecikmesidir. Sayfadaki diğer etkinliklere bağlı olarak giriş gecikmeleri önemli ölçüde uzun olabilir. Bu durum, ana iş parçacığında gerçekleşen etkinliklerden (ör. komut dosyalarının yüklenmesi, ayrıştırılması ve derlenmesi), getirme işlemlerinden, zamanlayıcı işlevlerinden veya hatta hızlı bir şekilde gerçekleşen ve birbirleriyle çakışan diğer etkileşimlerden kaynaklanabilir.
Etkileşimin giriş gecikmesinin kaynağı ne olursa olsun, etkileşimlerin etkinlik geri çağırmalarını en kısa sürede çalıştırmaya başlayabilmesi için giriş gecikmesini minimuma indirmeniz gerekir.
Başlangıç sırasında komut dosyası değerlendirmesi ve uzun görevler arasındaki ilişki
Sayfa yaşam döngüsündeki etkileşimin kritik bir yönü başlangıç aşamasıdır. Bir sayfa yüklendiğinde başlangıçta oluşturulur ancak bir sayfanın yalnızca oluşturulmuş olması, sayfanın yüklenmesinin tamamlandığı anlamına gelmez. Bir sayfanın tam olarak işlevsel hale gelmesi için gereken kaynak sayısına bağlı olarak, kullanıcılar sayfa yüklenirken etkileşimde bulunmaya çalışabilir.
Sayfa yüklenirken etkileşimin giriş gecikmesini uzatabilecek bir durum, komut dosyası değerlendirmesidir. Bir JavaScript dosyası ağdan getirildikten sonra, tarayıcının bu JavaScript'in çalıştırılabilmesi için yapması gereken işlemler vardır. Bu işlemler arasında, söz diziminin geçerli olup olmadığını kontrol etmek için bir komut dosyasını ayrıştırmak, bunu bayt koduna derlemek ve son olarak yürütmek yer alır.
Bu işlem, komut dosyasının boyutuna bağlı olarak ana ileti dizisinde uzun görevlere neden olabilir. Bu da tarayıcının diğer kullanıcı etkileşimlerine yanıt vermesini geciktirir. Sayfanızın, sayfa yükleme sırasında kullanıcı girişine yanıt vermeye devam etmesini sağlamak için sayfa yükleme sırasında uzun görevlerin olasılığını azaltmak üzere neler yapabileceğinizi anlamanız önemlidir. Böylece sayfa hızlı kalır.
Etkinlik geri çağırma işlevlerini optimize etme
Giriş gecikmesi, INP'nin ölçtüğü şeyin yalnızca ilk kısmıdır. Ayrıca, kullanıcı etkileşimine yanıt olarak çalışan etkinlik geri çağırmalarının mümkün olduğunca hızlı bir şekilde tamamlanabildiğinden de emin olmanız gerekir.
Ana ileti dizisine sık sık geçiş yapın
Etkinlik geri çağırmalarını optimize etmeyle ilgili en iyi genel tavsiye, bu geri çağırmalarda mümkün olduğunca az işlem yapmaktır. Ancak etkileşim mantığınız karmaşık olabilir ve yaptıkları işi yalnızca marjinal olarak azaltabilirsiniz.
Web sitenizde durumun böyle olduğunu fark ederseniz bir sonraki adım olarak etkinlik geri çağırmalarındaki işi ayrı görevlere ayırmayı deneyebilirsiniz. Bu sayede, toplu çalışma ana iş parçacığını engelleyen uzun süren görev haline gelmez. Böylece, aksi takdirde ana iş parçacığında bekleyecek olan diğer etkileşimler daha erken çalışabilir.
setTimeout, görevleri bölmenin bir yoludur. Çünkü kendisine iletilen geri çağırma yeni bir görevde çalışır. setTimeout işlevini tek başına kullanabilir veya daha ergonomik bir sonuç için kullanımını ayrı bir işlevde soyutlayabilirsiniz.
Ayırt etmeden işlem yapmak hiç işlem yapmamaktan daha iyidir. Ancak ana iş parçacığına işlem yapmanın daha ayrıntılı bir yolu vardır. Bu yol, yalnızca kullanıcı arayüzünü güncelleyen bir etkinlik geri çağırmasından hemen sonra işlem yapmayı içerir. Böylece oluşturma mantığı daha erken çalışabilir.
Oluşturma işleminin daha erken gerçekleşmesi için kontrolü bırakma
Daha gelişmiş bir getiri tekniği, etkinlik geri çağırmalarınızdaki kodu, yalnızca bir sonraki kare için görsel güncellemeleri uygulamak üzere gereken mantıkla sınırlayacak şekilde yapılandırmayı içerir. Diğer her şey sonraki bir göreve ertelenebilir. Bu sayede geri çağırmalar hem hafif ve hızlı kalır hem de görsel güncellemelerin etkinlik geri çağırma kodunu engellemesine izin verilmediğinden etkileşimlerin oluşturulma süresi iyileşir.
Örneğin, yazdıkça metni biçimlendiren ancak yazdıklarınıza yanıt olarak kullanıcı arayüzünün diğer yönlerini de güncelleyen (ör. kelime sayısı, yazım hatalarını vurgulama ve diğer önemli görsel geri bildirimler) bir zengin metin düzenleyici düşünün. Ayrıca, uygulamadan ayrılıp geri döndüğünüzde yazdıklarınızın kaybolmaması için yazdıklarınızı kaydetmesi de gerekebilir.
Bu örnekte, kullanıcının yazdığı karakterlere yanıt olarak şu dört şeyin gerçekleşmesi gerekir. Ancak bir sonraki kare gösterilmeden önce yalnızca ilk öğenin yapılması gerekir.
- Metin kutusunu kullanıcının yazdıklarıyla güncelleyin ve gerekli biçimlendirmeyi uygulayın.
- Kullanıcı arayüzünün geçerli kelime sayısını gösteren bölümünü güncelleyin.
- Yazım hatalarını kontrol etmek için mantık çalıştırın.
- En son değişiklikleri kaydedin (yerel olarak veya uzak bir veritabanına).
Bunu yapmak için kullanacağınız kod aşağıdaki gibi görünebilir:
textBox.addEventListener('input', (inputEvent) => {
// Update the UI immediately, so the changes the user made
// are visible as soon as the next frame is presented.
updateTextBox(inputEvent);
// Use `setTimeout` to defer all other work until at least the next
// frame by queuing a task in a `requestAnimationFrame()` callback.
requestAnimationFrame(() => {
setTimeout(() => {
const text = textBox.textContent;
updateWordCount(text);
checkSpelling(text);
saveChanges(text);
}, 0);
});
});
Aşağıdaki görselleştirme, kritik olmayan güncellemelerin bir sonraki kareye kadar ertelenmesinin işlem süresini ve dolayısıyla genel etkileşim gecikmesini nasıl azaltabileceğini gösterir.
Önceki kod örneğinde requestAnimationFrame() çağrısı içinde setTimeout() kullanmanın biraz ezoterik olduğu kabul edilse de kritik olmayan kodun sonraki kareyi engellemesini önlemek için tüm tarayıcılarda çalışan etkili bir yöntemdir.
Düzen karmaşasından kaçının
Bazen zorunlu senkron düzen olarak da adlandırılan düzen karmaşası, düzenin senkron olarak gerçekleştiği bir oluşturma performansı sorunudur. Bu durum, JavaScript'te stilleri güncelleyip aynı görevde okuduğunuzda meydana gelir ve JavaScript'te düzen karmaşasına neden olabilecek birçok özellik vardır.
Stiller güncellenip bu stillerin değerleri JavaScript'te hemen istendiğinde tarayıcı, normalde olay geri çağırmaları çalışmayı bitirdikten sonra eşzamansız olarak gerçekleştirebileceği eşzamanlı düzen çalışması yapmaya zorlandığı için düzen karmaşası bir performans darboğazıdır.
Sunum gecikmesini en aza indirme
Bir etkileşimin sunum gecikmesi, etkileşimin etkinlik geri çağırmaları çalışmayı tamamladığı andan tarayıcının, sonuçtaki görsel değişiklikleri gösteren bir sonraki kareyi boyayabildiği noktaya kadar olan süreyi işaretler.
DOM boyutunu küçültün
Bir sayfanın DOM'u küçük olduğunda oluşturma işlemi genellikle hızlı bir şekilde tamamlanır. Ancak DOM'lar çok büyüdüğünde oluşturma işi, artan DOM boyutuyla birlikte ölçeklenir. Oluşturma çalışması ile DOM boyutu arasındaki ilişki doğrusal değildir ancak büyük DOM'ların oluşturulması için küçük DOM'lara kıyasla daha fazla çalışma gerekir. Büyük bir DOM iki durumda sorun yaratır:
- İlk sayfa oluşturma işlemi sırasında, büyük bir DOM'un sayfanın ilk durumunu oluşturmak için çok fazla çalışma gerektirdiği durumlarda.
- Kullanıcı etkileşimine yanıt olarak büyük bir DOM, oluşturma güncellemelerinin çok maliyetli olmasına neden olabilir ve bu nedenle tarayıcının sonraki kareyi sunması için gereken süreyi artırabilir.
Büyük DOM'ların önemli ölçüde küçültülemeyeceği durumlar olabileceğini unutmayın. DOM boyutunu küçültmek için DOM'unuzu düzleştirme veya kullanıcı etkileşimleri sırasında DOM'a ekleme gibi yaklaşımlar kullanabilirsiniz. Ancak bu teknikler yalnızca belirli bir noktaya kadar işe yarayabilir.
Ekran dışındaki öğeleri geç oluşturmak için content-visibility kullanın
Sayfa yükleme sırasında yapılan oluşturma çalışması miktarını ve kullanıcı etkileşimlerine yanıt olarak yapılan oluşturma çalışması miktarını sınırlamanın bir yolu, öğeleri görüntü alanına yaklaştıkça etkili bir şekilde tembel oluşturmaya karşılık gelen CSS content-visibility özelliğini kullanmaktır. content-visibility etkili bir şekilde kullanmak için biraz pratik gerektirse de sonuç, sayfanızın INP'sini iyileştirebilecek daha kısa oluşturma süresi ise bu özelliği incelemeye değer.
JavaScript kullanarak HTML oluştururken performans maliyetlerine dikkat edin
HTML'nin olduğu her yerde HTML ayrıştırma vardır ve tarayıcı, HTML'yi DOM'a ayrıştırmayı bitirdikten sonra stilleri uygulamalı, düzen hesaplamaları yapmalı ve ardından bu düzeni oluşturmalıdır. Bu kaçınılmaz bir maliyettir ancak HTML'yi nasıl oluşturduğunuz önemlidir.
Sunucu HTML gönderdiğinde, tarayıcıya akış olarak ulaşır. Akış, sunucudan gelen HTML yanıtının parçalar halinde geldiği anlamına gelir. Tarayıcı, akışın parçalarını geldikçe artımlı olarak ayrıştırıp bit bit oluşturarak akışı nasıl işleyeceğini optimize eder. Bu, tarayıcının sayfa yükleme sırasında periyodik olarak ve otomatik olarak örtülü şekilde sonuç vermesiyle ilgili bir performans optimizasyonudur ve bu optimizasyondan ücretsiz olarak yararlanabilirsiniz.
Herhangi bir web sitesine yapılan ilk ziyarette her zaman bir miktar HTML kullanılır. Ancak yaygın bir yaklaşımda, başlangıçta minimum düzeyde HTML kullanılır ve ardından içerik alanını doldurmak için JavaScript kullanılır. İçerik alanında yapılan sonraki güncellemeler de kullanıcı etkileşimleri sonucunda gerçekleşir. Bu genellikle tek sayfalık uygulama (SPA) modeli olarak adlandırılır. Bu kalıbın bir dezavantajı, HTML'yi istemcide JavaScript ile oluşturduğunuzda yalnızca bu HTML'yi oluşturmak için JavaScript işlemenin maliyetini değil, aynı zamanda tarayıcının bu HTML'yi ayrıştırmayı ve oluşturmayı bitirene kadar verim sağlamamasını da elde etmenizdir.
Ancak olmayan web sitelerinin bile etkileşimler sonucunda JavaScript aracılığıyla bir miktar HTML oluşturma içereceğini unutmamak önemlidir. Bu durum, genellikle sorun oluşturmaz. Ancak istemcide büyük miktarda HTML oluşturmadığınız sürece bir sonraki karenin gösterimi gecikebilir. Ancak, tarayıcıda HTML oluşturmaya yönelik bu yaklaşımın performans üzerindeki etkilerini ve JavaScript kullanarak çok fazla HTML oluşturuyorsanız web sitenizin kullanıcı girişlerine verdiği yanıtı nasıl etkileyebileceğini anlamanız önemlidir.
Sonuç
Sitenizin INP'sini iyileştirmek yinelenen bir süreçtir. Sahada yavaş bir etkileşimi düzelttiğinizde, özellikle web sitenizde çok fazla etkileşim varsa başka yavaş etkileşimler de bulmaya başlarsınız ve bunları da optimize etmeniz gerekir.
INP'yi iyileştirmenin anahtarı, ısrarlı olmaktır. Zamanla, sayfanızın duyarlılığını, kullanıcılara sunduğunuz deneyimden memnun kalacakları bir düzeye getirebilirsiniz. Kullanıcılarınız için yeni özellikler geliştirirken onlara özel etkileşimleri optimize etmek için aynı süreci uygulamanız da gerekebilir. Bu işlem zaman ve çaba gerektirse de harcadığınız zaman ve çabaya değer.
Unsplash'ten David Pisnoy tarafından alınan ve Unsplash lisansına uygun şekilde değiştirilen ana görsel.