Geri bildirim aranıyor: Deneysel bir yanıt verebilirlik metriği

Bu yılın başlarında, Chrome Hız Metrikleri Ekibi, yeni bir yanıt verebilirlik metriği için düşündüğümüz bazı fikirleri paylaştı. Bireysel olayların uçtan uca gecikmesini daha iyi yakalayan ve kullanım ömrü boyunca bir sayfanın genel yanıt verebilirliğinin daha bütünsel bir resmini sunan bir ölçüm tasarlamak istiyoruz.

Son birkaç ayda bu metrikte çok ilerleme kaydettik ve etkileşim gecikmesini nasıl ölçmeyi planladığımızla ilgili bir güncellemeyi paylaşmak ve genel yanıt verebilirliği ölçmeyi düşündüğümüz birkaç özel toplama seçeneği sunmak istedik. bir web sayfasının

almayı çok isteriz geri bildirim geliştiricilerden ve site sahiplerinden, bu seçeneklerden hangisinin sayfalarının genel girdi duyarlılığını en iyi temsil edeceği konusunda.

Etkileşim gecikmesini ölçün #

Bir inceleme olarak, İlk Giriş Gecikmesi (FID) metriği, giriş gecikmesinin gecikme bölümünü yakalar. Diğer bir deyişle, kullanıcının sayfayla etkileşimde bulunduğu andan olay işleyicilerinin çalışabildiği ana kadar geçen süredir.

Bu yeni metrikle, ilk kullanıcı girişinden tüm olay işleyicileri çalıştıktan sonra bir sonraki karenin boyanmasına kadar tüm olay süresini yakalamak için bunu genişletmeyi planlıyoruz.

Bireysel olaylar yerine etkileşimleri de ölçmeyi planlıyoruz. Etkileşimler, aynı mantıksal kullanıcı hareketinin parçası olarak gönderilen olay gruplarıdır (örneğin: pointerdown, click, pointerup).

Bir grup bireysel olay süresinden toplam etkileşim gecikmesini ölçmek için iki potansiyel yaklaşımı göz önünde bulunduruyoruz:

• Maksimum etkinlik süresi: etkileşim gecikmesi, etkileşim grubundaki herhangi bir olayın en büyük tek olay süresine eşittir.
• Toplam etkinlik süresi: etkileşim gecikmesi, tüm etkinlik sürelerinin toplamıdır ve herhangi bir çakışma göz ardı edilir.

Örnek olarak, aşağıdaki diyagram bir tuşa basın oluşan etkileşim keydown ve bir keyup etkinlik. Bu örnekte, bu iki olay arasında bir süre çakışması vardır. Tuşa basma etkileşiminin gecikmesini ölçmek için şunu kullanabiliriz: max(keydown duration, keyup duration) veya sum(keydown duration, keyup duration) - duration overlap:

Her yaklaşımın artıları ve eksileri vardır ve daha fazla veri toplamak ve geri bildirim bir gecikme tanımını tamamlamadan önce.

Sayfa başına tüm etkileşimleri toplayın #

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

Bir dizi seçeneği keşfettikten sonra, seçeneklerimizi aşağıdaki bölümde özetlenen ve şu anda Chrome’da gerçek kullanıcı verilerini topladığımız stratejilere indirgedik. Yeterli veri toplamak için zamanımız olduğunda bulgularımızın sonuçlarını yayınlamayı planlıyoruz, ancak aynı zamanda doğrudan geri bildirim Hangi stratejinin sayfalarındaki etkileşim kalıplarını en doğru şekilde yansıtacağı konusunda site sahiplerinden.

Toplama stratejileri seçenekleri #

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

En kötü etkileşim gecikmesi #

Bir sayfada meydana gelen en büyük bireysel etkileşim gecikmesi. Yukarıda listelenen örnek etkileşimler göz önüne alındığında, en kötü etkileşim gecikmesi 120 ms olacaktır.

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 öne sürüyor. Bu araştırmaya dayanarak, her etkinlik türü için aşağıdaki eşikleri kullanarak birkaç bütçe stratejisi düşünüyoruz:

Bu stratejilerin her biri, yalnızca etkileşim başına bütçe eşiğinden daha fazla olan gecikmeyi dikkate alacaktır. Yukarıdaki örnek sayfa ziyareti kullanılarak, bütçeyi aşan tutarlar aşağıdaki gibi olacaktır:

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

Bütçeyi aşan en büyük tek etkileşim gecikmesi. Yukarıdaki örneği kullanarak, puan max(20, 0, 10, 30) = 30 ms.

Bütçeyi aşan toplam etkileşim gecikmesi #

Bütçeyi aşan tüm etkileşim gecikmelerinin toplamı. Yukarıdaki örneği kullanarak, puan (20 + 0 + 10 + 30) = 60 ms.

Bütçeyi aşan ortalama etkileşim gecikmesi #

Toplam bütçeyi aşan etkileşim gecikmesinin toplam etkileşim sayısına bölümü. Yukarıdaki örneği kullanarak, puan (20 + 0 + 10 + 30) / 4 = 15 ms.

Yüksek niceliksel yaklaşım #

Bütçe üzerinden en büyük etkileşim gecikmesini hesaplamaya bir alternatif olarak, çok fazla etkileşime sahip web sayfaları için daha adil olması gereken ve büyük aykırı değerlere sahip olma olasılığı daha yüksek olabilecek yüksek bir niceliksel yaklaşım kullanmayı da düşündük. Beğendiğimiz iki potansiyel yüksek nicelikli yaklaşım stratejisi belirledik:

• Seçenek 1: Bütçeyi aşan en büyük ve en büyük ikinci etkileşimleri takip edin. Her 50 yeni etkileşimden sonra, önceki 50 kümeden en büyük etkileşimi çıkarın ve mevcut 50 kümeden en büyük etkileşimi ekleyin. Nihai değer, bütçeyi aşan en büyük kalan etkileşim olacaktır.
• Seçenek 2: Bütçeyi aşan en büyük 10 etkileşimi hesaplayın ve toplam etkileşim sayısına bağlı olarak bu listeden bir değer seçin. Toplam N etkileşim verildiğinde, (N / 50 + 1)inci en büyük değeri veya 500’den fazla etkileşime sahip 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 örnek, bütçe stratejisi üzerinden ortalama etkileşimi veya yüksek niceliksel yaklaşım stratejilerini içermez.

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, bu yeni yanıt verme ölçütlerini sitelerinde denemeye ve herhangi bir sorunla karşılaşırsanız bize bildirmeye teşvik etmek istiyoruz.

Burada özetlenen yaklaşımlarla ilgili genel geri bildirimleri şu adrese e-postayla gönderin: web-hayati-geri bildirim ” ile Google grubu[Responsiveness Metrics]” konu satırında. Ne düşündüğünüzü duymak için gerçekten sabırsızlanıyoruz!