Service Worker'da Performansı Ölçme

Paul Kinlan

Jake Archibald, geliştirici becerilerinin yıpranıp kaybolmasından endişe duymanın yanı sıra, hizmet işçisini akıllıca kullanarak sitenizin veya uygulamanızın performansını önemli ölçüde artırabileceğinize dair güçlü bir kanıt sundu. Genel bakış için videoyu izleyin.

Jake'in önerdiği gibi sayfa yükleme sürenizi artıracaksanız hizmet işçilerinin sayfanızı isteklerini nasıl etkilediğini gerçekten anlamanız gerekir.

Resource Timing ve User Timing 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ığı için birçok sitenin RUM (Gerçek Kullanıcı İzleme) altyapısında kritik bileşenlerdir (Başka bir kullanım alanı da içerik eklemeyi algılamadır). Özetle, bir hizmet çalışanınız veya web çalışanınız yoksa sitenizden yapılan her web isteğinin neredeyse her yönünü anlamanıza olanak tanır.

Aşağıda, mevcut alan adı dışında bir alana yapılan tüm isteklerin listesini almak için bu işlevin nasıl kullanılabileceğine dair kısa bir örnek 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;
};

Resource Timing ve User Timing API'leri, hizmet işçisi mühendislerin aklına gelmeden önce oluşturulup uygulanmıştır. Yukarıdaki kod, hizmet işçisinin bunu nasıl etkilediğini anlayamaz.

Chrome 45'te (Temmuz 2015'te Beta sürümünde) yapılan son değişiklikler, tüm çalışan türlerinin (Web ve hizmet çalışanı) Kaynak Zamanlama ve Kullanıcı Zamanlama API'lerine erişebilmesini sağlayarak size yardımcı olacak ve böylece tüm kullanıcılarınızın ağ performansını takip etmenizi sağlayacaktır.

Hizmet Çalışanından Performans Metriklerine Erişme

En büyük değişiklik, performance nesnesinin Workers bağlamına (Web ve ServiceWorkers) eklenmesidir. Bu sayede artık çalışan bağlamında yapılan tüm isteklerin performans zamanlamalarını anlayabilir ve JS yürütme ölçümü için kendi işaretlerinizi ayarlayabilirsiniz. Yalnızca mevcut pencere bağlamında neler olduğunu görebiliyorsanız aşağıdakiler hakkında önemli zamanlama bilgilerini kaçırırsınız:

  • Hizmet çalışanının oninstall etkinliği içinde yapılan fetch() istek
  • onpush etkinliğinde verileri önbelleğe alırken yapılan fetch() isteklerinin, kullanıcılarınızın gördüğü performansı anlamak için izlenmesi artık mümkün.
  • Son olarak, onfetch işleyici tarafından yapılan ve yakalanan fetch() isteği.

Son nokta önemlidir. Hizmet çalışanlarını, web kullanıcı arayüzü ile ağ arasında bulunan bir proxy olarak düşünebilirsiniz. window üzerindeki performance nesnesi yalnızca isteğin çağırdığı kısmın zamanlamalarını ve bilgilerini görür. İstemci ile ağ arasında bulunan hizmet çalışanı hakkında bilgi sahibi olmadığından hizmet çalışanının etkisini anlayamaz.

Bunu nasıl kullanabilirim?

Önce çevrimdışı olanları destekleyen tipik bir hizmet çalışanında, tüm öğeleri indirip daha sonra kullanmak üzere kaydedeceği bir yükleme adımı bulunur.

Bu özelliğin kullanılabileceği bir örnek, yükleme adımının zamanlama verilerini kaydedip günlüğe kaydetmektir. Böylece, gerçek kullanıcı kullanımına dayalı olarak yüklemenizin performansını nasıl iyileştireceğiniz konusunda bazı ölçülü 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 çoğunluğunun sitelerini nasıl deneyimlediğini anlamak için RUM'u kullanır. Google Analytics gibi araçlar, Navigation Timing API'yi kullanarak site hızı verilerini raporluyor ancak bu araçların, Worker bağlamındaki performans analizini içerecek şekilde güncellenmesi gerekir.

Navigation Timing API, Service Workers'a gelecek mi?

Hizmet çalışanlarında geleneksel gezinme olmadığından şu anda Gezinme Zamanlaması API'sinin hizmet çalışanı bağlamına eklenmesi planlanmıyor. İlginç olan nokta, hizmet çalışanının kontrol ettiği sayfa grubundaki her gezinmenin hizmet çalışanına bir kaynak getirme gibi görünmesidir. Yalnızca bu özellik, hizmet çalışanlarını web uygulamanızdaki performans mantığının çoğunu merkezileştirmenin inanılmaz derecede ilgi çekici bir yolu haline getirir.

Neler değişti?

Tartışma ve teknik özelliklerle ilgileniyorum