Geri bildirim isteniyor: Deneysel yanıt verme metriği

Web'de yanıt verme duyarlılığını ölçme planlarımızla ilgili bir güncelleme.

Hongbo Song

Bu yılın başlarında, Chrome Hız Metrikleri Ekibi yeni bir duyarlılık metriğiyle ilgili üzerinde düşündüğümüz bazı fikirleri paylaştı. Bağımsız etkinliklerin uçtan uca gecikmesini daha iyi yakalayan ve bir sayfanın kullanım ömrü boyunca genel yanıt verme durumuyla ilgili daha bütünsel bir görünüm sunan bir metrik tasarlamak istiyoruz.

Geçtiğimiz birkaç ay içinde bu metrikle ilgili epey ilerleme kaydettik ve etkileşim gecikmesini nasıl ölçmeyi planladığımıza dair bir güncelleme paylaşmak ve bir web sayfasının genel yanıt verme hızını ölçmeyi düşündüğümüz birkaç belirli toplama seçeneğini kullanıma sunmak istiyoruz.

Geliştiricilerden ve site sahiplerinden, sayfalarındaki girişlerin genel yanıt verme durumunu en iyi şekilde temsil eden seçenek hakkında geri bildirim almak isteriz.

Etkileşim gecikmesini ölçme

Özetle, First Input Delay (FID) metriği, giriş gecikmesinin gecikme kısmını yakalar. Diğer bir deyişle, kullanıcının sayfayla etkileşim kurma zamanı ile etkinlik işleyicilerin çalıştırılabileceği zaman arasındaki süredir.

Bu yeni metrikle, ilk kullanıcı girişinden sonraki karenin boyanmasına kadar, tüm etkinlik işleyicilerin çalışmasından sonra tüm etkinlik süresini yakalayacak şekilde bu süreyi genişletmeyi planlıyoruz.

Ayrıca, tek tek etkinlikler yerine etkileşimleri ölçmeyi planlıyoruz. Etkileşimler, aynı mantıksal kullanıcı hareketinin bir parçası olarak gönderilen etkinlik gruplarıdır (ör. pointerdown, click, pointerup).

Tek bir etkinlik süresi grubundaki toplam etkileşim gecikmesini ölçmek için iki potansiyel yaklaşımı değerlendiriyoruz:

• Maksimum etkinlik süresi: Etkileşim gecikmesi, etkileşim grubundaki herhangi bir etkinliğin en büyük tek etkinlik süresine eşittir.
• Toplam etkinlik süresi: Etkileşim gecikmesi, çakışmalar göz ardı edilerek tüm etkinlik sürelerinin toplamıdır.

Örnek olarak, aşağıdaki şemada bir keydown ve bir keyup etkinliğinden oluşan tuşa basma etkileşimi gösterilmektedir. Bu örnekte, bu iki etkinlik arasında süre çakışması var. Tuş basma etkileşiminin gecikmesini ölçmek için max(keydown duration, keyup duration) veya sum(keydown duration, keyup duration) - duration overlap kullanabiliriz:

Her yaklaşımın avantajları ve dezavantajları vardır. Bir gecikme tanımını sonlandırmadan önce daha fazla veri ve geri bildirim toplamak isteriz.

Sayfa başına tüm etkileşimleri topla

Tüm etkileşimlerin uçtan uca gecikmesini ölçebildiğimizde, bir sonraki adım, bir sayfa ziyareti için birden fazla etkileşim içerebilen bir toplam puan tanımlamaktır.

Bir dizi seçeneği keşfettikten sonra seçeneklerimizi aşağıdaki bölümde açıklanan stratejilere göre daralttık. Bu stratejilerin her biri şu anda Chrome'da gerçek kullanıcı verilerini topluyoruz. Yeterli veri toplamak için zamanımız olduğunda bulgularımızın sonuçlarını yayınlamayı planlıyoruz, ancak aynı zamanda site sahiplerinden, sayfalarındaki etkileşim kalıplarını en doğru şekilde hangi stratejinin yansıtacağı konusunda doğrudan geri bildirimler bekliyoruz.

Toplama stratejisi seçenekleri

Aşağıdaki stratejilerin her birini açıklamaya yardımcı olması için dört etkileşim içeren örnek bir sayfa ziyareti düşünün:

En kötü etkileşim gecikmesi

Bir sayfada gerçekleşen en büyük, bağımsız etkileşim gecikmesi. Yukarıda listelenen örnek etkileşimler düşünüldüğünde en kötü etkileşim gecikmesi 120 ms'dir.

Bütçe stratejileri

Kullanıcı deneyimi araştırması, kullanıcıların belirli eşiklerin altındaki gecikmeleri negatif olarak algılamayabileceğini göstermektedir. Bu araştırmaya dayanarak, her etkinlik türü için aşağıdaki eşikleri kullanan çeşitli bütçe stratejilerini değerlendiriyoruz:

