Kullanıcı Merkezli Ölçütler

Kuzey Yamaç Ölçüm İstasyonu uygulaması üretiliyor, paketleniyor ve yayınlanıyor. Derleme çıktısı bir barındırma hedefine çıkıyor, sürümler geri alınabiliyor, ortam değişkenleri ayrılmış durumda. Yayın hattının yanıtladığı soru “kod kullanıcıya ulaşıyor mu” idi ve yanıtı evet.

Yanıtlanmayan soru şudur: ulaşan şey kullanıcı için ne kadar iyi çalışıyor? Bu ders o sorunun ölçülebilir hâlini kurar. Ölçütler kullanıcının algıladığı olaylara bağlanır; bütçeye bağlanmaları bu konunun son dersine kalır.

Teknik Kilometre Taşları Yanlış Soruyu Yanıtlar

Sayfanın yüklenmesi, tarayıcı için tanımlı olayları olan bir süreçtir: belge ayrıştırması biter, alt kaynaklar iner, yükleme olayı tetiklenir. Bu olaylar ölçülebilir ve kaydedilebilir. Sorun ölçülebilirlikte değil, neyi temsil ettiklerindedir.

İstasyon listesi sayfası düşünülsün. Liste sunucudan gelen HTML içinde geliyor ve hemen görünüyor; sayfanın altındaki bir harita bileşeni ise büyük bir betik indirip iki saniye sonra hazır oluyor. Yükleme olayı harita hazır olduğunda tetiklenir. Kullanıcı ise listesini bir saniyede görmüş, aradığı istasyona çoktan dokunmuştur.

Ters durum da vardır: belge erken biter, ama ekranda okunabilir hiçbir şey yoktur çünkü içerik betikle üretilmektedir. Yükleme olayı erkendir, kullanıcının gördüğü boş ekrandır.

İki durumda da teknik kilometre taşı doğrudur ve deneyimi yanlış anlatır. Ölçütün öznesi tarayıcının iç akışı değil, kullanıcının ekranda gördüğü ve yaptığı şey olmalıdır.

Üç Soru, Beş Ölçüt

Kullanıcı merkezli ölçütler üç soruyu ayırır.

Ne zaman bir şey gördüm? Bu sorunun iki ölçüsü vardır. İlk bayt süresi (time to first byte) isteğin gönderilmesiyle yanıtın ilk baytının gelmesi arasındaki süredir; Ağ Panelinde Tanı dersinde aşamalara bölünen zamanlamanın ilk parçasıdır. Sunucu tarafını ölçer ve istemcide yapılacak eniyilemenin tavanını belirler: sonraki her ölçüt bu sürenin üstüne biner. İlk içerik boyası (first contentful paint) ekranda belgeden gelen herhangi bir içeriğin — metin, görsel, tuval çizimi — ilk kez çizildiği andır. Boş ekranın bittiğini söyler, sayfanın hazır olduğunu söylemez.

Ne zaman asıl içeriği gördüm? En büyük içerik boyası (largest contentful paint), görünüm alanındaki en büyük içerik ögesinin çizildiği andır. Ölçütün fikri şudur: bir sayfanın “yüklendi” hissi, en çok yer kaplayan ögenin gelmesiyle oluşur. İstasyon listesi sayfasında bu öge listenin kendisidir; ölçüm ayrıntısı sayfasında istasyon fotoğrafıdır. Ölçüt yükleme boyunca güncellenir; daha büyük bir öge sonradan çizilirse aday değişir ve ölçüt ileri kayar.

Ne zaman dokunduğuma yanıt aldım? Sonraki boyaya etkileşim (interaction to next paint), kullanıcının bir etkileşiminden — tıklama, dokunma, tuş — ekranın bunu yansıtan sonraki boyamasına kadar geçen süredir. Ölçülen şey işleyicinin süresi değil, kullanıcının gördüğü gecikmenin tamamıdır: girdinin işlenmeyi beklediği süre, işleyicinin süresi ve karenin üretilmesi. Sayfa boyunca birçok etkileşim olur; ölçüt bunların en kötülerini temsil eden tek bir değer verir.

Ekran ayağımın altından kaydı mı? Kümülatif düzen kayması (cumulative layout shift), beklenmedik yer değiştirmelerin toplamıdır. Web’in Temelleri ve HTML kursunda içerik kayması adıyla tanıtılan olgunun niceliksel karşılığıdır ve tek ölçüt içinde süre değil, oransız bir puan verir.

Görsel Kararlılığın Puanı

