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

Sam Dutton

Düşük veri maliyetine sahip, yüksek performans gösteren ve dayanıklı bir site oluşturmanın birkaç temel hedefi vardır.

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

Amaç Why? Neleri test etmelisiniz?
Gizlilik, güvenlik ve veri bütünlüğü sağlayın ve güçlü API kullanımı sağlayın HTTPS Neden Önemlidir? Tüm site sayfaları/yönlendirmeleri ve öğeleri için HTTPS uygulandı.
Yük performansını iyileştirin Yüklenmesi üç saniyeden uzun süren kullanıcıların% 53'ü siteyi terk ediyor. Eşzamansız olarak yüklenebilen veya ertelenen JavaScript ve CSS. Etkileşim süresi ve yük boyutu için hedefler belirleyin: Örneğin, 3G'de TTI. Performans bütçesi belirleyin.
Sayfa ağırlığını azaltın • Sınırlı veri planlarıyla kullanıcılar için veri maliyetini azaltma • Web uygulaması depolama alanı gereksinimlerini azaltma (özellikle düşük özellikli cihazlara sahip kullanıcılar için önemlidir) • Barındırma ve sunma maliyetlerini azaltma • Sunum performansını, güvenilirliğini ve dayanıklılığını artırma Bir sayfa ağırlığı bütçesi ayarlayın: Örneğin, ilk yükleme 400 kB'ın altında olmalıdır. Yoğun JavaScript olup olmadığını kontrol edin. Şişmiş resimler, medya, HTML, CSS ve JavaScript'i bulmak için dosya boyutlarını kontrol edin. Geç yüklenebilecek görüntüleri bulun ve kapsam araçlarıyla kullanılmayan kodları kontrol edin.
Kaynak isteklerini azaltın • Gecikme sorunlarını azaltma • Yayınlama maliyetlerini azaltma • Sunum performansını, güvenilirliğini ve esnekliğini artırma Herhangi bir kaynak türü için aşırı veya gereksiz istek olup olmadığına bakın. Örneğin: tekrar tekrar yüklenen dosyalar, birden fazla sürümde yüklenen JavaScript, hiçbir zaman kullanılmayan CSS, hiç görüntülenmeyen (veya geç yüklenebilecek resimler).
Bellek kullanımını optimize etme Bellek, özellikle mobil cihazlarda yeni bir darboğaz haline gelebilir Ana sayfayı yüklerken ve diğer site özelliklerini kullanırken bellek kullanımı için sitenizi diğer sitelerle karşılaştırmak üzere Chrome Görev Yöneticisi'ni kullanın.
CPU yükünü azaltma Mobil cihazların, özellikle düşük özellikli cihazların CPU'su sınırlı Yoğun JavaScript olup olmadığını kontrol edin. Kapsam araçlarıyla kullanılmayan JavaScript ve CSS'leri bulun. Aşırı DOM boyutu ve ilk yüklemede gereksiz şekilde çalışan komut dosyaları olup olmadığını kontrol edin. Birden çok sürümde yüklenen JavaScript'i veya küçük değişiklikler yaparak önlenebilecek kitaplıkları arayın.

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

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

Her bir denetim türü için hangi yaklaşımın uygun olduğunu aşağıda bulabilirsiniz.

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

Sayfaları, tarayıcınızın ağ araçlarıyla kontrol etmek, bir siteyi denetlemeye başlamak için iyi bir yerdir. Bunu nasıl yapacağınızdan emin değilseniz Chrome DevTools ağ panelindeki 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ın kaydını tutmayı unutmayın. Ağ istekleri söz konusu olduğunda bu işlem ekran görüntüsü kadar basit olabilir. Dilerseniz profil verilerini JSON dosyası olarak da kaydedebilirsiniz. Aşağıda test sonuçlarının nasıl kaydedileceği ve paylaşılacağı hakkında daha fazla bilgi bulabilirsiniz.

