Performans

Ne yüklenir

Dosya	gzip	Ne zaman
Çekirdek	44,6 KB	Her zaman: motor, 27 CSS efekti, navigasyon, otomatik oynatma, a11y, smart fit, component, data-*, JSON, stiller
Katmanlar	8,8 KB	Bir slaytta data-in varsa veya imageIn ayarlıysa
WebGL	7,9 KB	effect bir WebGL efektiyse ve cihaz kullanabiliyorsa
Overlay'ler	4,4 KB	overlay ayarlıysa
Parçacıklar	3,8 KB	particles ayarlıysa
Kaydırma derinliği / sürüşü	her biri 1,5 KB	scrollDepth / scrollDrive

Yayınlanan dosyalar obfuscate edilmiştir (isimler, metinler ve property adları kodlanır). Bu, çekirdeğe yaklaşık 16 KB ve kare başına 0,1 ms'den az maliyet ekler; API'de hiçbir şey değişmez.

Çalışırken

• Yalnızca compositor. Slaytlar transform, opacity, filter ve clip-path ile hareket eder. Kayarken hiçbir şey layout tetiklemez.
• requestAnimationFrame yalnızca bir şey hareket ederken çalışır. Boştaki bir slider'ın maliyeti sıfırdır.
• Ekran dışı = duraklatılmış. Otomatik oynatma, WebGL, parçacıklar, katman döngüleri ve arka plan videoları slider görünüm alanından çıkınca veya sekme gizlenince durur.
• Yeniden boyutlandırma başına tek ölçüm, ResizeObserver ve bir kare ile toplanır.
• Doku önbelleği (slider başına 8, en eski kullanılan atılır); WebGL bağlamı destroy() ile serbest bırakılır.

Core Web Vitals

• CLS: yükseklik slaytlar ilk kez çizilmeden önce hesaplanır. Ekranın üstündeki bir hero için ilk görsele width / height verin veya aspect ayarlayın; böylece alan görsel yüklenmeden ayrılır.
• LCP: ilk slaytın görselini hemen yükleyin (fetchpriority="high"); diğerleri için data-src kullanın.
• INP: giriş işleyicileri layout işi yapmaz; sürüklemeye ilk görsel tepki aynı karede gelir.

Kontrol listesi

• Görselleri gösterildikleri boyutta sunun: tam genişlik hero'lar için srcset + sizes="100vw".
• Sayfa başına bir WebGL slider tercih edin.
• lazy (varsayılan) ile preload: 1 kullanın.