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

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

Hongbo Song

Bu yılın başlarında, Chrome Hız Metrikleri Ekibi tarafından paylaşılan değerlendirdiğimiz yeni bir duyarlılık metriği var. Kullanıcı başına aylık geliri daha iyi yansıtan bir metrik ve her bir etkinliğin daha bütünsel bir resmini sunar. bir sayfanın kullanım ömrü boyunca genel duyarlılık düzeyidir.

Geçtiğimiz birkaç ayda bu metrikle ilgili epey ilerleme kaydettik. etkileşim gecikmesini de ölçmeyi nasıl planladığımıza dair sayıp çıkarmayı düşündüğümüz birkaç özel toplama seçeneğini sunmak için bir web sayfasının genel duyarlılığı.

Geliştiricilerden ve site sahiplerinden şu konularda geri bildirim almak isteriz: genel girdiyi en iyi şekilde temsil eden seçenekler aşağıdakilerden hangileridir? yanıt verme sürecini hızlandırıyor.

Etkileşim gecikmesini ölçme

İlk Giriş Gecikmesi (FID) metriği, giriş gecikmesinin bir kısmını etkilemez. Başka bir deyişle, etkinlik işleyicilerin etkinleştirileceği ana kadar sayfayla etkileşime çalıştırılabilir.

Bu yeni metrikle, etkinliğin tamamını kapsayacak şekilde genişletmeyi planlıyoruz. süre, Tüm etkinlik işleyicilerden sonra bir sonraki çerçeve boyanana kadar ilk kullanıcı girişi belirler.

Ayrıca zaman çizelgesi etkileşim sayısı tercih edebilirsiniz. Etkileşimler, kullanıcıların aralarındaki aynı mantıksal kullanıcı hareketinin (örneğin: pointerdown, click, pointerup).

Bir etkinlik grubundan elde edilen toplam etkileşim gecikmesini ölçmek iki potansiyel yaklaşımı değerlendiriyoruz:

• Maksimum etkinlik süresi: Etkileşim gecikmesi, en büyük tek bir etkinlik süresi boyunca geçerli olur.
• Toplam etkinlik süresi: Etkileşim gecikmesi, tüm etkinliklerin çakışmaları göz ardı ederek süreleri belirler.

Örnek olarak, aşağıdaki şemada tuşa basma etkileşimi gösterilmektedir. keydown ve keyup etkinliği. Bu örnekte bir süre çakışması var ne kadar iyi karşıladığını görebileceksiniz. Tuşa 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 artıları ve eksileri var. Biz de daha fazla veri toplamak ve geribildirim gönderin.

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

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

Bir dizi seçeneği inceledikten sonra seçeneklerimizi en fazla aşağıdaki bölümde özetlenen stratejilere, gerçek kullanıcı verilerini topluyor. Araştırmamızın sonuçlarını yayınlamayı planlıyoruz. edindiğimiz yeni bulguları, yeterli veriyi toplamaya başladıktan sonra da için doğrudan geri bildirim almak üzere Sayfalarındaki etkileşim kalıplarını en doğru şekilde yansıtmalıdır.

Toplama stratejisi seçenekleri

Aşağıdaki stratejilerin her birini açıklamaya yardımcı olması için örnek bir sayfa ziyareti kullanabilirsiniz şu dört etkileşimden oluşur:

En kötü etkileşim gecikmesi

Bir sayfada gerçekleşen en büyük bağımsız etkileşim gecikmesidir. Raporda yukarıdaki örnek etkileşimlerin çoğu için, en kötü etkileşim gecikmesi 120 ms.

Bütçe stratejileri

Kullanıcı deneyimi araştırma kullanıcıların belirli eşiklerin altındaki gecikmeleri negatif olur. Bu araştırmaya dayanarak çeşitli bütçe stratejilerini değerlendiriyoruz kullanın:

Bu stratejilerin her biri yalnızca tıklama başına maliyet eşiği belirleyin. Yukarıdaki örnek sayfa ziyaretini kullandığımızda, bütçe aşımı tutarları aşağıdaki gibi olacaktır:

Bütçeyi aşan en kötü etkileşim gecikmesi

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

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

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

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

Bütçeyi aşan toplam etkileşim gecikmesi, etkileşimleridir. Yukarıdaki örneğe göre puan (20 + 0 + 10 + 30) / 4 = 15 ms olur.

Yüksek yüzdelik yaklaşık

Bütçe üzerindeki en büyük etkileşim gecikmesini hesaplamaya alternatif olarak, yüksek yüzdelik bir yaklaşım kullanılması da düşünülerek çok sayıda etkileşimin olduğu ve büyük olması daha olası web sayfaları oluşturabilirsiniz. Yüksek yüzdelik dilim tahminleri için iki potansiyel strateji belirledik Sevdiklerimiz:

• 1. Seçenek: Şu süre boyunca en büyük ve ikinci en büyük etkileşimleri takip edin: kullanabilirsiniz. Her 50 yeni etkileşimden sonra, içeren sonraki 50'lik kümeden en büyük etkileşimi ekleyin. Nihai değer, bütçe üzerinde kalan en büyük etkileşim olur.
• 2. Seçenek: Bütçe üzerindeki en büyük 10 etkileşimi hesaplayın ve değeri göreve çıkarır. Verilen N için, (N / 50 + 1) en büyük değeri veya 10. değeri seçin kullanın.

JavaScript'te bu seçenekleri ölçme

Aşağıdaki kod örneği, ilk üç stratejidir. Ancak bu özellik henüz ölçülememiştir. JavaScript'teki bir sayfadaki toplam etkileşim sayısı olduğundan bu örnekte bütçe stratejisine göre ortalama etkileşimi veya üst düzey stratejileri ifade eder.

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, mobil platformdaki bu yeni yanıt verme metriklerini ve bir sorunla karşılaşırsanız bize bildirin.

Burada açıklanan yaklaşımlara ilişkin genel geri bildirimleri web-vitals-feedback Google "[Duyarlılık Metrikleri]" ile gruplandırın konu satırına yazın. Gelecekteki düşüncelerinizi öğrenmekten mutluluk duyarız!