Hizmet Çalışanlarının Gerçek Dünyadaki Performans Etkisini Ölçme

Philip Walton

Hizmet çalışanlarının en önemli avantajlarından biri (en azından performans açısından) öğelerin önbelleğe alınmasını proaktif olarak kontrol edebilmeleridir. Gerekli tüm kaynaklarını önbelleğe alabilen bir web uygulaması, geri gelen ziyaretçiler için önemli ölçüde daha hızlı yüklenir. Peki bu kazanımlar gerçek kullanıcılar için nasıl görünüyor? Bunu nasıl ölçersiniz?

Google I/O web uygulaması (kısaca IOWA), kullanıcılarına zengin, uygulama benzeri bir deneyim sunmak için hizmet işçileri tarafından sunulan yeni özelliklerin çoğundan yararlanan bir progresif web uygulamasıdır. Ayrıca, geniş ve çeşitli kullanıcı kitlesinden önemli performans verilerini ve kullanım kalıplarını yakalamak için Google Analytics'i kullandı.

Bu örnek olayda, IOWA'nın önemli performans sorularını yanıtlamak ve hizmet işçilerinin gerçek dünyadaki etkisini bildirmek için Google Analytics'i nasıl kullandığı incelenmektedir.

Sorularla başlama

Bir web sitesine veya uygulamaya analiz uygularken, toplayacağınız verilerden yanıtlamaya çalıştığınız soruları belirlemekle başlamanız önemlidir.

Cevaplamak istediğimiz birkaç soru olsa da bu örnek olayda daha ilgi çekici olan iki soruya odaklanalım.

1. Hizmet çalışanı önbelleğe alma, tüm tarayıcılarda mevcut olan mevcut HTTP önbelleğe alma mekanizmalarından daha mı performanslıdır?

Tarayıcılar istekleri önbelleğe alıp tekrarlanan ziyaretlerde anında sunabildiğinden, sayfaların geri gelen ziyaretçiler için yeni ziyaretçilere kıyasla daha hızlı yüklenmesini zaten bekliyoruz.

Service Worker'lar, önbelleğe alma işleminin tam olarak ne ve nasıl yapıldığı konusunda geliştiricilere ayrıntılı denetim sağlayan alternatif önbelleğe alma özellikleri sunar. IOWA'da, hizmet çalışanı uygulamamızı her öğenin önbelleğe alınması için optimize ettik. Böylece, geri gelen ziyaretçiler uygulamayı tamamen çevrimdışı kullanabilir.

Ancak bu çaba, tarayıcının varsayılan olarak yaptığından daha iyi olur mu? Yanıtınız evet ise ne kadar daha iyi? 1

2. Hizmet çalışanı, sitenin yüklenme deneyimini nasıl etkiler?

Diğer bir deyişle, geleneksel sayfa yükleme metrikleriyle ölçülen gerçek yükleme sürelerinden bağımsız olarak sitenin yüklenme hızı ne kadar hızlı algılanıyor?

Bir deneyimin nasıl hissettirdiğiyle ilgili soruları yanıtlamak kolay bir iş değildir ve hiçbir metrik bu tür öznel bir duyguyu mükemmel şekilde temsil edemez. Bununla birlikte, diğerlerinden daha iyi olan bazı metrikler vardır. Bu nedenle, doğru metrikleri seçmek önemlidir.

Doğru metriği seçme

Google Analytics, varsayılan olarak bir sitenin ziyaretçilerinin% 1'i için sayfa yükleme sürelerini (Navigation Timing API aracılığıyla) izler ve bu verileri Ortalama Sayfa Yükleme Süresi gibi metrikler aracılığıyla kullanılabilir hale getirir.

Ort. Sayfa Yükleme Süresi, ilk sorunumuzu yanıtlamak için iyi bir metriktir ancak ikinci sorunumuzu yanıtlamak için özellikle iyi bir metrik değildir. Örneğin, load etkinliği kullanıcının uygulamayla gerçekten etkileşime geçebileceği ana karşılık gelmeyebilir. Ayrıca, tam olarak aynı yükleme süresine sahip iki uygulamanın yükleme süresi çok farklı gelebilir. Örneğin, açılış ekranı veya yükleme göstergesi olan bir site, birkaç saniye boyunca yalnızca boş bir sayfa gösteren bir siteye kıyasla muhtemelen çok daha hızlı yüklenir.

IOWA'da, uygulamanın geri kalanı arka planda yüklenirken kullanıcıyı eğlendirmeyi çok başarılı bir şekilde sağlayan bir açılış ekranı geri sayım animasyonu gösterdik. Bu nedenle, algılanan yükleme performansını ölçmek için açılış ekranının görünmesinin ne kadar sürdüğünü izlemek çok daha mantıklı bir yöntemdir. Bu değeri elde etmek için ilk boyama süresi metriğini seçtik.

Yanıtlamak istediğimiz sorulara karar verip bunları yanıtlarken faydalı olacak metrikleri belirledikten sonra Google Analytics'i uygulama ve ölçüm yapmaya başlama zamanı gelmişti.

Analytics'in uygulanması

