Animasyon Eklerken Hız Genelde Neden Düşer
Bir siteye "scroll ile beliren kutular" gibi bir efekt eklenecekse akla ilk gelen genelde React tabanlı bir animasyon kütüphanesi oluyor. Bu kütüphaneler kendi başına kötü değil, ama indirilmesi ve çalıştırılması gereken ek JavaScript anlamına geliyor. Sayfa daha geç etkileşime hazır hale geliyor, bazen de animasyon elemanları yüklenirken sayfanın kaymasına (layout shift) yol açıyor.
Bizim ihtiyacımız bu kadar ağır bir çözüm gerektirmiyordu — birkaç elemanın scroll ile görünür hale gelmesi ve header'ın kaydırmaya göre hafif değişmesi yeterliydi.
Biz Ne Ekledik
- Yeni kütüphane veya bağımlılık yok — dosya sayısı ve HTTP istekleri aynı kaldı
global.css'e yaklaşık 20 satır CSSLayout.astro'ya yaklaşık 20 satırlık inline bir script — ayrı bir dosya değil, ekstra network isteği yok- Header'daki kaydırma algılama kodu
{ passive: true }ile eklendi, kaydırmayı bloklamıyor
Neden Transform ve Opacity
Animasyonlar sadece opacity ve transform
değiştiriyor. Bu iki özellik, tarayıcıda sayfanın yeniden
hesaplanmasını (layout/reflow) tetiklemeden, doğrudan GPU'da
(compositor thread üzerinde) işlenebiliyor. Bunun pratik sonucu:
animasyon çalışırken sayfa kaymıyor, yani CLS puanı bozulmuyor.
IntersectionObserver, Scroll Event Değil
Bir elemanın ekranda görünüp görünmediğini anlamanın eski yolu, scroll event'ine bir fonksiyon bağlayıp her kaydırmada elemanın konumunu hesaplamaktı. Bu, saniyede onlarca kez çalışan, ana thread'i meşgul eden bir yaklaşım.
IntersectionObserver bunun yerine tarayıcıya "bu eleman
görünür olduğunda bana haber ver" diyor; hesaplama tarayıcı tarafından,
ana thread'i bloklamadan yapılıyor. Modern tarayıcıların önerdiği
yöntem de bu.
Sıfır Değil Ama Önemsiz Olan Tek Nokta
Hero bölümündeki arka plan parıltısı sayfa açık kaldığı sürece sonsuz döngüde dönüyor. Bu tam anlamıyla "maliyetsiz" değil, ama yine transform/opacity kullandığı için tarayıcı bunu ucuza halledebiliyor. Üstelik sekme arka plana alındığında veya eleman ekran dışına çıktığında tarayıcılar bu tür animasyonları zaten kendiliğinden kısıyor.
Bu Müşterilerimiz İçin Ne Anlama Geliyor
Burada anlattığımız yaklaşımı kendi sitemizde kullandık, ama web tasarımı hizmetimizde müşteri sitelerinde de aynı prensiple çalışıyoruz: görsel hareket Core Web Vitals'tan ödün vererek değil, doğru API'yi seçerek elde ediliyor. Yurt dışındaki ajans partnerlerimiz için de teslim ettiğimiz işlerde bu standardı koruyoruz.
Sıkça Sorulan Sorular
Scroll animasyonu eklemek SEO’yu olumsuz etkiler mi?
Doğru yapılırsa hayır. Google, Core Web Vitals’ı (LCP, CLS, INP) sıralama sinyali olarak kullanıyor; animasyon bu metrikleri bozmadığı sürece SEO’ya zarar vermez. Sorun animasyonun kendisinde değil, çoğunlukla onu getirmek için eklenen ağır kütüphanelerde çıkar.
React veya Framer Motion gibi bir kütüphane neden kullanmadınız?
Bu kadar basit bir "görününce belir" efekti için bir kütüphane kurmak, sayfaya indirilip çalıştırılması gereken ekstra JavaScript eklemek demek. Bizim ihtiyacımız birkaç satır CSS ve native bir tarayıcı API’si ile zaten karşılanıyordu.
IntersectionObserver nedir, neden scroll event yerine bunu kullandınız?
IntersectionObserver, bir elemanın ne zaman ekranda göründüğünü tarayıcıya soran bir API. Scroll event dinleyicisi her piksel kaydırmada çalışıp hesap yapar; IntersectionObserver sadece gerçekten gerektiğinde tetiklenir, bu yüzden çok daha ucuzdur.
Hero’daki sürekli dönen arka plan animasyonu performansı etkiler mi?
Ölçülebilir düzeyde etkilemiyor çünkü yine transform/opacity kullanıyor ve tarayıcılar sekme arka plandayken veya eleman görünmezken bu tür animasyonları zaten otomatik olarak kısıyor.