Progresif web uygulaması (PWA) tekniklerinin siteniz için yapabileceği iyi şeyleri duymuş olabilirsiniz. Sitenizin performansının temelini iyileştirmeden PWA özellikleri eklemek isteyebilirsiniz. Ancak hiçbir PWA özelliği, JavaScript'in engellenmesi ve şişirilmiş resimlerle ilgili sorunları düzeltemez.
Bunun yerine, ilk adımınız site denetimi yapmaktır. Bu denetim, iyi çalışan ve iyileştirilebilecek noktaların tarafsız bir şekilde incelenmesidir.
Sitenizi veya uygulamanızı denetlemek, dayanıklı ve yüksek performanslı bir deneyim oluşturmanıza yardımcı olur. Ayrıca, minimum onay ile uygulanabilecek hızlı kazanımları vurgulayın. Bir denetim, veriye dayalı geliştirme için bir temel oluşturur. Değişiklikler durumu iyileştirdi mi? Siteniz rakiplerle karşılaştırıldığında nasıl bir performans gösteriyor? Çabalarınıza öncelik vermenizi sağlayan metrikler ve iyileştirmeler yaptıktan sonra övünebileceğiniz somut kanıtlar elde edersiniz.
Yalnızca 5 dakika içinde
Ana sayfanızda Lighthouse'u çalıştırın ve rapor verilerini kaydedin. Performans, erişilebilirlik, güvenlik ve SEO'da iyileştirme yapabileceğiniz bir yapılacaklar listesi ve ölçülebilir bir temel oluşturursunuz.
Yalnızca 30 dakika içinde
Başlamak için muhtemelen hâlâ en iyi yer Lighthouse'tur. Ancak daha fazla zamanınız varsa diğer araçlardaki sonuçları da kaydedebilirsiniz:
- Chrome Geliştirici Araçları Güvenlik paneli: HTTPS kullanımı.
- Chrome Geliştirici Araçları Ağ istekleri paneli: yükleme süreleri; HTML, CSS, JavaScript, resimler, yazı tipleri ve diğer dosyalar için kaynak boyutları ve istek sayısı.
- Chrome Görev Yöneticisi: Siteniz düzenli olarak önemli miktarda CPU veya diğer uygulamalardan daha fazla bellek kullanıyorsa bellek sızıntılarını, görev çalıştırma veya kaynak yükleme sorunlarını düzeltmeniz gerekebilir.
- WebPagetest: önbelleğe alma, ilk bayta geçiş süresi, CDN kullanımı.
- PageSpeed Insights: Yükleme performansı, veri maliyeti ve kaynak kullanımı (Chrome Kullanıcı Deneyimi Raporu verileri dahil). Bu veriler, gerçek dünya performans istatistiklerini vurgular.
Web sitenizi ilk kez ziyaret eden bir kullanıcının gözünden test ettiğinizden emin olun. Siteyi gizli pencerede açın veya önbelleğe almayı devre dışı bırakmak ve depolamayı temizlemek için tarayıcı araçlarını kullanın. Bu sayede, her öğenin yerel bir önbellekten değil ağdan alınması sağlanır. Böylece, ilk yükleme performansıyla ilgili doğru bir resim elde edersiniz.
Gerçek dünyada test yapmanın yerini hiçbir şey tutmaz. Sitenizi, kullanıcılarınızı temsil eden cihazlarda ve bağlantı türlerinde test ettiğinizden emin olun. Ayrıca, öznel deneyiminizin kaydını tutun.
Araçlar konusunda kafanız karışıksa
Hız Araçları Hakkında Nasıl Düşünülür? başlıklı kılavuzumuza göz atın.
Başka bir şey yapamıyorsanız Lighthouse'u kullanarak şunları kontrol edin:
- HTTPS: Her site, tüm öğeleri HTTPS üzerinden sunmalıdır.
- Sunucu ayarları: Web sunucunuz veya CDN'niz, tarayıcınızın kaynakları önbelleğe almasını sağlamak için sıkıştırmayı doğru şekilde kullanmalı, HTTP/2'yi kullanmalı ve uygun başlıkları içermelidir.
- Sayfanın en altına taşınabilen veya async ya da defer özelliği verilebilen komut dosyası öğeleri.
- Kaldırılabilen JavaScript ve kitaplıklar.
- CSS ve JavaScript kitaplıkları gibi kullanılmayan kodlar.
- Resim piksel boyutunu küçültme fırsatları.
- PNG'yi JPG'ye dönüştürme gibi, dosya biçiminde yapılan ve resmin boyutunu iyileştiren değişiklikler.
Kitle, paydaşlar, bağlam
Yeniden düzenlemeyle ilgili öncelikler; kitlenize, içeriğinize ve işlevselliğe bağlıdır. Sitenizi kimler ziyaret ediyor? Neden ve nasıl kullanıyorlar? Performans bütçeniz nedir?
Paydaşlarınız kimler ve öncelikleri neler? Bu durum, denetim verilerinizi nasıl yapılandıracağınızı, sunacağınızı ve paylaşacağınızı etkiler.
Sitenizin tamamını denetleyemiyorsanız nereye odaklanmanız gerektiği hakkında fikir edinmek için sayfa analizlerini kontrol edin. Yüksek hemen çıkma oranları, sayfada kalma süresinin düşük olması ve beklenmedik çıkış sayfaları, nereden başlayacağınız konusunda iyi bir gösterge olabilir. Aynı şekilde, barındırma maliyetleri, reklam tıklamaları ve dönüşümler gibi işletme metrikleri de önemlidir. Paydaşlardan, kendileri için önemli olan veriler hakkında genel bir bakış elde edin.
Test edin, kaydedin, düzeltin, tekrarlayın
Sorunları ortaya çıkarmak ve iyileştirmeler veya gerilemeler için bir başlangıç noktası belirlemek amacıyla herhangi bir değişiklik yapmadan önce sitenizin durumunu kaydedin. Bu sayede, geliştirme çabasını haklı çıkaracak ve ödüllendirecek veriler elde edersiniz.
Sitenizdeki birden fazla sayfa türünü test edin. Tek sayfalık uygulamalarda yalnızca ilk yükleme deneyimini değil, bileşenleri, rotaları ve kullanıcı deneyimi akışlarını da test edin.