Google Analytics'i daha önce kullandıysanız önerilen JavaScript izleme snippet'ini muhtemelen biliyorsunuzdur. Şöyle görünür:

<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');
</script>
<script async src="https://www.google-analytics.com/analytics.js"></script>

Yukarıdaki koddaki ilk satır, global bir ga() işlevini (mevcut değilse) başlatır ve son satır, analytics.js kitaplığını eşzamansız olarak indirir.

Orta kısım şu iki satırı içerir:

ga('create', 'UA-XXXXX-Y', 'auto');
ga('send', 'pageview');

Bu iki komut, sitenize gelen kullanıcıların hangi sayfaları ziyaret ettiğini izler ancak bunun dışında pek bir şey yapmaz. Başka kullanıcı etkileşimlerini izlemek istiyorsanız bunu kendiniz yapmanız gerekir.

IOWA için iki ek şeyi izlemek istedik:

• Sayfanın ilk kez yüklenmeye başlaması ile ekranda piksellerin görünmesi arasında geçen süre.
• Sayfayı bir hizmet çalışanının kontrol edip etmediğini belirtir. Bu bilgilerle, raporlarımızı hizmet çalışanı olan ve olmayan sonuçları karşılaştıracak şekilde segmentlere ayırabiliriz.

İlk boyama süresi yakalanıyor

Bazı tarayıcılar, ilk pikselin ekrana çizildiği tam zamanı kaydeder ve bu zamanı geliştiricilerin kullanımına sunar. Bu değer, Gezinme Zamanlaması API'si aracılığıyla sunulan navigationStart değeriyle karşılaştırıldığında, kullanıcının sayfayı ilk kez istediği andan ilk kez bir şey gördüğü ana kadar ne kadar süre geçtiğini çok doğru bir şekilde hesaplamamıza olanak tanır.

Daha önce de belirttiğim gibi, ilk boyama süresi ölçülmesi gereken önemli bir metriktir çünkü bu süre, kullanıcının sitenizin yükleme hızını deneyimlediği ilk noktadır. Kullanıcıların uygulamayla ilgili ilk izlenimidir ve iyi bir ilk izlenim, kullanıcı deneyiminin geri kalanını olumlu yönde etkileyebilir.2

İlk boyama değerini, bunu gösteren tarayıcılarda almak için getTimeToFirstPaintIfSupported yardımcı işlevini oluşturduk:

function getTimeToFirstPaintIfSupported() {
  // Ignores browsers that don't support the Performance Timing API.
  if (window.performance && window.performance.timing) {
    var navTiming = window.performance.timing;
    var navStart = navTiming.navigationStart;
    var fpTime;

    // If chrome, get first paint time from `chrome.loadTimes`.
    if (window.chrome && window.chrome.loadTimes) {
      fpTime = window.chrome.loadTimes().firstPaintTime * 1000;
    }
    // If IE/Edge, use the prefixed `msFirstPaint` property.
    // See http://msdn.microsoft.com/ff974719
    else if (navTiming.msFirstPaint) {
      fpTime = navTiming.msFirstPaint;
    }

    if (fpTime && navStart) {
      return fpTime - navStart;
    }
  }
}

Bu sayede, ilk boyama süresini değeri olarak içeren bir etkileşim dışı etkinliği gönderen başka bir işlev yazabiliriz:3

function sendTimeToFirstPaint() {
  var timeToFirstPaint = getTimeToFirstPaintIfSupported();

  if (timeToFirstPaint) {
    ga('send', 'event', {
      eventCategory: 'Performance',
      eventAction: 'firstpaint',
      // Rounds to the nearest millisecond since
      // event values in Google Analytics must be integers.
      eventValue: Math.round(timeToFirstPaint)
      // Sends this as a non-interaction event,
      // so it doesn't affect bounce rate.
      nonInteraction: true
    });
  }
}

Bu iki işlevi de yazdıktan sonra izleme kodumuz aşağıdaki gibi görünür:

// Creates the tracker object.
ga('create', 'UA-XXXXX-Y', 'auto');

// Sends a pageview for the initial pageload.
ga('send', 'pageview');

// Sends an event with the time to first paint data.
sendTimeToFirstPaint();

Yukarıdaki kodun ne zaman çalıştırıldığına bağlı olarak, piksellerin ekrana çizilmiş olabileceğini veya çizilmemiş olabileceğini unutmayın. Bu kodu her zaman ilk boyama işleminden sonra çalıştırdığımızdan emin olmak için sendTimeToFirstPaint() çağrısını load etkinliğinden sonraya erteliyoruz. Aslında, bu isteklerin diğer kaynakların yüklenmesiyle rekabet etmemesi için tüm analiz verilerinin gönderilmesini sayfa yüklendikten sonraya ertelemeye karar verdik.

// Creates the tracker object.
ga('create', 'UA-XXXXX-Y', 'auto');

// Postpones sending any hits until after the page has fully loaded.
// This prevents analytics requests from delaying the loading of the page.
window.addEventListener('load', function() {
  // Sends a pageview for the initial pageload.
  ga('send', 'pageview');

  // Sends an event with the time to first paint data.
  sendTimeToFirstPaint();
});

