Lansman Sayfasının Yükleme Hızını İyileştirme Kılavuzu
Hızlı Yüklenen Sayfa = Daha Fazla Dönüşüm
Lansmanımda fark ettim: açılış sayfam 4 saniyede yükleniyor, ziyaretçilerin %40'ı beklemeden çıkıyor. Hız problemini çözdükten sonra geri dönüş oranı %25 arttı. Çünkü insanlar sabırsız. Özellikle mobilde, özellikle ilk kez duyduğu bir ürünü tanımaya çalışırken.
Lansman sayfanızın yükleme hızı, tasarımı kadar önemli. Daha doğrusu: tasarım hiç önemli değil eğer sayfa yüksüz yüklenmiyorsa. Şimdi sana kendi deneyimlerimden geçeceğim yöntemleri anlatacağım.
Görselleri Optimize Etme: Başlangıç Noktası
Lansmanımın en büyük sorunuydu bu. Açılış sayfasında ürün screenshotları ve kurucunun fotoğrafı vardı. Orijinal dosyalar 2-3 MB'tı her biri. Sayfa açıldığında tarayıcı tüm resimleri indirmeye çalışıyor ve bu sırada sayfanın geri kalanı bloklanıyor.
İlk adım: görselleri sıkıştırmak. Bir araç kullandım (TinyPNG, ImageOptim gibi), aynı görsel kalitesi ile dosya boyutu %50-70 düştü. 3 MB'lık görsel 800 KB oldu.
İkinci adım: uygun formatlara dönüştürmek. Eski JPEG'ler yerine WebP formatına geçtim. Tarayıcı uyumluluğu iyi ve dosya boyutu daha küçük. Yedek olarak JPEG'i de tutdum, eski cihazlar için.
Üçüncü adım: kesintili yükleme (lazy loading). Sayfanın yukarısında görünen görseller hemen yükleniyor, aşağıdaki görseller ziyaretçi scroll yaptıkça yükleniyor. Sayfa açılış hızı çarpıcı şekilde iyileşti.
Caching: Ziyaretçinin Bilgisayarında Dosya Tutmak
Caching sayesinde aynı ziyaretçi ikinci kez sayfaya geldiğinde, tarayıcı birçok dosyayı internetten indirmiyor – bilgisayarında tuttuğu kopyaları kullanıyor.
Hosting sağlayıcı kontrol panelinden (cPanel, Plesk vb.) cache ayarlarını aktif hale getirdim. HTML dosyaları 1-2 saat, CSS ve JavaScript dosyaları 1-2 ay, görseller 1 ay cache'lendi. Sayfalardaki kod satırında (head kısmında) cache headers ekledim.
CDN (Content Delivery Network) kullanmak da önemli. Lansmanımı farklı ülkelerdeki sunuculardan servis edebilen bir CDN entegre ettim. Böylece Türkiye'deki ziyaretçi Türkiye sunucusundan, Amerika'daki ziyaretçi Amerika sunucusundan yüklem alıyor. Sayfa açılış hızı %20-30 iyileşti.
Sunucu Konfigürasyonu: Arka Taraftaki Hız
Hosting şirketimin sunucu hızı da etkilidir. Lansmanın başında paylaşımlı hosting (shared hosting) kullanıyordum – aynı sunucuyu binlerce site paylaşıyor. Yüksek trafikte sayfalar yavaşlıyordu.
Lansman haftasında daha iyi bir pakete (VPS) taşındım. Sunucunun kaynakları artık sadece benim site ile ilgili. Açılış hızı hemen 30% iyileşti.
Sunucu tarafında gzip sıkıştırması da aktif hale getirdim. HTML, CSS, JavaScript dosyaları internet üzerinden gzip formatında sıkıştırılarak gidiyor, tarayıcı da bunları açıyor. Dosya boyutları %60-80 küçülüyor.
Kodun Kendisini Hafifletmek
Lansmanımız için bir sayfa şablonu kullanıyordum. Şablon kütüphanesinde çok fazla CSS ve JavaScript vardı – bunların %70'ini hiç kullanmıyordum. Unused (kullanılmayan) kodu temizledim.
Harici kütüphaneleri gözden geçirdim. Örneğin bir slider için tüm jQuery kütüphanesini yüklemek mantıksız – daha hafif bir çözüm veya vanilla JavaScript kullanıyorum.
Google Fonts kullandığım yazı tiplerini sistem yazı tiplerine değiştirdim. Her ziyaretçi açılış sayfasına geldiğinde, tarayıcı Google'ın sunucularından yazı dosyası indiriyor. Bunu kaldırınca sayfa açılış hızı daha hızlandı.
Ölçme ve İzleme
Tüm bu değişiklikleri uygulamadan önce ve sonra, hızı ölçtüm. Google PageSpeed Insights ve GTmetrix gibi araçları kullandım. Hangi optimizasyonun ne kadar katkı yaptığını görüyorum, böylece sonraki dönem nereye odaklanacağımı biliyorum.
SSS
Sayfa yükleme hızı lansmanı nasıl etkiler?
Ziyaretçiler hızlı yüklenen sayfaları daha fazla kullanır, form doldurur ve haber bültenine abone olur. Ayrıca Google arama sonuçlarında da sayfa hızı önemlidir – hızlı sayfalar daha üstte çıkar.
En çok etkisi olan optimizasyon hangisi?
Benim için görsel optimizasyonu ve lazy loading beraber en büyük fark yaptı. Aynı zamanda kaynak maliyeti de düşük.
Bütçem çok az ise ne yapmalıyım?
Ücretsiz araçlarla görselleri sıkıştır, caching ayarlarını kendi hosting panelinden aktif et, ve gereksiz kodu temizle. Bunlar bile %30-40 hız kazancı sağlıyor.
Hız testi ne sıklıkla kontrol etmeliyim?
Lansmandan önce ve lansmanın ilk haftasında sık sık kontrol et. Sonrasında ayda bir kez yeterli.