Üç canlı sitede CLS 0,001 — nasıl ölçtük.
Düzen kayması, kullanıcı okurken sayfanın altından kaymasıdır. Google 0,1’in altını «iyi» sayar; yönettiğimiz üç canlı sitenin üçü de 0,001 ölçüyor. Şans değil — rezervasyon disiplini.
Kaymanın üç klasik kaynağı var: boyutu bildirilmemiş görsel, geç gelen web fontu, sonradan enjekte edilen içerik. Üçünün de ilacı aynı: yer, içerik gelmeden ÖNCE ayrılır. Görsele width/height, fonta önyükleme ve ölçülü fallback, banda sabit yükseklik.
- fersantekstil.com → CLS 0,001 · LCP 0,59s
- karcem.com.tr → CLS 0,001 · LCP 0,55s
- mikroyazilimdestek → CLS 0,001 · LCP 0,46s
- # 21.08.2026 · soğuk yük · 1440×900
Sıfır neden «en yakın» — tam sıfır değil?
Chrome, kutusu sabit kalsa bile içeriği yeniden akan elemanları sayabilir. Bu sitenin hero’sunda değişken fontun genişlik ekseni açılırken satır içindeki nokta akar: kutu aynı, punto aynı, satır sayısı aynı — yine de 0,027 yazılır. Ölçtük, kaynağını tek tek döktük ve bilerek kabul ettik: jest, bütçenin içinde kaldığı sürece tasarımın parçası.
Yazı tipi takası: en sinsi kaynak
Listedeki «geç gelen web fontu» kalemi, bu sitede tam olarak nasıl göründüğünü göstermeye değer. Mobilde iki rota bütçeyi aşıyordu ve ilk teşhis yanlıştı: suç imza efektine atılmıştı. Ölçüm çürüttü. Kayma 2071 ms’de oluyordu; archivo-var.woff2 2046 ms’de bitiyor, tarayıcının loadingdone olayı 2073 ms’de düşüyordu. Yirmi beş milisaniyelik bu aralık tesadüf değil — kayma takas anıydı.
Sebep iki katmanlıydı. Bir: başlıklar değişken fontun genişlik eksenini kullanıyor, yedek yazı tipinde böyle bir eksen yok — metin yedekte dar duruyor. İki, ve asıl olan: kural ağırlığı font-variation-settings ile veriyordu ama CSS font-weight 400’de kalmıştı. Değişken fontta bu eksen font-weight’i ezdiği için Archivo doğru çiziliyor, yedek ise regular kalıyordu. Yedek hem dar hem ince; gerçek font gelince başlık genişleyip bir satır kazanıyordu.
- h1 yedekte → 149px
- h1 Archivo ile → 186px
- fark → +37px = tam bir satır
- # mobil 390 · 4G · 4x CPU kısıtı
Çözüm iki parçalı oldu. Önce ağırlık taşıyan altmış altı kurala aynı değerde font-weight yazıldı — değişken font için etkisiz, yedek için kalın. Sonra sitede gerçekten kullanılan on altı genişlik-ağırlık çifti için size-adjust’lı yedek aile tanımlandı; oranlar tahminle değil, tarayıcıda aynı dize ölçülerek bulundu. Sonuç: h1 yükseklik oynaması sıfır piksel, en kötü rotanın CLS’i 0,1288’den 0,0216’ya indi. İmza efektine hiç dokunulmadı.
Buradaki ders teknik değil, yöntemsel: ilk şüpheli en görünür olandır ve genellikle masumdur. Zaman damgalarını yan yana koymayan bir teşhis, doğru düzeltmeyi de bulamaz — seçilen çözüm uygulansaydı kaymayı çözmez, yalnız efekti mobilde öldürürdü.
Asıl tuzak yük anında değil
Kaydırma «yakın girdi» sayılmaz; scroll sırasındaki her kayma gerçek kullanıcı verisine tam yazılır. Sabitlenen bir bölüm akışa dönerken tek karede 0,64 üretebiliyordu — pin’i transform kanalına almak metrikten tamamen sildi. Transform’la taşınan hiçbir şey düzen kayması değildir.
Ölçüm tarafında da bir tuzak var: laboratuvar aracı sayfayı açıp beklerse yalnız yük anını görür. Gerçek kullanıcı kaydırır. Bu yüzden buradaki testler sayfayı programlı olarak baştan sona kaydırıyor ve kaymaları kaynağıyla birlikte kaydediyor — hangi elemanın hangi milisaniyede ne kadar oynadığı yazılı.
Yer, içerik gelmeden önce ayrılır; gerisi muhasebedir.