Kayma puanı iki payın çarpımıdır. Etki payı, kayan ögenin iki ardışık karedeki görünür alanlarının birleşiminin görünüm alanına oranıdır: ekranın ne kadarı etkilendi? Uzaklık payı, ögenin kat ettiği en büyük mesafenin görünüm alanının büyük kenarına oranıdır: ne kadar uzağa gitti?

Aşağıdaki hesap, kayan ögelerin görünüm alanı genişliğini kapladığını varsayar; bu varsayımla etki bölgesi iki boyutlu bir alandan tek bir dikey aralığa iner. Daha dar ögelerde aynı çarpım genişlik oranıyla ölçeklenir.

// kayma.mjs — tek bir duzen kaymasinin puani ve oturum penceresi toplami

const GORUNTU = { genislik: 390, yukseklik: 844 }; // gorunum alani, CSS pikseli

// Her kayma: kararsiz ogenin kayma oncesi ve sonrasi dikey araligi.
const kaymalar = [
  { ad: "duyuru serigi acildi", once: [96, 700], sonra: [196, 800] },
  { ad: "istasyon gorseli yerlesti", once: [200, 444], sonra: [224, 468] },
  { ad: "olcum rozeti geldi", once: [512, 560], sonra: [520, 568] },
];

function kaymaPuani(kayma) {
  const [oncekiUst, oncekiAlt] = kayma.once;
  const [sonrakiUst, sonrakiAlt] = kayma.sonra;

  // Etki bolgesi: iki karedeki gorunur alanlarin birlesimi.
  const birlesimUst = Math.max(0, Math.min(oncekiUst, sonrakiUst));
  const birlesimAlt = Math.min(GORUNTU.yukseklik, Math.max(oncekiAlt, sonrakiAlt));
  const etkiPayi = (birlesimAlt - birlesimUst) / GORUNTU.yukseklik;

  // Uzaklik payi: ogenin kat ettigi en buyuk mesafe / gorunum alaninin buyuk kenari.
  const mesafe = Math.abs(sonrakiUst - oncekiUst);
  const uzaklikPayi = mesafe / Math.max(GORUNTU.genislik, GORUNTU.yukseklik);

  return { etkiPayi, uzaklikPayi, mesafe, puan: etkiPayi * uzaklikPayi };
}

console.log("kayma".padEnd(28) + "mesafe".padStart(8) + "etki".padStart(8) +
  "uzaklik".padStart(9) + "puan".padStart(8));
let toplam = 0;
for (const k of kaymalar) {
  const s = kaymaPuani(k);
  toplam += s.puan;
  console.log(
    k.ad.padEnd(28) + `${s.mesafe}px`.padStart(8) +
    s.etkiPayi.toFixed(3).padStart(8) + s.uzaklikPayi.toFixed(3).padStart(9) +
    s.puan.toFixed(4).padStart(8));
}
console.log("-".repeat(61));
console.log("oturum penceresi toplami".padEnd(28) + toplam.toFixed(4).padStart(33));
console.log(`esik degerlendirmesi: ${toplam <= 0.1 ? "iyi" : toplam <= 0.25 ? "gelistirilmeli" : "kotu"}`);

kayma                         mesafe    etki  uzaklik    puan
duyuru serigi acildi           100px   0.834    0.118  0.0988
istasyon gorseli yerlesti       24px   0.318    0.028  0.0090
olcum rozeti geldi               8px   0.066    0.009  0.0006
-------------------------------------------------------------
oturum penceresi toplami                               0.1085
esik degerlendirmesi: gelistirilmeli

Üç kaymanın etkisi birbirinden çok farklıdır. Sayfanın üstüne sonradan açılan yüz piksellik duyuru şeridi, altındaki her şeyi taşıdığı için ekranın yüzde seksen üçünü etkiler ve tek başına puanın neredeyse tamamını üretir. Ölçüm rozetinin sekiz piksellik oynaması ise binde altı eder.

Buradan iki kural çıkar. Kaymanın maliyeti kayan ögenin boyutuyla değil, altında ne kadar içerik olduğuyla orantılıdır: sayfanın en üstündeki küçük bir öge, en altındaki büyük bir ögeden pahalıdır. Ve puan çarpım olduğu için iki payın biri sıfıra yaklaştığında sonuç sıfıra yaklaşır — görünüm alanının dışında olan bir kayma hiç sayılmaz.

