Merhaba arkadaşlar, bugün hepimizin canını sıkan bir konudan bahsedeceğim. Google Analytics gibi üçüncü taraf script'leri, sitenin hızını ve Core Web Vitals skorlarını ciddi anlamda düşürebiliyor. Lighthouse raporunda "Reduce unused JavaScript" ve "Third-party code" uyarılarını ilk gördüğümde, "Bu script olmadan olmaz ki!" diye düşünmüştüm. Ama işin aslı öyle değilmiş. İşte benim sayfa hızını koruyarak bu script'leri yüklemek için kullandığım en temiz çözüm.
Sorun Nerede?
Sorun şu: Bu script'ler genellikle `<head>` etiketine veya `<body>`'nin en üstüne ekleniyor. Sayfa yüklenirken, tarayıcı bu script'i indirip çalıştırmadan diğer işlemlere (örneğin, kendi CSS/JS'imizi yüklemeye) geçmiyor. Bu da "First Contentful Paint" (FCP) ve "Largest Contentful Paint" (LCP) gibi kritik metrikleri olumsuz etkiliyor. Kullanıcı, içeriği görmeden önce analitik script'inin yüklenmesini bekliyor. Bu kabul edilemez!
Çözüm: `async`, `defer` ve Lazy Loading
İlk adım, script'i `async` veya `defer` özellikleriyle işaretlemek. Bu, script'in indirme aşamasını engellemesiz (non-blocking) hale getirir. Ancak, Google Analytics'in standart snippet'i bu özellikleri içermiyor. Onu dönüştürmemiz gerekiyor.
Ayrıca, daha da agresif bir yaklaşım istiyorsanız, script'i tamamen kullanıcı etkileşiminden (örneğin, bir tıklamadan) veya sayfa tamamen yüklendikten sonra çalıştırmaya geciktirebilirsiniz. Bu, "Load Time" üzerinde muazzam bir iyileşme sağlar.
Benim Uyguladığım Yöntem
Ben, script'i `async` olarak yükleyip, aynı zamanda sayfanın tam yüklenmesini bekledikten sonra tetiklenmesini sağlayan bir yöntem kullanıyorum. İşte adım adım kodum:
İlk olarak, standart GA snippet'ini `async` versiyona çeviriyoruz. Bu snippet'i `<head>` içine koyabilirsiniz, artık engellemeyecek.
Bu yöntemde, script dosyası (`gtag.js`) asenkron olarak hemen indirilmeye başlanır, ancak `gtag()` fonksiyonlarının çalıştırılması, `window`'un `'load'` event'ini bekleterek ertelenir. Yani, tüm kaynaklar (resimler, fontlar vs.) yüklenene kadar analitik verisi gönderimi başlamaz.
Ekstra Optimizasyon: Intersection Observer ile Görünürlük Kontrolü
Eğer daha da ileri gitmek isterseniz, script'i sadece kullanıcı sayfada biraz ilerlediğinde veya belirli bir etkileşimde (scroll, tıklama) yükleyebilirsiniz. Bu, en agresif yöntemdir ve ilk sayfa yüküne SIFIR ek yük getirir.
Aşağıdaki örnek, kullanıcı sayfayı %25 oranında aşağı kaydırdığında script'i yükler.
Bu yöntem biraz daha karmaşık ama özellikle yoğun script'li sayfalarda inanılmaz bir performans kazancı sağlıyor. Lighthouse skorunuzda gözle görülür bir artış oluyor.
Sonuç olarak, analitiği tamamen kaldırmak zorunda değiliz. Sadece onu "doğru zamanda" çağırarak, kullanıcı deneyimini önceliklendirebiliriz. Siz bu tarz üçüncü parti script'leri yüklemek için hangi yöntemleri kullanıyorsunuz? Hiç "async" veya "defer" kullanmadan önce sayfa hızınız ciddi etkilenmiş miydi? Yorumlarda deneyimlerinizi paylaşın!
Sorun Nerede?Sorun şu: Bu script'ler genellikle `<head>` etiketine veya `<body>`'nin en üstüne ekleniyor. Sayfa yüklenirken, tarayıcı bu script'i indirip çalıştırmadan diğer işlemlere (örneğin, kendi CSS/JS'imizi yüklemeye) geçmiyor. Bu da "First Contentful Paint" (FCP) ve "Largest Contentful Paint" (LCP) gibi kritik metrikleri olumsuz etkiliyor. Kullanıcı, içeriği görmeden önce analitik script'inin yüklenmesini bekliyor. Bu kabul edilemez!
Çözüm: `async`, `defer` ve Lazy Loadingİlk adım, script'i `async` veya `defer` özellikleriyle işaretlemek. Bu, script'in indirme aşamasını engellemesiz (non-blocking) hale getirir. Ancak, Google Analytics'in standart snippet'i bu özellikleri içermiyor. Onu dönüştürmemiz gerekiyor.
Ayrıca, daha da agresif bir yaklaşım istiyorsanız, script'i tamamen kullanıcı etkileşiminden (örneğin, bir tıklamadan) veya sayfa tamamen yüklendikten sonra çalıştırmaya geciktirebilirsiniz. Bu, "Load Time" üzerinde muazzam bir iyileşme sağlar.
Benim Uyguladığım YöntemBen, script'i `async` olarak yükleyip, aynı zamanda sayfanın tam yüklenmesini bekledikten sonra tetiklenmesini sağlayan bir yöntem kullanıyorum. İşte adım adım kodum:
İlk olarak, standart GA snippet'ini `async` versiyona çeviriyoruz. Bu snippet'i `<head>` içine koyabilirsiniz, artık engellemeyecek.
HTML:
<!-- Asenkron Google Analytics Snippet -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
// Ancak hemen tetikleme! Sayfa yüklendikten sonra tetikleyeceğiz.
window.addEventListener('load', function() {
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y', { 'anonymize_ip': true });
console.log('GA, sayfa yüklendikten sonra başlatıldı.');
});
</script>Bu yöntemde, script dosyası (`gtag.js`) asenkron olarak hemen indirilmeye başlanır, ancak `gtag()` fonksiyonlarının çalıştırılması, `window`'un `'load'` event'ini bekleterek ertelenir. Yani, tüm kaynaklar (resimler, fontlar vs.) yüklenene kadar analitik verisi gönderimi başlamaz.
Ekstra Optimizasyon: Intersection Observer ile Görünürlük KontrolüEğer daha da ileri gitmek isterseniz, script'i sadece kullanıcı sayfada biraz ilerlediğinde veya belirli bir etkileşimde (scroll, tıklama) yükleyebilirsiniz. Bu, en agresif yöntemdir ve ilk sayfa yüküne SIFIR ek yük getirir.
Aşağıdaki örnek, kullanıcı sayfayı %25 oranında aşağı kaydırdığında script'i yükler.
JavaScript:
// Lazy Load Google Analytics after 25% scroll
document.addEventListener('DOMContentLoaded', function() {
let gaLoaded = false;
const loadGA = () => {
if (gaLoaded) return;
gaLoaded = true;
// Script elementi oluştur ve ekle
const script = document.createElement('script');
script.async = true;
script.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXX-Y';
document.head.appendChild(script);
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-XXXXX-Y');
console.log('GA, scroll sonrası lazy load edildi.');
};
// Intersection Observer ile tetikleme
const observerTarget = document.createElement('div');
observerTarget.style.cssText = 'position: absolute; top: 25vh; width: 1px; height: 1px;';
document.body.appendChild(observerTarget);
const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
loadGA();
observer.disconnect();
}
}, { threshold: 0 });
observer.observe(observerTarget);
});Bu yöntem biraz daha karmaşık ama özellikle yoğun script'li sayfalarda inanılmaz bir performans kazancı sağlıyor. Lighthouse skorunuzda gözle görülür bir artış oluyor.
Sonuç olarak, analitiği tamamen kaldırmak zorunda değiliz. Sadece onu "doğru zamanda" çağırarak, kullanıcı deneyimini önceliklendirebiliriz. Siz bu tarz üçüncü parti script'leri yüklemek için hangi yöntemleri kullanıyorsunuz? Hiç "async" veya "defer" kullanmadan önce sayfa hızınız ciddi etkilenmiş miydi? Yorumlarda deneyimlerinizi paylaşın!