Neden ve ne?
Progresif Web Uygulaması tekniklerinin sitenize sunabileceği tüm faydalı özellikleri duymuşsunuzdur. Hemen başlayıp PWA özellikleri eklemek isteyebilirsiniz. Bu mümkün ancak ilk olarak "PWA'ya hazır" olursanız çok daha iyi sonuç alırsınız.
PWA'nın sihirli bir miktarı, JavaScript'i veya şişirilmiş resimleri engellemek gibi sorunları düzeltmez. PWA'ların sağlam bir temele ihtiyacı vardır.
Peki web sitenizin durumunu nasıl kontrol edebilirsiniz? İlk adım, site denetimi yapmaktır. Bu denetim, neyin işe yaradığını ve nerelerde (ve nasıl) iyileştirilebileceğini objektif şekilde gözden geçirir.
Sitenizi veya uygulamanızı denetlemek dayanıklı ve yüksek performanslı bir deneyim oluşturmanıza ve minimum onay ile uygulanabilecek hızlı kazanımları vurgulamanıza yardımcı olur. Denetim, ayrıca veriye dayalı geliştirme için bir temel oluşturur. Bir değişiklik bir şeyleri daha iyi hale getirdi mi? Sizin siteniz rakiplere göre nasıl? Çabayı önceliklendirecek metrikler ve iyileştirmeler yaptığınızda övüneceğ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'da iyileştirmeler için sayısal bir referans ve yapılacaklar listesi sunulur.
Yalnızca 30 dakikanız varsa...
Lighthouse muhtemelen başlamak için en iyi yerdir ancak biraz daha zamanınız varsa diğer araçlardan da sonuç kaydedebilirsiniz:
- Chrome Geliştirici Araçları 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ı, çalışan görev veya kaynak yükleme sorunlarını düzeltmeniz 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 kadar geçen süre, CDN kullanımı.
- PageSpeed Insights: Gerçek dünyadan performans istatistiklerini vurgulayan Chrome Kullanıcı Deneyimi rapor verileri dahil yükleme performansı, veri maliyeti ve kaynak kullanımı.
- 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ırsatlarını tahmin edin.
Web sitenizi ilk kez ziyaret eden kullanıcının gördüğü şekilde test ettiğinizden emin olun. Siteyi bir Gizli (Gizli) Pencere açın veya önbelleğe almayı devre dışı bırakmak ve 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ıyla ilgili doğru bir fikir sahibi olursunuz.
Gerçek hayattaki testlerin yerini hiçbir şey tutamaz. Sitenizi kullanıcılarınızla aynı cihazları ve bağlantıyı kullanarak deneyin ve öznel deneyiminizin kaydını tutun.
Çok sayıda araç sizi şaşırttıysa...
Hız Araçları Hakkında Düşünme başlıklı rehberimize göz atın.
Başka bir şey yoksa Lighthouse'u kullanarak şunları kontrol edin:
- HTTPS: Her site, tüm öğeleri HTTPS üzerinden yayınlamalıdır.
- Sunucu ayarları: Tarayıcınızın kaynakları önbelleğe almasını sağlamak için web sunucunuz veya CDN'niz sıkıştırmayı doğru şekilde kullanmalı, HTTP/2 kullanmalı ve uygun başlıklar içermelidir.
- Sayfanın alt kısmına taşınabilen ve/veya async veya defer özelliği verilen komut dosyası öğeleri.
- Kaldırılabilen JavaScript ve kitaplıklar.
- Kullanılmayan CSS ve kullanılmayan JavaScript.
- Daha yüksek sıkıştırma oranı veya daha küçük piksel boyutları ile kaydedilebilen resimler.
- Farklı bir biçim kullanılarak kaydedilebilecek daha küçük resim dosyaları (ör. PNG olarak kaydedilen fotoğraflar).
Kitle, paydaşlar, bağlam
Yeniden düzenleme öncelikleri kitlenize, içeriğinize ve işlevlerinize bağlıdır. Sitenizi kimler ziyaret ediyor? YouTube'u neden ve nasıl kullanıyorlar? Performans bütçeniz nedir? Bu soruların yanıtından emin değilseniz PWA eğitim kaynaklarımızdan elde edilen gereksinimleri toplama alıştırmalarını deneyin: Kitleniz, içeriğiniz ve Tüm kullanıcılarınız için tasarlama.
Paydaşlarınız kimler ve öncelikleri neler? Bu durum, denetim verilerinizi yapılandırma, sunma ve paylaşma şeklinizi etkileyecek.
Sitenizin tamamını denetleyemiyorsanız nereye odaklanacağınız konusunda fikir edinmek için sayfa analizlerine göz atın. Hemen çıkma oranlarının yüksek olması, sayfada geçirilen sürenin kısa olması ve beklenmedik çıkış sayfaları, nereden başlayacağınız konusunda iyi bir gösterge olabilir. Benzer şekilde, barındırma maliyetleri, reklam tıklamaları ve dönüşümler gibi işletme metrikleri de. Paydaşlardan onlar için hangi verilerin önemli olduğuna dair genel bir bakış alın.
Test edin, kaydedin, düzeltin, tekrar edin
Sorunları ortaya çıkarmak ve iyileştirmeler ya da regresyonlar için bir başlangıç noktası belirlemek üzere, herhangi bir değişiklik yapmadan önce sitenizin durumunu kaydedin. Bu da size geliştirme çabanızı haklı çıkaracak ve ödüllendirecek veriler sağlar.
Yalnızca ana sayfayı değil, sitenizdeki birden fazla sayfa türünü test ettiğinizden emin olun. Tek sayfalık uygulamalar için sadece ilk yükleme deneyimini değil, farklı bileşenleri, rotaları ve kullanıcı deneyimi akışlarını test edin.