WordPress sitenizi mobil öncelikli (mobile-first) hale getirmek için uygulamanız gereken adım adım stratejiler:
1. Mobil Uyumlu Tema Seçimi

• Önerilen Temalar:
  • Astra (Hafif ve tam mobil duyarlı)
  • GeneratePress (Yüksek performanslı)
  • Neve (Google Core Web Vitals uyumlu)
• Nasıl Kontrol Edilir?
  Tema demo sayfasını Google Mobile-Friendly Test ile taratın.

2. Sayfa Hızı Optimizasyonu
Mobil Hız İçin Kritik Adımlar:

• Resim Optimizasyonu:
  • Tüm görselleri WebP formatına dönüştürün (Smush veya ShortPixel eklentisiyle).
  • loading="lazy" ekleyin (WordPress 5.5+ otomatik yapar).
• CSS/JS Küçültme:
  WP Rocket veya Autoptimize eklentisiyle sıkıştırın.
• Sunucu Yanıt Süresi:
  Hosting olarak LiteSpeed sunucu (SiteGround) veya Cloudflare APO kullanın.

3. Mobil Öncelikli Tasarım İpuçları
A. İçerik Düzeni:

• "Above the Fold" (ilk ekran) içeriği 500KB'den küçük olmalı.
• Font Boyutu: Başlıklar ≥20px, metinler ≥16px.
• Butonlar: Minimum 48x48px (parmak uyumu için).

B. Gezinme:

• Hamburger menü kullanın.
• Sticky CTA butonu ekleyin (örneğin "Ara" veya "Sepet").

C. Medya:

• Otomatik oynatılan videoları kaldırın.
• Slider yerine statik hero image kullanın.

4. Eklentilerle Mobil Optimizasyon
5. Elementor ile Mobil Editör Kullanımı

1. Elementor'da bir sayfayı düzenlerken "Mobil" simgesine tıklayın.
2. Mobilde gizlenecek/gösterilecek öğeleri ayarlayın.
3. Stack özelliği ile mobilde sütunları dikey hizala.

Örnek: Masaüstünde yan yana olan öğeleri mobilde %100 genişlikle gösterin.
6. Google Core Web Vitals Mobil Metrikleri

• LCP (En Büyük İçerikli Boyama): <2.5sn
• FID (İlk Girdi Gecikmesi): <100ms
• CLS (Düzen Kayması): <0.1

Çözümler:

• Perfmatters eklentisiyle gereksiz scriptleri kaldırın.
• Nitropack gibi all-in-one çözümler kullanın.

7. Mobil Kullanıcı Testi

1. Gerçek cihazlarda test edin (iPhone/Android).
2. Chrome DevTools > "Device Toolbar" ile simülasyon yapın.
3. Kullanıcı davranışını analiz edin (Hotjar Mobile Heatmaps).

Bonus: Mobil SEO Optimizasyonu

• Structured Data ekleyin (Schema Pro eklentisi).
• Meta açıklamaları 120 karakteri geçmesin.
• Hızlı arama sonuçları için AMP etkinleştirin.

Özet:

1. Hızı optimize edin → 2. Tasarımı mobil odaklı yapın → 3. Test edip iyileştirin.

Pro Tip: Cloudflare Mirage ile mobil kullanıcılara düşük çözünürlüklü görseller gönderin (veri tasarrufu sağlar).

Genişletmek için tıkla ...

Örnek Mobil Sayfa Yapısı:
html

Copy

Download


Run
<header>
<!-- Basit logo + hamburger menü -->
</header>
<main>
<!-- Tek sütunlu içerik -->
<button>Büyük ve tıklanabilir CTA</button>
</main>
<footer>
<!-- Sosyal medya + tel linki -->
</footer>
Canlı Örnek: Astra temasının mobil demo inceleyin.
Mobil öncelikli tasarım, 2024'te zorunluluktur – çünkü trafiğin ~%60'ı mobil cihazlardan geliyor!