Yıllarca, ön yüz performans dünyası, yükleme hızı için En Büyük İçerik Boyutu (LCP) ve görsel kararlılık için Birikimli Düzen Kayması (CLS) olmak üzere iki dev tarafından domine edildi. Bu metrikler hala kritik olsa da, Google'ın İlk Girdi Gecikmesi'nden (FID) Etkileşimden Sonraki Boyama'ya (INP) geçişi, odağı temelde etkileşime kaydırdı. INP, bir ziyaretin tamamı boyunca bir sayfanın kullanıcı girdilerine gösterdiği tepki süresini ölçer ve bu da onu kullanıcı deneyiminin daha kapsamlı bir göstergesi yapar. Geliştiriciler olarak, artık basit render hızının ötesine bakmalı ve etkileşim gecikmesinin karmaşık dünyasına dalmalıyız.
INP'ye Geçişin Anlaşılması
FID'nin yalnızca ilk etkileşimi ölçmesinin aksine, INP kullanıcının sayfa ile kurduğu tüm etkileşimleri, tıklamaları, dokunmaları ve klavye girişlerini dikkate alır. Tüm etkileşim gecikmelerinin 98. yüzdelik dilimini (p98) raporlar. Bu, bir sayfa anında yüklense bile, yavaş bir modal pencerenin veya donmuş bir açılır menünün puanınızı düşürebileceği anlamına gelir. INP için optimizasyon yapmak adına, bir olayın aşamalarını anlamamız gerekir: girdi gecikmesi, işleme süresi ve sunum gecikmesi. Hedef, kullanıcının eyleminden ekrandaki görsel geri bildirime kadar geçen toplam süreyi en aza indirmektir.
Girdi Gecikmesini Azaltma Stratejileri
Girdi gecikmesi, ana iş parçacığını bloke eden uzun JavaScript yürütme görevlerinden kaynaklanır. Tarayıcı büyük bir betiği ayrıştırırken veya ağır hesaplamalar yaparken meşgul olduğunda, kullanıcı olaylarını işleyemez. Burada en etkili strateji görev bölmedir. requestAnimationFrame veya setTimeout gibi teknikleri kullanarak uzun görevleri daha küçük parçalara ayırarak tarayıcının kullanıcı etkileşimlerine öncelik vermesine izin verebiliriz.
// Kötü: Ağır hesaplama ile ana iş parçacığını bloke etmek
function processHeavyData(data) {
const results = [];
for (let i = 0; i < data.length; i++) {
// Bu döngü, yürütme sırasında UI'ı bloke eder
results.push(computeExpensiveValue(data[i]));
}
return results;
}
// İyi: Ağır hesaplamayı Web Workers'a devretmek
const worker = new Worker('computation-worker.js');
worker.postMessage(data);
worker.onmessage = (e) => {
updateUI(e.data);
};Ağır hesaplamayı Web Workers'a devretmek, yapabileceğiniz en etkili değişikliklerden biridir. Workers, ana iş parçacığınızın kullanıcı girdilerine yanıt vermeye devam etmesini sağlayarak ayrı bir iş parçacığında çalışır. Daha basit görevler için, kritik render yolundaki girdi gecikmesini önemli ölçüde azaltmak amacıyla kritik olmayan JavaScript yürütmesini ilk boyamadan sonra ertelemek de faydalı olabilir.
Sunum Gecikmesini Optimize Etme
Olay işlendikten sonra tarayıcının sonucu boyaması gerekir. Tarayıcı boyama yaparken meşgul olduğunda veya CSS animasyonları kullanıcı etkileşimleriyle çakıştığında sunum gecikmesi bir sorun haline gelir. Yaygın bir hata, genişletme veya yükseklik yerine transform animasyonu gibi, pahalı düzen veya bileştirme işlemlerini tetikleyen ağır CSS özellikleri kullanmaktır. Ayrıca, kritik CSS'nin satır içi (inline) ve bloke edici olmayan şekilde olduğundan emin olmak, tarayıcının daha hızlı boyama yapmasına yardımcı olur.
Başka bir kritik yön de JavaScript paketlerinin boyutunu azaltmaktır. Büyük paketler, JavaScript'in ayrıştırılması ve derlenmesi için harcanan süreyi artırır; bu da hem LCP'yi hem de sonraki etkileşimleri geciktirir. Kritik olmayan bileşenler için kod bölme ve geç yükleme (lazy loading) uygulamak, yalnızca gerektiğinde gerekli kodun yüklenmesini sağlar ve acil kullanıcı etkileşimleri için daha fazla işlem gücü bırakır.
INP İzleme ve Hata Ayıklama
INP için test yapmak, yalnızca Lighthouse puanlarına izole olarak bakmaktan daha fazlasını gerektirir. Lighthouse bir anlık görüntü sağlar, ancak gerçek dünya performansı cihazlar ve ağ koşulları arasında değişiklik gösterir. Etkileşimleri gerçek zamanlı izlemek için tarayıcı konsolundaki PerformanceObserver API'sini kullanın. Bu, gecikme artışlarına neden olan belirli etkileşimleri belirlemenize olanak tanır.
const observer = new PerformanceObserver((list) => {
for (const entry of list.getEntries()) {
console.log(`Etkileşim: ${entry.name}, Süre: ${entry.duration}ms`);
}
});
observer.observe({ entryTypes: ['event'] });Bu günlükleri analiz ederek hangi DOM olaylarının yavaş olduğunu belirleyebilir ve ilgili JavaScript işleyicilerini inceleyebilirsiniz. Chrome DevTools'un Dinleyici Kesme Noktaları (Event Listener Breakpoints), belirli bir etkileşimin neden çok uzun sürede işlendiğini teşhis etmek için de vazgeçilmezdir.
Sonuç
INP için optimizasyon yapmak, web performans mühendisliğinde bir olgunlaşmayı temsil eder. Artık hızlı sayfalar oluşturmak yeterli değil; tepki veren sayfalar oluşturmamız gerekiyor. Etkileşim gecikmesinin mekaniklerini anlamak ve görev bölme, Web Workers ve paket optimizasyonu gibi teknikler kullanmak, geliştiricilerin kullanıcıları memnun eden ve arama motoru algoritmalarını tatmin eden sorunsuz deneyimler sunmasını sağlar. Web uygulamaları daha da karmaşık hale geldikçe, ana iş parçacığının proaktif yönetimi, ortalama ve olağanüstü web deneyimleri arasındaki temel ayırt edici unsur olarak kalmaya devam edecektir.