Web Programlama Eğitimi: Frontend Gözlemlenebilirlik ve INP

Web Programlama Eğitimi İçin RUM: Laboratuvar Değil Kullanıcı Verisi

Lighthouse tek bir cihaz, ağ profili ve sentetik akışta ölçüm yapar; üretimdeki etkileşim gecikmesini açıklamak için RUM (Real User Monitoring) gerekir. Başlangıçta CrUX ile alan verisini kontrol edin, sonra uygulamanın kendi olaylarına rota, deploy SHA ve kullanıcı segmenti ekleyin. Örneğin bir ürün listeleme rotasında p75 INP değeri 340 ms ise hedefi p75 < 200 ms olarak tanımlayın; deploy öncesi ve sonrası aynı trafik segmentinde en az 7 günlük pencereyi karşılaştırın. Sadece ortalamayı izlemek, birkaç çok hızlı oturumun yavaş cihazlardaki gecikmeyi gizlemesine neden olur.

İstemcide web-vitals paketinin attribution sürümü, tek başına metrik değerinden daha yararlıdır: INP için geciken event type ve hedef eleman bilgisini taşır. Aşağıdaki örnek, metrikleri bir first-party uç noktaya sendBeacon ile gönderir; beacon sayfa kapanırken fetch isteğine göre daha yüksek teslim olasılığına sahiptir. Ancak payload'ı 64 KB altında tutun ve element selector üretirken e-posta, ürün adı veya serbest metin gibi PII içerebilecek DOM içeriğini göndermeyin.

import { onINP, onLCP, onCLS } from 'web-vitals/attribution';

function report(metric) {
  const body = JSON.stringify({
    name: metric.name,
    value: metric.value,
    rating: metric.rating,
    route: location.pathname,
    build: import.meta.env.VITE_GIT_SHA,
    attribution: metric.attribution
  });

  navigator.sendBeacon('/rum/v1/vitals', body);
}

onINP(report, { reportAllChanges: false });
onLCP(report, { reportAllChanges: false });
onCLS(report, { reportAllChanges: false });

RUM toplama endpoint'inde ham route cardinality'sini sınırlayın. /orders/847391 gibi parametreli yolları istemcide veya ingestion katmanında /orders/:id biçimine normalize edin; aksi halde ClickHouse, Datadog veya Grafana Loki sorgularında binlerce benzersiz seri üretirsiniz. Bu, metrik maliyetini yükseltmenin yanında p75 hesaplarını rota bazında anlamsız örneklem boyutlarına böler.

Frontend Development Eğitimi: INP Uzun Görevlerini İzole Etme

INP, bir etkileşimin input delay, event handler çalışması ve tarayıcının sonraki paint'ine kadar geçen presentation delay bileşenlerinin en kötüsüne odaklanır. Chrome DevTools Performance panelinde CPU throttling'i 4脳 seçin, problemli butona tıklarken kaydı alın ve ana iş parçacığındaki 50 ms üzeri sarı Long Task bloklarını açın. Ardından aynı akışı PerformanceObserver ile üretimde yakalayın; longtask girdisindeki attribution her tarayıcıda ayrıntılı değildir, bu nedenle onu INP attribution ile eşleştirin.

Örnek bir filtre değişiminde p75 INP'nin 318 ms olduğunu ve performans izinde Array.sort ile 14.000 satırlık filtrelemenin click handler içinde 126 ms sürdüğünü varsayalım. Hesabı Web Worker'a taşımak yalnızca CPU işini ana thread'den çıkarır; sonuç geri geldiğinde 14.000 DOM düğümünü basmak h芒l芒 paint gecikmesi yaratır. Bu nedenle worker ile birlikte sanallaştırma kullanın. Aşağıdaki mesajlaşmada transfer edilebilir ArrayBuffer kullanmak, büyük bir typed array'in structured clone kopyasını önler.

// filter.worker.js
self.onmessage = ({ data: { query, idsBuffer } }) => {
  const ids = new Uint32Array(idsBuffer);
  const result = ids.filter((id) => matchesQuery(id, query));
  self.postMessage({ result: result.buffer }, [result.buffer]);
};

// UI thread
const worker = new Worker(new URL('./filter.worker.js', import.meta.url), {
  type: 'module'
});
worker.postMessage({ query, idsBuffer: ids.buffer }, [ids.buffer]);

