3D Web Performansı Nasıl Optimize Edilir: Three.js, R3F ve Tembel Yüklenen Hero

2run.be'nin 3D ana sayfası, React Three Fiber ile Three.js üzerine inşa edilmiştir. Sayfanın ilk sürümü başlangıç paketine 600KB ekledi ve Lighthouse Mobil Performansını 60'ın altına itti. Mevcut sürüm, 3D sahneyi yalnızca kullanıcı yakınına kaydırdıktan sonra gönderir ve kritik yolda ilk sürümün onda birini kaplar. İşte oraya nasıl ulaştığımız.

3D web sahnesinde ne var

Tipik bir R3F sahne grafiği şunları çeker:

• Three.js'in kendisi (~150KB sıkıştırılmış çekirdek, denetimler, yükleyiciler, işlem sonrası ile daha fazla).
• React Three Fiber (~30KB) ve Drei (kullanılan yardımcılara bağlı olarak ~50KB+).
• Gerçekten kullandığınız geometri ve malzeme yükleyicileri.
• Özel yazarsanız gölgelendirici programları.

Önemsiz olmayan bir sahne için muhafazakâr bir temel 250-350KB sıkıştırılmıştır. Fizik, işlem sonrası ve özel gölgelendiricilerle daha ağır bir sahne 600KB'ı aşabilir. Bu sayı performans için tüm hikaye: sayfanın geri kalanıyla kritik yol bütçesi için yarışır.

İki yaklaşım

Yaklaşım A: kritik yolda gönder

3D sahnenin ilk boyanın bir parçası olmasına karar verirsiniz. Tüm sahne, geometri yükleyicileri ve denetimler dahil, başlangıç paketine yerleşir. Kullanıcı, HTML ulaşır ulaşmaz 3D sahneyi görür. İlk boya hikayesi 3D hikayesidir.

Bu şu durumlarda çalışır:

• Sayfanın geri kalanı gerçekten minimal ise (bir portfolyo hero'su, bir açılış sayfası).
• 3D sahne değer önerisidir — sahneyi satmak ürünü satmaktır.
• Hedef pazardaki mobil kullanıcılar çoğu zaman Wi-Fi üzerindeyse.

Şu durumlarda çalışmaz:

• 3D sahne dekoratif olduğunda, işlevsel değil.
• Sayfa sahnenin dışında daha fazla içeriğe (metin, CTA'lar, bir form) sahip olduğunda.
• Mobil LCP, Temel Web Verileri taahhüdünüzün bir parçası olduğunda.

Yaklaşım B: ilk etkileşimden sonra tembel yükle

3D sahneyi ssr: false ile bir next/dynamic içe aktarımına erteler ve yüklemeyi yalnızca kullanıcı hero'ya yaklaştığında veya küçük bir gecikmeden sonra tetiklersiniz. Başlangıç paketi 3D yükünü hiç taşımaz. Sahne, kullanıcı onu görmek üzereyken görünür.

Bu şu durumlarda çalışır:

• İlk katmanın üstündeki hero içeriği kendi başına durabilir (bir görüntü, bir gradyan, tipografik bir ifade).
• İlk boya hikayesi marka sözü, 3D sahne değil.
• Yüklemeyi tetikleyecek bir IntersectionObserver veya kaydırma dinleyiciniz var.

Bu, 2Run ana sayfası için konduğumuz yaklaşımdır. Ödün:

• Artı: Başlangıç paketi 600KB düşer. Lighthouse Mobil Performansı 60'ın altından 90'ın üzerine sıçrar.
• Eksi: Kullanıcı, sahne doldurmadan önce ~0.5s boyunca bir yer tutucu görür. Tetik bölgesinin iyi yerleştirilmesiyle, bu hissiyat sahnenin "yükselmesi" gibi olur, "fırlaması" gibi değil.

Uygulama taslağı

Özüne indirgenmiş kalıp:

• Hedef ref görünüm alanında olduğunda boolean döndüren bir useInView kancası.
• Ağır sahne bileşeni için ssr: false ve hafif yükleme iskeleti ile bir next/dynamic içe aktarımı.
• Hero bölümü tipografiyi ve CTA'yı istekli olarak oluşturur, ardından inView true olduğunda sahneyi koşullu olarak bağlar.

İnce bir püf noktası: sahne bileşeni ayrıca azaltılmış hareket geri dönüşünü kabul etmelidir. İşletim sisteminde azaltılmış hareket isteyen kullanıcılar, 3D sahne olmadan tipografi hero'sunu alır ve Lighthouse Performansı tek önemli metrik değildir.

Mobil ve alt uç katmanı

Mobil 3D hakkındaki dürüst gerçek: 30°C pil daralması olan orta seviye bir Android telefon, aynı sahne karmaşıklığında bir masaüstü tarayıcıyla yine de eşleşemez. İki yol:

• Algıla ve düşür. Bir gl kapasite kontrolü (renderer.getContext() ve küçük bir kıyaslama) kullanın ve daha zayıf cihazlarda daha düşük poli bir sahne sunun. En iyi UX, mühendislik süresine mal olur.
• Koşulsuz oluştur ve maliyeti kabul et. Şirket tarafından yönetilen cihazlardaki B2B alıcıları için iyi. Tüketici kitleleri için iyi değil.

İlk yolu seçtik. Algılama mantığı oturum başına bir kez çalışır ve sonuç sessionStorage'da önbelleğe alınır. Geri dönüş sahnesi daha düşük poli geometrisi kullanır ve işlem sonrası adımını bırakır.

Bu hikayede olmayan şeyler

• 3D sahnelerin sunucu tarafı oluşturulması. Three.js için SSR yoktur — tuvale bir DOM bağlamı gerekir. Bir 3D sahne için SSR kuklaları çoğunlukla dekoratiftir ve sınırlı kazanım için SSR karmaşıklığı ekler.

• GPU gölgelendirici ön derlemesi. Gerçek kazanımlar, ancak özel bir işlem sonrası katmanı göndermediğiniz sürece, tarayıcı JIT'i yeterince iyidir.

• LCP'nin kendisinde 3D. 3D'yi LCP öğesi olarak hedeflemek, bir 3D portfolyo için hızlı bir ilk boyama ve içerik ağırlıklı bir sayfa için yavaş bir LCP yoludur. Hangi sıfatın doğru olmasını istediğinizi seçin.

Çıkarılacak ders

3D web sahnelerini diğer her ağır özellik gibi ele alın: paketi profilleyin, yapabildiğinizi erteleyin, doğru cihazda doğru katmanı oluşturun ve ödünü açıkça sahiplenin. Temel Web Verilerinde başarısız olan bir 3D sahne yaratıcı bir zafer değildir — sıralanmayan bir lansman sitesidir.