Yukarıdaki kod, Google Analytics'e firstpaint kez rapor gönderir ancak bu işin yalnızca yarısıdır. Yine de hizmet çalışanı durumunu izlememiz gerekiyordu. Aksi takdirde, hizmet çalışanı tarafından kontrol edilen bir sayfanın ve kontrol edilmeyen bir sayfanın ilk boyama sürelerini karşılaştıramazdık.

Hizmet çalışanı durumunu belirleme

Hizmet çalışanının mevcut durumunu belirlemek için üç değerden birini döndüren bir yardımcı program işlevi oluşturduk:

• kontrol ediliyor: Sayfayı bir hizmet çalışanı kontrol ediyor. IOWA söz konusu olduğunda bu, tüm öğelerin önbelleğe alındığı ve sayfanın çevrimdışı olarak çalıştığı anlamına gelir.
• desteklenen: Tarayıcı, hizmet çalışanını destekliyor ancak hizmet çalışanı henüz sayfayı kontrol etmiyor. Bu, ilk kez gelen ziyaretçiler için beklenen durumdur.
• unsupported: Kullanıcının tarayıcısı hizmet çalışanını desteklemiyor.

function getServiceWorkerStatus() {
  if ('serviceWorker' in navigator) {
    return navigator.serviceWorker.controller ? 'controlled' : 'supported';
  } else {
    return 'unsupported';
  }
}

Bu işlev, hizmet çalışanı durumunu bizim için aldı. Sonraki adım, bu durumu Google Analytics'e gönderdiğimiz verilerle ilişkilendirmekti.

Özel boyutlarla özel verileri izleme

Google Analytics, varsayılan olarak toplam trafiğinizi kullanıcı, oturum veya etkileşimin özelliklerine göre gruplara ayırmanın birçok yolunu sunar. Bu özellikler boyutlar olarak bilinir. Tarayıcı, İşletim Sistemi veya Cihaz Kategorisi gibi web geliştiricilerin ilgilendiği yaygın boyutlardır.

Hizmet çalışanının durumu, Google Analytics'in varsayılan olarak sağladığı bir boyut değildir. Ancak Google Analytics, kendi özel boyutlarınızı oluşturmanıza ve istediğiniz şekilde tanımlamanıza olanak tanır.

IOWA için Hizmet Çalışanı Durumu adlı bir özel boyut oluşturduk ve kapsamını istek (ör. etkileşim başına) olarak belirledik.4 Google Analytics'te oluşturduğunuz her özel boyuta, ilgili mülk içinde benzersiz bir dizin verilir ve izleme kodunuzda bu boyuta dizine göre referans verebilirsiniz. Örneğin, az önce oluşturduğumuz boyutun dizini 1 ise, firstpaint etkinliğini Service Worker durumunu içerecek şekilde göndermek için mantığımızı şu şekilde güncelleyebiliriz:

ga('send', 'event', {
  eventCategory: 'Performance',
  eventAction: 'firstpaint',
  // Rounds to the nearest millisecond since
  // event values in Google Analytics must be integers.
  eventValue: Math.round(timeToFirstPaint)
  // Sends this as a non-interaction event,
  // so it doesn't affect bounce rate.
  nonInteraction: true,

  // Sets the current service worker status as the value of
  // `dimension1` for this event.
  dimension1: getServiceWorkerStatus()
});

Bu yöntem işe yarar ancak yalnızca hizmet çalışanının durumunu bu etkinlikle ilişkilendirir. Hizmet Çalışanı Durumu, herhangi bir etkileşim için bilinmesi yararlı olabilecek bir bilgi olduğundan, Google Analytics'e gönderilen tüm verilere dahil edilmesi önerilir.

Bu bilgileri tüm isabetler (ör. tüm sayfa görüntülemeleri, etkinlikler vb.) için dahil etmek üzere, Google Analytics'e herhangi bir veri göndermeden önce özel boyut değerini izleyici nesnesinin kendisine ayarlıyoruz.

ga('set', 'dimension1', getServiceWorkerStatus());

Ayarlandıktan sonra bu değer, mevcut sayfa yüklemesi için sonraki tüm isabetlerle birlikte gönderilir. Kullanıcı sayfayı daha sonra tekrar yüklerse getServiceWorkerStatus() işlevinden büyük olasılıkla yeni bir değer döndürülür ve bu değer izleyici nesnesinde ayarlanır.

Kodun netliği ve okunabilirliği hakkında kısa bir not: Bu koda bakan diğer kullanıcılar dimension1'ün ne anlama geldiğini bilmeyebileceğinden, anlamlı boyut adlarını analytics.js'in kullanacağı değerlerle eşleyen bir değişken oluşturmak her zaman en iyi seçenektir.

// Creates a map between custom dimension names and their index.
// This is particularly useful if you define lots of custom dimensions.
var customDimensions = {
  SERVICE_WORKER_STATUS: 'dimension1'
};

// Creates the tracker object.
ga('create', 'UA-XXXXX-Y', 'auto');

// Sets the service worker status on the tracker,
// so its value is included in all future hits.
ga('set', customDimensions.SERVICE_WORKER_STATUS, getServiceWorkerStatus());

