Page speed mobile optimization yaparken sık yapılan hatalar
Page Speed Mobile Optimization: Başladığım İlk Günlerde Yaptığım Hatalar
Ürün lansmanı yaparken mobil hızı optimize etmenin ne kadar kritik olduğunu ilk kez anladığımda, zaten çok geç olmak üzereydi. Lansmanın üç gün öncesinde, açılış sayfasının mobil versiyonunda kasılmalar olduğunu fark ettim. O anda anladım ki page speed mobile optimization sadece teknik bir konuda değil—müşteri deneyimini doğrudan etkileyen bir faktördü. O günden sonra yapılan hataları sıralamak istiyorum, çünkü siz bu tuzaklara düşmeyin diye.
Görseller Optimize Etmeden Yüklemek
En büyük hatalarımdan biri, web tasarımcıdan aldığım görselleri olduğu gibi sayfaya koydum. Hiç sıkıştırmadım, format değiştirmedim. Mobil cihazdan açıldığında sayfa yüklenmesi 8 saniyeye kadar çıktı. Google'ın ideal süresi 3 saniye olduğunu sonra öğrendim.
Bugün yapabileceğiniz en etkili şey, tüm görselleri WebP formatına çevirmek. Ayrıca farklı cihaz boyutları için farklı boyutlarda görseller hazırlamak lazım. Bir 4000x3000 piksellik fotoğraf mobil telefonda 400x300 piksel gösteriliyorsa, o gücü boşa harcamış oluyorsunuz. Ben TinyPNG gibi araçları kullanarak %70'e varan sıkıştırma yaptım ve hiçbir görsel kalitesi kaybetmedim.
JavaScript Dosyalarını Lazy Loading Yapmadan Yüklemek
Açılış sayfasında kullanmadığım beş ayrı JavaScript kütüphanesi vardı. Bunlar sayfa ilk açılırken tamamen yüklenmişti. Sayfa yükleme süresi katlanarak arttığında ne olduğunu anlamakta bir süre geciktim.
Page speed mobile optimization yaparken bu klasik hata çok yaygın. Lazy loading yapın—yani JavaScript dosyalarını sadece ihtiyaç duyulan anda yükleyin. Örneğin, video oynatıcısı sayfanın alt kısmındaysa, onu kullanıcı o bölüme kaydırıncaya kadar yüklemeye gerek yok. Bu değişiklik yapıldıktan sonra sayfa yükleme süresi yarıya indi.
CSS Dosyalarını Minify Etmemek
Tasarımcı tarafından hazırlanan CSS dosyası yaklaşık 120KB'ti. İçinde gereksiz boşluklar, yorumlar ve kullanılmayan stiller vardı. Dosya boyutu bu kadar büyükken, mobil ağ hızındaki cihazlarda sayfa render edilmesi çok daha uzun sürüyordu.
Minify işlemi—boşlukları, yorumları ve gereksiz karakterleri kaldırmak—bu dosya boyutunu 30KB'e düşürdü. Aynı işlemi JavaScript dosyaları için de yaptım. Bu adımlar otomatize edilebilir, yani lansman öncesi tek bir komutla tüm dosyalar optimize edilebilir.
Cache Ayarlarını Yapılandırmamak
Siteye ilk ziyarette tüm dosyaların yüklenmesi 6 saniye sürüyordu. İkinci ziyarette de aynı sürü—hiç gelişme yoktu. Bunun nedeni cache ayarlarıydı. Tarayıcı, dosyaları her seferinde sunucudan indiriyordu.
Browser cache ayarlarını düzgün yapılandırdıktan sonra, tekrar ziyaret eden kullanıcılar için sayfa yükleme süresi 1,5 saniyeye düştü. Statik dosyaları—CSS, JavaScript, görseller—30 gün boyunca cache'te tuttuğumu belirledim. Bu sayede lansmandan sonra düzenli olarak siteye gelen kullanıcılar çok daha hızlı bir deneyim yaşıyordu.
Sunucu Yanıt Süresine Dikkat Etmemek
Tüm optimizasyonları yaptıktan sonra bile sayfa hala biraz yavaş geliyordu. Sorunun nereden kaynaklandığını merak ettiğimde, sunucu yanıt süresi 2 saniye olduğunu gördüm. Bu da page speed mobile optimization'ın başarısını sınırlıyordu.
Sunucu yanıt süresi genellikle hosting kalitesi, veritabanı sorguları ve sunucu konfigürasyonu ile ilgilidir. Ben daha iyi bir hosting planına geçtim ve veritabanı sorgularını optimize ettim. Sunucu yanıt süresi 300ms'ye düştü. Bu değişiklik tüm sayfa yükleme deneyimini ciddi şekilde iyileştirdi.
Test Etmemek
Tüm bu optimizasyonları yaparken bir şeyin eksik olduğunu hissetsem de başlangıçta test etmedim. Google PageSpeed Insights gibi araçları daha erken kullanmalıydım.
Lansmanınızdan bir hafta önce Google PageSpeed Insights, GTmetrix ve Lighthouse ile test edin. Bu araçlar sadece yavaş kısımları göstermekle kalmaz, nasıl düzeltileceğine dair öneriler de sunar. Mobil versiyonu mutlaka gerçek telefonunuzdan test edin—simülatör her zaman gerçek ağ koşullarını yansıtmaz.
Sık Sorulan Sorular
Page speed mobile optimization ne kadar süre alıyor?
Eğer sıfırdan başlıyorsanız, 4-5 saat içinde temel optimizasyonları yapabilirsiniz. Ama sunucu ayarlarını da düşünürsek, 1-2 gün bırakmanız daha güvenli. Lansmanı planlıyor iseniz, bunu 8 haftalık lansman takviminin erken haftalarına ekleyin.
Hangi mobil cihaza göre test etmeliyim?
En yaygın seçenek iPhone 12 veya orta seviye Android cihazlardır. Ama Google PageSpeed araçları otomatik olarak düşük hızlı 4G bağlantısını simüle eder. Gerçek 4G ile test etmek daha iyi olur.
Görselleri WebP'ye çevirmek güvenli midir?
WebP artık tüm modern tarayıcılarda destekleniyor. Eski tarayıcılar için fallback olarak JPG tutmalısınız. HTML'de bu otomatik olarak yapılabilir.
Lansmandan sonra page speed'i kontrol etmeye devam etmeliyim mi?
Evet. İlk ayda özellikle, trafiğin artmasıyla sunucu performansı düşebilir. Haftalık kontroller yapmanızı tavsiye ederim.