Mobil Uyumlu Web Tasarım Neden Zorunlu? Core Web Vitals Rehberi

Kullanıcıların büyük bölümü sitenize telefondan geliyor ve Google indekslemeyi büyük ölçüde mobil sürüm üzerinden yapıyor. Yani mobil deneyim "iyi olursa güzel" değil, zorunlu. Bu yazıda mobil performansın üç temel metriğini ve pratik çözümlerini ele alıyoruz.

LCP: En Büyük İçerik Boyaması

LCP, sayfa açıldığında ekrandaki en büyük öğenin (genellikle hero görseli veya başlık) ne zaman göründüğünü ölçer. Hedef: 2,5 saniyenin altı.

İyileştirme Yöntemleri

• Hero görselini preload ile önceliklendirin
• Görseli WebP/AVIF olarak ve ekranda görüneceği boyutta sunun
• İlk ekrandaki görselde lazy-load kullanmayın, fetchpriority="high" verin
• Kritik CSS'i satır içine alın, geri kalanını erteleyin

CLS: Kümülatif Düzen Kayması

CLS, sayfa yüklenirken içeriğin yerinden kaymasını ölçer. Hedef: 0,1'in altı. Kullanıcı tam bir butona dokunacakken buton kayarsa, o kullanıcıyı kaybediyorsunuz.

İyileştirme Yöntemleri

• Her <img> etiketine width ve height yazın
• Gömülü video ve haritalar için sabit oranlı kapsayıcı kullanın
• Reklam veya banner alanlarını önceden boyutlandırın
• Web fontlarda font-display: swap kullanın

INP: Etkileşimden Sonraki Gecikme

INP, kullanıcı bir şeye dokunduktan sonra sayfanın ne kadar sürede tepki verdiğini ölçer. Hedef: 200 milisaniyenin altı. Ağır JavaScript bu metriği bozar.

İyileştirme Yöntemleri

• Kullanılmayan JavaScript'i hiç yüklemeyin
• Üçüncü taraf scriptleri defer/async ile çalıştırın
• Uzun süren görevleri bölün
• Analytics ve sohbet eklentilerini sayfa yüklendikten sonra başlatın

Tasarım Kararları Doğrudan Hızı Etkiler

Hız yalnızca teknik bir konu değil. Tasarım aşamasında alınan kararlar performansı belirliyor:

• Slayt (carousel) yerine tek güçlü görsel kullanmak
• Gereksiz animasyon ve efektlerden kaçınmak
• Tek bir font ailesi ve iki-üç ağırlıkla yetinmek
• İkonları SVG sprite ya da satır içi SVG olarak kullanmak

Mobil Deneyim Kontrol Listesi

1. Butonlar en az 44x44 piksel mi?
2. Gövde metni 16 piksel ve üzeri mi?
3. Yatay kaydırma var mı? (olmamalı)
4. Form alanları doğru klavye tipini açıyor mu?
5. Sabit "Ara" ve "WhatsApp" butonları erişilebilir mi?

Nereden Başlamalı?

Mevcut sitenizin mobil performansını ölçmek için sayfa hızı araçlarını kullanabilirsiniz. Çıkan sorunları önceliklendirmekte zorlanıyorsanız, mobil uyumlu web tasarım sayfamızdaki yaklaşımı inceleyebilir veya bize ulaşabilirsiniz.