// Postpones sending any hits until after the page has fully loaded.
// This prevents analytics requests from delaying the loading of the page.
window.addEventListener('load', function() {
  // Sends a pageview for the initial pageload.
  ga('send', 'pageview');

  // Sends an event with the time to first paint data.
  sendTimeToFirstPaint();
});

Bahsettiğim gibi, her isabetle birlikte Hizmet Çalışanı Durumu boyutunu göndermek, herhangi bir metrikle ilgili rapor oluştururken bu boyutu kullanmamıza olanak tanır.

Gördüğünüz gibi, IOWA için tüm sayfa görüntülemelerinin neredeyse% 85'i hizmet çalışanını destekleyen tarayıcılardan geldi.

Sonuçlar: Sorularımızı yanıtlama

Sorularımızı yanıtlamak için veri toplamaya başladıktan sonra, sonuçları görmek için bu verilerle ilgili rapor oluşturabildik. (Not: Burada gösterilen tüm Google Analytics verileri, 16-22 Mayıs 2016 tarihleri arasında IOWA sitesine gelen gerçek web trafiğini temsil eder).

İlk sorumuz şuydu: Service Worker önbelleğe alma işlemi, tüm tarayıcılarda bulunan mevcut HTTP önbelleğe alma mekanizmalarından daha iyi performans gösteriyor mu?

Bu soruyu yanıtlamak için çeşitli boyutlarda Ort. Sayfa Yükleme Süreleri metriğini inceleyen bir özel rapor oluşturduk. load etkinliği yalnızca tüm ilk kaynaklar indirildikten sonra tetiklendiği için bu metrik, bu soruyu yanıtlamak için idealdir. Bu nedenle, sitenin tüm kritik kaynaklarının toplam yükleme süresini doğrudan yansıtır.5

Seçtiğimiz boyutlar şunlardı:

• Özel Hizmet Çalışanı Durumu boyutumuz.
• Kullanıcı Türü: Kullanıcının siteyi ilk kez mi yoksa tekrar mı ziyaret ettiğini belirtir. (Not: Yeni bir ziyaretçinin önbelleğe alınmış kaynağı olmaz. Dönen ziyaretçilerin önbelleğe alınmış kaynakları olabilir.)
• Cihaz Kategorisi: Mobil ve masaüstündeki sonuçları karşılaştırmamıza olanak tanır.

Yükleme süresi sonuçlarımızı hizmet işleyiciyle ilgili olmayan faktörlerin çarpıtması olasılığını kontrol etmek için sorgumuzu yalnızca hizmet işleyiciyi destekleyen tarayıcılar içerecek şekilde sınırladık.

Gördüğünüz gibi uygulamamıza yapılan ziyaretler, hizmet çalışanı tarafından kontrol edildiğinde, kontrol edilmeyen ziyaretlere göre çok daha hızlı yükleniyor. Bu durum, sayfadaki kaynakların büyük bir kısmı önbelleğe alınmış geri gelen kullanıcılardan gelenler de dahil olmak üzere. Ayrıca, mobil cihazlarda hizmet çalışanı olan ziyaretçilerin, yeni masaüstü ziyaretçilerine kıyasla ortalama olarak daha hızlı yükleme gördüğünü belirtmek de ilginçtir.

"…bir hizmet çalışanı tarafından kontrol edildiğinde uygulamamıza yapılan ziyaretler, kontrol edilmeyen ziyaretlere kıyasla oldukça daha hızlı yüklendi…"

Daha fazla bilgiyi aşağıdaki iki tabloda bulabilirsiniz:

Tarayıcısı hizmet çalışanını destekleyen geri gelen bir ziyaretçinin kontrollü olmayan bir durumda nasıl olabileceğini merak ediyor olabilirsiniz. Bunun birkaç olası açıklaması vardır:

• Kullanıcı, ilk ziyarette hizmet çalışanı ilklendirmeyi tamamlamadan önce sayfadan ayrıldı.
• Kullanıcı, hizmet çalışanını geliştirici araçları aracılığıyla kaldırdı.

Bu durumların her ikisi de nispeten nadirdir. Dördüncü sütundaki Sayfa Yükleme Örneği değerlerine bakarak verilerde bunu görebiliriz. Ortadaki satırların diğer ikisine kıyasla çok daha küçük bir örnek içerdiğini fark edin.

İkinci sorunumuz: Hizmet çalışanı, sitenin yüklenme deneyimini nasıl etkiler?

Bu soruyu yanıtlamak için Ort. Etkinlik Değeri metriği için başka bir özel rapor oluşturduk ve sonuçları yalnızca firstpaint etkinliklerimizi içerecek şekilde filtreledik. Cihaz Kategorisi boyutunu ve özel Hizmet Çalışanı Durumu boyutumuzu kullandık.

Beklediğimizin aksine, mobil cihazlardaki hizmet çalışanı ilk boyama süresi üzerinde toplam sayfa yükleme süresinden çok daha az etki yarattı.

"...mobil cihazlarda Service Worker'ın ilk boyama süresi üzerindeki etkisi, genel sayfa yüklemelerine kıyasla çok daha azdı."