Toplama kuralı da tanımın parçasıdır: kaymalar oturum penceresi içinde toplanır ve sayfanın puanı bu pencerelerin en büyüğüdür. Bir pencere, aralarında uzun boşluk olmayan kaymaları bir arada tutar; uzun süre açık kalan bir sayfa, saatler boyunca biriken küçük kaymalar yüzünden kötü puan almaz.

Kullanıcı hareketiyle başlayan kaymalar ölçüte girmez. Bir düğmeye basıldığında açılan panelin altındakileri itmesi beklenen bir sonuçtur; ölçülen şey beklenmedik kaymadır.

Alan Verisi ve Laboratuvar Verisi

Aynı ölçüt iki ayrı yolla toplanır ve ikisi farklı soruları yanıtlar.

Laboratuvar verisi, denetlenen koşullarda üretilmiş ölçümdür: sabit ağ kısıtlaması, sabit aygıt profili, eklentisiz tarayıcı, soğuk önbellek. Yeniden üretilebilir olduğu için karşılaştırmaya elverişlidir; iki derlemenin farkını ölçmenin tek güvenilir yolu budur. Yanıtlamadığı soru, gerçek kullanıcıların ne yaşadığıdır.

Alan verisi, gerçek ziyaretlerden toplanan ölçümdür. Aygıt çeşitliliğini, ağ koşullarını ve kullanıcı davranışını içerir. Yanıtlamadığı soru ise nedendir: bir ölçütün kötüleştiğini söyler, hangi kaynağın geciktiğini söylemez.

İkisi birbirinin yerine geçmez. Alan verisi sorunun var olduğunu, laboratuvar verisi nerede olduğunu gösterir. Sonraki boyaya etkileşim gibi ölçütler ancak kullanıcı etkileşimiyle oluştuğu için laboratuvar koşulunda doğrudan üretilemez; ölçülebilmesi için etkileşimin taklit edilmesi gerekir ve taklit, gerçek kullanım örüntüsünü temsil etmez.

Dağılımı Özetlemek

Alan verisi tek bir sayı değil, bir dağılımdır ve dağılımın hangi sayıyla özetlendiği sonucu değiştirir.

// dagilim.mjs — ayni sayfanin iki farkli ozeti: ortalama ve yuzdelikler

// Dagilim uretilmis bir ornektir, olculmus alan verisi degildir:
// belirlenimci bir uretecle 500 ziyaret uretilir.
let tohum = 20260728;
const rastgele = () => (tohum = (tohum * 1103515245 + 12345) % 2147483648) / 2147483648;

const ziyaretler = Array.from({ length: 500 }, () => {
  // Ziyaretlerin yaklasik ucte biri yavas kosulda (uzak ag, yavas aygit).
  const yavas = rastgele() < 0.3;
  return yavas
    ? Math.round(3400 + rastgele() * 2100)
    : Math.round(1200 + rastgele() * 800);
});

function yuzdelik(dizi, p) {
  const sirali = [...dizi].sort((a, b) => a - b);
  const konum = (p / 100) * (sirali.length - 1);
  const alt = Math.floor(konum);
  const ust = Math.ceil(konum);
  return sirali[alt] + (sirali[ust] - sirali[alt]) * (konum - alt);
}

const ortalama = ziyaretler.reduce((a, b) => a + b, 0) / ziyaretler.length;
console.log("en buyuk icerik boyasi ozeti (uretilmis ornek dagilim, 500 ziyaret)");
for (const [ad, deger] of [
  ["ortalama", ortalama],
  ["ortanca (50.)", yuzdelik(ziyaretler, 50)],
  ["75. yuzdelik", yuzdelik(ziyaretler, 75)],
  ["95. yuzdelik", yuzdelik(ziyaretler, 95)],
]) {
  const sinif = deger <= 2500 ? "iyi" : deger <= 4000 ? "gelistirilmeli" : "kotu";
  console.log(`${ad.padEnd(16)}${(deger / 1000).toFixed(2)} s   -> ${sinif}`);
}

const iyiOran = ziyaretler.filter((v) => v <= 2500).length / ziyaretler.length;
console.log(`esigin altinda kalan ziyaret orani: ${(iyiOran * 100).toFixed(1)}%`);

en buyuk icerik boyasi ozeti (uretilmis ornek dagilim, 500 ziyaret)
ortalama        2.38 s   -> iyi
ortanca (50.)   1.73 s   -> iyi
75. yuzdelik    3.56 s   -> gelistirilmeli
95. yuzdelik    5.15 s   -> kotu
esigin altinda kalan ziyaret orani: 72.4%

