3D Web Sitesi Hızlı Olur mu? Core Web Vitals ve WebGL Performans Rehberi

“3D site yavaş olur” cümlesi doğru değil; “kötü kurulmuş 3D site yavaş olur” doğru. Aradaki fark tamamen mühendislik kararlarında. Bu yazıda, animasyonlu ve 3D sitelerde Google’ın hız metriklerini nasıl koruduğumuzu adım adım anlatıyoruz.

Önce metrikler: Google tam olarak neyi ölçüyor?

Google’ın sıralama sinyali olarak kullandığı üç Core Web Vitals metriği var ve 3D bir site bunların üçünü de farklı şekilde tehdit eder:

• LCP (Largest Contentful Paint) — ekrandaki en büyük öğenin görünme süresi. 3D sahne ilk ekranda ve poster karesi yoksa, LCP sahnenin yüklenmesini bekler. Felaket senaryosu budur.
• INP (Interaction to Next Paint) — kullanıcı bir şeye dokunduğunda sayfanın cevap verme hızı. WebGL ana iş parçacığını meşgul ederse, menüye basan kullanıcı yanıt alamaz.
• CLS (Cumulative Layout Shift) — sayfadaki kaymalar. Sahne sonradan yüklenip yer kaplamaya başladığında altındaki içerik aşağı iter. Bu tamamen önlenebilir bir hatadır.

Kural 1 — Kritik yolda 3D olmaz

Sayfanın açılması için gereken kaynaklar zincirine “kritik yol” denir. 3D motoru bu zincirde yer almamalıdır. Uygulamada:

• 3D kütüphanesi sayfa ilk çizildikten sonra yüklenir, HTML içinde bloklayıcı bir script olarak durmaz.
• Sahne kodu ana paketten ayrılır ve ayrı bir parça olarak istenir. Böylece 3D’nin olmadığı sayfalar o yükü hiç taşımaz.
• Yazı tipleri ve kritik CSS öncelik alır; sahne sırada en sondadır.

Kural 2 — Poster kare, pazarlık konusu değil

Sahnenin duracağı kutu, sayfa ilk çizildiği anda doğru boyutta ve içinde statik bir görselle hazır olmalıdır. Bu tek karar üç sorunu birden çözer: LCP o statik görselle tamamlanır, CLS sıfırlanır çünkü kutu zaten yerindedir, ve JavaScript hiç çalışmasa bile ziyaretçi anlamlı bir görsel görür.

Görsel modern formatta ve doğru boyutta servis edilir; mobil ve masaüstü için ayrı sürümler kullanılır.

Kural 3 — Görüş alanına girmeden tek kare çizme

Sayfanın altındaki bir sahne, kullanıcı oraya kaydırana kadar çalışmamalıdır. Modern tarayıcı API’leri bunu doğrudan destekler: sahne görünürlük eşiğine girene kadar render döngüsü başlamaz, çıktığında durur. Sekme arka plana alındığında da çizim durdurulur.

Bu tek başına pil tüketimini ve ortalama CPU kullanımını dramatik biçimde düşürür; mobil cihazlarda ısınma ve kasma şikayetlerinin büyük kısmı buradan gelir.

Kural 4 — Model ve doku bütçesi

3D sitelerde ağırlığın çoğu kodda değil varlıklardadır. Tasarımcıdan gelen model olduğu gibi web’e konmaz. Uyguladığımız bütçe disiplini:

• Poligon azaltma. Ekranda görünmeyecek detay silinir; web için ayrı düşük poligonlu sürüm hazırlanır.
• Doku sıkıştırma. Dokular GPU’nun doğrudan okuyabildiği sıkıştırılmış formatlara çevrilir; bu hem indirme boyutunu hem de video belleği kullanımını düşürür.
• Doku boyutu sınırı. 4K doku neredeyse hiçbir web sahnesinde gerekmez. Ekranda kapladığı piksel alanına göre sınırlanır.
• Model formatı. Web için optimize edilmiş, sıkıştırma destekli formatlar kullanılır.
• Işık ve gölge ön hesaplama. Gerçek zamanlı gölge yerine önceden pişirilmiş ışık haritası, aynı görüntüyü çok daha ucuza verir.

Kural 5 — Cihaza göre kademe