Bunun nedenini anlamak için verileri daha ayrıntılı bir şekilde incelememiz gerekiyor. Ortalamalar genel bakışlar ve geniş kapsamlı analizler için iyi olabilir ancak bu sayıların bir dizi kullanıcıya göre nasıl dağıldığını gerçekten anlamak için firstpaint kezlik bir dağılıma bakmamız gerekir.

Google Analytics'te bir metriğin dağılımını alma

firstpaint kez dağılımını almak için her etkinliğin ayrı sonuçlarına erişmemiz gerekir. Maalesef Google Analytics bunu kolaylaştırmıyor.

Google Analytics, bir raporu istediğimiz boyuta göre ayrıntılı incelememize olanak tanır ancak metriklere göre ayrıntılı incelememize izin vermez. Bu, imkansız olduğu anlamına gelmez. Yalnızca, istenen sonucu elde etmek için uygulamamızı biraz daha özelleştirmemiz gerektiği anlamına gelir.

Rapor sonuçları yalnızca boyutlara göre ayrılabildiğinden, metrik değerini (bu durumda firstpaint saat) etkinlikte özel boyut olarak ayarlamamız gerekiyordu. Bunu yapmak için Metrik Değeri adlı başka bir özel boyut oluşturduk ve firstpaint izleme mantığımızı aşağıdaki gibi güncelledik:

var customDimensions = {
  SERVICE_WORKER_STATUS: 'dimension1',
  <strong>METRIC_VALUE: 'dimension2'</strong>
};

// ...

function sendTimeToFirstPaint() {
  var timeToFirstPaint = getTimeToFirstPaintIfSupported();

  if (timeToFirstPaint) {
    var fields = {
      eventCategory: 'Performance',
      eventAction: 'firstpaint',
      // Rounds to the nearest millisecond since
      // event values in Google Analytics must be integers.
      eventValue: Math.round(timeToFirstPaint)
      // Sends this as a non-interaction event,
      // so it doesn't affect bounce rate.
      nonInteraction: true
    }

    <strong>// Sets the event value as a dimension to allow for breaking down the
    // results by individual metric values at reporting time.
    fields[customDimensions.METRIC_VALUE] = String(fields.eventValue);</strong>

    ga('send', 'event', fields);
  }
}

Google Analytics web arayüzü şu anda keyfi metrik değerlerinin dağılımını görselleştirmenin bir yolunu sunmuyor. Ancak Google Analytics Core Reporting API ve Google Grafikler kitaplığının yardımıyla ham sonuçları sorgulayabilir ve ardından bir histogram oluşturabiliriz.

Örneğin, kontrollü olmayan bir hizmet çalışanı ile masaüstünde firstpaint değerlerinin dağılımını almak için aşağıdaki API istek yapılandırması kullanıldı.

{
  dateRanges: [{startDate: '2016-05-16', endDate: '2016-05-22'}],
  metrics: [{expression: 'ga:totalEvents'}],
  dimensions: [{name: 'ga:dimension2'}],
  dimensionFilterClauses: [
    {
      operator: 'AND',
      filters: [
        {
          dimensionName: 'ga:eventAction',
          operator: 'EXACT',
          expressions: ['firstpaint']
        },
        {
          dimensionName: 'ga:dimension1',
          operator: 'EXACT',
          expressions: ['supported']
        },
        {
          dimensionName: 'ga:deviceCategory',
          operator: 'EXACT',
          expressions: ['desktop']
        }
      ],
    }
  ],
  orderBys: [
    {
      fieldName: 'ga:dimension2',
      orderType: 'DIMENSION_AS_INTEGER'
    }
  ]
}

Bu API isteği, aşağıdaki gibi görünen bir değer dizisi döndürür (Not: Bunlar yalnızca ilk beş sonuçtur). Sonuçlar en küçükten en büyüğe doğru sıralanır. Bu nedenle bu satırlar en hızlı zamanları temsil eder.

Bu sonuçların ne anlama geldiği aşağıda açıklanmıştır:

• firstpaint değerinin 4 ms olduğu 3 etkinlik oluştu
• firstpaint değerinin 5 ms olduğu 2 etkinlik vardı
• firstpaint değerinin 6 ms olduğu 10 etkinlik vardı
• firstpaint değerinin 7 ms olduğu 8 etkinlik vardı
• firstpaint value değerinin 8 ms olduğu 10 etkinlik vardı
• vb.

Bu sonuçlardan her bir etkinlik için firstpaint değerini tahmin edebilir ve dağılımın histogramini oluşturabiliriz. Bu işlemi, çalıştırdığımız sorguların her biri için yaptık.

Kontrol edilmeyen (ancak desteklenen) bir hizmet çalışanı ile dağıtım masaüstünde aşağıdaki gibi görünüyordu:

Yukarıdaki dağılımın ortanca firstpaint süresi 912 ms'dir.

Bu eğrinin şekli, yükleme süresi dağılımları için oldukça tipiktir. Bunu, bir hizmet çalışanının sayfayı kontrol ettiği ziyaretler için ilk boyama etkinliklerinin dağılımını gösteren aşağıdaki histogramla karşılaştırın.