Önce/sonra doğrulamasını iki katmanda yapın: aynı cihazda DevTools trace'inde click-to-next-paint süresini, üretimde ise RUM p75 INP'yi ölçün. Örneğin değişiklikten önce trace'te 126 ms JavaScript ve 71 ms rendering, sonrasında 12 ms handler ve 18 ms rendering görmeden değişikliği kabul etmeyin. Üretimde ayrıca toplam blocking time yerine INP'nin eventType: 'click' kırılımını kontrol edin; otomatik reklam veya üçüncü taraf script kaynaklı uzun görevler filtre akışıyla ilgisiz bir regresyon yaratabilir.

ReactJS Eğitimi, Angular Eğitimi ve VueJS Eğitiminde Trace Bağlamı

Bir kullanıcı tıklamasını API gecikmesiyle ilişkilendirmek için OpenTelemetry kullanın. Tarayıcıdaki span'a rastgele bir request ID eklemek yerine W3C Trace Context'in traceparent başlığını kullanın; backend, veritabanı ve kuyruk span'ları aynı trace altında kalır. CORS tarafında backend'in traceparent isteğine izin vermesi ve istemcinin response header'ını okuyacaksa Access-Control-Expose-Headers eklemesi gerekir.

ReactJS eğitimi örneklerinde sık görülen hata, yalnızca fetch süresini ölçüp render maliyetini dışarıda bırakmaktır. React Profiler'ı production profiling build dışında açmak ölçümü değiştirebilir; bunun yerine sınırlı örneklemle <Profiler> callback'ini RUM olayına gönderin. actualDuration, commit içinde render edilen bileşenlerin sürelerini verir; her kullanıcıda gönderilirse yüksek hacim üretir, bu nedenle örnekleme uygulayın.

import { Profiler } from 'react';

function onRender(id, phase, actualDuration, baseDuration) {
  if (Math.random() < 0.02) {
    navigator.sendBeacon('/rum/v1/react-commit', JSON.stringify({
      id, phase, actualDuration, baseDuration, route: location.pathname
    }));
  }
}

export function ProductPage() {
  return <Profiler id="ProductPage" onRender={onRender}>
    <ProductScreen />
  </Profiler>;
}

Angular eğitiminde Angular DevTools profiler ile change detection kaynaklı commit'leri inceleyin; özellikle büyük listelerde trackBy veya yeni control-flow sözdizimindeki track olmadan her API yanıtında DOM kimlikleri kaybolabilir. VueJS eğitimi tarafında Vue Devtools performans zaman çizelgesinde geniş reactive object'lerin gereksiz bağımlılık toplamasını arayın; salt okunur büyük kataloglar için shallowRef tercih etmek derin proxy yürüyüşünü sınırlar. AngularJS eğitimi verilen eski uygulamalarda ise watcher sayısını Batarang gibi artık bakımı sınırlı araçlara dayandırmak yerine Chrome Performance trace ve framework içi watcher envanteriyle ölçün; AngularJS digest döngüsünde her watcher'ın her digest'te çalışması, binlerce binding'de doğrusal maliyet oluşturur.

Frontend Framework Karşılaştırması: Aynı SLO ile Ölçüm Tasarımı

Sağlıklı bir frontend framework karşılaştırması, React, Angular ve Vue için yalnızca bundle boyutu tablosu çıkarmak değildir. Aynı API fixture'ı, aynı rota, aynı mobil CPU profili ve aynı kullanıcı senaryosu ile üç SLO tanımlayın: p75 INP, p75 LCP ve JavaScript error rate. Build çıktısını source-map-explorer veya webpack-bundle-analyzer ile; kullanıcı etkisini RUM ile ölçün. Farklı CDN, görsel optimizasyonu veya backend cache kullanmak framework sonucunu kirletir.

CI'da Lighthouse CI bütçesi regresyonu erken yakalar fakat bunu release engeli yapmadan önce sentetik ölçüm gürültüsünü azaltın: sabit URL, aynı Docker image ve en az üç çalıştırmanın medyanı kullanılmalıdır. Aşağıdaki yapı, bir rota için LCP ve toplam JavaScript boyutuna üst sınır koyar; gerçek kullanıcı p75 INP eşiğini ise RUM dashboard'unda ayrı alarm olarak yönetin.

