Hızlı yüklenen bir web oyunu yayınlayın (pratik kontrol listesi)

Oyuncular saniyeler içinde oynamaya başlayamazsa oyundan çıkar. Bu eğitim, neredeyse her web oyunu teknoloji yığınına (Canvas/WebGL/WebGPU, Pixi/Three/PlayCanvas, özel motor vb.) uygulayabileceğiniz pratik bir kontrol listesidir.

1) Önce bütçeleri belirleyin (aksi hâlde optimizasyon yapamazsınız)

Hedef cihazınıza uygun bütçeler seçin. “Anında oyna” deneyimi için iyi bir varsayılan:

• Gönderilen JS+CSS: gzip ile ~300–500 KB'ın altında (ne kadar küçükse o kadar iyi)
• İlk girdiden önce gereken kritik varlıklar: sıkıştırılmış olarak ~2–5 MB'ın altında
• İlk girdiye kadar geçen süre: orta sınıf mobil cihazlarda ~3–5 saniyenin altında

Bunları yazılı hâle getirin ve API sözleşmeleri gibi ele alın.

2) Doğru şeyleri ölçün

Chrome DevTools'ta:

• Bir oturumu kaydetmek ve uzun görevleri incelemek için Performance'ı kullanın.
• Şunları kontrol etmek için Network'ü kullanın:
  • aktarım boyutu ile açılmış boyut
  • önbelleğe alma üstbilgileri
  • varlıkların aşamalı olarak akışla mı geldiği, yoksa tek bir dev veri bloğu olarak mı ulaştığı

Oyun açısından şunları takip edin:

• “Oyuncu hareket edebiliyor mu?” süresi
• “İlk anlamlı kare” süresi
• “İlk girdi gecikmesi” (girdi → kare)

“İlk girdi gecikmesi” yaklaşımınız artık standart bir metrikle örtüşüyor: Interaction to Next Paint (INP), Mart 2024'te Core Web Vital olarak First Input Delay'in yerini aldı ve yalnızca ilk etkileşimi değil, tüm etkileşimlerde girdiden sonraki çizime kadar geçen sürenin tamamını ölçüyor. Zaten takip ettiğiniz tepki hızı değerleri için yararlı bir harici referans olan 75. yüzdelik dilimde 200 ms'nin altında INP'yi hedefleyin.

3) Sıkıştırabildiğiniz her şeyi sıkıştırın

Barındırma hizmetinizin şunları sunduğundan emin olun:

• Kullanılabilir olduğunda metin varlıkları (JS/CSS/HTML/WASM) için Brotli (br)
• Yedek seçenek olarak gzip

Barındırma hizmetiniz ve CDN'iniz destekliyorsa Zstandard (zstd) artık Content-Encoding için üçüncü bir seçenektir. Chrome ve Edge 123+, Firefox 126+ ve Safari 26.3+ sürümlerinde (kullanıcıların yaklaşık %80'inde) desteklenir ve daha düşük sunucu CPU maliyetiyle Brotli seviyesinde sıkıştırma oranlarına ulaşabilir. Bu da büyük WASM ve JSON yükleri için faydalıdır. Tarayıcılar Accept-Encoding: zstd desteğini yalnızca HTTPS üzerinden bildirir; bu nedenle diğer herkes için Brotli ve gzip'i yedek seçenekler olarak yapılandırılmış hâlde tutun.

WebAssembly derlemelerinde sıkıştırma, çoğu zaman “anında açılıyor” ile “hiç yüklenmiyor” arasındaki farktır.

4) Tüm dünyayı en başta indirmeyin

Oyununuzu şu bölümlere ayırın:

• Başlatma: minimum yükleyici + girdi + ilk sahne
• Çekirdek: ana oynanış sistemleri
• İsteğe bağlı: ek bölümler, kozmetik öğeler, yüksek çözünürlüklü dokular, bonus sesler vb.

“İsteğe bağlı” içeriği yalnızca şu durumlarda yükleyin:

• oyuncu zaten oynayabiliyorsa ve/veya
• bu içeriği istediğini biliyorsanız (ör. bir menüye/bölüme ulaştıysa)

5) Doğru varlık biçimlerini seçin

Çoğu web oyunu için:

• Görseller: Arayüzler/arka planlar için WebP'yi (veya daha yavaş kodlamayı tolere edebiliyorsanız AVIF'i) tercih edin.
• Ses: Genel kullanım için Ogg Vorbis'i tercih edin; Apple ekosistemleri için AAC'yi test edin.
• Video: Uyumluluk için MP4/H.264'ü, desteklendiğinde ve daha küçük olduğunda WebM'yi tercih edin.

