İçindekiler
Interaction to Next Paint (INP), internet sayfasının performansını ölçümleme noktasında değerli bir bileşendir. Kullanıcıların internet sayfalarıyla etkileşimlerini nasıl deneyimlendiklerini ölçen ve raporlayan bir puan sistemi olarak nitelendirebiliriz. İçeriğin devamında INP’nin ne olduğu, nasıl ölçüldüğü ve web performansını artırmak için nasıl optimize edilebileceği özelinde ayrıntılara ulaşabilirsiniz.
Web performansı hem kullanıcı deneyimi hem SEO hem de sunucu tarafında kritik bir ehemmiyete sahiptir. Günümüzde internet suratları her ne kadar artsa da bu sayfaların taranması, takip edilmesi, raporlanması ve kullanıcı tarafından gezinmesinin ekstra bir sunucu maliyeti bulunmaktadır. Bu göz önünde bulundurulduğunda web performansını düzgünleştirmek elzem bir hale gelmektedir. Bu bağlamda süratli yüklenen internet sayfaları kullanıcı memnuniyetini artırırken, yavaş yüklenen sayfalar kullanıcıların dikkatini dağıtarak sayfayı terk etmelerine neden olabilir. Interaction To Next Paint (INP), yani Türkçe isimlendirdiğimizde İlk Boyayla Etkileşim, kullanıcıların internet sayfalarıyla etkileşimlerini nasıl deneyimlediklerini ölçen bir metriktir. Bu blog yazısında, INP’nin ne olduğunu, nasıl ölçüldüğünü ve web performansınızı artırmak için nasıl optimize edebileceğinizi keşfedeceğiz.
INP Nedir?
Interaction to Next Paint (INP), istek atılan sayfanın büsbütün etkileşim kurma müddetini tahlil eden bir metriktir. Özcesi bir sayfanın tamamının cevap verebilir hale gelmesinin ne kadar sürdüğünü ölçmesidir. Bir internet sayfasına yapılan bir etkileşimde o internet sayfası karşılık vermiyorsa bu, berbat bir kullanıcı tecrübesi olarak nitelendirilir. Bu sayede artık INP, bir kullancının sayfayla yaptığı tüm etkileşimlerin gecikmesini gözlemleyebilecek ve neredeyse tüm etkileşim kıymetlerini tek bir metrik altında bildirebilecek. Düşük bir INP puanı ise sayfanın kullanıcı etkileşimlerinin büyük bir çoğunluğuna dengeli yani süratli bir halde karşılık verebildiğini ve başarılı olduğu manasına gelmektedir.
Chrome’ın hoş bir verisini paylaşmak istiyorum: Chrome kullanım dataları, bir kullanıcının bir sayfada geçirdiği vaktin %90’ının sayfa yüklendikten sonra harcandığını gösteriyor. INP’nin tam da burada pahalandırmak istediği şey aslında. Bu nedenle, sayfa ömür döngüsü boyunca hassaslığın dikkatli bir biçimde ölçülmesi kıymetli. Âlâ bir hassaslığa sahip olabilmek için sitede yapılan etkileşimlerin süratli bir biçimde karşılık vermesi gereklidir. Örneğin bir e-ticaret sitesine girdiniz ve beğendiğiniz eseri sepete ekle butonuna tıklayarak seçtiniz ama bir karşılık vermedi. Bu, makus bir etkileşim yaratır. Birebir formda menüyü gezmek istediğinizde navigasyon menü ikonuna tıkladınız ve açılmadı. Bu da makus bir tecrübedir. Bir siteye kaydolmak için girdiğiniz web formunun sunucuya iletilip iletilmediği vb. hususlarda biz web geliştiricilerine epey yararlı bilgiler sunmaktadır.
Tüm bu noktalardan baktığımızda INP’nin asıl emeli, bir kullanıcının bir etkileşimi başlattığı andan bir sonraki çerçeve çizilene kadar geçen müddetin, kullanıcının gerçekleştirdiği tüm yahut birden fazla etkileşim için mümkün olduğunca kısa olmasını sağlamaktır. Buna bir örnek verecek olursak, bir sıkça sorulan sorular kısmında açılır kapanır koyulan widget’a tıkladığımızda onun açılma mühleti üzere düşünebilir.
(Video kaynağı: https://web.dev/inp/)
Interaction To Next Paint (INP); CLS (Cumulative Layout Shift), LCP (Largest Contenful Paint), FID (First Input Delay), FCP (First Contenful Paint) üzere bir Core Web Vitals metriği olarak nitelendirilebilir. INP, hayatımıza başka metriklerden biraz geç girdi. INP, 2022 yılında hayatımıza yalnızca laboratuvar yani deneysel ölçümlemerle girmişti. Google’ın yaptığı son duyuru ile birlikte 2024 yılında gerçek kullanıcı datalarını de paylaşarak CWV’in bir üyesi haline gelecek. Böylelikle, INP, Mart 2024’te First Input Delay’in (FID) yerini alacak ve yeni bir kavram ve ölçümleme metriği hayatımıza girmiş olacak.
Google’ın mevzuyla ilgili duyurusu:
“Bugünden itibaren, INP artık deneysel değil ve bunun yerine beklemede olan bir Core Web Vital metriği olarak kabul edilecek. Bu, INP’nin FID’in yerini almaya hazır olduğunu kanıtladığını belirtmek için yeni bir isimlendirmedir, lakin değişikliği şimdi yapmıyoruz.”
“Ekosistemin ahenk sağlaması için vakit tanımak emeliyle INP, Mart 2024’te resmi olarak istikrarlı bir Core Web Vital metriği haline gelecek.”
INP Nasıl Ölçülür?
INP kıymetlerini WebPageTest ve Google’ın performans testi araçlarından olan Pagespeed Insight ve Lighthouse üzere yaygın olarak kullanılan web performans araçlarından ölçümleyebilirsiniz. Google bu araçlar üzerinden test etmek istediğiniz internet sayfasının INP ve öteki Core Web Vitals pahalarını edinmenizi sağlıyor.
İyi Bir INP Skoru Nedir?
İyi bir kullanıcı tecrübesi sağlamak için hassaslık konusunda ölçülecek eşik, alanda kaydedilen sayfa yüklemelerinin taşınabilir ve masaüstü aygıtlara nazaran ayrıldığı sayfa yüklerinin yüzde 75’lik dilimidir. Bu durumda INP pahaları deneysel olarak ölçümlenerek skorlanıyor. 2024 yılından itibaren buradaki bedellerin gerçek kullanıcı pahalarını yansıtacağını söylemek mümkün. 200 milisaniye ve altında bir INP skoru, internet sayfasınızın karşılık verme suratının iyi olduğu manasına gelmektedir.
200 milisaniyenin üzerinde ve 500 milisaniyenin altında bir INP, sayfanızın cevap vermesinin iyileştirilmesi gerektiği manasına gelmektedir. 500 milisaniyenin üzerindeki bir INP, internet sayfasınızın karşılık verme suratının zayıf olduğu manasına gelmektedir.
INP’nin Önemi
INP, başka Core Web Vitals metrikleri üzere hem site performansını iyileştirmenize hem de kullanıcı tecrübesini daha âlâ noktaya getirmenize yardımcı oluyor. Kullanıcılar, internet sayfalarıyla etkileşimlerinde rastgele bir gecikme yaşamadan süratli bir formda etkileşime girebildiklerinde daha olumlu bir tecrübe yaşarlar. Site içerisinde yapılan etkileşimlerin çok daha süratli olması, yani INP’nin düşük olması, daha yeterli bir kullanıcı tecrübesi ve artan memnuniyet manasına gelir. Bu bağlamda düşündüğümüzde bu oranın artmasının (yani INP’nin düşük olmasının) dönüşüm oranlarını da güzelleştirebilecek kıymetli bir metrik olduğunu söyleyebiliriz. Kullanıcılar, sayfaların istikrarlı bir formda boyanmasını ve görsel değişikliklerin ani ve rahatsız edici sıçramalara neden olmamasını beklerler.
INP, yalnızca kullanıcı tecrübesini etkilemekle kalmaz, birebir vakitte dönüşüm oranları üzerinde de büyük bir tesire sahiptir. Yavaş yüklenen yahut kesintili bir etkileşim tecrübesi, kullanıcıların web sitenizi terk etmelerine ve dönüşüm fırsatlarını kaçırmalarına neden olabilir. Bunu bir kullanıcının beğendiği eseri sepetine süratli bir halde aktaramaması ve siteyi terk etmesi örneğini ile açıklayabiliriz. Bu kullanıcı ilgili eseri farklı bir mağazadan satın alabilir. Bu durum ise dönüşüm oranlarınızı doğrudan etkiler. Âlâ bir INP skoru, kullanıcıların web sitenizle daha fazla etkileşime girmelerini ve dönüşüm adımlarını tamamlamalarını teşvik eder. INP’yi güzelleştirerek dönüşüm oranlarını artırabilir ve işletmeniz için daha uygun sonuçlar elde edebilirsiniz.
INP, kullanıcı tecrübesi ve dönüşüm oranlarının haricinde arama motorları tarafında da epeyce değerli bir role sahiptir. Google algoritmaları, süratli yüklenen ve kullanıcıların meselesiz bir etkileşim tecrübesi yaşadığı web sitelerini daha yeterli performans göstermesine yardımcı olabilir. INP’yi güzelleştirerek, arama motorlarında daha üst sıralarda yer alabilir ve organik trafik ve görünürlük kazanabilirsiniz.
INP’nin First Input Delay (FID) Farkı Nedir?
INP tüm sayfa etkileşimlerini dikkate alırken, FID ise sırf birinci etkileşimi dikkate almaktadır. FID ayrıyeten sırf birinci etkileşim giriş gecikmesini ölçer, olay işleyicilerini çalıştırmak için geçen süreyi yahut bir sonraki çerçevenin yani bir sonraki ekranın kullanıcının karşısına sunulmasındaki gecikmeyi ölçmez. INP, FID’e nazaran çok daha detaylı ölçümler sağlamaktadır. Sayfa içerisindeki tüm etkileşimlerini örnekleyerek karşılık verebilirlik durumunu kapsamlı bir formda kıymetlendirir ve bu da INP’nin genel cevap verebilirliğin FID’den daha inançlı ve ayrıntılı olduğunun göstergesi haline getirmesine yardımcı olur.
INP Optimizasyonu İçin İpuçları
INP, tıklama ve tuşa basma üzere kullanıcı girdilerini bir sonraki çerçeve ekseninde oluşacak UI güncellemeleri ortasındaki geçen süreyi ölçer. Burada oluşacak gecikme üç bileşenden oluşmaktadır.
- Giriş Gecikmesi: sayfada olay işleyicinin çalışmasını engelleyen art plan misyonlarını beklemek.
- İşlem Mühleti: JavaScript’te olay işleyicileri çalıştırma
- Sunum Gecikmesi: sayfa tertibini tekrar hesaplama ve sayfa içeriğini boyama
Aşağıdaki şemada, farklı CPU misyonlarının örnek bir vakit çizelgesini ve bunların INP süreçlerini nasıl eklendiğini gösterir. INP, fare, dokunma yahut klavye girişinden sonraki karenin tarayıcı tarafından oluşturulduğu noktaya kadar tüm vakit çerçevesini kapsar. Süreç müddeti, keydown ve keyup olayları üzere birden çok olay işleyiciden oluşabilir.
Kaynak: debugbear
INP Ölçümlerini Uygunlaştırmak İçin En Yeterli Uygulamalar
Lazy loading ile manzaraların gecikmeli yüklenmesi:
Lazy loading ile sitenin fold alanında yani birinci görünen alanın dışında bulunan görselleri erteleyerek sayfa yükleme mühletini optimize edebilir böylelikle INP skorunuzu da güzelleştirebilirsiniz. Lazy loading’i hakikat bir formda kurgulamak web performansının güzelleştirilmesi değerli bir role sahiptir. Sitenizde değerli ve kritik görsellerin ertelenmesi birinci boyalı alanın gecikmesine ve Core Web Vitals kıymetlerinin düşmesine neden olabilir. Bu sebeple bu süreci epey dikkatli gerçekleştirmelisiniz.
Google Chrome lazy loading tarafında uygulama kolaylığı sağlamak ismine bir etiket geliştirdi görsellerinize aşağıdaki etiketi ekleyerek görselleri erteleyebilirsiniz.
loading=”lazy”
Bu etiketi tarayıcıların %76’sı destekliyor, %16’sı ise kurallı olarak takviye sağlıyor.
Kaynak Evraklarının Optimizasyonu:
- CSS ve JavaScript sıkıştırması: CSS ve JavaScript evraklarınızı sıkıştırarak belge boyutlarını küçültebilir ve indirme müddetlerini azaltabilirsiniz.
- Gereksiz kaynakların kaldırılması: İnternet sayfanızda kullanılmayan yahut gereksiz olan CSS evraklarını, JavaScript kütüphanelerini yahut imajları tespit edip kaldırarak sayfa yüklenme mühletini optimize edebilirsiniz.
- Önbelleğe alma: Sık kullanılan kaynakları önbelleğe alarak, kullanıcılarınızın daha süratli bir formda erişmelerini sağlayabilirsiniz.
- CSS ve JavaScript evraklarının düzenlenmesi: Kaynak çakışmalarını önlemek için CSS belgelerini başlangıçta, JavaScript belgelerini ise sona yükleyin.
- Asenkron yükleme: Asenkron yükleme kullanarak, kaynak çakışmalarını önleyebilir ve web sayfanızın daha süratli yüklenmesini sağlayabilirsiniz.
- Kritik CSS: Sayfa boyanmadan evvel yüklenen ve görüntülenen değerli CSS içeriğini belirleyerek, sayfa yüklenme mühletini güzelleştirebilirsiniz.
Gecikme Yaşanan Etkileşimlerin Belirlenmesi ve Güzelleştirilmesi:
- Etkileşimleri izleme ve tahlil etme: Hangi etkileşimlerin gecikme yaşadığını belirlemek için web sayfanızı izlemek ve performans tahlil araçları kullanmak değerlidir.
- Aşırı yüklenen etkileşimlerin tanımlanması: Sayfa yüklenme mühletini değerli ölçüde etkileyen çok yüklenen etkileşimleri tespit edip optimize etmek için efor gösterin.
- Performansı etkileyen problemlerin çözülmesi: Gecikme yaşanan etkileşimlerin altında yatan problemleri belirleyin ve bunları düzeltmek için gerekli tedbirleri alın. Örneğin, veritabanı sorgularını optimize etmek, ağ taleplerini azaltmak yahut gereksiz süreçleri kaldırmak üzere.
CDN (İçerik Dağıtım Ağı) Kullanımı:
CDN, INP skorunu güzelleştirmek için tesirli bir yoldur. İçerik dağıtım ağı, web sayfanızın içeriğini coğrafik olarak dağıtarak, kullanıcılara daha süratli bir erişim sağlar. Bu da sayfa yüklenme müddetini azaltır ve INP skorunu düzgünleştirir. Gerçek CDN ağından aldığınız takviye ile birlikte sırf INP değil, sitenin genel prestijiyle web performansını güzelleştirmeniz mümkün.
Cihaz ve Tarayıcı Uyumluluğunu Dikkate Alma:
INP optimizasyonunda, aygıt ve tarayıcı uyumluluğunu dikkate almak kıymetlidir. Farklı aygıtlar ve tarayıcılar ortasında farklı performans tecrübeleri olabilir. Test etme ve uyumluluk denetimi yapma, INP skorunu uygunlaştırmak için kıymetlidir. INP optimizasyonu, internet sayfalarınızın suratını artırarak kullanıcı deneyimini geliştirmenin değerli bir yolu olduğunu gösterir. Kaynakların optimizasyonu, gecikme yaşanan etkileşimlerin belirlenmesi ve uygunlaştırılması, kaynak çakışmalarının engellenmesi, CDN kullanımı ve aygıt uyumluluğu üzere ipuçlarıyla INP skorunu güzelleştirebilirsiniz. Bu sayede kullanıcılarınızın daha süratli, daha akıcı ve daha mutlu bir tecrübe yaşamasını sağlayabilirsiniz.
INP hangi kullanıcı etkileşimlerini dikkate alır?
- Bir sayfada gezerken yaptığınız fare tıklamaları,
- Mobil yahut dokunmatik bir ekrandan yapılan vurmalar yani dokunma,
- Fiziksel yahut ekran klavyesinde bir tuşa basma birebir biçimde kullanıcı etkileşimi olarak nitelendirilebilir.
INP’ye kaydırma ve üzerine gelme (hover) dahil edilmez. Lakin, klavyeyle kaydırma (boşluk çubuğu, sayfa üst, sayfa aşağı vb.) bir tuş vuruşunu içerir ve INP’nin ölçtüğü başka olayları tetikleyebilir. Rastgele bir sonuçta oluşan kaydırma, INP’nin nasıl hesaplandığına dahil edilmez.
INP optimizasyonu, internet sayfalarınızın suratını artırarak kullanıcı tecrübesini geliştirmenin değerli bir yolu olduğunu gösterir. Kaynakların optimizasyonu, gecikme yaşanan etkileşimlerin belirlenmesi ve uygunlaştırılması, kaynak çakışmalarının engellenmesi, CDN kullanımı ve aygıt uyumluluğu üzere ipuçlarıyla INP skorunu güzelleştirebilirsiniz. Bu sayede kullanıcılarınızın daha süratli, daha akıcı ve daha şad bir tecrübe yaşamasını sağlayabilirsiniz.
SEO ve Sayfa Suratı İçin Skeleton Loading Neden Değerli? başlıklı yazımızı incelediniz mi?