{
  "ci": {
    "collect": { "url": ["http://localhost:4173/catalog"], "numberOfRuns": 3 },
    "assert": {
      "assertions": {
        "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }],
        "total-byte-weight": ["warn", { "maxNumericValue": 700000 }]
      }
    }
  }
}

React Native eğitimi alan ekipler için aynı gözlemlenebilirlik sözleşmesi yararlıdır, ancak web INP'sini mobil uygulamaya kopyalamayın: native ekranda JS thread, UI thread ve bridge/JSi maliyetleri ayrı izlenir. Sentry Performance veya OpenTelemetry span adlarını catalog.filter gibi platformdan bağımsız tutarsanız web ve React Native akışlarını karşılaştırabilirsiniz; metrik tanımını değil, kullanıcı niyetini ortaklaştırmış olursunuz.

JavaScript Eğitimi: Metrik Kodunda Örnekleme ve Veri Kalitesi

JavaScript eğitimi içinde telemetry kodu çoğu zaman uygulama kodundan daha az gözden geçirilir. Her oturumdan tüm event'leri göndermek yerine deterministik örnekleme kullanın; aynı kullanıcı veya oturumda olayların bazen girip bazen çıkması, bir trace'i yeniden kurmayı zorlaştırır. Aşağıdaki örnekte hash tabanlı karar oturum boyunca sabittir. crypto.subtle asenkron olduğundan ilk event'i kaçırmamak için session başlangıcında sonucu bellekte saklayın.

function shouldSample(sessionId, rate = 0.05) {
  let h = 2166136261;
  for (const c of sessionId) {
    h ^= c.charCodeAt(0);
    h = Math.imul(h, 16777619);
  }
  return (h >>> 0) / 2 ** 32 < rate;
}

RUM endpoint'i için Content-Type: application/json eklenmiş cross-origin beacon istekleri bazı ortamlarda CORS preflight tetikleyebilir; telemetry alan adını uygulamayla aynı origin altında reverse proxy etmek bu riski azaltır. Sunucuda şema doğrulamasını Zod, JSON Schema veya benzeri bir araçla yapın; istemci sürümleri geride kaldığında beklenmeyen attribution alanlarının analitik tablonuzu bozmasını önlersiniz. Ayrıca deploy SHA yoksa metrik değişimini bir koda bağlayamazsınız; bu alanı CI'ın ürettiği immutable commit değeriyle doldurun.

Sık Sorulan Sorular

Web programlama eğitimi için INP nasıl ölçülür?

Önce Chrome DevTools Performance panelinde sorunlu kullanıcı akışını 4脳 CPU throttling ile kaydedin ve 50 ms üstü Long Task bloklarını inceleyin. Sonra web-vitals/attribution ile üretimde onINP gönderin; rota, deploy SHA ve event type bazında p75 hesaplayın. Sentetik trace'teki click-to-paint değişimini, en az bir haftalık benzer trafik RUM verisiyle doğrulayın.

ReactJS eğitimi sırasında React Profiler üretimde kullanılmalı mı?

Sürekli ve tüm kullanıcılarda kullanmayın. Profiler callback'inden actualDuration ve baseDuration verisini %1-%2 deterministik örneklemle gönderin; route ve build bilgisi ekleyin. Ağ isteği süresi ile React commit süresini ayrı alanlarda tutun, çünkü hızlı API yanıtı pahalı bir render commit'ini gizleyebilir.

Angular eğitimi ve VueJS eğitimi projelerinde performans karşılaştırması nasıl adil yapılır?

Aynı API fixture'ı, aynı cihaz/ağ profili, aynı rota ve aynı etkileşim senaryosunu kullanın. Angular DevTools ve Vue Devtools ile framework içi zaman çizelgesini inceleyin; sonuçları RUM'da p75 INP, p75 LCP ve error rate olarak raporlayın. Bundle boyutunu source-map-explorer ile ölçün, fakat bunu kullanıcı gecikmesinin yerine koymayın.

Frontend framework karşılaştırması için Lighthouse CI yeterli mi?

Hayır. Lighthouse CI, sabit ortamda LCP ve transfer boyutu bütçesi için uygundur; numberOfRuns ile en az üç koşunun medyanını kullanın. INP ve cihaz çeşitliliği için web-vitals tabanlı RUM gerekir. CI bütçesi ihlalini deploy öncesi, RUM p75 regresyonunu ise deploy sonrası alarm olarak ele alın.