Page speed mobile optimization karşılaştırması

Kısa Cevap

Page speed mobile optimization, mobil cihazlarda sitenizin açılma hızını iyileştirmek demektir. Lansmanınız sırasında mobil hızı göz ardı ederseniz, potansiyel kullanıcılarınızın yarısından fazlasını kaybedersiniz. Görüntü sıkıştırma, kod minifikasyonu ve lazy loading gibi temel optimizasyonlarla 2-3 saniyenin altında yükleme süresi hedefleyebilirsiniz.

Neden Mobile Speed Lansmanınızı Etkiliyor?

Ürün lansmanını yapıyorsanız, erken dönem kullanıcılarınız çoğunlukla sosyal medyadan gelecek. Twitter'dan, LinkedIn'den, hatta WhatsApp'tan gelen bağlantıları insanlar mobil telefonda açıyor. Eğer siteniz 5-6 saniyede yükleniyorsa, bu kişiler "sayfamı döndürüp sor" deyip gidiyor.

Kişisel deneyimimden söyleyeyim: ilk lansmanımızda bu hatayı yaptık. Açılış sayfamız tasarım açısından harika görünüyordu ama mobil hızı berbat idi. Tanıştığım potansiyel yatırımcıların üçte biri tarafımızdan haber alamadı çünkü sayfayı açamadılar. O zamandan beri mobil optimizasyonu tüm lansmanlarımın ilk adımı oldu.

Mobile Speed ile Desktop Speed Arasındaki Fark

Desktop'ta test ettiğiniz hız, mobilde hiç böyle olmayabilir. Birkaç nedeni var:

• Ağ bağlantısı: Masaüstü genellikle sabit internet'teyken, mobil 4G/5G'dedir (ve her zaman hızlı değildir)
• İşlemci gücü: Telefonlar masaüstü bilgisayarlardan daha zayıftır, heavy JavaScript'i işlemesi daha uzun sürer
• Ekran boyutu: Küçük ekranda gösterilecek şeyler için de ağır dosyaları yüklemenin mantığı yok
• Pil tüketimi: Yavaş sayfa yüklemesi daha fazla batarya harcar, kullanıcılar bunu hisseder

Google'ın PageSpeed Insights aracında test ettiğinizde "Desktop 85 puan, Mobile 42 puan" gibi dramatik farklar görebilirsiniz. Bu normal.

Hangi Optimizasyonlar Gerçekten İşe Yarıyor?

1. Görüntü Sıkıştırması

Lansmanınız için güzel görüntüler kullanacaksınız, ama bunlar kütüphaneden indirildiğinde muhtemelen 3-4MB boyutundadır. Ben bir Web tool ile (örneğin TinyPNG) bu görüntüleri sıkıştırıyorum. Çoğu zaman kalite farkı görünmüyor ama boyut %70 azalıyor. Lansmanınızda 5-10 görüntü varsa, bu birkaç saniye fark yaratıyor.

2. Kod Minifikasyonu

CSS ve JavaScript dosyalarınızdaki boşlukları, yorumları ve gereksiz karakterleri kaldırmak. Çok zor gelmişse, bir build tool (Webpack gibi) bunu otomatik yapıyor. Fark belki %30-40'tir ama eklenmiş olur.

3. Lazy Loading

Sayfanın altında olan görüntüleri, kullanıcı aşağı kaydırıncaya kadar yükleme. Böylece sayfa ilk açıldığında sadece görünen kısım yüklenir. Özellikle bekleme listesi sayfasında veya testimonial bölümünde etkili oluyor.

4. CDN Kullanmak

Siteniz bir sunucuda oturuyorsa ve ziyaretçileri dünya genelinde ise, statik dosyaları dünyanın farklı noktalarından sunmak mantıklı. Cloudflare gibi hizmetler bunu ucuza yapıyor. İstanbul'daki birisi ile Singapur'daki birisi aynı hızda içerik alıyor.

5. Font Optimizasyonu

Google Fonts falan çok güzel ama her font indirme isteği ekstra bağlantıdır. Maksimum 2 font ailesinde kalır, gereksiz fontları kaldırırım. Eğer brandinizin özel bir fontu varsa, onu "display: swap" ile yüklerim ki metin boş kalmasın diye.

Ölçüm ve Benchmark: Neyi İzlemeli?

Optimizasyon yaparken, neyi hedefleyeceğinizi bilmeniz lazım. Google'ın tanımladığı Core Web Vitals denilen üç metrik vardır:

• LCP (Largest Contentful Paint): Sayfanın ana içeriğinin göründüğü zaman. Hedef: 2.5 saniye altında
• FID (First Input Delay): Kullanıcının tıklama ile sayfanın tepki verme süresi. Hedef: 100 milisaniye altında
• CLS (Cumulative Layout Shift): Sayfanın açılırken sürüklenmesi. Hedef: 0.1'in altında

Lansmanınız için bu üçüne de bakmalısınız. Google PageSpeed Insights'a sitenizi yapıştırıp raporunu oluşturmak 30 saniye alır. Mobil puanınız 70+ olmalıdır. 50'nin altında ise tekrar optimizasyon yapmanız gerekir.

Lansmandan Önce Yapılacaklar Kontrol Listesi

1. PageSpeed Insights'ta mobil puanını kontrol et (hedef: 70+)
2. Tüm görüntüleri sıkıştır
3. Lazy loading'i kapatılan bölümlere ekle
4. Gereksiz plugin, script, font'u sil
5. Canlı ağ hızı benzetiminde (4G) test et
6. Çeşitli mobil cihazlarda (iPhone, Android) test et
7. Lansman öncesi son bir kez puanını kontrol et

Sık Sorulan Sorular

Lansmanımız başladıktan sonra mobil hızı artırabilir miyim?

Evet, ama ilk 48 saat çok önemlidir. O dönemde maksimum hız gerekir. Lansmanın ilk hafta sonrasında optimizasyon yaparsan, o zaman daha az etkili olur. Yani kesinlikle öncesinde yapmalısın.

Hangi aracı kullanmalıyım: PageSpeed Insights mi, Lighthouse mi, GTmetrix mi?

Hepsini kullanabilirsin ama PageSpeed Insights Google'ın resmi aracıdır ve lansmanın ilerlemesini buna göre ölçmeniz mantıklı. Lighthouse'u da kur, geliştici araçlarından test edebilirsin gerçek ağ koşullarında.

WordPress, Webflow gibi platformlar mobil hızı otomatik mi optimize ediyor?

Kısmen ediyor ama yeterli değil. Webflow'un otomatik optimizasyonu daha iyi, WordPress ise sende plugin yüklemesi ve ayarlanması gerekir. Her durumda, yukarıda saydığım adımları sen de atmalısın.

Mobil hız ne kadar iyileştirmek istiyorum?

Lansmanında hedeflediğin dönüştürme oranı ne kadar yüksek, mobil hız o kadar önemli. Eğer bekleme listesinde 1000 kişi hedefliyorsan, %2-3 dönüştürme iyidir. Ama mobil hız düşükse bu %1'e düşebilir. Yani hedefini sağlamak için hızını maksimize etmelisin.