Mobil Landing Page Optimizasyonu: Dönüşümü Artıran Rehber

Türkiye'de akıllı telefon üzerinden yapılan arama ve site ziyareti oranı her yıl artıyor. Google'ın kendi verilerine göre mobil sayfa yüklenmesi üç saniyeyi aşarsa ziyaretçilerin büyük çoğunluğu sayfayı terk ediyor. Landing page'iniz masaüstünde mükemmel görünse de mobil deneyim ayrı bir tasarım ve teknik disiplin gerektiriyor. Bu rehber; dokunmatik uyumluluk, sayfa hızı, form tasarımı ve sticky CTA gibi konuları İstanbul ve Türkiye pazarı bağlamında ele alıyor.

Neden Mobil Landing Page Ayrı Bir Disiplin Gerektiriyor?

Masaüstü ve mobil kullanıcı davranışı kökten farklıdır. Masaüstü ziyaretçi oturmuş, karar modunda gezinirken; mobil kullanıcı çoğunlukla hareket halinde, kısa dikkat süreleriyle sayfaya bakıyor. Think with Google araştırmaları, mobil dönüşüm oranlarının benzer trafik kalitesinde bile masaüstünün altında kaldığını gösteriyor — bu boşluğun kaynağı çoğunlukla teknik değil, tasarım kararlarıdır.

• Ekran boyutu küçük → içerik hiyerarşisi ve CTA görünürlüğü yeniden tasarlanmalı
• Bant genişliği değişken → ağır görseller, render-blocking script dönüşüm düşmanı
• Parmakla dokunma → minimum 44x44 piksel tıklanabilir alan (Apple HIG standardı)
• Tek sütun akış → kullanıcı kaydırma yapar ama sticky CTA olmadan CTA'yı kaybeder
• Mobil form doldurma → klavye küçük, alan sayısı azaldıkça tamamlama oranı artar

LCP ve CLS: Mobilde Dönüşümü Bozan İki Core Web Vital

Google'ın Core Web Vitals çerçevesindeki iki metrik, landing page dönüşümünü doğrudan etkiliyor: LCP (Largest Contentful Paint) ve CLS (Cumulative Layout Shift). LCP, sayfadaki en büyük görünür öğenin — çoğunlukla hero görseli veya başlık — yüklenme süresini ölçüyor. Google'ın 'İyi' eşiği 2,5 saniyenin altı; bu eşiği aşan sayfalar hem sıralamada hem dönüşümde ceza yiyor.

CLS ise sayfa yüklenirken öğelerin yerinden oynamasını ölçüyor. Kullanıcı bir butona tıklamak üzereyken reklam veya görsel yüklenip buton kayarsa hem tıklama hedefi kaybolur hem de güven zedelenir. Google 'İyi' eşiği 0,1'in altı. Bu iki metriği düzeltmek için şu adımlar uygulanabilir:

• LCP görseline fetchpriority="high" ve loading="eager" ekle; diğer görselleri lazy load yap
• Hero görselini WebP veya AVIF formatına çevir; boyutunu 150 KB'ın altında tut
• Font'ları font-display: swap ile yükle; CLS'ye yol açan font değişimini önle
• Görsellere ve reklam alanlarına width/height veya aspect-ratio CSS rezervasyonu yap
• Render-blocking üçüncü taraf script'leri async/defer ile yükle veya sayfanın altına taşı

Dokunmatik CTA Boyutu: Parmak Dostu Tasarımın Rakamları

Apple Human Interface Guidelines ve Google Material Design, mobil dokunmatik hedeflerin minimum 44x44 piksel — tercihen 48x48 piksel — olmasını öneriyor. Bunun altındaki butonlar yanlış tıklamayı, yanlış tıklama hayal kırıklığını, hayal kırıklığı terk etmeyi tetikliyor. Landing page'inizdeki ana CTA butonu şu kriterleri karşılamalı:

• Minimum yükseklik 48px, genişlik ekranın en az %80'i (tek sütun tasarımda)
• Arkaplan rengi yeterli kontrast: WCAG 4.5:1 oranı (koyu arka plan üzerinde açık metin)
• Buton metni eylem odaklı ve kısa: 'Ücretsiz Analiz Al', 'Hemen Teklif Al' gibi
• Butona tıklandığında görsel geri bildirim (renk değişimi, kısa animasyon) — kullanıcı tıkladığını hissettirmeli
• Diğer tıklanabilir öğelere minimum 8px mesafe — yanlış tıklamayı önler

