Service Worker'da Performansı Ölçme

Peker Kınan

Geliştirici becerilerinin çürüyüp düşmesinden endişe duyan Jake Archibald, Service Worker'ı akıllıca kullanarak sitenizin veya uygulamanızın performansını önemli ölçüde artırabileceğinize dair güçlü bir argüman sundu. Genel bakış için videoyu izleyin.

Cem'in de belirttiği gibi Sayfa yüklenme süresini kısaltmak istiyorsanız, hizmet çalışanlarının sayfanızın isteklerini nasıl etkilediğini anlamanız gerekir.

Kaynak Zamanlaması ve Kullanıcı Zamanlaması API'si, tüm kullanıcılarınızın sitenizin performansını nasıl gördüğünü bütünsel olarak anlamanıza olanak tanıdığından (Başka bir kullanım alanı da içerik yerleştirme işleminin algılanmasıdır), birçok sitenin RUM (Gerçek Kullanıcı İzleme) altyapısında önemli bileşenlerdir. Kısacası, bu yapı, bir hizmet çalışanı ya da Web çalışanınız olmadığı sürece sitenizden yapılan tüm web isteklerini neredeyse her açıdan anlamanızı sağlar.

Bu özelliğin, geçerli alan olmayan bir alana yapılan tüm isteklerin listesini almak için nasıl kullanılabileceğini gösteren kısa bir örnek aşağıda verilmiştir.

var getThirdPartyRequests = function() {
    var thirdPartyRequests = [];
    var requests = window.performance.getEntriesByType("resource");
    
    var currentHost = window.location.host

    for(var requestIdx = 0; requestIdx < requests.length; requestIdx++) {
    var request = requests[requestIdx];
    var url = new URL(request.name);
    var host = url.host;

    if(host != currentHost) {
        thirdPartyRequests.push(request);
    }
    }
    
    return thirdPartyRequests;
};

Kaynak Zamanlaması ve Kullanıcı Zamanlaması API'leri, hizmet çalışanı mühendisin gözünden parlamadan ve yukarıdaki kod, Service Worker'ın bunu nasıl etkilediğini anlayamazdı.

Chrome 45'te (Temmuz 2015'te beta) kısa süre önce yapılan bir dizi değişiklik, tüm çalışan türlerine (Web ve Hizmet İşçisi) Kaynak Zamanlaması ve Kullanıcı Zamanlaması API'lerine erişim olanağı sunarak size yardımcı olacaktır. Bu özellik sayesinde tüm kullanıcılarınız için ağ performansını takip edebilirsiniz.

Hizmet Çalışanlarından Performans Metriklerine Erişim

En büyük değişiklik, performance nesnesinin Workers bağlamında (Web ve ServiceWorkers) eklenmesidir. Bu sayede, çalışan bağlamında yapılan tüm isteklerin performans zamanlamalarını anlayabilir ve JS yürütmesinin ölçümü için kendi işaretlerinizi belirleyebilirsiniz. Yalnızca geçerli zaman aralığının bağlamında neler olduğunu görebiliyorsanız şu kaynaklardan gelen kritik zamanlama bilgilerini kaçırmış olursunuz:

  • Hizmet çalışanının oninstall etkinliği içinde yapılan fetch() istek
  • Bir onpush etkinliğinde verileri önbelleğe alırken yapılan fetch() istekleri artık kullanıcılarınızın gördüğü performansı anlamak için izlenebilir.
  • son olarak, onfetch işleyici tarafından yapılan ve müdahale edilen fetch() isteğidir.

Son nokta da önemlidir. Service Worker'ı, web kullanıcı arayüzü ve ağ arasında yer alan bir proxy gibi düşünebilirsiniz. window üzerindeki performance nesnesi yalnızca isteğin çağırdığı kısmıyla ilgili zamanlamaları ve bilgileri görür. Bu nesne, hizmet çalışanının istemci ile ağ arasında durduğunu bilmediğinden hizmet çalışanının etkisini anlayamaz.

Bunu nasıl kullanabilirim?

Önce çevrimdışı kullanımı destekleyen normal bir hizmet çalışanının, tüm öğeleri indirip daha sonra kullanmak üzere kaydedeceği bir yükleme adımı vardır

Bu özelliğin kullanılabileceği yerlere örnek olarak yükleme adımının zamanlama verilerini kaydedip kaydedebilirsiniz. Böylece, gerçek kullanıcı kullanımına dayanarak yüklemenizin performansını nasıl iyileştirebileceğiniz konusunda bazı ölçümlü kararlar alabilirsiniz.

self.addEventListener("install", function() {
    var urls = [
    '/',
    '/images/chrome-touch-icon-192x192.png',
    '/images/ic_add_24px.svg',
    '/images/side-nav-bg@2x.jpg',
    '/images/superfail.svg',
    '/scripts/voicememo-core.js',
    '/styles/voicememo-core.css',
    '/third_party/Recorderjs/recorder.js',
    '/third_party/Recorderjs/recorderWorker.js',
    '/third_party/Recorderjs/wavepcm.js',
    '/third_party/moment.min.js',
    '/favicon.ico',
    '/manifest.json'
    ];

    urls = urls.map(function(url) {
    return new Request(url, {credentials: 'include'});
    });

    event.waitUntil(
    caches
        .open(CACHE_NAME + '-v' + CACHE_VERSION)
        .then(function(cache) {
        // Fetch all the URL's and store in the cache
        return cache.addAll(urls);
        })
        .then(function () {
        // Analyze all the requests
        var requests = self.performance.getEntriesByType("resource");
        
        // Loop across all the requests and save the timing data.
        return;
        })
    );
});

Günümüzde birçok site, kullanıcılarının büyük çoğunluğunun sitelerindeki deneyimini anlamak için RUM'den yararlanıyor. Google Analytics gibi araçlar, Navigation Timing API'yi kullanarak site hızı verilerini raporlamıştır ancak bu verilerin, çalışan bağlamındaki performans analizini içerecek şekilde güncellenmesi gerekecektir.

Navigation Timing API, Hizmet Çalışanlarına ulaşacak mı?

Service Worker'da geleneksel gezinmeler olmadığından, şu anda Service Worker bağlamına Navigation Timing API'nin eklenmesiyle ilgili bir plan bulunmamaktadır. İşin ilginç tarafı, hizmet çalışanının kontrol edilen sayfa grubunda yer alan her gezinmenin bir kaynak getirme gibi görünmesidir. Tek başına bu bile hizmet çalışanlarını, performans mantığınızın önemli bir kısmını web uygulamanızda merkezi hale getirmek için son derece cazip bir yol haline getirir.

Nelerin değiştiğini görebilir miyim?

Konuyla ve teknik konularla ilgileniyorum