Dağılım, programın içinde belirlenimci bir üreteçle kurulmuştur; ölçülmüş bir alan verisi değil, iki özetleme yönteminin farkını göstermek için üretilmiş bir örnektir. Ziyaretlerin üçte biri yavaş koşulda, geri kalanı hızlı koşulda varsayılmıştır.

Sonuç aynı veriye iki çelişik cevap verir. Ortalama iki virgül otuz sekiz saniyedir ve iyi sınıfına düşer; yetmiş beşinci yüzdelik üç virgül elli altı saniyedir ve geliştirilmeli sınıfına düşer. Aradaki fark bir hesap hatası değil, ortalamanın çalışma biçimidir: hızlı ziyaretler yavaşların ağırlığını gizler.

Yüzdelik bunu yapamaz. Yetmiş beşinci yüzdelik, “kullanıcıların dörtte üçü bu değerden daha iyisini gördü” demektir ve doğrudan bir kullanıcı payına karşılık gelir. Eşiğin altında kalan ziyaret oranı da aynı bilgiyi verir: bu dağılımda ziyaretlerin yüzde yetmiş ikisi iyi eşiğinin altındadır.

Ölçütlerin standart eşikleri de dağılım üzerinden tanımlıdır. En büyük içerik boyası için iki buçuk saniyeye kadar iyi, dört saniyeye kadar geliştirilmeli sayılır; kümülatif düzen kayması için sınırlar sıfır virgül bir ve sıfır virgül yirmi beştir; sonraki boyaya etkileşim için iki yüz ve beş yüz milisaniyedir. Sınıflandırma tek bir ziyarete değil, seçilen yüzdeliğe uygulanır.

İstasyon Sayfalarında Ölçüt Seçimi

Uygulamanın iki sayfası aynı ölçütlerle değerlendirilmez.

İstasyon listesi sayfası bir gezinme başlangıcıdır. Kullanıcı buraya listeyi görmek için gelir ve hemen bir satıra dokunur. Belirleyici ölçütler en büyük içerik boyası ile kümülatif düzen kaymasıdır: liste geç gelirse bekler, geç kayarsa yanlış satıra dokunur.

Ölçüm ayrıntısı sayfası bir çalışma yüzeyidir. Kullanıcı tarih aralığı değiştirir, grafiği süzer, birim çevirir. Belirleyici ölçüt sonraki boyaya etkileşimdir; yükleme bir kez olur, etkileşim onlarca kez.

Ölçüt seçimi bu yüzden sayfanın işine bağlıdır. Bütün ölçütleri her sayfa için aynı ağırlıkla izlemek, hangi işin bozulduğunu gizler.

Özet

• Teknik kilometre taşları tarayıcının iç akışını ölçer; kullanıcı merkezli ölçütler kullanıcının gördüğü ve yaptığı şeyi ölçer, ikisi birbirinden bağımsız kötüleşebilir.
• Üç soru beş ölçüte bağlanır: ilk bayt süresi ile ilk içerik boyası boş ekranın bitişini, en büyük içerik boyası asıl içeriğin gelişini, sonraki boyaya etkileşim yanıt süresini, kümülatif düzen kayması görsel kararlılığı ölçer.
• Düzen kayması puanı etki payı ile uzaklık payının çarpımıdır; maliyeti belirleyen, kayan ögenin boyutu değil altında kalan içeriğin miktarıdır.
• Alan verisi sorunun var olduğunu, laboratuvar verisi nerede olduğunu gösterir; biri yeniden üretilebilir, diğeri temsil edicidir.
• Dağılım ortalamayla özetlendiğinde yavaş ziyaretler gizlenir; yüzdelik doğrudan bir kullanıcı payına karşılık geldiği için ölçüt eşikleri yüzdeliğe uygulanır.

Sonraki Adım

Ölçütler tanımlandı ve hangi sayısıyla okunacakları belirlendi. Bir sonraki soru, ölçülen sürelerin nereye harcandığıdır. En büyük içerik boyası geç gerçekleşiyorsa gecikme üç yerden birindedir: sunucunun yanıt üretmesi, yanıtın taşınması ya da tarayıcının ekrana bir şey çizebilmek için beklemek zorunda olduğu kaynaklar. Üçüncüsü tümüyle geliştiricinin denetimindedir ve çoğu zaman en büyük paydır. Sonraki ders, ilk boyamanın hangi kaynakları beklediğini ve bu bekleyişin kaç gidiş-dönüşe mal olduğunu hesaplanabilir bir model üzerinden ele alır.