Web sitenizin Interaction to Next Paint değerini 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şimli öğelerin az olduğu veya hiç olmadığı, çoğunlukla metin ve resimlerden oluşan sayfalar gibi az sayıda etkileşim olabilir ya da hiç etkileşim olmayabilir. 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 öğrenme
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.
Sahada 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, eksiklikleri gidermek 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 alan verileriniz olduğunda laboratuvarda test etmeye 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, 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şleme 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şlatma sırasında gerçekleşir. Bir sayfa yüklendiğinde başlangıçta oluşturulur ancak bir sayfanın 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şim kurmaya çalışabilir.
Bir sayfa yüklenirken etkileşimin giriş gecikmesini uzatabilecek bir faktör, komut dosyası değerlendirmesidir. Bir JavaScript dosyası ağdan getirildikten sonra, bu JavaScript'in çalıştırılabilmesi için tarayıcının 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 düşünüyorsanız bir sonraki adım olarak etkinlik geri çağırmalarındaki işi ayrı görevlere ayırmayı deneyebilirsiniz. Bu sayede, toplu çalışma ana ileti dizisini engelleyen uzun bir görev haline gelmez. Böylece, aksi takdirde ana ileti dizisinde bekleyecek olan diğer etkileşimler daha erken çalıştırılabilir.
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 hafif ve hızlı kalır. Ayrıca, görsel güncellemelerin etkinlik geri çağırma kodunu engellemesine izin verilmediğinden etkileşimlerin oluşturulma süresi de 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 yürütün.
- En son değişiklikleri kaydedin (yerel olarak veya uzak bir veritabanına).
Bunu yapmak için aşağıdaki gibi bir kod kullanabilirsiniz:
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 setTimeout() öğesinin requestAnimationFrame() çağrısı içinde kullanılması biraz karmaşık olsa da 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
Düzen karmaşası (bazen zorunlu eşzamanlı düzen olarak da adlandırılır), düzenin eşzamanlı 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.
Stilleri güncelleyip ardından bu stillerin değerlerini JavaScript'te hemen istemek, tarayıcıyı eşzamanlı düzen çalışması yapmaya zorladığı için düzen karmaşası bir performans darboğazıdır. Aksi takdirde tarayıcı, etkinlik geri çağırmaları çalışmayı bitirdikten sonra eşzamansız olarak daha sonra yapmayı bekleyebilirdi.
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 sırasında, büyük bir DOM'un sayfanın ilk durumunu oluşturmak için çok fazla çalışma gerektirdiği durumlarda.
- Büyük bir DOM'un oluşturma güncellemelerinin çok maliyetli olmasına neden olabileceği ve dolayısıyla tarayıcının bir sonraki kareyi sunmasının daha uzun sürebileceği kullanıcı etkileşimlerine yanıt olarak.
Büyük DOM'ların önemli ölçüde küçültülemeyeceği durumlar olabileceğini unutmayın. İlk DOM boyutunuzu küçük tutmak için DOM'unuzu düzleştirme veya kullanıcı etkileşimleri sırasında DOM'a ekleme gibi DOM boyutunu küçültmek için kullanabileceğiniz yaklaşımlar olsa da bu teknikler yalnızca belirli bir noktaya kadar işe yarayabilir.
Ekran dışındaki öğeleri geç oluşturmak için content-visibility kullanın
Hem sayfa yükleme sırasında yapılan oluşturma işini hem de kullanıcı etkileşimlerine yanıt olarak yapılan oluşturma işini 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. Tarayıcı, HTML'yi DOM'a ayrıştırmayı bitirdikten sonra buna stiller 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 çalışmayı durdurması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ızdan emin olmanız gerekir. Aksi takdirde, 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 noktaya 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 gerektirir ancak bu zaman ve çaba karşılığını verir.
Unsplash'ten David Pisnoy tarafından alınan ve Unsplash lisansına uygun şekilde değiştirilen ana görsel.