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: 9 Eylül 2025
Sonraki Boyamayla Etkileşim (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 Core Web Vital 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'in 200 milisaniye veya daha kısa olması gerekir. Kullanıcılarınızın çoğu için bu hedefe ulaşmak amacıyla ölçülecek iyi bir eşik, mobil ve masaüstü cihazlara göre segmentlere ayrılmış sayfa yüklemelerinin yüzde 75'lik dilimidir.
Web sitesine bağlı olarak, etkileşim sayısı az olabilir veya hiç olmayabilir. Örneğin, çoğunlukla metin ve resimlerden oluşan, etkileşimli öğe sayısı az olan veya hiç olmayan sayfalar. Metin düzenleyiciler veya oyunlar gibi web sitelerinde ise yüzlerce, hatta binlerce etkileşim olabilir. Her iki durumda da yüksek bir INP değeri varsa kullanıcı deneyimi risk altındadır.
Etkileşim Hazırlığı Süresi'ni (INP) 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üzeltebilmek 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, eksiklikleri gidermeye 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 resmi 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ümünü 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ş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ındadır. 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şimde bulunmaya çalışabilir.
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 yüklenmesi sırasında kullanıcı girişine yanıt vermeye devam etmesi 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 tamamlanmasını sağlamanı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ğırma işlemleri 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çimlendirmeleri 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 anlaşılması zor 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çınma
Bazen zorunlu eşzamanlı düzen olarak da adlandırılan düzen karmaşası, 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 ortaya çıkar 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 gerçekleştirmek için 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, ortaya çıkan görsel değişiklikleri gösteren bir sonraki kareyi boyayabildiği noktaya kadar olan süreyi işaretler.
DOM boyutunu en aza indirme
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 bu nedenle 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. 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. Bu teknikler, ilk DOM boyutunuzu küçük tutmanıza yardımcı olsa da sınırlı bir etkiye sahiptir.
Ekran dışındaki öğeleri geç yüklemek için content-visibility kullanın
Sayfa yükleme sırasında yapılan oluşturma işleminin miktarını ve kullanıcı etkileşimlerine yanıt olarak yapılan oluşturma işleminin miktarını sınırlamanın bir yolu, öğeleri görüntü alanına yaklaştıkça etkili bir şekilde tembelce 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 tekniği araştırmaya 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 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 en az miktarda 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 elde etmekle kalmazsınız. Tarayıcı, bu HTML'yi ayrıştırmayı ve oluşturmayı bitirene kadar verim sağlamaz.
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şine 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 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.