Merhaba arkadaşlar, bugün başımı çok ağrıtan bir konudan bahsedeceğim. Projelerimize Google Analytics, Facebook Pixel, reklam ağları gibi üçüncü taraf script'leri ekliyoruz ama bir süre sonra sayfa hızı metriklerimiz alarm vermeye başlıyor. Lighthouse raporunda kocaman kırmızı çubuklar görmek beni deli ediyordu. Bu script'lerin performansı nasıl düşürdüğünü ve benim uyguladığım lazy load stratejilerini anlatacağım.
Sorun Nerede Başlıyor?
Bu script'ler genelde blocking olarak yükleniyor. Yani tarayıcı, bu dosyaları indirip çalıştırmadan sayfanın geri kalanını işlemeye devam etmiyor. Ayrıca, bu script'ler genelde başka domain'lerden çağrıldığı için DNS çözümlemesi, TCP bağlantısı derken ciddi bir gecikme yaratıyor. En kötüsü de, kullanıcı sayfayı sadece 2 saniye görüp çıksa bile, arka planda analytics verisi göndermeye çalışan script'lerin çalışmaya devam etmesi.
Çözüm: Lazy Loading ve Doğru Zamanlama
Ana fikir şu: Kullanıcı etkileşime geçmeden veya sayfayı kaydırmadan, bu script'lere ihtiyacımız yok. Onları sayfa tamamen yüklendikten sonra veya belirli bir kullanıcı eylemi sonrasında yükleyebiliriz. İşte benim kullandığım en temiz çözüm.
İlk olarak, bu script'leri async veya defer attribute'ları ile yüklemek bile büyük bir fark yaratır. Ama ben daha agresif bir yöntem seviyorum: Dinamik olarak script elementi oluşturup DOM'a eklemek.
Bu fonksiyon ile script'i istediğim zaman çağırabiliyorum. Örneğin, kullanıcı bir butona tıkladığında veya sayfa kaydırma olayında.
Analytics için Stratejik Yükleme
Analytics script'lerini sayfa yüklendikten 3-5 saniye sonra yüklemek çok mantıklı. "Bounce rate"i (hemen çıkma oranı) doğru ölçmek için de kullanıcının sayfada en azından birkaç saniye kalmış olması gerekli. Aşağıdaki kod, sayfa yüklendikten belirli bir süre sonra veya kullanıcı kaydırmaya başladığında script'i yükler.
Sonuçlar ve Dikkat Edilmesi Gerekenler
Bu yöntemleri uyguladıktan sonra Largest Contentful Paint (LCP) ve Total Blocking Time (TBT) metriklerimde ciddi iyileşmeler gördüm. Ancak dikkat etmeniz gereken bir nokta var: Eğer script'in hemen çalışması kritikse (örneğin, bir A/B testi tool'u sayfanın render'ını değiştirecekse) bu yöntem uygun olmayabilir. Her zaman iş gereksinimlerinizi ve kullanıcı deneyimini ön planda tutun.
Siz projelerinizde third-party script'leri nasıl yönetiyorsunuz? Hiç bu tür bir lazy loading stratejisi denediniz mi? Ya da farklı, daha efektif bir yönteminiz var mı? Yorumlarda paylaşalım, hep birlikte öğrenelim.
Sorun Nerede Başlıyor?Bu script'ler genelde blocking olarak yükleniyor. Yani tarayıcı, bu dosyaları indirip çalıştırmadan sayfanın geri kalanını işlemeye devam etmiyor. Ayrıca, bu script'ler genelde başka domain'lerden çağrıldığı için DNS çözümlemesi, TCP bağlantısı derken ciddi bir gecikme yaratıyor. En kötüsü de, kullanıcı sayfayı sadece 2 saniye görüp çıksa bile, arka planda analytics verisi göndermeye çalışan script'lerin çalışmaya devam etmesi.
Çözüm: Lazy Loading ve Doğru ZamanlamaAna fikir şu: Kullanıcı etkileşime geçmeden veya sayfayı kaydırmadan, bu script'lere ihtiyacımız yok. Onları sayfa tamamen yüklendikten sonra veya belirli bir kullanıcı eylemi sonrasında yükleyebiliriz. İşte benim kullandığım en temiz çözüm.
İlk olarak, bu script'leri async veya defer attribute'ları ile yüklemek bile büyük bir fark yaratır. Ama ben daha agresif bir yöntem seviyorum: Dinamik olarak script elementi oluşturup DOM'a eklemek.
JavaScript:
function loadThirdPartyScript(src) {
return new Promise((resolve, reject) => {
const script = document.createElement('script');
script.src = src;
script.async = true;
script.onload = () => resolve();
script.onerror = () => reject(new Error(`Script load failed for ${src}`));
document.body.appendChild(script);
});
}Bu fonksiyon ile script'i istediğim zaman çağırabiliyorum. Örneğin, kullanıcı bir butona tıkladığında veya sayfa kaydırma olayında.
Analytics için Stratejik YüklemeAnalytics script'lerini sayfa yüklendikten 3-5 saniye sonra yüklemek çok mantıklı. "Bounce rate"i (hemen çıkma oranı) doğru ölçmek için de kullanıcının sayfada en azından birkaç saniye kalmış olması gerekli. Aşağıdaki kod, sayfa yüklendikten belirli bir süre sonra veya kullanıcı kaydırmaya başladığında script'i yükler.
JavaScript:
// Sayfa yüklendikten 4 saniye sonra veya kullanıcı kaydırmaya başlarsa yükle
let scriptLoaded = false;
function loadAnalyticsLazily() {
if (scriptLoaded) return;
loadThirdPartyScript('https://www.google-analytics.com/analytics.js')
.then(() => {
console.log('Analytics yüklendi.');
scriptLoaded = true;
// Burada gerekirse GA init kodunuzu çalıştırabilirsiniz.
})
.catch(err => console.error(err));
}
// Seçenek 1: Zamanlayıcı ile
setTimeout(loadAnalyticsLazily, 4000);
// Seçenek 2: Kaydırma olayı ile
window.addEventListener('scroll', loadAnalyticsLazily, { once: true, passive: true });Bu yöntemleri uyguladıktan sonra Largest Contentful Paint (LCP) ve Total Blocking Time (TBT) metriklerimde ciddi iyileşmeler gördüm. Ancak dikkat etmeniz gereken bir nokta var: Eğer script'in hemen çalışması kritikse (örneğin, bir A/B testi tool'u sayfanın render'ını değiştirecekse) bu yöntem uygun olmayabilir. Her zaman iş gereksinimlerinizi ve kullanıcı deneyimini ön planda tutun.
Siz projelerinizde third-party script'leri nasıl yönetiyorsunuz? Hiç bu tür bir lazy loading stratejisi denediniz mi? Ya da farklı, daha efektif bir yönteminiz var mı? Yorumlarda paylaşalım, hep birlikte öğrenelim.