Sticky CTA: Kullanıcı Kaydırırken Dönüşüm Fırsatı Kaybolmasın

Uzun form landing page'lerde kullanıcı aşağı kaydırdıkça orijinal CTA görünümden çıkıyor. Sticky (sabit) bir alt bar veya üst header, CTA'yı her kaydırma pozisyonunda görünür tutuyor. Doğru uygulandığında sticky CTA dönüşüm oranını anlamlı ölçüde artırabiliyor — ancak tasarım hataları tam tersi etkiyi yaratıyor.

Sticky CTA uygulama kuralları:

• Sticky bar içeriği yeterli görünür alan bırakmalı — içeriği gizlememeli (genellikle 56-64px yükseklik yeterli)
• iOS Safari'de bottom sticky barlar adres çubuğuyla çakışabilir; safe-area-inset-bottom CSS değeri kullan
• Sticky CTA kapatılabilir olmalı (X butonu) — agresif deneyim terk oranını artırır
• Kaydırma yönüne göre gizle/göster: aşağı kaydırmada sakla, yukarı kaydırmada göster (görsel gürültüyü azaltır)
• A/B testi: sticky bottom bar vs sticky header vs inline CTA — hangisinin dönüşümü artırdığını ölçerek karar ver

Mobil Form Optimizasyonu: Alan Sayısını Azalt, Tamamlama Oranını Artır

Baymard Institute araştırmaları, gereksiz form alanlarının mobil form tamamlama oranını dramatik biçimde düşürdüğünü ortaya koyuyor. Mobil klavyeyle uzun form doldurmak masaüstüne kıyasla çok daha zahmetli. Lead formu tasarımında şu ilkeler belirleyici:

• Yalnızca zorunlu alanları sor: çoğu B2C kampanyası için ad + telefon yeterli
• inputmode ve autocomplete nitelikleri ekle: tel için inputmode="tel", email için type="email" — mobil klavyeyi doğru açar
• Alan etiketleri placeholder değil, daima üstte görünür label olmalı — placeholder kaydırma sonrası kaybolur
• Tek tık/dokunuşla doldurulan otomatik tamamlama desteği: Google One Tap veya Apple Sign In entegrasyonu
• Gönder butonu form alanının hemen altında, klavye kapandığında görünür konumda olmalı

Mobil Sayfa Hızı ve Dönüşüm: Saniyeler Önemli

Deloitte ve Google'ın 'Milliseconds Make Millions' (2020) araştırması, mobil site hızının 0,1 saniye iyileşmesinin perakende sektöründe dönüşüm oranına doğrudan olumlu etki yaptığını gösteriyor. Landing page özelinde bu etki daha da kritik çünkü reklam bütçesiyle gelen trafik tek bir sayfaya kanalize ediliyor.

• CDN kullan: İstanbul lokasyonlu sunucu veya Cloudflare CDN ile TTFB'yi 200ms'nin altına çek
• Görselleri next-gen formata çevir: WebP masaüstü PNG/JPG'ye göre %25-35 daha küçük
• CSS/JS bundle'ı küçült ve code-split yap: above-the-fold dışındaki kodu ertele
• Üçüncü taraf widget'larını (chat, analytics, pixel) performans etkisine göre değerlendir; gerekli olmayanları kaldır
• Google PageSpeed Insights Field Data (CrUX) ile gerçek kullanıcı verilerini izle — lab verisi yetmez

Mobil-Öncelikli Tasarım: Önce Telefon, Sonra Masaüstü

Mobile-first tasarım, küçük ekran için sıfırdan kurgulamak anlamına gelir — masaüstü tasarımı daraltmak değil. Bu yaklaşım hem daha iyi bir mobil deneyim üretir hem de CSS açısından daha temiz ve performanslı kod ortaya çıkarır. İstanbul'daki KOBİ'lerin çoğu hâlâ 'masaüstü önce, sonra responsive' yapıyor; oysa trafik çoğunluğu mobilden geliyor.

