"Güzel Olsun, Hızlı Olmasa Da Olur" Yanılgısı
Web tasarım dünyasında yaygın bir inanış var: görsel açıdan zengin bir site, performans puanlarından ödün vermek zorundadır. Bu doğru değil. Ama yanlış kararları fark etmeden uygulamanın kolay olduğu da doğru.
Twenty9 olarak her projede bu denklemi çözmek zorunda kalıyoruz. Joey Organizasyon sitesinin Lighthouse puanı 96/100 — sitede GSAP animasyonları, özel tipografi ve interaktif cursor var.
LCP: En Büyük İçerik Elemanı
LCP (Largest Contentful Paint), kullanıcının sayfanın "yüklendiğini" hissettiği andır. Çoğunlukla büyük bir başlık, hero görseli veya banner bu elemandır.
Twenty9 için hero bölümü büyük bir serif başlıktan oluşuyor. Cormorant Garamond'u next/font/google ile yüklüyoruz — bu sayede font bloklama süresi ortadan kalkıyor. display: swap ile tarayıcı önce sistem fontuyla metni gösteriyor, gerçek font gelince değiştiriyor.
Sonuç: LCP 0.8 saniye. Hedef: 2.5 saniyenin altı.
CLS: Kümülatif Düzen Kayması
CLS (Cumulative Layout Shift), sayfadaki elemanların yüklenirken yerinden oynamasıdır. Animasyonlar bu konuda tehlikeli olabilir.
Framer Motion'da bir bileşen initial={{ opacity: 0, y: 40 }} ile başlayıp animate={{ opacity: 1, y: 0 }} ile bitiyor. Eğer bu bileşen sayfa yüklendikten sonra fiziksel alan kaplayıp diğer elemanları aşağı itiyorsa CLS değeri yükselir.
Çözümümüz: animasyonlu bileşenlere min-height vermek ya da yalnızca opacity animasyonu uygulamak. Böylece layout değişmiyor, sadece görünürlük değişiyor.
INP: Etkileşime Yanıt Verme
INP (Interaction to Next Paint), kullanıcı bir butona tıkladığında sayfanın ne kadar hızlı tepki verdiğini ölçer.
Özellikle custom cursor implementasyonlarında dikkatli olmak gerekiyor. Mousemove event listener'ı her pixel harekette tetikleniyor. Throttle etmezseniz main thread'i meşgul edersiniz.
Çözüm: requestAnimationFrame ile cursor pozisyonunu senkronize etmek. Böylece 60fps garantili, ana iş parçacığı temiz kalıyor.
Öğrendiklerimiz
Güzel bir site yaparken performansı düşünmek, sonradan optimize etmekten çok daha kolay. Bir animasyon eklemeden önce "bu layout shift yaratır mı?" sorusunu sormak, saatlerce debug sürecinden kurtarıyor.
Core Web Vitals bir SEO metriği olmaktan öte — kullanıcının sitenizi hissetme biçiminin sayısal göstergesidir.