Mengukur Performa pada Pekerja Layanan

Paul Kinlan

Selain khawatir dengan keterampilan Developer-nya yang mulai menurun, Jake Archibald juga membuat argumen kuat bahwa dengan menggunakan pekerja layanan secara cerdas, Anda dapat meningkatkan performa situs atau aplikasi secara drastis. Tonton video untuk mengetahui ringkasannya.

Jika ingin Mempercepat waktu pemuatan Halaman seperti yang disarankan Jake, Anda benar-benar harus dapat memahami pengaruh pekerja layanan terhadap permintaan halaman Anda.

Resource Timing dan User Timing API adalah komponen penting di banyak infrastruktur RUM (Real User Monitoring) situs karena memungkinkan Anda memahami secara menyeluruh bagaimana semua pengguna melihat performa situs Anda (Contoh penggunaan lainnya adalah mendeteksi injeksi konten). Singkatnya, ini memungkinkan Anda memahami hampir setiap aspek dari setiap permintaan web yang dibuat dari situs Anda, kecuali jika Anda memiliki pekerja layanan atau pekerja Web.

Berikut adalah contoh singkat tentang cara menggunakannya untuk mendapatkan daftar semua permintaan yang dibuat ke domain yang bukan domain saat ini.

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 API dan User Timing API dibuat dan diterapkan sebelum pekerja layanan menjadi perhatian para engineer dan kode di atas tidak akan dapat memahami pengaruh Pekerja Layanan terhadapnya.

Serangkaian perubahan terbaru di Chrome 45 (Beta pada Juli 2015) akan membantu Anda dengan memperkenalkan kemampuan bagi semua bentuk pekerja (pekerja web dan layanan) untuk memiliki akses ke Resource Timing dan User Timing API sehingga Anda dapat terus memantau performa jaringan untuk semua pengguna.

Mengakses Metrik Performa dari Pekerja Layanan

Perubahan terbesar adalah penambahan objek performance ke dalam konteks Pekerja (Web dan ServiceWorker) yang kini memungkinkan Anda memahami pengaturan waktu performa dari semua permintaan yang dibuat dalam konteks pekerja dan juga memungkinkan Anda menetapkan tanda Anda sendiri untuk pengukuran eksekusi JS. Jika Anda hanya dapat melihat apa yang terjadi dari konteks jendela saat ini, Anda akan melewatkan informasi penentuan waktu penting dari:

  • Permintaan fetch() yang dibuat di dalam peristiwa oninstall dari pekerja layanan
  • Permintaan fetch() yang dibuat saat meng-cache data dalam peristiwa onpush kini dapat dilacak untuk memahami performa yang dilihat pengguna Anda.
  • Terakhir, permintaan fetch() yang dibuat dan dicegat oleh pengendali onfetch.

Poin terakhir ini penting. Salah satu cara untuk memahami pekerja layanan adalah sebagai proxy yang berada di antara UI web dan jaringan. Objek performance di window hanya melihat pengaturan waktu dan informasi untuk bagian permintaan yang dipanggil, tidak memiliki pengetahuan tentang pekerja layanan yang berada di antara klien dan jaringan sehingga tidak dapat memahami dampak pekerja layanan.

Bagaimana cara menggunakannya?

Service worker standar yang mendukung offline first akan memiliki langkah penginstalan tempat service worker akan mendownload dan menyimpan semua aset untuk digunakan nanti

Contoh tempat penggunaannya adalah untuk merekam dan mencatat data pengaturan waktu langkah penginstalan sehingga Anda dapat membuat beberapa keputusan terukur tentang cara meningkatkan performa penginstalan berdasarkan penggunaan pengguna yang sebenarnya.

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;
        })
    );
});

Saat ini, banyak situs menggunakan RUM untuk memahami pengalaman sebagian besar penggunanya saat menggunakan situs mereka. Alat seperti Google Analytics sudah melaporkan data kecepatan situs menggunakan Navigation Timing API, tetapi perlu diupdate untuk menyertakan analisis performa dari konteks Pekerja.

Apakah Navigation Timing API akan hadir di Service Worker

Saat ini tidak ada rencana untuk menambahkan Navigation Timing API ke konteks pekerja layanan, karena tidak ada navigasi tradisional di pekerja layanan. Yang menarik adalah bahwa bagi pekerja layanan, setiap navigasi dalam kumpulan halaman yang dikontrol pekerja layanan terlihat seperti pengambilan resource. Hal ini saja membuat pekerja layanan menjadi cara yang sangat menarik untuk memusatkan sebagian besar logika performa di aplikasi web Anda.

Dapatkah saya melihat perubahan yang terjadi?

Saya tertarik dengan diskusi dan spesifikasi