Performansı Denetleme

Neden ve ne?

Progresif Web Uygulaması tekniklerinin sitenize katabileceği tüm iyilikleri muhtemelen duymuşsunuzdur. Hemen işe koyulup PWA özellikleri eklemek cazip gelebilir. Bu mümkün, ancak önce "PWA için hazır" olursanız çok daha fazla işlem yaparsınız.

Hiçbir PWA sihri, JavaScript'i veya şişirilmiş resimleri engelleme gibi sorunları düzeltmez. PWA'lar sağlam bir temele ihtiyaç duyar.

Peki, web sitenizin sağlığını nasıl kontrol edebilirsiniz? İlk adım bir site denetimi yapmaktır: Neyin işe yaradığını ve nerede (ve nasıl) iyileştirme yapılabileceğini objektif bir inceleme.

Sitenizi veya uygulamanızı denetlemek esnek ve etkili bir deneyim oluşturmanıza yardımcı olur. Ayrıca, minimum düzeyde onay ile uygulanabilecek hızlı kazanımları öne çıkarmanıza yardımcı olur. Denetim, veriye dayalı geliştirme için bir temel de sağlar. İşleri kolaylaştıran bir değişiklik mi oldu? Siteniz rakip sitelere kıyasla ne durumda? Çabayı önceliklendirmenizi sağlayacak metrikler ve iyileştirmeler yaptığınızda övünebileceğiniz somut kanıtlar elde edersiniz.

Yalnızca 5 dakikanız varsa...

Ana sayfanızda Lighthouse'u çalıştırın ve rapor verilerini kaydedin. Performans, erişilebilirlik, güvenlik ve SEO iyileştirmeleri için sayısal bir referans ve yapılacaklar listesi elde edersiniz.

Yalnızca 30 dakikanız varsa...

Lighthouse muhtemelen başlamak için en iyi yerdir ancak biraz daha zamanınız olduğunda diğer araçlardan da sonuçları kaydedebilirsiniz:

  • Chrome DevTools Güvenlik paneli: HTTPS kullanımı.
  • Chrome Geliştirici Araçları Ağ Paneli: Yükleme zamanlamaları; HTML, CSS, JavaScript, resimler, yazı tipleri ve diğer dosyalar için kaynak boyutları ve istek sayısı.
  • Chrome Görev Yöneticisi: Siteniz sürekli olarak diğer uygulamalara göre önemli ölçüde CPU veya daha fazla bellek kullanıyorsa bellek sızıntılarını, görev çalıştırma veya kaynak yükleme sorunlarını gidermeniz gerekebilir. Sitenizi, kullanıcılarınızı temsil eden cihazlarda test ettiğinizden emin olun.
  • WebPagetest: Farklı konumlar ve bağlantı türleri için performans, önbelleğe alma, ilk bayta geçiş süresi, CDN kullanımı.
  • PageSpeed Insights: Yük performansı, veri maliyeti ve kaynak kullanımı (ör. gerçek dünya performans istatistiklerini vurgulayan Chrome Kullanıcı Deneyimi raporu verileri).
  • Hız Puan Kartı ve Etki Hesaplayıcı: Site hızını benzerlerle karşılaştırın ve site hızını artırmanın potansiyel gelir fırsatını tahmin edin.

Web sitenizi ilk kez ziyaret eden bir kullanıcının gördüğü şekilde test ettiğinizden emin olun. Siteyi Gizli (Gizli) Pencere açın veya önbelleğe almayı devre dışı bırakıp depolama alanını temizlemek için tarayıcı araçlarını kullanın. Bu, her öğenin yerel bir önbellekten değil ağdan alınmasını sağlar. Böylece ilk yükleme performansı hakkında doğru bir fikir edinebilirsiniz.

Gerçek dünyada test yapmanın yerini hiçbir şey tutamaz. Sitenizi kullanıcılarınızla aynı cihazlarda ve bağlantıda deneyin ve öznel deneyiminizin kaydını tutun.

Bu kadar çeşitli araçların kafa karıştırıcı olduğunu düşünüyorsanız...

Hız Araçları Hakkında Nasıl Düşünüyorsunuz? başlıklı kılavuzumuza göz atın.

Başka bir şey yoksa aşağıdakileri kontrol etmek için Lighthouse'u kullanabilirsiniz:

Kitle, paydaşlar, bağlam

Yeniden düzenlemeyle ilgili öncelikler kitlenize, içeriğinize ve işlevlerinize bağlıdır. Sitenizi kimler ziyaret ediyor? Bu uygulamayı neden ve nasıl kullanıyorlar? Performans bütçeniz nedir? Bu soruların yanıtlarından emin değilseniz PWA eğitim kaynaklarımızdaki alıştırmaları toplamayla ilgili gereksinimleri deneyin: Kitleniz, içeriğiniz ve Tüm kullanıcılarınız için tasarlayın.

Paydaşlarınız kimler ve öncelikleri neler? Bu, denetim verilerinizi yapılandırma, sunma ve paylaşma şeklinizi etkileyecektir.

Sitenizin tamamını denetleyemiyorsanız nereye odaklanacağınız konusunda fikir edinmek için sayfa analizlerini inceleyin. Yüksek hemen çıkma oranları, düşük sayfada geçirilen süre ve beklenmedik çıkış sayfaları, nereden başlamanız gerektiği konusunda iyi bir gösterge olabilir. Benzer şekilde, barındırma maliyetleri, reklam tıklamaları ve dönüşümler gibi işletme metrikleri için de geçerlidir. Paydaşlardan hangi verilerin hangi verilerin önemli olduğuna dair fikir edinin.

Test edin, kaydedin, düzeltin, tekrarlayın

Sorunları ortaya çıkarmak ve iyileştirmeler ya da regresyonlar için bir başlangıç noktası belirlemek amacıyla herhangi bir değişiklik yapmadan önce sitenizin durumunu kaydedin. Bu da size, geliştirme çabalarını gerekçelendirecek ve ödüllendirecek veriler sunar.

Yalnızca ana sayfayı değil, sitenizde de birden çok sayfa türünü test ettiğinizden emin olun. Tek sayfalık uygulamalarda yalnızca ilk yükleme deneyimini değil, farklı bileşenleri, rotaları ve kullanıcı deneyimi akışlarını test edin.

Geri bildirim