# Mobil e-ticaret optimizasyonu: Core Web Vitals, ödeme adımı ve dönüşümü oynatan somut düzeltmeler

> E-ticaret trafiğinin %70-85'i mobil. Mobil ile masaüstü arasındaki dönüşüm farkını kapatan on somut alan (Web Vitals, dokunma hedefleri, form otomatik doldurma, Apple Pay, başparmak bölgeleri), gerçek araçlar ve kıyaslarla.

Ryan Badger - 1 Mayıs 2025 - 8 dk okuma

## Mobil neden oyunun tamamı

E-ticaret trafiğinizin %70-80'i mobil. Çoğu tüketici kategorisinde %85'e dayanıyor. Masaüstü dönüşümü genellikle mobil dönüşümün 2-3 katıdır; bu, masaüstünün daha iyi olduğundan çok, çoğu mağazada mobilin bozuk olduğunu söyler.

İyi optimize edilmiş bir mobil deneyim farkı kapatabilir ve çoğu zaman tersine çevirir: bazı DTC markaları artık mobilde masaüstüyle eşit ya da daha yüksek dönüşüm alıyor. Fark somut, ölçülebilir ve çoğunlukla yenilikle değil, düzenle ilgili.

Bu yazı, mobil dönüşümü gerçekten neyin oynattığını; kıyaslar, araçlar ve düzeltilecek somut şeylerle anlatıyor. "Önce mobil tasarlayın" değil. Birikimli artış sağlayan somut kontroller.

## 1. Core Web Vitals ve Google'ın neden izlediği

Google, Core Web Vitals'ı bir sıralama sinyali ve deneyim kalitesi için bir vekil olarak kullanır. SEO açısının ötesinde, altta yatan metrikler dönüşümün güçlü öngörücüleridir.

### LCP (Largest Contentful Paint)

Ekranın üst kısmındaki en büyük öğenin (genellikle hero görseli ya da H1) görüntülenmesine kadar geçen süre. Hedef: mobil 4G'de 2,5 saniyenin altı.

Kötü LCP'nin en yaygın nedenleri:

- Sıkıştırılmamış ya da fazla büyük hero görseli
- Web yazı tipi yüklemesinin görüntülemeyi engellemesi
- `<head>` içine eklenen üçüncü taraf script'ler (sohbet widget'ları, analitik, A/B test araçları)

### INP (Interaction to Next Paint)

Bir kullanıcı etkileşiminden (dokunma) bir sonraki görsel güncellemeye kadar geçen süre. Hedef: 200ms'nin altı.

Kötü INP'nin en yaygın nedenleri:

- JavaScript ağırlıklı sayfalar (kod bölme olmayan React/Vue mağazaları)
- Etkileşimde eşzamanlı tetiklenen analitik ya da sohbet script'leri
- Eski mobil tarayıcılarda dokunma gecikmesi

### CLS (Cumulative Layout Shift)

Sayfa yüklenirken öğelerin ortalıkta zıplaması. Hedef: 0,1'in altı.

En yaygın nedenler:

- Genişlik/yükseklik öznitelikleri olmayan görseller
- İçerikten sonra yüklenen reklamlar ya da üçüncü taraf gömmeler
- Yüklenip metin boyutunu değiştiren yazı tipleri

### Nasıl kontrol edilir