Sayfayı bir hizmet çalışanı kontrol ederken birçok ziyaretçinin, 583 ms medyan değeriyle neredeyse anında ilk boyama deneyimi yaşadığını görebilirsiniz.

"…sayfayı bir hizmet çalışanı kontrol ederken birçok ziyaretçi neredeyse anında ilk boyamayı deneyimledi…"

Bu iki dağılımın birbiriyle karşılaştırmasını daha iyi anlamak için bir sonraki grafikte bu ikisinin birleştirilmiş görünümü gösterilir. Kontrollü olmayan hizmet çalışanı ziyaretlerini gösteren histogram, kontrollü ziyaretleri gösteren histogramın üzerine yerleştirilir ve her ikisi de her ikisini birlikte gösteren bir histogramın üzerine yerleştirilir.

Bu sonuçlarla ilgili ilginç bulduğum bir şey, kontrollü bir hizmet çalışanı olan dağılımın ilk artıştan sonra hâlâ çan şeklinde bir eğriye sahip olmasıydı. İlk başta büyük bir artış ve ardından kademeli bir düşüş bekliyordum. Eğride ikinci bir zirve beklemiyordum.

Buna neyin neden olabileceğini araştırdığımda, bir hizmet çalışanı bir sayfayı kontrol etse bile iş parçacığının etkin olmayabileceğini öğrendim. Tarayıcı bunu kaynak tasarrufu için yapar. Ziyaret ettiğiniz her sitenin hizmet çalışanlarının anında etkin ve hazır olması gerekmez. Bu, dağıtımın kuyruğunu açıklar. Bazı kullanıcılarda hizmet çalışanı iş parçacığı başlatılırken gecikme yaşandı.

Ancak dağıtımdan görebileceğiniz gibi, bu ilk gecikmede bile, Service Worker'a sahip tarayıcılar içeriği ağ üzerinden geçen tarayıcılardan daha hızlı teslim ederler.

Mobilde şöyle görünüyordu:

Hemen hemen anında ilk boyama sürelerinde önemli bir artış elde etsek de kuyruk oldukça daha büyük ve uzundu. Bunun nedeni, mobil cihazlarda boşta çalışan bir hizmet çalışanı mesaj dizisini başlatmanın masaüstünde olduğundan daha uzun sürmesidir. Ayrıca, ortalama firstpaint süresi arasındaki farkın beklediğim kadar büyük olmamasının nedenini de açıklar (yukarıda ele alınmıştır).

"…mobil cihazlarda, boşta çalışan bir hizmet çalışanı iş parçacığı başlatmak masaüstünde olduğundan daha uzun sürer."

Mobil ve masaüstündeki ilk boyama sürelerinin medyan değerlerinin, hizmet çalışanı durumuna göre gruplandırılmış dökümü aşağıda verilmiştir:

Bu dağıtım görselleştirmelerini oluşturmak, Google Analytics'te özel rapor oluşturmaktan biraz daha fazla zaman ve çaba gerektirse de hizmet işçilerinin sitemizin performansını nasıl etkilediğine dair yalnızca ortalamalardan çok daha iyi bir fikir edinmemizi sağlıyor.

Hizmet çalışanlarının diğer etkileri

Performansa ek olarak Service Worker'lar da kullanıcı deneyimini Google Analytics ile ölçülebilen birçok başka şekilde etkiler.

Çevrimdışı erişim

Hizmet çalışanları, kullanıcıların çevrimdışıyken sitenizle etkileşim kurmasına olanak tanır. Her tür ilerici web uygulaması için bir tür çevrimdışı desteğin muhtemelen kritik olmasıyla birlikte, sizin durumunuzda ne kadar kritik olduğunu belirlemek büyük ölçüde çevrimdışı kullanım oranına bağlıdır. Peki bunu nasıl ölçeriz?

Google Analytics'e veri göndermek için internet bağlantısı gerekir ancak verilerin tam olarak etkileşimin gerçekleştiği anda gönderilmesi gerekmez. Google Analytics, bir zaman farkı (qt parametresi aracılığıyla) belirterek etkileşim verilerinin daha sonra gönderilmesini destekler.

IOWA, son iki yıldır kullanıcı çevrimdışıyken Google Analytics'e yapılan başarısız isabetleri algılayan ve daha sonra qt parametresiyle yeniden oynatan bir hizmet çalışanı komut dosyası kullanıyor.

Kullanıcının çevrimiçi mi yoksa çevrimdışı mı olduğunu izlemek için Online adlı bir özel boyut oluşturduk ve bu boyutu navigator.onLine değerine ayarladık. Ardından online ve offline etkinliklerini dinledik ve boyutu buna göre güncelledik.

Ayrıca, kullanıcıların IOWA'yı kullanırken çevrimdışı olma durumunun ne kadar yaygın olduğunu anlamak için en az bir çevrimdışı etkileşimi olan kullanıcıları hedefleyen bir segment oluşturduk. Bu, kullanıcıların neredeyse %5'i kadardı.

Push bildirimleri

Hizmet çalışanları, kullanıcıların push bildirimi almayı etkinleştirmesine olanak tanır. IOWA'da, kullanıcılara programlarındaki bir oturum başlamak üzereyken bildirim gönderiliyordu.

