Performansı ölçmek için araçları kullanma

Sam Dutton

Düşük veri maliyetine sahip, performanslı ve dayanıklı bir site oluşturmanın birkaç temel hedefi vardır.

Her hedef için bir denetime ihtiyacınız vardır.

Web sitelerini denetlemek için çok çeşitli araç ve teknikler vardır:

• Sistem araçları
• Yerleşik tarayıcı araçları
• Tarayıcı uzantıları
• Online test uygulamaları
• Emülasyon araçları
• Analiz
• Sunucular ve işletme sistemleri tarafından sağlanan metrikler
• Ekran ve video kaydı
• Manuel testler

Aşağıda, her denetleme türü için hangi yaklaşımın uygun olduğunu öğreneceksiniz.

Kaynak isteklerini kaydedin: sayı, boyut, tür ve zamanlama

Bir siteyi denetlemenin ilk adımı, tarayıcınızın ağ araçlarını kullanarak sayfaları kontrol etmektir. Bu işlemi nasıl yapacağınızdan emin değilseniz Chrome Geliştirici Araçları ağ paneli Başlangıç Kılavuzu'nu inceleyin. Firefox, Safari, Internet Explorer ve Edge için de benzer araçlar mevcuttur.

Değişiklik yapmadan önce sonuçları kaydetmeyi unutmayın. Ağ istekleri için bu işlem ekran görüntüsü kadar basit olabilir. Profil verilerini JSON dosyası olarak da kaydedebilirsiniz. Test sonuçlarını kaydetme ve paylaşma hakkında daha fazla bilgiyi aşağıda bulabilirsiniz.

Ağ kullanımını denetlemeden önce, ilk yükleme performansıyla ilgili doğru istatistikler elde etmek için tarayıcı önbelleğini devre dışı bıraktığınızdan emin olun. Hâlihazırda bir hizmet çalışanı aracılığıyla önbelleğe alma işlemi yapıyorsanız Cache API depolama alanını temizleyin. Tarayıcı önbelleğini devre dışı bırakmak veya daha önce önbelleğe alınmış girişleri kaldırmak zorunda kalmamak için gizli (özel) pencere kullanabilirsiniz.

Tarayıcı araçlarıyla kontrol etmeniz gereken bazı temel özellikler ve metrikler:

