Neden ve ne?
Progresif web uygulaması tekniklerinin siteniz için yapabileceği tüm iyi şeyleri duymuşsunuzdur. Hemen başlayıp PWA özellikleri eklemek isteyebilirsiniz. Bu mümkündür ancak önce "PWA'ya hazır" hale gelirseniz çok daha iyi olur.
Ne kadar PWA kullansanız da JavaScript'in engellenmesi veya şişirilmiş resimler gibi sorunları düzeltemezsiniz. 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, nelerin iyi çalıştığının ve nerede (ve nasıl) iyileştirme yapılabileceğinin objektif bir incelemesidir.
Sitenizin veya uygulamanızın denetimi, esnek ve yüksek performanslı bir deneyim oluşturmanıza yardımcı olur ve minimum onayla uygulanabilecek hızlı kazanımları vurgular. Denetim, veri odaklı geliştirme için de bir referans noktası sağlar. Değişiklik durumu iyileştirdi mi? Sitenizin rakiplerine kıyasla ne durumda olduğunu öğrenin. Çabalarınızı önceliklendirmenize yardımcı olacak metrikler ve iyileştirmeler yaptıktan sonra övünmenize olanak tanıyan 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 ile ilgili iyileştirmeler için nicel bir temel değer ve yapılacaklar listesi alırsınız.
Yalnızca 30 dakikanız varsa…
Lighthouse, başlangıç için en iyi seçenektir ancak biraz daha zaman ayırarak 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 önemli miktarda CPU kullanıyorsa veya diğer uygulamalardan daha fazla bellek kullanıyorsa bellek sızıntısı, görev çalıştırma 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ünyadaki performans istatistiklerini vurgulayan Chrome Kullanıcı Deneyimi raporu verileri dahil olmak üzere yükleme performansı, veri maliyeti ve kaynak kullanımı.
- Hız Puan Kartı ve Etki Hesaplayıcı: Site hızını benzer sitelerle 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öreceği şekilde test ettiğinizden emin olun. Siteyi gizli (özel) pencerede açın veya önbelleği devre dışı bırakmak ve depolama alanını temizlemek için tarayıcı araçlarını kullanın. Bu sayede her öğenin yerel ö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 etmekten daha iyi bir yöntem yoktur. Sitenizi kullanıcılarınızla aynı cihaz ve bağlantıyla deneyin ve öznel deneyiminizin kaydını tutun.
Araçların çeşitliliği sizi şaşırtıyorsa…
Hız araçlarını kullanma hakkında başlıklı kılavuzumuza göz atın.
Aksi takdirde, aşağıdakileri kontrol etmek için Lighthouse'u kullanabilirsiniz:
- HTTPS: Her site tüm öğeleri HTTPS üzerinden yayınlamalıdır.
- Sunucu ayarları: Web sunucunuz veya CDN'niz, tarayıcınızın kaynakları önbelleğe alabilmesi için sıkıştırmayı doğru şekilde kullanmalı, HTTP/2'yi kullanmalı ve uygun üstbilgileri içermelidir.
- Sayfanın alt kısmına taşınabilen ve/veya async veya defer özelliğine sahip olabilen komut dosyası öğeleri.
- Kaldırılabilir JavaScript ve kitaplıklar.
- Kullanılmayan CSS ve kullanılmayan JavaScript.
- Daha yüksek sıkıştırma oranıyla veya daha küçük piksel boyutlarıyla kaydedilebilen resimler.
- Farklı bir biçim kullanılarak kaydedildiğinde daha küçük olan resim dosyaları (ör. PNG olarak kaydedilen fotoğraflar).
Kitle, paydaşlar, bağlam
Yeniden yapılandırmaya yönelik öncelikler kitlenize, içeriğinize ve işlevinize bağlıdır. Sitenizi kimler ziyaret ediyor? Kullanıcılar bu platformları neden ve nasıl kullanıyor? Performans bütçeniz nedir? Bu soruların yanıtlarından emin değilseniz PWA eğitim kaynaklarımızdaki şart 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, denetim verilerinizi yapılandırma, sunma ve paylaşma şeklinizi etkiler.
Sitenizin tamamını denetlemeniz mümkün değilse nereye odaklanacağınız konusunda fikir edinmek için sayfa analizlerini kontrol edin. Yüksek hemen çıkma oranları, sayfadaki düşük süre ve beklenmedik çıkış sayfaları, nereden başlayacağınız konusunda iyi bir gösterge olabilir. Ayrıca barındırma maliyetleri, reklam tıklamaları ve dönüşümler gibi işletme metrikleri de bu kapsamdadır. Paydaşlardan, kendileri için önemli olan verilere dair genel bir bakış edinin.
Test edin, kaydedin, düzeltin, tekrarlayın
Sorunları tespit etmek ve iyileştirmeler ya da gerilemeler için bir başlangıç noktası belirlemek amacıyla, herhangi bir değişiklik yapmadan önce sitenizin durumunu kaydedin. Bu sayede, geliştirme çalışmalarının haklılığını kanıtlamak ve ödüllendirmek için kullanabileceğiniz veriler elde edersiniz.
Yalnızca ana sayfayı değil, sitenizdeki birden fazla 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.