Her bildirim türünde olduğu gibi, kullanıcıya değer sağlama ve kullanıcıyı rahatsız etme arasında dengeyi bulmak önemlidir. Hangi durumun geçerli olduğunu daha iyi anlamak için kullanıcıların bu bildirimleri almayı etkinleştirip etkinleştirmediğini, bildirimler geldiğinde onlarla etkileşime geçip geçmediğini ve daha önce etkinleştiren kullanıcıların tercihlerini değiştirip devre dışı bırakıp bırakmadığını izlemeniz önemlidir.

IOWA'da yalnızca kullanıcının kişiselleştirilmiş programıyla ilgili bildirimler gönderdik. Bu programları yalnızca oturum açmış kullanıcılar oluşturabilir. Bu durum, bildirim alabilen kullanıcı grubunu, tarayıcıları push bildirimleri destekleyen (Bildirim İzni adlı başka bir özel boyut aracılığıyla izlenir) ve oturum açmış kullanıcılarla (Oturum Açmış adlı özel bir boyut aracılığıyla izlenir) sınırladı.

Aşağıdaki rapor, Kullanıcılar metriğini ve bir noktada oturum açmış ve tarayıcıları push bildirimleri destekleyen kullanıcılara göre segmentlere ayrılmış bildirim izni özel boyutumuzu temel alır.

Oturum açmış kullanıcılarımızın yarısından fazlasının push bildirimi almayı tercih ettiğini görmek bizi çok mutlu etti.

Uygulama yükleme banner'ları

Bir ilerleme durumu web uygulaması, ölçütleri karşılıyorsa ve bir kullanıcı tarafından sıklıkla kullanılıyorsa kullanıcıya uygulamayı ana ekranına eklemesini isteyen bir uygulama yükleme banner'ı gösterilebilir.

IOWA'da, aşağıdaki kodla bu istemlerin kullanıcıya ne sıklıkta gösterildiğini (ve kabul edilip edilmediğini) izledik:

window.addEventListener('beforeinstallprompt', function(event) {
  // Tracks that the user saw a prompt.
  ga('send', 'event', {
    eventCategory: 'installprompt',
    eventAction: 'fired'
  });

  event.userChoice.then(function(choiceResult) {
    // Tracks the users choice.
    ga('send', 'event', {
      eventCategory: 'installprompt',
      // `choiceResult.outcome` will be 'accepted' or 'dismissed'.
      eventAction: choiceResult.outcome,
      // `choiceResult.platform` will be 'web' or 'android' if the prompt was
      // accepted, or '' if the prompt was dismissed.
      eventLabel: choiceResult.platform
    });
  });
});

Uygulama yükleme banner'ını gören kullanıcıların yaklaşık %10'u uygulamayı ana ekranlarına eklemeyi tercih etti.

Olası izleme iyileştirmeleri (bir sonraki sefer için)

Bu yıl IOWA'dan topladığımız analiz verileri paha biçilmezdi. Ancak geriye dönüp baktığımızda her zaman eksiklikleri ve bir sonraki seferde iyileştirme fırsatlarını görürüz. Bu yılki analizimizi tamamladıktan sonra, benzer bir strateji uygulamak isteyen okuyucuların dikkate alabileceği, farklı şekilde yapmayı arzuladığım iki noktayı aşağıda bulabilirsiniz:

1. Yükleme deneyimiyle ilgili daha fazla etkinliği izleme

Teknik bir metriğe karşılık gelen çeşitli etkinlikleri (ör.HTMLImportsLoaded, WebComponentsReady vb.) izledik. Ancak yüklemenin büyük bir kısmı eşzamansız olarak yapıldığından, bu etkinliklerin tetiklendiği nokta genel yükleme deneyimindeki belirli bir anla eşleşmeyebilir.

Yüklemeyle ilgili olarak izlemediğimiz (ancak izlemeyi arzu ettiğimiz) birincil etkinlik, açılış ekranının kaybolduğu ve kullanıcının sayfa içeriğini görebildiği noktadır.

2. Analiz istemci kimliğini IndexedDB'de depolama

analytics.js, varsayılan olarak istemci kimliği alanını tarayıcının çerezlerinde depolar. Maalesef hizmet çalışanı komut dosyaları çerezlere erişemez.

Bildirim takibi özelliğini uygulamaya çalışırken bu durum bize sorun oluşturdu. Bir kullanıcıya bildirim gönderildiğinde hizmet çalışanından (Ölçüm Protokolü aracılığıyla) bir etkinlik göndermek ve ardından kullanıcı bildirimi tıklayıp uygulamaya geri dönerse bu bildirimin yeniden etkileşim başarısını izlemek istedik.

utm_source kampanya parametresi aracılığıyla genel olarak bildirimlerin başarısını izleyebilsek de belirli bir yeniden etkileşim oturumunu belirli bir kullanıcıyla ilişkilendiremedik.

Bu sınırlamayı aşmak için istemci kimliğini izleme kodumuzda IndexedDB aracılığıyla saklayabilirdik. Sonrasında bu değere, Service Worker komut dosyası tarafından erişilebilir.

3. Hizmet çalışanının online/çevrimdışı durumu bildirmesine izin verin

