INP ve Shopify uygulamaları: sepete ekle düğmesi neden geç tepki veriyor?

INP, ziyaretçinin tıklamasından ekranda bir şey değişene kadar geçen süreyi ölçüyor ve 200 milisaniyenin üstü iyi sayılmıyor. Shopify mağazalarında bu süreyi en çok uzatan şey uygulama betikleri. Hangi uygulamanın sorun çıkardığı nasıl bulunur, ne sırayla düzeltilir?

Ziyaretçi sepete ekle düğmesine basıyor ve yarım saniye hiçbir şey olmuyor; ya bir daha basıyor ya da sayfadan çıkıyor. Bu gecikmeyi ölçen metrik INP (Interaction to Next Paint, sonraki boyamaya kadar etkileşim süresi). Google 12 Mart 2024'te INP'yi Core Web Vitals'a aldı ve eski FID metriğini çıkardı.

Shopify mağazalarında bu süreyi en çok uzatan, kurulu uygulamaların betikleri. Her uygulama sayfaya kendi betiğini ekliyor ve bu betikler ziyaretçinin tıklamasıyla aynı iş parçacığında sıra bekliyor. Bu yazı INP'nin neyi ölçtüğünü, Shopify panelinde nereden izleneceğini ve sorunlu uygulamanın nasıl bulunacağını anlatıyor.

INP neyi ölçüyor?

INP, sayfadaki tıklama, dokunma ve tuşa basma etkileşimlerinin her birinde, etkileşimden ekranın güncellenmesine kadar geçen süreye bakıyor. Fareyle üzerine gelmek, kaydırmak ve yakınlaştırmak hesaba girmiyor. Çoğu sayfada raporlanan değer, ziyaret boyunca yaşanan en yavaş etkileşim; çok etkileşimli sayfalarda her elli etkileşimde en yavaş olan bir tanesi aykırı değer olarak atılıyor.

200 milisaniye ve altı iyi.

200 ile 500 milisaniye arası iyileştirilmeli.

500 milisaniyenin üstü zayıf.

Eşik, ziyaretlerin yüzde 75'ine uygulanıyor. Yani hızlı telefonlarda her şey yolunda görünse bile, daha yavaş cihazlardan gelen ziyaretçilerin dörtte biri 500 milisaniyeyi aşıyorsa mağaza zayıf sınıfa düşüyor.

Bir tıklamanın üç parçası

Bir etkileşimin süresi üç parçadan oluşuyor ve uygulamalar üçüne de farklı biçimde dokunabiliyor:

Giriş gecikmesi: tıklamayla olay işleyicinin çalışmaya başlaması arasındaki süre. Tarayıcı o sırada bir uygulamanın betiğini çalıştırıyorsa tıklama sırada bekliyor. Sayfa yüklenirken yapılan tıklamalarda bu parça uzayabiliyor, çünkü uygulama betikleri genellikle o sırada başlatılıyor.

İşleme süresi: tıklamaya bağlı tüm olay işleyicilerinin çalışması. Sepete ekle düğmesine temanın yanında bir indirim penceresi, bir analiz pikseli ve bir sepet çekmecesi uygulaması da bağlanmışsa hepsi aynı tıklamada sırayla çalışıyor.

Sunum gecikmesi: işleyiciler bittikten sonra ekranın yeniden çizilmesi. Tıklamayla açılan büyük bir pencere ya da sayfaya bir anda eklenen uzun bir öneri listesi bu parçayı uzatıyor.

Shopify'ın tema geliştirme rehberi de aynı noktayı yazıyor: tema kodu da uygulama betikleri de ana iş parçacığında çalışıyor ve tarayıcının ekranı çizme ve kullanıcıya yanıt verme işiyle yarışıyor.

Shopify panelinde INP nereden izlenir?

Shopify yönetici panelindeki web performansı panosu LCP, INP ve CLS değerlerini gösteriyor. Veriler son 30 günün gerçek ziyaretçi verisinden geliyor ve her metrik için yüzde 75'lik değer milisaniye cinsinden yazıyor. Veri 36 saate kadar gecikebiliyor ve yalnızca son 90 gün için tutuluyor.

Panonun bu iş için en kullanışlı kısmı grafikteki numaralı dikey çizgiler. Shopify bunları uygulama kurulumu, tema güncellemesi ve yeni kod eklenmesi gibi performansı etkileyebilecek olaylar için ekliyor. INP bir tarihten sonra yükselmişse ilk bakılacak yer o tarihteki çizgi. Sayfa türü ve sayfa adresi raporları da sorunun ürün sayfasında mı, koleksiyonda mı, sepette mi yoğunlaştığını gösteriyor.

PageSpeed Insights da sitenin Chrome kullanıcılarından toplanan saha verisini gösteriyor. Bu veri sayfanın ne kadar yavaş yanıt verdiğini gösteriyor ama hangi betiğin yavaşlattığını göstermiyor.

İlgili yazı

Hız denetimi

Saha ve laboratuvar verisinin farkını, hangi sayfaların ölçüleceğini ve düzeltmelerin nasıl sıralanacağını hız denetimi yazısında anlattık.

Hız denetimi yazısı

Sorunlu uygulamayı bulmak

En pratik yöntem, temanın bir kopyası üzerinde uygulama yerleştirmelerini (app embeds) tek tek kapatıp en yavaş sayfa türünü yeniden denemek. Tema düzenleyicinin kenar çubuğundaki uygulama yerleştirmeleri simgesinden her uygulamanın yerleştirmesi açılıp kapatılabiliyor. Kopya temada yapılan değişiklik yayındaki mağazayı etkilemiyor.