Ağ kullanımını denetlemeye başlamadan önce, ilk yükleme performansı için doğru istatistikleri aldığınızdan emin olmak için tarayıcı önbelleğini devre dışı bıraktığınızdan emin olun. Önbelleğe alma işlemini bir Service Worker aracılığıyla zaten yapıyorsanız Cache API depolama alanını temizleyin. Gizli (Gizli) pencere kullanmak isteyebilirsiniz. Böylece tarayıcı önbelleğini devre dışı bırakma veya daha önce önbelleğe alınmış girişleri kaldırma konusunda endişelenmeniz gerekmez.

Tarayıcı araçlarıyla kontrol etmeniz gereken bazı temel özellikler ve metrikler aşağıda verilmiştir:

  • Yük performansı: Lighthouse, yük metriklerinin bir özetini sunar. Addy Osmani, sayfa yüklemeyle ilgili önemli kullanıcı anlarının mükemmel bir özetini yazmıştır.
  • Kaynakları yükleme ve ayrıştırma ile bellek kullanımı için zaman çizelgesi etkinlikleri. Daha derine inmek için bellek ve JavaScript profil çıkarma ç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 boyutlu JavaScript dosyaları (örneğin 100 KB'ın üzerinde).
  • Kullanılmayan JavaScript. Chrome kapsam aracını kullanarak kontrol edebilirsiniz.
  • Resim dosyalarının toplam sayısı ve ağırlığı.
  • Çok büyük boyutlu tek tek resim dosyaları.
  • Resim biçimleri: JPEG veya SVG olabilecek PNG'ler var mı? Yedeklerle WebP kullanılır mı?
  • Duyarlı resim tekniklerinin (srcset gibi) kullanılıp kullanılmadığı.
  • HTML dosya boyutu.
  • CSS dosyalarının toplam sayısı ve ağırlığı.
  • Kullanılmayan CSS. (Chrome'da kapsam panelini kullanın.)
  • Web Yazı Tipleri gibi diğer öğelerin (simge yazı tipleri dahil) sorunlu kullanılıp kullanılmadığını kontrol edin.
  • Sayfanın yüklenmesini engelleyen bir durum olup olmadığını görmek için Geliştirici Araçları zaman çizelgesini kontrol edin.

Hızlı kablosuz veya hızlı bir hücresel bağlantıyla çalışıyorsanız düşük bant genişliği ve yüksek gecikme emülasyonu ile test edin. Hem mobilde hem de masaüstünde test yapmayı unutmayın. Bazı siteler, farklı cihazlar için farklı öğeler ve düzenler sunmak üzere UA koklama özelliğini kullanır. Yalnızca cihaz simülasyonuyla değil, uzaktan hata ayıklama kullanarak gerçek donanım üzerinde test etmeniz gerekebilir.

Belleği 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 gereksinimlerini kontrol etmenin basit bir yoludur.

Dört açık tarayıcı sekmesi için bellek ve CPU kullanımını gösteren Chrome Görev Yöneticisi
Chrome'un Görev Yöneticisi: Bellek ve CPU kullanımı konusunda dikkatli olun!

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

Lighthouse, WebPagetest ve PageSpeed Insights; hızı, veri maliyetini ve kaynak kullanımını analiz etmek için kullanışlıdır. WebPagetest, statik içeriği önbelleğe almayı, ilk bayta geçiş süresini ve sitenizde CDN'lerden etkili bir şekilde yararlanıp yararlanılmadığını da kontrol eder.

Sonuçları kaydet

Progresif Web Uygulaması ile ilgili temel gereksinimleri test etme

Lighthouse güvenlik, işlevsellik, erişilebilirlik, performans ve arama motoru performansını test etmenize yardımcı olur. Özellikle Lighthouse, sitenizin Service Worker 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.

Lighthouse raporlarını JSON olarak indirebilir veya Lighthouse Chrome Uzantısı'nı kullanıyorsanız raporu bir GitHub Gist olarak paylaşabilirsiniz: Paylaş düğmesini tıklayın, Görüntüleyici'de Aç'ı seçin, ardından yeni pencerede tekrar paylaş düğmesini ve Gist Olarak Kaydet'i tıklayın.

Chrome Lighthouse raporunun özet dosyası olarak nasıl dışa aktarılacağını gösteren ekran görüntüsü
Bir raporu Lighthouse Chrome Uzantısı'ndan bir özete aktarın: Paylaş düğmesini tıklayın

Gerçek dünya performansını takip etmek için analizleri, etkinlik izlemeyi ve işletme metriklerini kullanın

Mümkünse, değişiklikleri uygulamadan önce analiz verilerinin bir kaydını tutun: hemen çıkma oranları, sayfada geçirilen süre, çıkış sayfaları, işletmenizin gereksinimleriyle alakalı her şey.

Mümkünse etkilenebilecek işletme metriklerini ve teknik metrikleri kaydedin. Böylece, değişiklikleri yaptıktan sonra sonuçları karşılaştırabilirsiniz. Örneğin, bir e-ticaret sitesi dakika başına siparişleri takip edebilir 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 maliyetleri, CPU gereksinimleri, sunma maliyetleri ve esnekliği artabilir.

Analizleri uygulamamışsanız, şimdi tam zamanı! Sitenizin çalışıp çalışmayacağı konusunda son karar, iş metrikleri ve analizleridir. Uygunsa düğme tıklamaları ve video oynatmaları gibi kullanıcı işlemleri için etkinlik izlemeyi ekleyin. Ayrıca hedef akışı analizini, yani kullanıcılarınızın "dönüşümlere" doğru ilerlerken izledikleri yolları uygulamak isteyebilirsiniz.

Performans metriklerinin işletme metrikleriyle ilişkisini kontrol etmek için Google Analytics Site Hızı'nı takip edebilirsiniz. Örneğin: "Ana sayfa ne kadar hızlı yüklendi?" ile "ana sayfa üzerinden yapılan giriş satışla sonuçlandı mı?" karşılaştırması

Google Analytics Site Hızı'nı gösteren ekran görüntüsü

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

JavaScript performans API'lerinden birini veya kendi metriklerinizi kullanarak verileri 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ının kullanımdan kaldırılması ve müdahale uyarılarını kontrol etmek için ReportingObserver'ı da kullanabilirsiniz. Bu, gerçek kullanıcılardan gerçek zamanlı, canlı ölçümler almaya yönelik birçok API'den biridir.

Gerçek hayat deneyimi: ekran ve video kaydı

Mobil ve masaüstü cihazlarda sayfa yükleme işlemini video kaydedin. Bu, yüksek kare hızlarında ve zamanlayıcı ekranı eklediğinizde daha da iyi çalışır.

Ekran video kayıtlarını kaydetmek de isteyebilirsiniz. Android, iOS ve masaüstü platformları için pek çok ekran video kaydı kayıt uygulaması (ve aynısını yapmak için komut dosyaları) vardır.

Video kaydı sayfası yükleme işlemi, WebPagetest'teki film şeridi görünümü veya Chrome Geliştirici Araçları'ndaki Ekran Görüntüleri ile aynı şekilde çalışır. Sayfa bileşeni yükleme hızının gerçek dünyadaki bir kaydını elde edersiniz: Nelerin hızlı, neyin yavaş olduğu. Video kayıtlarını ve ekran video kayıtlarını daha sonraki iyileştirmelerle karşılaştırmak için kaydedin.

Önce ve sonra karşılaştırmasını yapmak, iyileştirmeleri göstermek için harika bir yol olabilir.

Başka bir konu var mı?

Gerekiyorsa bir Web Bloat Puanı alın. Bu eğlenceli bir testtir ancak aynı zamanda kod şişirmeyi veya iyileştirmeler yaptığınızı göstermek için de ilgi çekici bir yol olabilir.

Aşağıda gösterilen Sitemin Maliyeti nedir? bölümü, sitenizi farklı bölgelerde yüklemenin finansal maliyeti ile ilgili kabaca bir kılavuz sağlar.

whatdomysitecost.com sitesinden ekran görüntüsü

Daha pek çok bağımsız ve online araç kullanılabilir: perf.rocks/tools adresine göz atın.