Mobil Uyumlu Web Tasarım ve Hız Optimizasyonu: Core Web Vitals ile Hem Sıralamanızı Hem Satışlarınızı Artırın

Bir ziyaretçi sitenize telefondan girdiğinde ve sayfa birkaç saniye boyunca boş kaldığında, ya da butonlara basmaya çalışırken yanlış yere tıkladığında, o kişinin sizinle ilgili ilk izlenimi artık oluşmuştur. Hız ve mobil uyum, “teknik detay” olarak görülse de doğrudan müşteri deneyimini, arama sıralamasını ve dolayısıyla gelirinizi etkiler. Google, sıralamada mobil sürümü esas alır (mobile-first indexing) ve kullanıcı deneyimini ölçen Core Web Vitals metriklerini sayfa deneyimi değerlendirmesinin bir parçası olarak kullanır. Bu rehberde, mobil uyumlu ve hızlı bir kurumsal site için neleri nasıl yapmanız gerektiğini anlatıyoruz.

1Neden Önce Mobil? Mobile-First Yaklaşımı

Arama motorları, sitenizi değerlendirirken öncelikle mobil sürümü tarar. Yani masaüstünde kusursuz görünen ama mobilde içeriği eksik, yavaş ya da kullanışsız olan bir site, sıralamada dezavantajlı olabilir. Mobile-first yaklaşımı, tasarıma en küçük ekrandan başlamak ve ekran büyüdükçe düzeni genişletmek demektir. Bu yöntem sizi önceliklendirmeye zorlar: küçük ekrana sığmayan her öğe, gerçekten gerekli mi sorusunu getirir ve sonuçta daha sade, daha hızlı bir arayüz ortaya çıkar.

2Responsive Tasarımın Temel İlkeleri

• Akışkan yapı: Sabit piksel genişlikleri yerine yüzde, esnek ızgara (grid, flexbox) ve göreli birimler kullanın.
• Viewport ayarı: Sayfanın başlığında doğru viewport meta etiketi bulunmazsa mobil tarayıcı sayfayı küçültülmüş masaüstü gibi gösterir.
• Dokunmatik uyum: Butonlar ve bağlantılar parmakla rahat basılacak büyüklükte ve aralıkta olmalı.
• Okunabilir metin: Yakınlaştırma gerektirmeyen yazı boyutu ve yeterli satır aralığı kullanın.
• Esnek görseller: Görseller konteynerine göre ölçeklenmeli, taşma yapmamalı.
• Mobil menü: Açılır menü sade, erişilebilir ve tek elle kullanılabilir olmalı.

Tasarımı yalnızca tarayıcıda pencereyi küçülterek değil, gerçek cihazlarda da test edin. Farklı ekran boyutları ve yavaş bağlantılar, emülatörlerin göstermediği sorunları ortaya çıkarır.

3Core Web Vitals: Google’ın Kullanıcı Deneyimi Ölçütleri

Core Web Vitals üç temel metrikten oluşur. Google’ın “iyi” kabul ettiği eşik değerler şöyledir:

• LCP (Largest Contentful Paint): Sayfadaki en büyük içerik öğesinin ne kadar sürede göründüğünü ölçer. Hedef: 2,5 saniye ve altı.
• INP (Interaction to Next Paint): Kullanıcı bir tıklama ya da dokunuş yaptığında sayfanın ne kadar hızlı yanıt verdiğini ölçer. Hedef: 200 milisaniye ve altı.
• CLS (Cumulative Layout Shift): Sayfa yüklenirken öğelerin beklenmedik biçimde kaymasını ölçer. Hedef: 0,1 ve altı.

Hız, kullanıcıya gösterdiğiniz saygının teknik karşılığıdır. Beklemek zorunda kalan ziyaretçi, değerinin bilinmediğini hisseder.

4Görsel Optimizasyonu: En Hızlı Kazanım

Kurumsal sitelerde sayfa ağırlığının büyük kısmını genellikle görseller oluşturur ve bu nedenle ilk iyileştirme alanı budur.