Önce panelde INP'si en kötü sayfa türünü seçin.

Kopya temada o sayfayı açıp Chrome geliştirici araçlarının performans sekmesiyle sepete ekle, varyant seçimi ve sepet çekmecesi gibi tıklamaları kaydedin.

Uygulama yerleştirmelerini birer birer kapatıp aynı kaydı tekrarlayın. Kapatınca tıklamanın belirgin biçimde hızlandığı uygulama adayınız.

Yerleştirme olarak değil de tema koduna doğrudan eklenmiş betikler varsa (eski uygulamalarda ve kaldırılmış uygulamalardan kalan kodlarda sık görülüyor) bunları bir geliştiriciyle birlikte bulun.

Gerçek ziyaretçilerden veri toplamak isteyen ekipler için daha kesin bir yol var. Tarayıcıların Long Animation Frames (uzun animasyon kareleri) arayüzü, yavaş bir karenin hangi betik adresinden kaynaklandığını bildiriyor. Google'ın web-vitals kütüphanesinin atıf sürümü bu bilgiyi INP ölçümüne ekliyor ve giriş gecikmesi, işleme süresi ve sunum gecikmesini ayrı ayrı veriyor. Betik adresi çoğu zaman uygulamanın sunucusunu gösterdiği için hangi uygulamanın tıklamayı yavaşlattığı doğrudan görülüyor.

Uygulama seçerken nelere bakılmalı?

Shopify'ın “Built for Shopify” rozeti için koyduğu şartlar uygulama seçerken iyi bir ölçü. Rozetli bir uygulama mağazanın Lighthouse performans puanını en fazla on puan düşürebiliyor, mağazaya eklenecek öğeleri tema uygulama uzantılarıyla kurmak zorunda ve sayfa oluşturucu ya da yedekleme gibi istisnalar dışında temanın dosyalarını değiştiremiyor.

Rozetin iki sınırı var. Lighthouse puanı bir laboratuvar ölçümü ve yükleme tarafına ağırlık veriyor; tıklama gecikmesini doğrudan ölçmüyor. Rozet şartlarındaki 200 milisaniyelik INP sınırı da uygulamanın Shopify yönetici panelindeki kendi arayüzü için geçerli, mağaza vitrini için değil. Rozet bu yüzden bir başlangıç ölçütü; kurduktan sonra kendi panonuzdaki INP'ye bakmanız yine gerekiyor.

Aynı işi yapan iki uygulama kurmayın; örneğin iki yorum uygulaması ya da iki ayrı sepet çekmecesi.

Uygulamanın yalnızca kullanıldığı sayfada yüklenip yüklenmediğini sorun. Ürün sayfasında çalışan bir boyut tablosu ana sayfada betik yüklememeli.

Deneme süresi biterken uygulamayı tutmadan önce panodaki INP grafiğine kurulum tarihinden bu yana bakın.

İlgili yazı

Mağazayı yavaşlatan gizli sebepler

Kaldırılmış ama kodu temada kalan uygulamaları ve aynı işi yapan birden fazla uygulamayı ayrı bir yazıda anlattık.

Gizli sebepler yazısı

Düzeltme sırası

Kaldır: kullanılmayan ya da başka bir uygulamayla aynı işi yapan uygulamayı kaldırın ve temada kodu kalıp kalmadığını kontrol edin.

Sınırla: kalan uygulamaların yerleştirmelerini yalnızca gerektiği sayfalarda açın; uygulama izin veriyorsa diğer sayfalarda kapatın.

Ertele: temaya geliştiricinin eklediği betiklerde Shopify'ın önerisi, kritik olmayan betiklere defer özniteliği vermek ve bir bileşenin kodunu ancak ziyaretçi o bileşene dokunduğunda yüklemek. Sırası önemsiz bağımsız üçüncü taraf betiklerde async kullanılabiliyor.

Hafiflet: her tuşa ya da kaydırmaya bağlanan işleyicileri seyrekleştirmek (debounce ve throttle) ve tıklamayla açılan pencereleri küçük parçalar hâlinde çizmek sunum gecikmesini kısaltıyor.

Doğrula: panodaki veri 30 günlük olduğu için değişikliğin etkisini birkaç gün içinde göremeyebilirsiniz. Değişikliği yaptığınız tarihi not edin ve sayfa türü raporunda takip edin.

İlgili hizmet

Mağazanızın INP'sini birlikte inceleyelim

Uygulama yığınınızı panodaki veriye göre tarıyor, tıklamayı yavaşlatan betikleri buluyor ve kaldırma, sınırlama ya da erteleme planını sizinle birlikte çıkarıyoruz. Mağazanız zaten iyi sınıftaysa bunu da açıkça söyleriz.

Hız ve performans

Yapmanıza gerek olmayanlar

Lighthouse puanını tek hedef yapmak: puan yükleme hızını öne alıyor, INP saha verisinden geliyor.

Tüm uygulamaları bir anda kaldırmak: hangisinin sorun çıkardığını öğrenemezsiniz ve işe yarayan uygulamaları da kaybedersiniz.

Hızlandırma vaat eden bir uygulama daha kurmak: sayfaya yeni bir betik daha eklemiş olursunuz.

Kaynaklar

dotCREA Shopify ekibi

25 Ekim 2026 tarihinde yayımlandı

Paylaş

Bu konuyu mağazanız için konuşalım

Mağaza adresinizi gönderin, ücretsiz değerlendirelim.

Teklif alın