• Tek sütun düzen: mobilde iki sütunlu grid kullanmaktan kaçın, içerik hiyerarşisi dikey akışta kurulsun
• Metin boyutları: gövde minimum 16px, başlıklar viewport genişliğine göre fluid typography
• Görsel oranları: hero görseli 9:16 veya 4:5 oranında mobil kırpma önce planlanmalı
• Viewport meta etiketi: <meta name="viewport" content="width=device-width, initial-scale=1"> — eksikse tüm responsive çalışması boşa gider
• Chrome DevTools'un Lighthouse ve mobil simülasyon araçlarıyla her değişiklikten sonra test et

A/B Test: Mobil Landing Page'de Neyi, Nasıl Test Etmeli?

A/B testi, mobil landing page optimizasyonunun 'tahmin' değil 'kanıt' üzerine kurulu kısmı. Ancak testin geçerli sonuç vermesi için doğru kurgu gerekiyor. Mobil ziyaretçi sayısı masaüstüne göre yüksek ama tek bir değişkeni izole etmek kritik.

• Tek değişken ilkesi: bir testte yalnızca bir öğeyi değiştir (buton rengi VEYA metin VEYA konum)
• İstatistiksel anlamlılık: %95 güven seviyesine ulaşmadan kazananı ilan etme; VWO veya Google Optimize Deneyimler aracılığıyla hesapla
• Test süresi: trafik hacmine göre değişir; minimum 1-2 hafta, tüm haftanın döngüsünü yakala
• Öncelik sırası: CTA metni → CTA konumu → headline → form alan sayısı → sayfa uzunluğu
• Mobil ve masaüstü testlerini ayrı segmentlerde yürüt: masaüstü kazananı mobilde kazanamayabilir

ADWEBX ile Ücretsiz Mobil Landing Page Analizi Alın

ADWEBX olarak İstanbul ve Türkiye'deki işletmeler için landing page tasarımı, hız optimizasyonu ve dönüşüm testleri gerçekleştiriyoruz. Mobil deneyiminizin dönüşüme ne kadar yansıdığını görmek için ücretsiz site analizimizden yararlanabilirsiniz. /analiz sayfamızdan başvurabilir ya da WhatsApp üzerinden doğrudan ulaşabilirsiniz: wa.me/905322477388

Landing page hizmetlerimiz hakkında detaylı bilgi almak için /tr/services/landing-pages sayfasını ziyaret edebilirsiniz.

Sıkça Sorulan Sorular

Mobil landing page için ideal LCP süresi nedir?

Google Core Web Vitals standartlarına göre LCP 2,5 saniyenin altında olduğunda 'İyi' kategorisine giriyor. 2,5-4 saniye arası 'İyileştirilmeli', 4 saniye üstü 'Zayıf' sayılıyor. Landing page'ler için reklamla gelen kullanıcıyı tutmak adına 2 saniyenin altını hedeflemek daha gerçekçi bir çıta.

Mobil formda kaç alan olmalı?

Lead toplama formları için 2-3 alan genellikle idealdir: ad-soyad (veya yalnızca ad), telefon veya e-posta. Her ek alan form tamamlama oranını düşürür. Daha nitelikli lead istiyorsanız multi-step form kullanın; ilk adımı basit tutun (e-posta), sonraki adımda ek bilgi isteyin.

Sticky CTA her landing page'e uygun mudur?

Hayır, sticky CTA uzun içerikli landing page'lerde ve kaydırma gerektiren sayfalarda etkili. Kısa, tek sayfaya sığan landing page'lerde sticky bar gereksiz görsel karmaşa yaratır. İçerik uzunluğunuz 2-3 ekran geçiyorsa sticky CTA değerini test edin.

A/B test için minimum ne kadar trafik gerekli?

İstatistiksel anlamlılık için her varyanta en az 100-200 dönüşüm olayı (tıklama, form gönderimi) gelmesi gerekiyor. Düşük trafikli sayfalarda A/B test yanıltıcı sonuç verir. Bu durumda değişkenleri daha hızlı test etmek için ısı haritası ve oturum kaydı araçlarıyla nitel analiz yapın.

Mobil landing page'de video kullanmak dönüşümü artırır mı?

Ürün veya hizmeti görsel olarak anlatan kısa videolar (30-90 saniye) dönüşümü artırabilir. Ancak autoplay ses açık video mobil kullanıcıyı hemen kaçırır. Video kullanacaksanız: sessiz autoplay, altyazı, döngü yok ve sayfa yüklemesini yavaşlatmayan lazy load uygulaması zorunlu.