navigator.onLine incelendikten sonra tarayıcınızın yönlendiriciye veya yerel alan ağına bağlanıp bağlanamadığını bildirir, ancak kullanıcının gerçek bir bağlantısının olup olmadığını söylemez. Ayrıca, çevrimdışı analiz hizmeti çalışanı komut dosyamız başarısız olan isabetleri değiştirmeden veya başarısız olarak işaretlemeden tekrar oynattığından muhtemelen çevrimdışı kullanımımızı eksik bildiriyorduk.

Gelecekte, hem navigator.onLine durumunu hem de isabetin ilk ağ hatası nedeniyle hizmet çalışanı tarafından tekrar oynatılıp oynatılmadığını izlememiz gerekir. Bu sayede, gerçek çevrimdışı kullanımla ilgili daha doğru bir görünüm elde edebiliriz.

Özet

Bu örnek olay, Service Worker'ı kullanmanın pek çok farklı tarayıcı, ağ ve cihazda Google I/O web uygulamasının yükleme performansını gerçekten artırdığını göstermiştir. Ayrıca, yükleme verilerinin çeşitli tarayıcılar, ağlar ve cihazlar arasındaki dağılımına baktığınızda bu teknolojinin gerçek dünya senaryolarını nasıl ele aldığı hakkında çok daha fazla bilgi edindiğinizi ve beklemediğiniz performans özelliklerini keşfettiğinizi de göstermiştir.

IOWA çalışmasının önemli bulgularından bazıları şunlardır:

• Sayfalar, hem yeni hem de geri gelen ziyaretçiler için bir hizmet çalışanı tarafından kontrol edildiğinde, hizmet çalışanı olmadan kontrol edildiğinden çok daha hızlı yüklendi.
• Hizmet çalışanı tarafından kontrol edilen sayfalara yapılan ziyaretler, birçok kullanıcı için neredeyse anında yükleniyordu.
• Etkin olmayan hizmet çalışanlarının başlatılması biraz zaman aldı. Ancak etkin olmayan bir hizmet çalışanı, hizmet çalışanı olmayan bir siteye kıyasla daha iyi performans gösterdi.
• Etkin olmayan bir hizmet çalışanı için başlatma süresi mobil cihazlarda masaüstünden daha uzundu.

Belirli bir uygulamada gözlemlenen performans kazanımları genellikle daha geniş geliştirici topluluğuna raporlamak için yararlı olsa da bu sonuçların IOWA'nın site türüne (etkinlik sitesi) ve sahip olduğu kitle türüne (çoğunlukla geliştiriciler) özgü olduğunu unutmayın.

Uygulamanızda hizmet çalışanı uyguluyorsanız kendi performansınızı değerlendirip gelecekte gerileme olmasını önlemek için kendi ölçüm stratejinizi uygulamanız önemlidir. Bu durumda, herkesin yararlanabilmesi için lütfen sonuçlarınızı paylaşın.

Dipnotlar

1. Hizmet çalışanı önbelleği uygulamamızın performansını, yalnızca HTTP önbelleği kullanılan sitemizin performansıyla karşılaştırmak tamamen adil değildir. Service Worker için IOWA'yı optimize ettiğimizden HTTP önbelleği optimizasyonuna fazla zaman harcamadık. Aksi takdirde sonuçlar muhtemelen farklı olurdu. Sitenizi HTTP önbelleği için optimize etme hakkında daha fazla bilgi edinmek istiyorsanız İçeriği Verimli Bir Şekilde Optimize Etme başlıklı makaleyi okuyun.
2. Sitenizin stillerini ve içeriğini nasıl yüklediğine bağlı olarak, tarayıcı içeriğin veya stillerin kullanılabilir hale gelmesinden önce boyama işlemini gerçekleştirebilir. Bu gibi durumlarda firstpaint, boş beyaz bir ekrana karşılık gelebilir. firstpaint kullanıyorsanız bu parametrenin, sitenizin kaynaklarının yüklenmesinde anlamlı bir noktaya karşılık geldiğinden emin olmanız önemlidir.
3. Teknik olarak, bu bilgiyi yakalamak için etkinlik yerine bir zamanlama isabeti (varsayılan olarak etkileşim dışıdır) gönderebiliriz. Aslında zamanlama isabetleri, Google Analytics'e özellikle bu tür yükleme metriklerini izlemek için eklenmiştir. Ancak zamanlama isabetleri, işleme sırasında yoğun şekilde örneklenir ve değerleri segmentlerde kullanılamaz. Mevcut sınırlamalar göz önüne alındığında, etkileşim dışı etkinlikler daha uygundur.
4. Google Analytics'te özel bir boyuta hangi kapsamın verileceğini daha iyi anlamak için Analytics yardım merkezinin Özel Boyut bölümünü inceleyin. Kullanıcılar, oturumlar ve etkileşimlerden (isabetler) oluşan Google Analytics veri modelini de anlamak önemlidir. Daha fazla bilgi için Google Analytics Veri Modeli ile ilgili Analytics Akademisi dersini izleyin.
5. Bu, yükleme etkinliğinden sonra yavaşça yüklenen kaynaklar için geçerli değildir.