Tek bir sahne herkese aynı şekilde servis edilmez. Cihazın ekran yoğunluğu, çekirdek sayısı ve bellek durumu okunur; buna göre kademe seçilir:

• Yüksek kademe: tam sahne, gölge ve yansımalar açık.
• Orta kademe: düşük çözünürlüklü doku, gölge kapalı, kare hızı sınırlı.
• Düşük kademe: sahne hiç başlatılmaz, poster kare kalır.

Son madde en önemlisi. Kasan bir 3D sahne, hiç olmayan 3D sahneden ticari olarak daha zararlıdır çünkü ziyaretçi siteyi “bozuk” olarak kaydeder.

Kural 6 — Ana iş parçacığını boş tut

INP metriği burada kazanılır ya da kaybedilir. Ağır hesaplamalar ana iş parçacığından çıkarılır, model çözme ve doku hazırlama arka planda yapılır, animasyon döngüsü tarayıcının kendi çizim ritmine bağlanır. Kaydırmaya bağlı animasyonlarda olay dinleyicileri pasif işaretlenir ve her karede düzen okuması yapılmaz.

Kural 7 — Metin asla canvas içinde kalmaz

Bu hem SEO hem erişilebilirlik kuralıdır. Canvas içine çizilen yazıyı ne Google okur ne ekran okuyucu. Sahnedeki her etiketin, başlığın, teknik değerin HTML karşılığı sayfada bulunur. 3D katman bir sunum katmanıdır; içeriğin kendisi değil.

Bu yaklaşımın detaylarını 3D animasyonlu kurumsal web sitesi rehberinde, teknoloji seçimini ise Three.js mi Spline mı yazısında anlattık.

Yayın öncesi kontrol listesi

• JavaScript kapalıyken sayfa okunabiliyor ve anlamlı mı?
• Poster kare var mı, kutu doğru boyutta mı, kayma oluyor mu?
• Sahne görüş alanına girmeden çiziyor mu? (Geliştirici araçlarında kare sayacıyla bakılır.)
• Orta seviye bir Android telefonda ilk ekran kaç saniyede geliyor?
• Toplam indirme boyutu ne kadar, bunun ne kadarı 3D varlıkları?
• Menüye, forma, butona dokunulduğunda yanıt gecikmesi var mı?
• Hareketi azalt tercihi açıkken sahne duruyor mu?
• Saha verisinde (gerçek kullanıcı ölçümü) LCP, INP ve CLS eşiklerin içinde mi?

Hız neden doğrudan ciroya bakar?

Hız iki kanaldan birden para kazandırır. Birincisi organik: sayfa hızı Google’ın sıralama sinyallerinden biridir ve SEO çalışmasının tavanını belirler. İkincisi reklam: Google Ads tarafında açılış sayfası deneyimi kalite puanını etkiler, kalite puanı tıklama maliyetini düşürür. Yavaş bir açılış sayfası, aynı bütçeyle daha az tıklama almanız demektir.

Yani 3D sitede performans bir estetik tercih değil, doğrudan bir maliyet kalemidir.

Sık sorulan sorular

3D sahne LCP’yi bozar mı?

Poster kare varsa bozmaz. LCP statik görselle tamamlanır, sahne sonradan devreye girer. Poster kare yoksa LCP sahnenin yüklenmesini bekler ve metrik ciddi biçimde kötüleşir.

Mobilde 3D kapatmak zorunda mıyız?

Hayır, kademelendirmek yeterli. Modern orta segment telefonlar optimize edilmiş bir sahneyi rahat çalıştırır. Yalnızca çok zayıf cihazlarda sahne devre dışı bırakılır.

Mevcut yavaş sitemize 3D eklenir mi?

Önce temel hız düzeltilmelidir. Zaten yavaş bir sitenin üzerine 3D eklemek sorunu ikiye katlar. Sıralama şu: teknik temizlik, hız, sonra 3D katman.

Kaç saniyede açılmalı?

Hedefimiz mobilde ilk anlamlı içeriğin iki buçuk saniyenin altında gelmesi. Sahne bunu beklemediği için toplam sahne yüklenmesi daha uzun sürebilir ve bu bir sorun değildir.

Hızı nasıl ölçüyorsunuz?

Laboratuvar testi tek başına yeterli değil; gerçek kullanıcı verisi esas alınır. Search Console’daki Önemli Web Verileri raporu ve saha ölçümleri birlikte takip edilir.