Web sitenizin Interaction to Next Paint metriğini nasıl optimize edeceğinizi öğrenin.
Sonraki Boyamayla Etkileşim (INP), kullanıcının bir sayfayı ziyaret ettiği süre boyunca gerçekleşen tüm uygun etkileşimlerin gecikmesini gözlemleyerek sayfanın kullanıcı etkileşimlerine genel yanıt verme durumunu değerlendiren kararlı bir Core Web Vitals 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 sitelerinin Sonraki Boyama ile Etkileşimin 200 milisaniye veya daha kısa olmasını sağlamaları gerekir. Kullanıcılarınızın çoğu için bu hedefe ulaştığınızdan emin olmak amacıyla, mobil ve masaüstü cihazlara göre segmentlere ayrılmış sayfa yüklemelerinin yüzde 75'lik dilimi iyi bir eşiktir.
Web sitesine bağlı olarak, etkileşim çok az veya hiç olmayabilir (ör. çoğunlukla metin ve resimlerden oluşan, etkileşimli öğelerin çok az veya hiç olmadığı sayfalar). Metin düzenleyiciler veya oyunlar gibi web sitelerinde ise yüzlerce hatta binlerce etkileşim olabilir. Her iki durumda da, yüksek INP'nin olduğu yerlerde kullanıcı deneyimi risk altındadır.
INP'yi iyileştirmek zaman ve çaba ister ancak karşılığında daha iyi bir kullanıcı deneyimi sunulur. Bu kılavuzda, INP'yi iyileştirmenin bir yolu incelenecektir.
INP'nin düşük olmasına neyin neden olduğunu öğrenme
Yavaş etkileşimleri düzeltmeden önce, web sitenizin INP'sinin düşük olup olmadığını veya iyileştirmeye ihtiyaç duyup duymadığını gösteren verilere ihtiyacınız vardır. Bu bilgilere sahip olduktan sonra, yavaş etkileşimleri teşhis etmeye başlamak için laboratuvara geçebilir ve bir çözüme doğru ilerleyebilirsiniz.
Sahadaki yavaş etkileşimleri bulma
İdeal olarak, INP'yi optimize etme yolculuğunuz alan verileri ile başlar. Gerçek Kullanıcı İzleme (RUM) sağlayıcısından alınan alan verileri, yalnızca bir sayfanın INP değerini değil, aynı zamanda INP değerinden 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 içerik verileri sağlar.
Alan verileri almak için bir RUM sağlayıcı kullanmıyorsanız INP alan verileri kılavuzunda, boşlukları doldurmak amacıyla PageSpeed Insights aracılığıyla Chrome Kullanıcı Deneyimi Raporu'nu (CrUX) kullanmanızı önerilir. CrUX, Core Web Vitals programının resmi veri kümesidir ve INP dahil olmak üzere milyonlarca web sitesi için metriklerin üst düzey bir özetini sağlar. Ancak CrUX, sorunları analiz etmenize yardımcı olmak için genellikle bir RUM sağlayıcıdan alacağınız bağlamsal verileri sağlamaz. Bu nedenle, sitelerin mümkün olduğunda bir RUM sağlayıcı kullanmasını veya CrUX'ta mevcut olanları desteklemek için kendi RUM çözümlerini uygulamasını öneririz.
Laboratuvarda yavaş etkileşimleri teşhis etme
İdeal olarak, yavaş etkileşimleriniz olduğunu gösteren saha verilerine sahip olduktan sonra laboratuvarda teste başlamak istersiniz. Saha verileri olmadığında, laboratuvarda yavaş etkileşimleri belirlemek için bazı stratejiler vardır. Bu tür stratejiler, kullanıcı deneyiminin bu önemli bölümünde yavaş etkileşimleri ortaya çıkarmak için, genel kullanıcı akışlarını takip etmeyi ve süreç boyunca etkileşimleri test etmeyi, ayrıca ana iş parçacığının en yoğun olduğu zamanlarda sayfayla etkileşimde bulunmayı içerir.
Etkileşimleri optimize etme
Yavaş bir etkileşimi belirledikten ve laboratuvarda manuel olarak yeniden oluşturabildikten sonra, bir sonraki adım bu etkileşimi optimize etmektir. Etkileşimler üç aşamaya ayrılabilir:
- Kullanıcı sayfayla bir etkileşim başlattığı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 geçen süreyi içeren işleme süresi.
- Tarayıcının etkileşimin görsel sonucunu içeren bir sonraki kareyi sunması için geçen süre olan sunu gecikmesi.
Bu üç aşamanın toplamı, toplam etkileşim gecikmesidir. Bir etkileşimin her aşaması, toplam etkileşim gecikmesine bir miktar süre katkıda bulunur. Bu nedenle, etkileşimin her bölümünü mümkün olduğunca kısa bir süre için nasıl optimize edebileceğinizi bilmek önemlidir.
Giriş gecikmesini tespit etme ve azaltma
Kullanıcı bir sayfayla etkileşime geçtiğinde bu etkileşimin ilk kısmı giriş gecikmesi olur. Sayfadaki diğer etkinliğe bağlı olarak giriş gecikmeleri önemli ölçüde uzun olabilir. Bunun nedeni, ana iş parçacığında gerçekleşen etkinlik (komut dosyası yükleme, ayrıştırma ve derleme), getirme işlemi, zamanlayıcı işlevleri, hatta hızlı bir şekilde arka arkaya gerçekleşen ve birbiriyle çakışan diğer etkileşimlerden kaynaklanabilir.
Etkileşimin giriş gecikmesinin kaynağı ne olursa olsun, etkileşimlerin en kısa sürede etkinlik geri çağırma işlemlerini başlatabilmesi için giriş gecikmesini en aza indirmeniz gerekir.
Başlatma sırasında komut dosyası değerlendirmesi ve uzun görevler arasındaki ilişki
Sayfa yaşam döngüsünde etkileşimin kritik bir yönü, başlatma sırasındadır. Sayfa yüklendiğinde ilk olarak oluşturulur, ancak bir sayfanın oluşturulmuş olmasının sayfanın yüklenmesinin tamamlandığı anlamına gelmediğini unutmayın. Bir sayfanın tam olarak işlevsel hale gelmesi için ihtiyaç duyduğu kaynaklara bağlı olarak, kullanıcıların sayfa hâlâ yüklenirken sayfayla etkileşim kurmaya çalışması mümkündür.
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ışabilmesi için tarayıcıda yapılması gereken işlemler vardır. Bu işlemler arasında, söz dizimi geçerli olduğundan emin olmak için komut dosyasını ayrıştırma, onu bayt koduna derleme ve ardından yürütme yer alır.
Bir komut dosyasının boyutuna bağlı olarak bu çalışma, ana iş parçacığında uzun görevler oluşturabilir. 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 duyarlı kalması için sayfa yükleme sırasında uzun görevlerin olasılığını azaltmak amacıyla neler yapabileceğinizi anlamak önemlidir. Böylece sayfa hızlı kalır.
Etkinlik geri çağırma işlevlerini optimize etme
Giriş gecikmesi, INP'nin ölçtüğünün yalnızca ilk kısmıdır. Ayrıca, kullanıcı etkileşimine yanıt olarak çalıştırılan etkinlik geri çağırmalarının mümkün olduğunca hızlı bir şekilde tamamlandığından emin olmanız gerekir.
Ana iş parçacığına sık sık verin
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 küçük bir oranda azaltabilirsiniz.
Web sitenizde de bu durumun geçerli olduğunu düşünüyorsanız bir sonraki denemenizde, etkinlik geri çağırmalarında yapılan işi ayrı görevlere ayırmayı deneyebilirsiniz. Bu sayede, ortak çalışma ana iş parçacığını engelleyen uzun bir görev haline gelmez. Böylece, ana iş parçacığında bekleyen diğer etkileşimlerin daha erken çalışması sağlanır.
setTimeout, kendisine iletilen geri çağırma işlevi yeni bir görevde çalıştığından görevleri bölmenin bir yoludur. setTimeout'yi tek başına kullanabilir veya daha ergonomik bir sonuç elde etmek için kullanımını ayrı bir işleve soyutlayabilirsiniz.
Ayrımsız verim, hiç veri vermemekten daha iyidir. Ancak ana iş parçacığına getiri sağlamanın daha ince bir yolu vardır ve bu, yalnızca kullanıcı arayüzünü güncelleyen bir etkinlik geri çağırmasından hemen sonra veri getirmeyi içerir. Böylece, oluşturma mantığı daha erken çalışabilir.
Oluşturma işleminin daha erken gerçekleşmesi için izin verin
Daha gelişmiş bir verim verme tekniği, çalıştırılacakları bir sonraki kare için görsel güncellemeleri uygulamak için gereken mantıkla sınırlamak üzere etkinlik geri çağırmalarınızdaki kodu yapılandırmayı içerir. Diğer tüm işlemler sonraki bir göreve ertelenebilir. Bu, geri çağırmaların hafif ve çevik kalmasını sağlar. Ayrıca, görsel güncellemelerin etkinlik geri çağırma kodunda engellenmesine izin vermeyerek etkileşimlerin oluşturma süresini de iyileştirir.
Örneğin, siz yazarken metni biçimlendiren, ancak aynı zamanda kullanıcı arayüzünün diğer yönlerini de yazdıklarınıza göre (ör. kelime sayısı, yazım hatalarını vurgulama ve diğer önemli görsel geri bildirimleri) güncelleyen zengin bir metin düzenleyici düşünün. Ayrıca, uygulamanın yazdığınız metni kaydetmesi de gerekebilir. Böylece, ayrılıp geri döndüğünüzde hiçbir çalışmanızı kaybetmezsiniz.
Bu örnekte, kullanıcı tarafından yazılan karakterlere yanıt olarak aşağıdaki dört işlemin yapılması gerekir. Bununla birlikte, sonraki kare sunulmadan önce yalnızca ilk öğenin yapılması gerekir.
- Metin kutusunu kullanıcının yazdığı metinle 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 ç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ştirmede, kritik olmayan güncellemelerin sonraki kareden sonrakine kadar ertelenmesi, işleme süresini ve dolayısıyla genel etkileşim gecikmesini nasıl azaltabileceğini gösterir.
Önceki kod örneğindeki bir requestAnimationFrame() çağrısı içinde setTimeout() kullanımının biraz ezoterik olduğu kabul edilir, ancak kritik olmayan kodun sonraki kareyi engellememesini sağlamak için tüm tarayıcılarda çalışan etkili bir yöntemdir.
Düzenin çok hızlı değişmesini önleyin
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 hata, JavaScript'teki stilleri güncellediğinizde ve daha sonra, bunları aynı görevde okuduğunuzda ortaya çıkar ve JavaScript'te, düzenin bozulmasına neden olabilecek birçok özellik vardır.
Stillerin güncellenmesi ve ardından bu stillerin değerlerinin JavaScript'te hemen istenmesi nedeniyle tarayıcı, senkronize bir şekilde sayfa düzeni çalışması yapmak zorunda kalır. Bu çalışmayı, aksi takdirde etkinlik geri çağırma işlevleri tamamlandıktan sonra asenkron olarak gerçekleştirebilirdi. Bu nedenle sayfa düzeni karmaşası, performans darboğazıdır.
Sunum gecikmesini en aza indirme
Bir etkileşimin sunma gecikmesi, etkileşimin etkinlik geri çağırmalarının çalışmasını tamamlamasından tarayıcıda ortaya çıkan görsel değişiklikleri gösteren bir sonraki kareyi boyayabildiği noktaya kadar olan süreyi kapsar.
DOM boyutunu en aza indirme
Bir sayfanın DOM'si küçükse, oluşturma işlemi genellikle hızlı bir şekilde biter. Ancak DOM'lar çok büyük olduğunda oluşturma işlemi, DOM boyutu arttıkça ö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ı küçük DOM'lara kıyasla daha fazla çalışma gerektirir. Büyük DOM'lar iki durumda soruna yol açar:
- Büyük bir DOM'nin, sayfanın ilk durumunu oluşturmak için çok fazla çalışma gerektirdiği ilk sayfa oluşturma işlemi sırasında.
- Büyük bir DOM'nin, oluşturma güncellemelerinin çok pahalı olmasına, dolayısıyla da tarayıcının bir sonraki kareyi sunması için gereken sürenin artmasına neden olabileceği durumlarda, kullanıcı etkileşimi.
Büyük DOM'lerin önemli ölçüde azaltılamayacağı durumlar olduğunu unutmayın. DOM boyutunu küçültmek için DOM'unuzu düzleştirme veya ilk DOM boyutunuzu küçük tutmak için kullanıcı etkileşimleri sırasında DOM'a ekleme gibi yaklaşımlar kullanabilirsiniz. Ancak bu teknikler yalnızca belirli bir noktaya kadar etkili olabilir.
Ekran dışındaki öğeleri yavaşça oluşturmak için content-visibility öğesini kullanma
Sayfa yükleme sırasında ve kullanıcı etkileşimlerine yanıt olarak yapılan oluşturma çalışmalarının miktarını sınırlamanın bir yolu, CSS content-visibility mülkünden yararlanmaktır. Bu, öğeleri görüntü alanına yaklaştıkça tembelce oluşturmaya eşdeğerdir. content-visibility'ü etkili bir şekilde kullanmak için biraz alıştırma yapmanız gerekebilir ancak bunun sonucunda sayfanızı INP'sini artırabilecek daha düşük bir oluşturma süresi elde edip edemeyeceğinizi incelemeye değer.
JavaScript kullanarak HTML oluştururken performans maliyetlerini göz önünde bulundurun
HTML'nin olduğu yerde HTML ayrıştırma işlemi de vardır. Tarayıcı, HTML'yi DOM'a ayrıştırmayı bitirdikten sonra bu DOM'a 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 bu içerik tarayıcıya akış olarak gelir. Akış, sunucudan gelen HTML yanıtının parçalar halinde geldiği anlamına gelir. Tarayıcı, bir akışı nasıl işleyeceğini optimize etmek için akıştaki parçaları geldikçe kademeli olarak ayrıştırır ve parça parça oluşturur. Bu, sayfa yükleme sırasında tarayıcının dolaylı olarak düzenli ve otomatik olarak verim sağlaması açısından bir performans optimizasyonudur ve size bunu ücretsiz olarak sağlarsınız.
Herhangi bir web sitesine yapılan ilk ziyaret her zaman bir miktar HTML içerir. Yaygın bir yaklaşım, minimum düzeyde bir HTML ile başlar ve ardından içerik alanını doldurmak için JavaScript kullanılır. Bu içerik alanındaki sonraki güncellemeler de kullanıcı etkileşimleri sonucunda gerçekleşir. Buna genellikle tek sayfalık uygulama (SPA) modeli denir. Bu kalıbın bir dezavantajı, istemcide HTML'yi JavaScript ile oluşturarak yalnızca HTML'yi oluşturmak için JavaScript işlemenin maliyetini almanız değil, aynı zamanda tarayıcının bu HTML'yi ayrıştırıp oluşturmayı tamamlayana kadar verimi vermemesidir.
Ancak SPA olmayan web sitelerinin bile etkileşimler sonucunda JavaScript aracılığıyla bir miktar HTML oluşturma işlemi içereceğini unutmayın. Müşteride büyük miktarlarda HTML oluşturmadığınız sürece bu genellikle sorun oluşturmaz. Aksi takdirde bir sonraki karenin sunumu gecikebilir. Ancak, tarayıcıda HTML oluşturmaya ilişkin bu yaklaşımın performans üzerindeki etkilerini ve JavaScript aracılığıyla çok fazla HTML oluşturuyorsanız web sitenizin kullanıcı girişine duyarlılığını nasıl etkileyebileceğini anlamak önemlidir.
Sonuç
Sitenizin INP'sini iyileştirmek yinelenen bir süreçtir. Alanda yavaş bir etkileşimi düzelttiğinizde, özellikle web siteniz çok fazla etkileşim sağlıyorsa diğer yavaş etkileşimleri de bulmaya başlayabilirsiniz ve bunları da optimize etmeniz gerekir.
INP'yi iyileştirmenin anahtarı, kararlılıktır. Zaman içinde sayfanızı, kullanıcıların sunduğunuz deneyimden memnun olduğu bir düzeye getirebilirsiniz. Kullanıcılarınız için yeni özellikler geliştirirken, onlara özel etkileşimleri optimize etmek üzere aynı süreci tamamlamanız gerekme olasılığı da yüksektir. Bu işlem zaman ve çaba gerektirir ancak harcadığınız zaman ve çabaya değer.
David Pisnoy tarafından Unsplash'tan alınan ve Unsplash lisansına uygun şekilde değiştirilen hero resim.