• Yük performansı: Lighthouse, yük metriklerinin özetini sağlar. Addy Osmani, sayfa yüklemeyle ilgili önemli kullanıcı anlarının mükemmel bir özetini yazdı.
• Kaynakları yükleme ve ayrıştırma ve bellek kullanımı için zaman çizelgesi etkinlikleri Daha ayrıntılı bilgi edinmek isterseniz bellek ve JavaScript profilleme çalıştırın.
• Toplam sayfa ağırlığı ve dosya sayısı.
• JavaScript dosyalarının sayısı ve ağırlığı.
• Özellikle büyük olan JavaScript dosyaları (ör. 100 KB'ın üzerinde).
• Kullanılmayan JavaScript. Chrome kapsama aracını kullanarak kontrol edebilirsiniz.
• Resim dosyalarının toplam sayısı ve ağırlığı.
• Özellikle büyük olan tek resim dosyaları.
• Resim biçimleri: JPEG veya SVG olabilecek PNG'ler var mı? WebP, yedeklerle birlikte mi kullanılıyor?
• Duyarlı resim tekniklerinin (ör. srcset) kullanılıp kullanılmadığı
• HTML dosya boyutu.
• CSS dosyalarının toplam sayısı ve ağırlığı.
• Kullanılmayan CSS. (Chrome'da kapsama panelini kullanın.)
• Web yazı tipleri (simge yazı tipleri dahil) gibi diğer öğelerin sorunlu kullanımını kontrol edin.
• Sayfa yüklemesini engelleyen herhangi bir şey olup olmadığını görmek için DevTools zaman çizelgesini kontrol edin.

Hızlı kablosuz ağ veya hızlı hücresel bağlantı kullanıyorsanız düşük bant genişliği ve yüksek gecikme emülasyonu ile test edin. Masaüstünde olduğu kadar mobilde de test yapmayı unutmayın. Bazı siteler, farklı cihazlara farklı öğeler ve düzenler sunmak için UA koku alma özelliğini kullanır. Yalnızca cihaz simülasyonuyla değil, uzaktan hata ayıklama özelliğini kullanarak gerçek donanımda test yapmanız gerekebilir.

Bellek ve CPU yükünü kontrol etme

Değişiklik yapmadan önce bellek ve CPU kullanımının kaydını tutun.

Chrome'da Görev Yöneticisi'ne Pencere menüsünden erişebilirsiniz. Bu, bir web sayfasının koşullarını kontrol etmenin basit bir yoludur.

İlk ve sonraki yükleme performansını test etme

Lighthouse, WebPagetest ve Pagespeed Insights hız, veri maliyeti ve kaynak kullanımını analiz etmek için kullanışlıdır. WebPagetest, statik içerik önbelleğe alma, ilk bayta kadar geçen süreyi ve sitenizin CDN'leri etkili bir şekilde kullanıp kullanmadığını da kontrol eder.

Sonuçları kaydetme

• WebPagetest: Test sonuçlarının her birinin kendi URL'si vardır.
• PageSpeed Insights: Online PageSpeed Insights aracı, gerçek dünyadaki performans istatistiklerini vurgulayan Chrome Kullanıcı Deneyimi raporu verilerini artık içeriyor.
• Lighthouse: Chrome Geliştirici Araçları Denetim panelindeki indir düğmesini tıklayarak raporları kaydedin:

  

Temel Progresif Web Uygulaması şartlarını test etme

Lighthouse; güvenliği, işlevselliği, erişilebilirliği, performansı ve arama motoru performansını test etmenize yardımcı olur. Lighthouse özellikle sitenizin hizmet çalışanları ve web uygulaması manifesti gibi PWA özelliklerini başarılı bir şekilde uygulayıp uygulamadığını kontrol eder.

Lighthouse, sitenizin kabul edilebilir bir çevrimdışı deneyim sağlayıp sağlayamayacağını da test eder.

Bir Lighthouse raporunu JSON olarak indirebilir veya Lighthouse Chrome uzantısını kullanıyorsanız raporu GitHub Gist olarak paylaşabilirsiniz: Paylaş düğmesini tıklayın, Görüntüleyicide aç'ı seçin, ardından yeni pencerede tekrar Paylaş düğmesini tıklayın ve Gist olarak kaydet'i seçin.

Gerçek dünyadaki performansı izlemek için analizleri, etkinlik izlemeyi ve işletme metriklerini kullanın

Mümkünse değişiklikleri uygulamadan önce analiz verilerinin kaydını tutun: Hemen çıkma oranları, sayfadaki süre, çıkış sayfaları gibi işletmenizin şartlarıyla alakalı tüm verileri kaydedin.

Mümkünse etkilenebilecek işletme ve teknik metrikleri kaydedin. Böylece, değişiklikleri yaptıktan sonra sonuçları karşılaştırabilirsiniz. Örneğin, bir e-ticaret sitesi dakikada alınan sipariş sayısını izleyebilir veya stres ve dayanıklılık testi için istatistikleri kaydedebilir. Sayfa ağırlığını ve kaynak isteklerini azaltırsanız arka uç depolama alanı maliyetleri, CPU gereksinimleri, yayınlama maliyetleri ve esneklik büyük olasılıkla iyileşir.

Analizleri henüz uygulamadıysanız şimdi tam zamanı. İşletme metrikleri ve analizleri, sitenizin işe yarayıp yaramadığının nihai belirleyicisidir. Uygun durumlarda, düğme tıklamaları ve video oynatmalar gibi kullanıcı işlemleri için etkinlik izlemeyi dahil edin. Ayrıca, kullanıcılarınızın "dönüşümler"e doğru ilerlediği yolları gösteren hedef akışı analizini de uygulayabilirsiniz.

Performans metriklerinin işletme metrikleriyle nasıl ilişkili olduğunu kontrol etmek için Google Analytics Site Hızı'na göz atabilirsiniz. Örneğin: "Ana sayfa ne kadar hızlı yüklendi?" ile "Ana sayfa üzerinden giriş satışla sonuçlandı mı?"

Google Analytics, Navigation Timing API'deki verileri kullanır.

JavaScript performans API'lerinden birini veya kendi metriklerinizi kullanarak veri kaydetmek isteyebilirsiniz. Örneğin:

    const subscribeBtn = document.querySelector('#subscribe');

    subscribeBtn.addEventListener('click', (event) => {
     // Event listener logic goes here...

     const lag = performance.now() - event.timeStamp;
     if (lag > 100) {
      ga('send', 'event', {
       eventCategory: 'Performance Metric'
       eventAction: 'input-latency',
       eventLabel: '#subscribe:click',
       eventValue: Math.round(lag),
       nonInteraction: true,
      });
     }
    });

Tarayıcı desteğinin sonlandırılmasına ve müdahale uyarılarına bakmak için ReportingObserver'ı da kullanabilirsiniz. Bu, gerçek kullanıcılardan gerçek zamanlı ölçümler almak için kullanılan birçok API'den biridir.

Gerçek deneyim: ekran ve video kaydı

Sayfanın mobil cihazda ve masaüstünde yüklenmesini videoya kaydedin. Bu yöntem, yüksek kare hızlarında ve zamanlayıcı ekranı eklerseniz daha da iyi sonuç verir.

Ekran kayıtlarını da kaydedebilirsiniz. Android, iOS ve masaüstü platformları için birçok ekran kaydı uygulaması (ve aynı işlemi yapan komut dosyaları) vardır.

Sayfa yükleme işlemini video olarak kaydetme özelliği, WebPagetest'teki film şeridi görünümüne veya Chrome Geliştirici Araçları'ndaki Ekran Görüntüsü Alma'ya benzer şekilde çalışır. Sayfa bileşeni yükleme hızının gerçek zamanlı kaydını alırsınız: Hızlı ve yavaş olan bileşenler. Daha sonra yapılan iyileştirmelerle karşılaştırmak için video kayıtlarını ve ekran kayıtlarını kaydedin.

Yan yana önce ve sonra karşılaştırması, iyileştirmeleri göstermenin mükemmel bir yolu olabilir.

Başka bir konu var mı?

Gerekirse Web Bloat Score (Web Sıkıştırma Puanı) alın. Bu eğlenceli bir testtir ancak kod şişmesini göstermenin veya iyileştirme yaptığınızı göstermenin ilgi çekici bir yolu da olabilir.

Aşağıda gösterilen Sitemin Maliyeti Ne? sayfasında, sitenizin farklı bölgelerde yüklenmesinin mali maliyeti hakkında kabaca bilgi verilmektedir.

Bağımsız ve online olarak kullanılabilen birçok araç vardır: perf.rocks/tools adresine göz atın.