• WebP veya AVIF gibi modern formatları tercih edin; JPEG ve PNG’ye göre aynı kalitede daha küçük dosya boyutu sağlarlar.
• Görselleri gösterildikleri boyuta göre ölçeklendirin; 3000 piksellik bir fotoğrafı 600 piksellik alanda göstermeyin.
• Ekranın altında kalan görsellerde gecikmeli yükleme (lazy loading) kullanın, ancak sayfanın en üstündeki ana görselde kullanmayın.
• Her görsele genişlik ve yükseklik değeri tanımlayın; bu, yükleme sırasında oluşan kaymaları (CLS) önler.
• Farklı ekran boyutları için srcset ile uygun boyutta görsel sunun.

5CSS, JavaScript ve Üçüncü Taraf Betikler

Kullanılmayan kod, sayfayı gereksiz yere ağırlaştırır. Gereksiz kütüphaneleri kaldırın, CSS ve JavaScript dosyalarını küçültün (minify), sayfanın ilk görünümü için kritik olmayan betikleri ertelemeyi (defer) tercih edin. Sohbet pencereleri, reklam etiketleri, ısı haritası araçları ve sosyal medya eklentileri gibi üçüncü taraf betikler çoğu zaman en büyük hız düşmanlarıdır; her birinin sağladığı faydayı ağırlığıyla kıyaslayın ve gerçekten gerekli olanları tutun. Çok sayıda kütüphaneye dayanan ağır bir yapı yerine ihtiyaca göre hafif ve modern bir altyapı seçmek de uzun vadede performansı korur.

6Yazı Tipleri ve Yükleme Davranışı

Web fontları, LCP’yi ve görsel kaymaları etkileyebilir. Kullandığınız yazı tipi ailesi ve ağırlık sayısını sınırlı tutun, fontları kendi sunucunuzdan sunmayı düşünün ve font-display: swap gibi ayarlarla metnin font yüklenirken bile görünür kalmasını sağlayın. Çok sayıda ağırlık ve stil yüklemek, görünüşte küçük ama toplamda hissedilir bir yük oluşturur.

7Sunucu, Önbellek ve CDN

Kod ve görsel ne kadar optimize olursa olsun, yavaş yanıt veren bir sunucu tüm çabayı boşa çıkarabilir. Güvenilir ve hedef kitlenize yakın bir barındırma hizmeti seçin, sunucu yanıt süresini (TTFB) takip edin, tarayıcı önbelleğini doğru yapılandırın ve statik dosyaları bir içerik dağıtım ağı (CDN) üzerinden sunun. Sıkıştırma (Gzip veya Brotli) etkinleştirmek ve HTTPS ile modern protokolleri kullanmak da kolay ama etkili adımlardır.

8Ölçüm ve Sürekli İyileştirme

Optimizasyon tek seferlik bir iş değil, düzenli bir alışkanlıktır. Şu araçlarla durumunuzu izleyin:

• PageSpeed Insights: Hem laboratuvar verisi hem de gerçek kullanıcı verisi sunar.
• Lighthouse: Performans, erişilebilirlik ve SEO için ayrıntılı rapor üretir.
• Google Search Console Core Web Vitals raporu: Sitenizin hangi sayfa gruplarında sorun olduğunu gösterir.

Önce en çok trafik alan ve en çok kazandıran sayfalardan başlayın. Her değişiklikten sonra ölçüm yapın; yeni bir eklenti ya da kampanya betiği, daha önce elde ettiğiniz kazancı kolayca geri alabilir.

?Sıkça Sorulan Sorular

Site hızı gerçekten SEO’yu etkiler mi?

Evet, ancak tek başına belirleyici değildir. Google, sayfa deneyimini sıralama sinyalleri arasında değerlendirir; içerik alaka düzeyi ise hâlâ çok önemlidir. Buna rağmen yavaş bir site, hemen çıkma oranını artırarak dolaylı olarak da sonuçlarınızı olumsuz etkiler.

PageSpeed puanım 100 olmalı mı?

Hayır. Mükemmel puan peşinde koşmak yerine Core Web Vitals eşiklerini sağlamaya ve gerçek kullanıcı deneyimini iyileştirmeye odaklanın. Gerçek kullanıcı verisinde “iyi” aralığında olmak, laboratuvar puanındaki küçük farklardan daha değerlidir.

Hazır tema kullanan bir site hızlı olabilir mi?

Olabilir, ancak çoğu hazır tema gereğinden fazla özellik ve betik barındırır. Doğru yapılandırma ve gereksiz bileşenlerin temizlenmesiyle iyi sonuçlar alınabilir; yine de performansı öncelikli tasarlanmış bir yapı daha öngörülebilir sonuç verir.