Ücretsiz: [PageSpeed Insights](https://pagespeed.web.dev/) Lighthouse çalıştırır ve üçünü de raporlar. Ana sayfanızı değil, en çok gelir getiren ürün sayfanızı test edin. Kırmızı olanı düzeltin, sarıyı kabul edin, devam edin.

Ücretli / daha derin: şelale analizi için WebPageTest.org, yerel profilleme için Chrome DevTools Performance sekmesi.

## 2. 3 saniyenin altında mobil hız (gerçek mobil, kısıtlanmış masaüstü değil)

Masaüstü tarayıcının "mobil emülatörü" hızlı bir bağlantı ve hızlı bir işlemci kullanır. Gerçek mobil telefonlar daha yavaş bağlantı ve daha yavaş işlemci kullanır. Aradaki fark büyüktür.

Gerçek telefonlarda 4G'de test edin. Sayfanız Chrome'un mobil emülatöründe 2 saniye sürüyorsa, 4G'deki orta seviye bir Android'de muhtemelen 4-5 saniyedir.

### En büyük hız kazanımları (sırayla)

1. **Görsel optimizasyonu:** %80 kaliteye sıkıştırın, gerçekten gereken boyutlara küçültün, WebP veya AVIF sunun. Shoprocket bunu Cloudflare üzerinden otomatik yapar
2. **Ekran altı içeriği tembel yükleyin.** Görseller, iframe'ler, ağır script'ler oraya kaydırılana kadar yüklenmemeli
3. **Kritik olmayan JavaScript'i erteleyin.** Analitik, sohbet widget'ları, A/B test araçları görüntülemeyi engellememeli
4. **Statik varlıkları agresif önbelleğe alın.** Parmak izli URL'lerle görseller, yazı tipleri, CSS, JS için 1 yıllık önbellek
5. **Bir CDN kullanın** (Cloudflare, Fastly ya da platformunuzun yerleşiği). Varlıkları coğrafi olarak yakın uç noktalardan sunar
6. **Üçüncü taraf script'leri azaltın.** Her piksel ve etiket yaklaşık 50-200ms ekler; gerçekten neyin gerekli olduğunu denetleyin

## 3. Dokunma hedefi boyutu

Apple'ın Human Interface Guidelines'ı asgari 44×44 piksel dokunma hedefleri belirtir. Google Material 48×48 belirtir. Çoğu temanın "mobil" sürümü ikisini de tutturmaz.

**Düzeltmeler:**

- Düğmeler en az 44px yüksekliğinde, içinde 8-12px dolgu
- Gezinmedeki bağlantılar en az 44px yüksekliğinde
- Form girişleri en az 44px yüksekliğinde (erişilebilirliğe de yardımcı olur)
- Bitişik dokunma hedefleri arasında en az 8px boşluk

Test: mağazanızı bir telefonda açın. Kategori gezinmesine başparmağınızla dokunmayı deneyin. Yanlış yere mi dokunuyorsunuz? Bu bir dokunma hedefi sorunudur.

## 4. Mobil ödeme adımının özellikleri

Mobilde sepet ve ödeme, dönüşümün çoğunun kaybolduğu yerdir. Somut yapılacaklar listesi:

### Tek sütunlu formlar

İki sütunlu formlar masaüstünde işe yarar, mobilde başarısız olur. Her alanı dikey olarak dizin. İstisna yok.

### Uygun giriş türleri

- E-posta alanı: `type="email"` (@ simgeli e-posta klavyesini getirir)
- Telefon: `type="tel"` (sayısal klavye)
- Posta kodu: sayısal posta kodlu ülkeler için `type="text" inputmode="numeric"`
- Kredi kartı numarası: `type="text" inputmode="numeric" autocomplete="cc-number"` (otomatik doldurmayı çalıştırır)

Çoğu platform bunu yerleşik olarak doğru yapar. Formunuzu bir telefonda kontrol etmeye değer; yanlış klavye çıkıyorsa düzeltin.

### Otomatik doldurma uyumu

Formun `autocomplete` öznitelikleri doğruysa tarayıcılar ad, adres, e-posta, telefon, kart bilgilerini otomatik doldurabilir. Otomatik doldurma önerisine dokunan müşteri ödemeyi 3 saniyede tamamlar. Otomatik doldurma olmadan 12+ alanı elle yazar.

Standart autocomplete değerleri: `name`, `email`, `tel`, `street-address`, `postal-code`, `country`, `cc-number`, `cc-exp`, `cc-csc`, `cc-name`.

### Ürün sayfalarında yapışkan Sepete Ekle

Mobil bir ürün sayfasında 3 ekran aşağı inin, Sepete Ekle düğmesi ekran dışında kalır. Çözüm: asıl düğme ekrandan çıktığında beliren, fiyat ve Sepete Ekle içeren yapışkan bir alt çubuk ekleyin.

### Apple Pay + Google Pay + Link

Bunlar mobil ödemedeki en büyük tek artışlardır. Yazı yazmadan tek dokunuşla ödeme; yerel biyometrik kimlik doğrulama.

- **Apple Pay:** alan adınızı Stripe ile doğruladığınızda otomatik etkinleşir (Shoprocket bunu halleder)
- **Google Pay:** benzer
- **Stripe Link:** kartı ve adresi Link'in siteler arası kimliğinden doldurur

Bunlar olmadan her mobil ödeme müşteri kaçırır. Üçünü de etkinleştirin.

## 5. Form alanlarını azaltmak

Mobil ödemenizdeki her alan bir sürtünme noktasıdır. Alanlarınızı denetleyin:

**Genellikle gerekli:**

- E-posta
- Teslimat adresi (ad, sokak, şehir, posta kodu, ülke)
- Ödeme bilgileri (ya da Apple/Google Pay)

**Çoğu zaman gereğinden fazla toplanan:**

- Telefon numarası (yalnızca teslimat / kargo firmaları için gerekiyorsa; çoğu zaman gerekmez)
- Doğum tarihi (satın alma sırasında neredeyse hiç gerekmez)
- Şirket adı (yalnızca B2B için)
- Bülten kaydı (yasal olduğu yerde önceden işaretli; aksi halde ayrı bir onay kutusu)
- "Bizi nereden duydunuz?" (satın alma sonrası ankete taşıyın)

Daha az alan = daha hızlı ödeme = daha yüksek tamamlama. Kaldırdığınız her alan, mobil ödeme tamamlamada kabaca %5-10 iyileşmedir ve birikir.

## 6. Mobilde okunabilir yazı ve satır uzunluğu

- **Gövde metni:** en az 16px (iOS varsayılanı ve Google'ın Material yönergesi)
- **Satır uzunluğu:** 45-75 karakter
- **Satır yüksekliği:** yazı boyutunun 1,4-1,6 katı
- **Kontrast:** en az WCAG AA (gövde için 4,5:1, büyük metin için 3:1)

Müşteriler ürün açıklamanızda iki parmakla yakınlaştırıyorsa yazınız çok küçük. Okumak için telefonu yan çevirmeleri gerekiyorsa satır uzunluğunuz çok geniş ya da yazı çok sıkışık.

## 7. Tek elle kullanım hususları

Çoğu mobil kullanıcı telefonunu tek elle, başparmağı sağ alttan (solaklar için sol alttan) uzatarak kullanır. Önemli etkileşimler o başparmak bölgesinde olmalı.

- Birincil CTA (Sepete Ekle, Ödeme, Hemen Al) alta yakın
- Gezinme hamburger menüsü sol üstte ya da sağ üstte, başparmak erişiminde
- "Geri" düğmesi öngörülebilir (tarayıcının geri düğmesi genellikle özel geri düğmelerinden iyidir)

Erişilmesi zor alanlara çift dokunma şartı koşmayın. Her başparmak jimnastiği anı müşteri kaybettirir.

## 8. Mobil ürün sayfasına özgü düzen

Masaüstü ürün sayfaları çoğu zaman her şeyi aynı anda gösterir (solda galeri, sağda ayrıntılar, altta açıklama). Bu düzen mobile çevrilmez; içeriği sıralamanız gerekir.

Etkili mobil ürün sayfası sırası:

1. Hero görseli (kaydırılabilir galeri)
2. Başlık + fiyat
3. Varyant seçici (beden, renk)
4. Sepete Ekle (birincil CTA)
5. Güven sinyalleri (puan, ücretsiz kargo, iadeler)
6. Açıklama (katlanabilir, 3 satırdan sonra kapalı)
7. Özellikler / ayrıntılar (katlanabilir)
8. "Tümünü gör" açılımlı değerlendirme özeti
9. İlgili ürünler
10. SSS (katlanabilir)

Ekran altı içerik tembel yüklenmeli. Mobil bir müşteri satın alma kararını çoğu zaman ilk 3 bölümde verir; her şeyi yüklemek bu kararı yavaşlatır.

## 9. Gerçek cihazlarda test

DevTools değil. Tarayıcının mobil emülatörü değil. Hücresel bağlantıdaki gerçek telefonlar.

Asgari test rotasyonu:

- iPhone SE (küçük ekran, eski cihaz)
- iPhone 15 Pro (en yeni iOS, Safari)
- Samsung Galaxy orta seviye (Android, Chrome)
- 4G'de eski bir Android (performans sorunlarını ortaya çıkarır)

Bonus: farklı telefonlu 3 arkadaşınızdan mağazanızdan bir şey satın almayı denemelerini isteyin. Onları izleyin. Zorlandıkları şey sizin düzeltme listenizdir.

## 10. Mobil katili kalıplardan kaçınmak

Mobil dönüşümü mahveden yaygın hatalar:

### Ara sayfa açılır pencereleri

Mobil açılış sayfasında ekranı kaplayan "%10 indirim için abone olun!" penceresi. Google bunları mobil arama sıralamasında cezalandırır. Müşteriler bunlara denk gelir ve ayrılır. Bunun yerine satır içi kayıtlar kullanın.

### Sesle otomatik oynayan video

Bant genişliğini boşa harcar, kullanıcıları rahatsız eder, iOS zaten çoğu zaman engeller. Hero video için sessiz otomatik oynatma kabul edilebilir; sesli otomatik oynatma kullanıcı düşmanıdır.

### Dokunmatikte hover durumları

"Ayrıntıları görmek için üzerine gelin" dokunmatikte çalışmaz. Temanızda mobilde hâlâ üzerine gelince göster kalıpları varsa, fiilen bozuklar.

### Modallarda minicik tıklanabilir "kapat" düğmeleri

Köşedeki 16 pikselik bir X, başparmakla isabet ettirilemez. Kapat düğmelerini 44×44 yapın ya da modalların altında tam genişlikli "Kapat" düğmeleri kullanın.

### Ürün ızgaralarında yatay kaydırma

Mobilde yatay kaydırmalı ürün karuselleri ürünlerin %80'ini ekran altına gizler. Dikey ızgara (mobilde 2 sütun) daha iyi dönüşür.

## Shoprocket mobil için neyi yönetiyor

Temel gerekliliklerin çoğu hazır gelir:

- **Otomatik görsel optimizasyonu:** her ürün görselinde yeniden boyutlandırma + sıkıştırma + WebP + tembel yükleme
- **Sepet çekmecesi (tam sayfa sepet değil)** mobilde varsayılan
- Temalı vitrinlerde **yapışkan mobil Sepete Ekle** desteği
- Doğru giriş türleri, autocomplete ve dizilimle **mobil uyumlu ödeme**
- Stripe üzerinden **Apple Pay + Google Pay + Stripe Link** tek dokunuşla ödeme
- **Mobil uyumlu canlı sohbet widget'ı**
- Her varlık için Cloudflare üzerinden **CDN teslimi**
- Barındırılan vitrin için **kutudan çıktığı gibi Core Web Vitals optimize**

```
<!-- EXAMPLE ONLY. Grab your real snippet from Sales channels → Embeds in your dashboard -->
<script src="https://cdn.shoprocket.io/loader.js" data-pk="pk_yourkey"></script>
<div data-shoprocket="catalog" data-embed-id="emb_xxx"></div>
```

Widget gömme kullanıcıları: çevreleyen sayfanın hızını ve tasarımını siz kontrol edersiniz. Shoprocket'ın widget'ı tembel yüklenir ve sayfanızın görüntülenmesini engellemez, ama genel sayfa hızı sizin yönetiminizde.

> **İpucu:** Üç ayda bir, en çok gelir getiren ilk 3 ürün sayfanızda mobilde PageSpeed Insights çalıştırın. Üç Core Web Vitals skorunu not edin. Sonraki çeyrekte karşılaştırın. Aşağı yönlü eğilim sessiz bir dönüşüm katilidir; hasar oluştuktan sonra değil, üç ayda bir yakalayın.

## Kısaca

- **Mobil trafiğin %70-85'i.** Çoğu mağaza ona sonradan akla gelen bir şey gibi davranıyor; siz yapmayın
- **Takip edilecek üç sayı Core Web Vitals:** LCP, INP, CLS. 2,5s / 200ms / 0,1 altı
- **Gerçek cihazlarda 4G'de test edin,** tarayıcı emülatöründe değil
- **Ödeme özellikleri:** tek sütunlu formlar, doğru giriş türleri, autocomplete, Apple/Google Pay, yapışkan CTA'lar
- **Daha az form alanı** = daha yüksek tamamlama. Gerçekten neyin gerekli olduğunu denetleyin
- **Dokunma hedefleri en az 44×44.** Hedefler arası boşluk en az 8px
- **Başparmak bölgesi önemli.** Birincil CTA'lar alta yakın; hamburger menüler sol/sağ üstte
- **Mobil katillerinden kaçının:** ara sayfalar, sesli otomatik oynatma, hover durumları, minik kapat düğmeleri

[Ücretsiz denemeyi başlatın](https://app-v3.shoprocket.io/signup) ve ilk günden otomatik görsel optimizasyonu + Apple Pay + mobil yerel ödeme alın. 14 gün, kart yok.

---

- HTML version: https://v3.shoprocket.io/tr/blog/mobil-eticaret-optimizasyonu-core-web-vitals-odeme-ve-donusumu-artiran-duzeltmeler
- Language: Türkçe (tr)
- Also in: [العربية](https://v3.shoprocket.io/ar/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Deutsch](https://v3.shoprocket.io/de/blog/mobile-ecommerce-optimierung-core-web-vitals-checkout.md), [Ελληνικά](https://v3.shoprocket.io/el/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [English](https://v3.shoprocket.io/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Español](https://v3.shoprocket.io/es/blog/optimizacion-ecommerce-movil-core-web-vitals-checkout-y-arreglos-que-mueven-la-conversion.md), [Français](https://v3.shoprocket.io/fr/blog/optimisation-ecommerce-mobile-core-web-vitals-paiement.md), [עברית](https://v3.shoprocket.io/he/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [हिन्दी](https://v3.shoprocket.io/hi/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Bahasa Indonesia](https://v3.shoprocket.io/id/blog/optimasi-ecommerce-mobile-core-web-vitals-checkout-dan-perbaikan-konversi.md), [Italiano](https://v3.shoprocket.io/it/blog/ottimizzazione-ecommerce-mobile-core-web-vitals-checkout.md), [日本語](https://v3.shoprocket.io/ja/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [Lietuvių](https://v3.shoprocket.io/lt/tinklarastis/mobilioji-el-prekyba-core-web-vitals-atsiskaitymas-ir-konkretus-pataisymai-didinantys-konversija.md), [Norsk](https://v3.shoprocket.io/nb/blogg/mobiloptimalisering-nettbutikk-core-web-vitals-kasse.md), [Nederlands](https://v3.shoprocket.io/nl/blog/mobiele-webshop-optimalisatie-core-web-vitals-checkout-conversie.md), [Polski](https://v3.shoprocket.io/pl/blog/optymalizacja-ecommerce-na-mobile-core-web-vitals-kasa-i-poprawki-ktore-ruszaja-konwersje.md), [Português](https://v3.shoprocket.io/pt/blog/otimizacao-ecommerce-mobile-core-web-vitals-checkout-conversao.md), [Română](https://v3.shoprocket.io/ro/blog/optimizare-ecommerce-mobil-core-web-vitals-plata.md), [Русский](https://v3.shoprocket.io/ru/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [ไทย](https://v3.shoprocket.io/th/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md), [中文](https://v3.shoprocket.io/zh/blog/mobile-ecommerce-optimisation-core-web-vitals-checkout-and-the-specific-fixes-that-move-conversion.md)