Web performansı artık sadece "olması güzel" bir özellik değil; kullanıcı sadakati, arama motoru sıralamaları ve genel uygulama başarısı için kritik bir faktördür. Çeşitli Çekirdek Web Vital'leri ve performans metrikleri arasında, hızlı bir kullanıcı deneyimi için temel engeller olarak iki kavram öne çıkar: İlk Bayt Zamanı (TTFB) ve ana iş parçacığı engellemesi. Bu rehberde, TTFB'yi azaltmak ve JavaScript ana iş parçacığını duyarlı etkileşimler için açık tutmak için pratik stratejileri keşfedeceğiz.
TTFB'yi Anlamak ve Azaltmak
TTFB, bir kullanıcının bir sayfa istekte bulunması ile tarayıcının sunucudan verinin ilk baytını aldığı an arasındaki süreyi ölçer. Bu metrik teknik olarak ağ gecikmesini ve sunucu işleme süresini kapsasa da, ön uç geliştiricileri sunucunun ne kadar hızlı yanıt verebileceği konusunda önemli bir kontrole sahiptir. Yüksek bir TTFB genellikle sunucunun herhangi bir yanıt göndermeden önce HTML'i render etmeye veya veri çekmeye çok fazla zaman harcadığını gösterir.
1. Kenar Önbelleğini ve CDN'leri Kullanın
TTFB'yi azaltmanın en etkili yolu, statik içeriği kullanıcılara coğrafi olarak daha yakın olan sunuculardan sunmaktır. Bir İçerik Dağıtım Ağı (CDN) kullanarak varlıklarınızı ve hatta statik HTML yanıtlarınızı kenar konumlarda önbelleğe alırsınız. Dinamik içerik için, kök sunucuyu tamamen atlayarak kullanıcılara daha yakın yerlerde hafif mantık yürütmek amacıyla kenar bilişim (Cloudflare Workers veya AWS Lambda@Edge gibi) kullanmayı düşünün.
2. Sunucu Tarafı Render'ı (SSR) Optimize Edin
Next.js, Nuxt veya Remix gibi bir çerçeve kullanıyorsanız, sunucunuzun ilk render sırasında verimsiz veritabanı sorguları veya karmaşık sunucu tarafı mantığı nedeniyle darboğaza girmesini engelleyin. Mümkün olduğunda, her istekte bunları hesaplamak yerine önceden render edilmiş HTML sayfaları sunmak için artımlı statik yeniden oluşturma (ISR) uygulayın.
Ana İş Parçacığı Çalışmasını Minimize Etme
HTML alındıktan sonra, tarayıcının ana iş parçacığı DOM'u ayrıştırmak, JavaScript'i çalıştırmak ve düzeni hesaplamak için devreye girer. Bu iş parçacığı ağır hesaplama görevleri tarafından engellenirse, uygulama yavaş hissedilir ve bu da Zayıf Etkileşimden Sonraki Boyama (INP) ve İlk Girdi Gecikmesi (FID) puanlarına yol açar.
1. Uzun Görevleri Parçalayın
JavaScript ana ortamda tek iş parçacıklıdır. Çalıştırılması 50 ms'den fazla süren bir komut dosyası olarak tanımlanan uzun süren bir görev, kullanıcı arayüzünü dondurabilir. Bunu önlemek için, büyük hesaplamaları setTimeout, requestIdleCallback kullanarak veya ağır işleri Web Workers'a devrederek daha küçük parçalara bölebilirsiniz.
İşlem öğeleri arasında ana iş parçacığına kontrolü bırakmak için setTimeout kullanımı aşağıdaki gibidir:
function processLargeDataset(data) {
let index = 0;
const batchSize = 50; // Her taramada 50 öğe işle
function processBatch() {
const end = Math.min(index + batchSize, data.length);
for (; index < end; index++) {
// Hesaplamayı burada gerçekleştir
console.log('İşleniyor:', data[index]);
}
if (index < data.length) {
// Sonraki toplu işlem öncesi ana iş parçacığına devret
setTimeout(processBatch, 0);
}
}
processBatch();
}
2. Kritik Olmayan JavaScript'i Erteleyin ve Geciktirin
Tüm JavaScript hemen gerekli değildir. HTML ayrışmasını engellemeyen ancak DOM oluşturulduktan sonra çalışması gereken komut dosyaları için defer özniteliğini kullanın. Analitik veya diğer gereksiz üçüncü taraf komut dosyaları için async kullanın veya ilk sayfa yüklemesinden sonra dinamik olarak yükleyin.
<!-- HTML ayrışmasından sonra yüklenir, sırayı korur -->
<script src="app.js" defer></script>
<!-- Asenkron yüklenir, sıralı olmayabilir -->
<script src="analytics.js" async></script>
3. CPU Yoğun Görevler için Web Workers Kullanın
Görüntü işleme, karmaşık veri ayrıştırma veya kriptografik hesaplamalar gibi görevler için işi bir Web Worker'a devredin. Bu, ana iş parçacığının tıklamalar ve kaydırma gibi kullanıcı girdilerine duyarlı kalmasını sağlar.
// main.js
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(e) {
console.log('Sonuç alındı:', e.data);
};
// worker.js
self.onmessage = function(e) {
const result = heavyCalculation(e.data);
self.postMessage(result);
};
Sonuç
TTFB ve ana iş parçacığı çalışmasını optimize etmek; sunucu yapılandırması, ağ stratejileri ve istemci tarafı JavaScript mimarısını kapsayan bütünsel bir yaklaşım gerektirir. Önbellekleme stratejileri uygulamak, uzun görevleri parçalamak ve ağır hesaplamaları devretmek, web uygulamalarınızın algılanan performansını önemli ölçüde iyileştirebilirsiniz. Performansın sürekli bir süreç olduğunu unutmayın; uygulamanız büyüdükçe yeni darboğazları belirlemek için Lighthouse veya Chrome DevTools gibi araçları kullanarak metriklerinizi düzenli olarak denetleyin.