INP Ölçütü E-Ticaret Tasarımını Nasıl Değiştirdi? Filtre ve Sepette 6 Karar

Google, Interaction to Next Paint yani INP ölçütünü 12 Mart 2024’te First Input Delay ölçütünün yerine Core Web Vitals’a aldı. INP, sayfadaki tıklama, dokunma ve klavye etkileşimlerinin ekranda karşılık bulma hızını bütün ziyaret boyunca ölçer. web.dev’e göre 200 milisaniye ve altı iyi, 500 milisaniyenin üstü zayıf kabul edilir.

E-ticaret siteleri için bu değişiklik önemli, çünkü mağazalar etkileşim yoğun sayfalardır: filtre seçilir, varyant değiştirilir, sepete eklenir, adet artırılır. 2026’da Türkiye’de mağaza tasarlarken bu ölçütü tasarım aşamasında hesaba katıyoruz. Bu yazıda değişikliğin ne olduğunu ve tasarımda hangi altı kararı etkilediğini anlatıyoruz.

Güncelleme: Ekim 2026 · Gündem Masası · Denetleyen: Gürbüz Özdem

Ne değişti: INP neyi ölçüyor, FID’den farkı ne?

FID yalnız sayfadaki ilk etkileşimin ne kadar beklediğini ölçüyordu. INP ise ziyaret boyunca yapılan etkileşimlere bakar ve en yavaşlardan birini temsil eden bir değer raporlar. Yani sayfa açılışta hızlı ama filtre seçildiğinde donuyorsa, eski ölçüt bunu yakalamazken INP yakalar. Değer gerçek kullanıcı verisinden, yüzde yetmiş beşlik dilimde değerlendirilir.

Kaynak

Ölçütün tanımı ve eşikleri web.dev INP sayfasında anlatılır. Arama tarafındaki genel çerçeve için Google Search Central belgelerine bakabilirsiniz.

Eşikler

200 milisaniye ve altı iyi, 200 ile 500 milisaniye arası iyileştirme gerekli, 500 milisaniyenin üstü zayıf olarak sınıflandırılır.

Bu değişiklik e-ticaret sitelerini neden daha çok ilgilendiriyor?

Bir haber sitesinde ziyaretçi çoğunlukla okur ve kaydırır. E-ticaret sitesinde ise sürekli etkileşim kurar: filtre açar, renk seçer, beden değiştirir, sepete ekler, adet artırır. Her biri bir tepki süresi demektir. Bu etkileşimlerden biri yavaşsa INP değeri o etkileşimden etkilenir. Tasarım kararları burada belirleyici hâle gelir.

Tasarımın payı

Etkileşim hızı yalnız sunucu ve kod meselesi değildir. Bir dokunuşta kaç şeyin değiştiğine tasarım karar verir.

Mobil

Telefonlarda işlem gücü sınırlı olduğu için INP sorunları mobilde daha belirgin görünür. Mobil yerleşimin genel kuralları responsive mobil uyumlu tasarım sayfasında.

Karar 1 ve 2: Filtre ve varyant seçimi nasıl hafifletilir?

Her filtre seçiminde bütün listeyi yeniden yüklemek yerine seçimleri toplayıp tek düğmeyle uygulamak, ağır işi tek bir ana indirir. Seçim yapılır yapılmaz küçük bir görsel geri bildirim verilir, ağır güncelleme arkadan gelir. Varyant değişiminde yalnız değişen fotoğraf ve fiyat güncellenir; sayfanın tamamı yeniden çizilmez.

Filtre paneli

Seçimleri toplayan mobil filtre panelini e-ticaret filtre tasarımı yazısında anlattık.

Anında geri bildirim

Düğmenin basılı görünmesi ya da seçimin işaretlenmesi kullanıcıya işlemin alındığını söyler. Bu küçük tepki algılanan hızı da artırır.

Karar 3 ve 4: Sepete ekle ve adet değiştirme nasıl tasarlanır?

Sepete ekle düğmesine basıldığında düğme hemen durum değiştirir; sepet sayacı ve onay mesajı ardından gelir. Büyük bir açılır sepet penceresi yerine küçük bir onay ve sepete git seçeneği daha hafiftir. Adet artırma düğmelerinde her basışta sunucuya gitmek yerine kısa bir bekleme ile son değer gönderilebilir.

Ağır pencereler

Sepete eklenince açılan ve öneri ürünleri yükleyen büyük pencereler etkileşimi yavaşlatabilir. Öneriler sepet sayfasına taşınabilir.

Mobil sepet

Sepetin telefondaki akışını mobil sepet akışı yazısında açtık.

Karar 5 ve 6: Menü ve ödeme formu nasıl hafif tutulur?

Mega menü açılırken yüzlerce bağ ve görsel aynı anda çiziliyorsa ilk dokunuş yavaşlar. Menü içeriği sade tutulur, görseller gerektiğinde yüklenir. Ödeme formunda her tuş vuruşunda çalışan ağır doğrulama yerine alan bırakıldığında doğrulama yapmak, klavye etkileşimini rahatlatır. İki kararın da amacı aynıdır: dokunuşa hemen cevap vermek.

Menü

Menüdeki kategori sayısını sade tutmanın yolu doğru kurulmuş ağaçtır. Ayrıntılar e-ticaret kategori ağacı yazısında.

Ödeme formu

Ödeme ekranının genel düzeni e-ticaret ödeme deneyimi sayfasında.

Kendi mağazanızın INP değerini nasıl görürsünüz?

Gerçek kullanıcı verisi yeterli trafiği olan sitelerde PageSpeed Insights ve Search Console’daki Core Web Vitals raporunda görünür. Laboratuvar testleri ise etkileşimi taklit eder ve sorunlu öğeyi bulmaya yardım eder. Yeni ve az trafikli mağazada gerçek veri oluşmayabilir; bu durumda tasarım kararları baştan hafif etkileşim ilkesine göre verilir.

Rapor okuma

Hız ölçütlerinin genel açıklaması web sitesi hızı ve Core Web Vitals sayfasında.

Kimin işi

Ölçüm ve kod iyileştirmesi geliştirici işidir. Tasarımcı ise bir dokunuşta kaç şeyin değiştiğine karar vererek sorunu baştan küçültür.

Sizin için anlamı ne?

Mağaza tasarlatırken ya da yenilerken etkileşim yoğun ekranları ayrıca konuşun: filtre, varyant, sepet ve ödeme. Tasarım teslim edildiğinde bu ekranların telefonda nasıl tepki verdiğini birlikte deneyin. INP bir sıralama mucizesi değildir ama müşterinin dokunduğunda bekleyip beklemediğini ölçer; bu da doğrudan alışveriş deneyimidir.

Teslim listesine ekleyin

Teslimde filtre, varyant, sepete ekle ve ödeme formunun gerçek telefonda denenmesi bir madde olarak yazılır.

Takip

Yayından sonra Core Web Vitals raporu düzenli kontrol edilir ve zayıf görünen sayfa tipleri listelenir.

Mağaza tasarımının bütün kapsamı e-ticaret web tasarımı sayfamızda.

İlgili yazılar

Sık Sorulan Sorular