Faz 9: Analitik ve Performans — GA4, CWV ve Optimizasyon

Neden Önemli?

Peter Drucker'ın ünlü sözü dijital dünyada da geçerlidir: "Ölçemediğinizi yönetemezsiniz." Web sitenizin analitik altyapısı, tüm dijital stratejinin beynidir. Doğru veri toplamadan alınan her karar, tahminden ibarettir.

Google, Core Web Vitals'ı sıralama faktörü olarak kullanmaktadır. LCP'si 2.5 saniyenin üzerinde olan sayfalar, rakiplerine karşı sıralama dezavantajına düşer. Amazon'un araştırmasına göre sayfa yüklenme süresindeki her 100ms gecikme, satışları %1 azaltır.

GA4, Universal Analytics'ten tamamen farklı bir veri modeli kullanır. Event-based model, doğru yapılandırılmadığında anlamsız veri yığını oluşturur. Öte yandan, doğru kurulduğunda kullanıcı yolculuğunun her adımını kristal netliğinde görmenizi sağlar.

Kontrol Listesi

• GA4 custom events tanımlama: İş hedeflerine özel event'ler — newsletter aboneliği, form gönderimi, ürün detay görüntüleme, checkout adımları, video izleme tamamlama. Her event için anlamlı parametreler.
• Conversion funnel kurulumu: Kullanıcı yolculuğunun kritik adımlarını funnel olarak tanımlama — landing page → ürün sayfası → sepet → checkout → satın alma. Her adımdaki kayıp oranının izlenmesi.
• Custom dimensions ve metrics: Kullanıcı segmentasyonu için özel boyutlar (üyelik tipi, sektör, şehir) ve metrikler (lifetime value, engagement score) tanımlama.
• GA4 audiences: Yeniden pazarlama ve analiz için hedef kitle segmentleri — son 7 günde sepet terk edenler, 3+ sayfa görüntüleyenler, belirli ürün kategorisini inceleyenler.
• Core Web Vitals izleme: LCP < 2.5s, INP < 200ms, CLS < 0.1 hedefleri. Hem lab (Lighthouse, WebPageTest) hem saha (CrUX, web-vitals kütüphanesi) verilerinin takibi.
• Görsel optimizasyonu: WebP/AVIF dönüşümü, responsive images (srcset + sizes), lazy loading (native veya Intersection Observer), blur placeholder, width/height belirtimi.
• Font optimizasyonu: Font subsetting (sadece kullanılan karakterler), font-display: swap, preload critical fonts, variable fonts kullanımı.
• JavaScript bundle optimizasyonu: Code splitting, tree shaking, dynamic import, third-party script lazy loading, bundle analyzer ile gereksiz dependency tespiti.
• Caching stratejisi: Browser cache (Cache-Control headers), CDN cache, service worker cache, stale-while-revalidate pattern — her kaynak türü için uygun caching politikası.
• Performance budget: Toplam sayfa boyutu (< 1.5MB), JavaScript boyutu (< 300KB), LCP target, Time to Interactive target — her metrik için bütçe belirleme ve CI'da kontrol.

Teknik Gereksinimler

Web Vitals kütüphanesi ile CWV izleme:

import { onLCP, onINP, onCLS } from 'web-vitals'; function sendToAnalytics(metric: { name: string; value: number; id: string }) { // GA4'e gönder gtag('event', metric.name, { value: Math.round(metric.name === 'CLS' ? metric.value * 1000 : metric.value), event_category: 'Web Vitals', event_label: metric.id, non_interaction: true, }); } onLCP(sendToAnalytics); onINP(sendToAnalytics); onCLS(sendToAnalytics);

Next.js Image optimizasyonu:

import Image from 'next/image'; <Image src="/hero-banner.jpg" alt="Ana sayfa banner görseli" width={1200} height={630} priority // LCP görseli için placeholder="blur" blurDataURL="data:image/jpeg;base64,..." sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 1200px" />

Performance budget (Lighthouse CI):

// lighthouserc.json { "ci": { "assert": { "assertions": { "categories:performance": ["error", { "minScore": 0.9 }], "first-contentful-paint": ["warn", { "maxNumericValue": 1800 }], "largest-contentful-paint": ["error", { "maxNumericValue": 2500 }], "cumulative-layout-shift": ["error", { "maxNumericValue": 0.1 }], "total-byte-weight": ["warn", { "maxNumericValue": 1500000 }] } } } }

Sık Yapılan Hatalar

1. GA4 enhanced measurement'a güvenmek: Otomatik event tracking çoğu durumda yetersizdir — scroll depth sadece %90'da tetiklenir, outbound click parametreleri eksik olabilir. Custom event'lerle zenginleştirin.
2. Lab ve saha verilerini karıştırmak: Lighthouse 100 puanı, gerçek kullanıcıların deneyimini garanti etmez. CrUX verileri gerçeği yansıtır — her ikisini de izleyin.
3. Lazy loading'i LCP görseline uygulamak: Above-the-fold görsellere lazy loading eklemek LCP'yi kötüleştirir. priority attribute kullanın.
4. Third-party script'leri kontrolsüz yüklemek: Chat widget, analytics, remarketing pikselleri — her biri sayfa performansını etkiler. Toplam etkiyi ölçün ve gereksiz olanları kaldırın.
5. CLS sorunlarını göz ardı etmek: Geç yüklenen reklam alanları, font-display swap ile font değişimi, dinamik içerik eklenmesi — tümü layout shift yaratır ve kullanıcı deneyimini bozar.

Profesyonel İpuçları

• GA4 Explorations'ı (keşif raporları) kullanarak funnel analizi, path exploration ve segment overlap raporları oluşturun — standart raporların ötesine geçin.
• Real User Monitoring (RUM) araçları ile gerçek kullanıcı deneyimini izleyin — SpeedCurve, Sentry Performance veya web-vitals kütüphanesi ile her sayfa yüklemesinin CWV metriklerini toplayın.
• Performance budgets'ı CI/CD pipeline'ına entegre edin — Lighthouse CI ile her PR'da performans regresyonu otomatik tespit edilsin.
• CDN (Cloudflare, Vercel Edge) kullanarak statik asset'leri kullanıcıya en yakın sunucudan serve edin — TTFB'yi %50-70 azaltabilirsiniz.
• Ayda bir "performance sprint" yapın — biriken performans borçlarını temizleyin, bundle boyutunu analiz edin ve eski dependency'leri güncelleyin.