Bu stratejilerin her biri, yalnızca etkileşim başına bütçe eşiğinden yüksek olan gecikmeyi dikkate alır. Yukarıdaki örnek sayfa ziyareti kullanıldığında, bütçe aşım tutarları aşağıdaki gibi olur:

Bütçe üzerinde en kötü etkileşim gecikmesi

Bütçe üzerindeki en büyük tek etkileşim gecikmesi. Yukarıdaki örneği kullanırsak puan max(20, 0, 10, 30) = 30 ms olur.

Bütçe üzerinden toplam etkileşim gecikmesi

Bütçe üzerindeki tüm etkileşim gecikmelerinin toplamı. Yukarıdaki örneği kullanırsak puan (20 + 0 + 10 + 30) = 60 ms olur.

Bütçe üzerindeki ortalama etkileşim gecikmesi

Bütçeyi aşan toplam etkileşim gecikmesinin toplam etkileşim sayısına bölünmesiyle elde edilen değer. Yukarıdaki örneğe göre puan (20 + 0 + 10 + 30) / 4 = 15 ms olur.

Yüksek yüzdelik dilim yaklaşık değeri

Bütçe üzerindeki en büyük etkileşim gecikmesini hesaplamaya alternatif olarak, yüksek bir yüzdelik tahmin kullanmayı da değerlendirdik. Bu, çok sayıda etkileşimi olan ve büyük aykırı değerlere sahip olma olasılığı daha yüksek web sayfaları için daha adil olmalıdır. Aşağıdaki gibi, yüksek hacimli olabilecek iki yaklaşık tahmin stratejisi belirledik:

• 1. Seçenek: Bütçeyi aşan en büyük ve ikinci en büyük etkileşimleri takip edin. Her 50 yeni etkileşimden sonra, önceki 50 olan kümeden en büyük etkileşimi bırakın ve mevcut 50 olan gruptan en büyük etkileşimi ekleyin. Nihai değer, bütçe üzerinde kalan en büyük etkileşim olacaktır.
• 2. Seçenek: Bütçe üzerindeki en büyük 10 etkileşimi hesaplayın ve toplam etkileşim sayısına bağlı olarak ilgili listeden bir değer seçin. Toplam N etkileşim göz önünde bulundurulduğunda, (N / 50 + 1) en büyük değeri veya 500'den fazla etkileşimi olan sayfalar için 10. değeri seçin.

JavaScript'te bu seçenekleri ölçün

Aşağıdaki kod örneği, yukarıda sunulan ilk üç stratejinin değerlerini belirlemek için kullanılabilir. JavaScript'te bir sayfadaki toplam etkileşim sayısını ölçmenin henüz mümkün olmadığını unutmayın. Bu nedenle bu örnekte, bütçe stratejisi üzerinden ortalama etkileşim veya yüksek miktarlı tahmin stratejileri yer almamaktadır.

const interactionMap = new Map();

let worstLatency = 0;
let worstLatencyOverBudget = 0;
let totalLatencyOverBudget = 0;

new PerformanceObserver((entries) => {
  for (const entry of entries.getEntries()) {
    // Ignore entries without an interaction ID.
    if (entry.interactionId > 0) {
      // Get the interaction for this entry, or create one if it doesn't exist.
      let interaction = interactionMap.get(entry.interactionId);
      if (!interaction) {
        interaction = {latency: 0, entries: []};
        interactionMap.set(entry.interactionId, interaction);
      }
      interaction.entries.push(entry);

      const latency = Math.max(entry.duration, interaction.latency);
      worstLatency = Math.max(worstLatency, latency);

      const budget = entry.name.includes('key') ? 50 : 100;
      const latencyOverBudget = Math.max(latency - budget, 0);
      worstLatencyOverBudget = Math.max(
        latencyOverBudget,
        worstLatencyOverBudget,
      );

      if (latencyOverBudget) {
        const oldLatencyOverBudget = Math.max(interaction.latency - budget, 0);
        totalLatencyOverBudget += latencyOverBudget - oldLatencyOverBudget;
      }

      // Set the latency on the interaction so future events can reference.
      interaction.latency = latency;

      // Log the updated metric values.
      console.log({
        worstLatency,
        worstLatencyOverBudget,
        totalLatencyOverBudget,
      });
    }
  }
  // Set the `durationThreshold` to 50 to capture keyboard interactions
  // that are over-budget (the default `durationThreshold` is 100).
}).observe({type: 'event', buffered: true, durationThreshold: 50});

Geri bildirim

Geliştiricileri, sitelerinde bu yeni yanıt verme metriklerini denemeye teşvik etmek ve herhangi bir sorun tespit ederseniz bize bildirmek istiyoruz.

Burada açıklanan yaklaşımlarla ilgili genel geri bildirimleri, konu satırında "[Duyarlılık Metrikleri]" yazarak web-vitals-feedback Google grubuna e-postayla gönderin. Düşüncelerinizi öğrenmek için sabırsızlanıyoruz.