Performans
Lenis ve ScrollTrigger’ı kaldırdık: kaydırma artık CSS.
İki kaydırma kütüphanesi emekli oldu ve yerlerine üçüncüsü gelmedi; sahneler platformun kendi zaman çizgisine taşındı — kazanç da bedel de ölçüldü.
İstanbul — Bu sitede masaüstü kaydırmasını bir kütüphane yönetiyordu ve sahneleri ikinci bir kütüphane tetikliyordu. İkisi de gitti. Yerlerine üçüncü bir kütüphane gelmedi: kaydırma artık tarayıcının kendi zaman çizgisi, sahneler de o çizgide koşan CSS animasyonları. Bu yazı o geçişin ölçüsü — kazancı ve bedeliyle.
Güncelleme, 8 Ekim 2026: yumuşak kaydırma kütüphanesi bu sitede koşullu olarak geri döndü — yalnız fare ya da dokunmatik yüzeyle, tekerleği yumuşatmak için; hareketi azalt tercihinde, dokunmatik ekranda, zorunlu renklerde ve veri tasarrufunda inmez. Sahneler hâlâ CSS zaman çizgisinde koşuyor ve tetikleyici kütüphanesi dönmedi; bu yazıdaki ölçümler 2 Eylül tarihli.
Hipotez
Hipotez şuydu: bu sitedeki kaydırma sahnelerinin hepsi — tutuşlar, netleşme, daktilo, sayaçlar, vitrin paralaksı, okuma çizgisi — platformun kendi görünüm zaman çizgisiyle kurulabilir. JavaScript yalnız CSS’in yapamadığına kalır: tuval, veri, erişilebilirlik ve metin. Karşılığında iki kütüphanenin baytı ve her karede koşan bir senkron döngüsü gider.
Yöntem
Dört dilim, her biri kendi tam koşumuyla kapandı ve hiçbiri bir öncekinin kırmızısını taşımadı. Önce yumuşak kaydırma kütüphanesinin dört bağı teker teker devredildi: tetikleyici senkronu, çapa senkronu, sayfa içi süzülüş, kayan şeridin yön ve hızı. Sonra tek seferlik girişler kesişim gözlemcisine, ilk iki yüzey CSS zaman çizgisine geçti. Üçüncü dilim ana sayfanın ve hizmet sayfalarının sahnelerini taşıdı. Dördüncüsünde tetikleyici kütüphanesi silindi.
Tarih ve ortam
- tarih → 2026-09-02 · dört dilim · canlı doğrulama
- giden → yumuşak kaydırma + kaydırma tetikleyici
- kalan → animasyon çekirdeği · metin bölme · çizgi çizme
- yöntem → animation-timeline: view() · IntersectionObserver
Sonuç
Satıcı paketi sıkıştırılmış hâlde 51,1 kilobayttan 33,5 kilobayta indi; yalnız tetikleyici kütüphanesi 17,6 kilobayttı ve her sayfaya iniyordu. On iki sahnenin on ikisi CSS zaman çizgisine geçti. Pencereye bağlı kaydırma dinleyicisi sıfıra indi — kalan dördü kaynakta gerekçesiyle işaretli muafiyet. Canlıda en kötü gerçek LCP 592–640 milisaniyeden 440 milisaniyeye, engelleme süresi 0–10 milisaniyeye indi; lab düzen kayması sıfırda kaldı.
- satıcı paketi → 51,1 → 33,5 KB (gzip)
- CSS sahnesi → 12 / 12
- scroll dinleyicisi → 0 (4 gerekçeli muafiyet)
- gerçek LCP (en kötü) → 592–640 → 440 ms
Kaydırma bir olay değil, bir zaman çizgisi.
Platformun küçük yazısı
Geçiş bedava değildi; üç yerde ölçüm öğretti. Görünüm çizgisinin varsayılan kenar boşluğu kaydırma dolgusunu hesaba katıyor ve çizgi makalenin başında yüzde 4,5’te başlıyordu; sıfırlanınca eski JavaScript formülüyle fark yedi örnekleme noktasında sıfıra indi. «Üst kenar üstte, alt kenar üstte» aralığı için beklenen anahtar sözcük değil onun geçiş biçimi gerekiyordu: ekrandan uzun bir bölümde ilk seçim aralığı 304 piksel kaydırıyor ve uzunluğu öznenin değil ekranın boyu oluyordu. Kardeş sırasını okuyan bir sayaç ise özel özellik kayıtlı değilse alt elemanda yeniden çözülüyor ve üç satır da aynı değeri alıyordu.
Bedava gelen düzeltme
Kütüphane giderken bir kusuru da götürdü. Sayfa içi çapalar bazen hedefe inmiyordu; kökü, kütüphanenin kurulurken o anki kaydırmayı hedef sayması ve tarayıcının çapa kaydırmasını sonra uygulamasıydı — kendi döngüsü sayfayı geri çekiyordu. Kusur kapıyla ölçülmüştü: kütüphane kuruluyken yirmi denemenin biri bozuk, kurulmadığı iki kipte sıfır. Native kaydırmada tarayıcı çapaya kendi iniyor ve yarış ortadan kalkıyor.
Ders: ölçen araç da bir bağımlı
Doğrulama süiti yemyeşilken erişilebilirlik denetimi «ScrollTrigger is not defined» diyerek durdu. Araç sahne aralığını emekli kütüphaneden okuyordu ve süit onu göremez, çünkü denetim süitin dışında koşar. Bir kütüphane emekli olunca yalnız ürün taranmaz; ürünü ölçen aletler de taranır.
Sınırlar
Animasyon kütüphanesinin çekirdeği duruyor: bu sitenin imzası olan netleşme jesti ve onun ölçülü düzen kilitleri hâlâ JavaScript’te. Planın «otuz kilobaytın altı» hedefi bu yüzden tutmadı, 33,5’te durdu; bütçe tavanı gerilemeyi kilitliyor, hedefi değil. Zaman çizgisini desteklemeyen motorda sahneler son değerinde duruyor — kaybolan hareket, içerik değil.