Kod çözme maliyetini göz önünde bulundurun: “daha küçük indirme”, yine de “daha yavaş kod çözme” anlamına gelebilir.

6) İlk sahnenizi küçük ve deterministik tutun

İlk etkileşimli sahnenizde şunlardan kaçının:

• ani ve yoğun gölgelendirici derlemeleri
• çok büyük doku yüklemeleri
• ana iş parçacığını engelleyen prosedürel üretim
• megabaytlarca veri bloğunun senkron JSON ayrıştırması

Özellikle dokular için PNG veya JPEG yerine Basis Universal ile KTX2 süper sıkıştırmasını kullanın. Yüklemeden sonra GPU üzerinde sıkıştırılmış hâlde kalır (yükleme sırasında masaüstünde BC7'ye veya mobilde ASTC'ye dönüştürülür); böylece VRAM kullanımı 4 ila 8 kat azalır ve yüklemeler, tam boyutlu bir PNG'nin kodunu çözüp ham pikselleri GPU'ya aktarmaktan çok daha düşük maliyetli olur.

Ağır işlemler yapmanız gerekiyorsa bunları:

• karelere yayarak artımlı biçimde veya
• mümkün olduğunda bir Worker içinde gerçekleştirin.

7) Agresif ama doğru biçimde önbelleğe alın

İçerik adresli varlıklar için uzun süreli önbelleğe alma kullanın:

• Cache-Control: public, max-age=31536000, immutable

Güncellemeleri güvenle dağıtabilmek için HTML giriş noktalarının önbellek süresini kısa tutun.

8) “Hatanın” hızlı ve anlaşılır olmasını sağlayın

Bir sorun oluşursa şunları gösterin:

• açık bir hata mesajı
• yeniden deneme düğmesi
• sorunu bildirmek için bir bağlantı

Sessiz hatalar güveni yok eder.

9) Wasm iş parçacıkları kullanıyorsanız COOP/COEP'i anlayın

Derlemeniz SharedArrayBuffer'a bağlıysa (bazı Wasm iş parçacığı kurulumlarında yaygındır), büyük olasılıkla çapraz kaynak yalıtımı üstbilgilerine ihtiyacınız olacaktır:

• Cross-Origin-Opener-Policy: same-origin
• Cross-Origin-Embedder-Policy: require-corp

COEP üstbilgisi için iki seçeneğiniz vardır. require-corp katı seçenektir ancak kaynaklar arası her varlığın (CDN dokuları, üçüncü taraf betikleri) bir Cross-Origin-Resource-Policy üstbilgisi göndermesi gerekir; aksi takdirde varlık engellenir. Cross-Origin-Embedder-Policy: credentialless da SharedArrayBuffer ve çapraz kaynak yalıtımını etkinleştirir ancak kaynaklar arası varlıkların CORP ile açıkça izin vermesini zorunlu tutmak yerine bunları kimlik bilgileri olmadan yükler. Kontrolünüzde olmayan bir CDN'den varlık alıyorsanız credentialless genellikle daha az zahmetli seçenektir.

Üstbilgiler ve üçüncü taraf yerleştirmeleri sorunlara yol açabileceğinden gerçek barındırma ortamınızda erkenden test yapın.

10) SDK olmadan oynanabilir hâle getirin

Cinevva'nın içerik üreticisi iş akışını hedefliyorsanız şunları amaçlayın:

• güvenilir biçimde açılan tek bir URL
• demoyu başlatmak için zorunlu giriş olmaması
• öngörülebilir girdi kontrolleri

Böylece ek SDK'lar entegre etmeden dağıtıma hazır olursunuz.

İlgili içerikler:

• Oyun geliştiricileri için
• Yapay zekâyla üretilen içerik politikası
• Akışla varlık yükleme — büyük oyunlar için aşamalı yükleme kalıpları
• Oyunları önbelleğe almak için service worker'lar — sonraki ziyaretlerin anında açılması için varlıkları önbelleğe alın
• Web Oyunu Motorları Karşılaştırması — motorlar arasında derleme boyutları ve yükleme süreleri
• Oyununuzu itch.io'da Nasıl Yayınlarsınız? — tarayıcı oyunlarını itch.io yerleştirmeleri için optimize etme