Rilis game web yang dimuat dengan cepat (daftar periksa praktis)

Jika pemain tidak dapat mulai bermain dalam hitungan detik, mereka akan pergi. Tutorial ini adalah daftar periksa praktis yang dapat Anda terapkan pada hampir semua stack game web (Canvas/WebGL/WebGPU, Pixi/Three/PlayCanvas, engine khusus, dan sebagainya).

1) Tetapkan batas terlebih dahulu (atau Anda tidak dapat mengoptimalkan)

Pilih batas yang sesuai dengan perangkat target Anda. Patokan awal yang baik untuk pengalaman “langsung bermain”:

• JS+CSS yang dikirimkan: di bawah ~300–500 KB gzip (lebih kecil lebih baik)
• Aset penting sebelum input pertama: di bawah ~2–5 MB setelah dikompresi
• Waktu hingga input pertama: di bawah ~3–5 detik pada perangkat seluler kelas menengah

Catat batas-batas ini dan perlakukan seperti kontrak API.

2) Ukur hal yang tepat

Di Chrome DevTools:

• Gunakan Performance untuk merekam sesi dan memeriksa tugas yang berjalan lama.
• Gunakan Network untuk memeriksa:
  • ukuran transfer dibandingkan ukuran setelah didekode
  • header caching
  • apakah aset dialirkan secara progresif atau diterima sebagai satu blob raksasa

Dalam konteks game, pantau:

• Waktu hingga “Pemain dapat bergerak”
• Waktu hingga “Frame bermakna pertama”
• “Latensi input pertama” (input → frame)

Pemahaman Anda tentang “latensi input pertama” kini berkaitan dengan metrik standar: Interaction to Next Paint (INP) menggantikan First Input Delay sebagai Core Web Vital pada Maret 2024, dan mengukur keseluruhan waktu dari input hingga paint berikutnya di seluruh interaksi, bukan hanya interaksi pertama. Targetkan INP di bawah 200 md pada persentil ke-75, yang merupakan tolok ukur eksternal berguna untuk angka responsivitas yang sudah Anda pantau.

3) Kompres semua yang memungkinkan

Pastikan hosting Anda menyajikan:

• Brotli (br) untuk aset teks (JS/CSS/HTML/WASM) jika tersedia
• gzip sebagai cadangan

Jika host dan CDN Anda mendukungnya, Zstandard (zstd) kini menjadi opsi ketiga untuk Content-Encoding. Dukungan ini tersedia di Chrome dan Edge 123+, Firefox 126+, serta Safari 26.3+ (sekitar 80% pengguna), dan dapat mencapai rasio sekelas Brotli dengan biaya CPU server yang lebih rendah, sehingga membantu untuk payload WASM dan JSON berukuran besar. Browser hanya mengiklankan Accept-Encoding: zstd melalui HTTPS, jadi tetap konfigurasikan Brotli dan gzip sebagai cadangan bagi pengguna lainnya.

Untuk build WebAssembly, kompresi sering kali menjadi pembeda antara “langsung dimuat” dan “tidak pernah selesai dimuat.”

4) Jangan unduh seluruh dunia sejak awal

Pisahkan game Anda menjadi:

• Boot: loader minimal + input + scene pertama
• Core: sistem gameplay utama
• Opsional: level tambahan, kosmetik, tekstur resolusi tinggi, audio bonus, dan sebagainya

Muat bagian “Opsional” hanya setelah:

• pemain sudah dapat bermain, dan/atau
• Anda tahu mereka menginginkan konten tersebut (misalnya, mereka telah mencapai menu/level)

5) Pilih format aset yang tepat

Untuk sebagian besar game web:

• Gambar: utamakan WebP (atau AVIF jika Anda dapat menerima proses encoding yang lebih lambat) untuk UI/latar belakang.
• Audio: utamakan Ogg Vorbis untuk penggunaan umum; uji AAC untuk ekosistem Apple.
• Video: utamakan MP4/H.264 untuk kompatibilitas, dan WebM jika didukung serta berukuran lebih kecil.

Perhatikan biaya decoding: “unduhan lebih kecil” masih dapat berarti “lebih lambat untuk didekode.”

6) Buat scene pertama tetap kecil dan deterministik

Hindari hal-hal berikut dalam scene interaktif pertama Anda:

• kompilasi shader secara besar-besaran
• pengunggahan tekstur berukuran sangat besar
• pembuatan prosedural yang memblokir thread utama
• parsing JSON sinkron terhadap blob berukuran megabita

Khusus untuk tekstur, kirimkan KTX2 dengan Basis Universal supercompression, bukan PNG atau JPEG. Format ini tetap terkompresi di GPU setelah diunggah (ditranskode ke BC7 di desktop atau ASTC di perangkat seluler saat pemuatan), sehingga memangkas VRAM 4 hingga 8 kali dan membuat proses pengunggahan jauh lebih ringan dibandingkan mendekode PNG berukuran penuh dan mengirim piksel mentah ke GPU.

Jika Anda harus melakukan pekerjaan berat, lakukan:

• secara bertahap di beberapa frame, atau
• di dalam Worker (jika memungkinkan)

7) Terapkan caching secara agresif (tetapi dengan benar)

Gunakan caching berjangka panjang untuk aset yang dialamatkan berdasarkan konten:

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

Untuk titik masuk HTML, gunakan durasi caching yang singkat agar Anda dapat menerapkan pembaruan dengan aman.

8) Buat “kegagalan” tampil cepat dan mudah dipahami

Jika terjadi masalah, tampilkan:

• pesan kesalahan yang jelas
• tombol coba lagi
• tautan untuk melaporkan masalah

Kegagalan tanpa pemberitahuan menghancurkan kepercayaan.

9) Jika menggunakan thread Wasm, pahami COOP/COEP

Jika build Anda bergantung pada SharedArrayBuffer (umum pada beberapa konfigurasi threading Wasm), kemungkinan besar Anda memerlukan header isolasi lintas origin:

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

Anda memiliki dua pilihan untuk header COEP. require-corp adalah opsi yang ketat, tetapi mengharuskan setiap aset lintas origin (tekstur CDN, skrip pihak ketiga) mengirimkan header Cross-Origin-Resource-Policy atau aset tersebut akan diblokir. Cross-Origin-Embedder-Policy: credentialless juga mengaktifkan SharedArrayBuffer dan isolasi lintas origin, tetapi memuat sumber daya lintas origin tanpa kredensial, alih-alih mewajibkan sumber daya tersebut untuk memberikan izin melalui CORP. Jika Anda mengambil aset dari CDN yang tidak Anda kendalikan, credentialless biasanya merupakan pilihan yang lebih mudah.

Lakukan pengujian sejak awal di host sebenarnya, karena header dan embed pihak ketiga dapat menyebabkan masalah.

10) Pastikan game dapat dimainkan tanpa SDK

Jika Anda menargetkan alur kerja kreator Cinevva, usahakan untuk menyediakan:

• satu URL yang selalu memulai game dengan andal
• tanpa login wajib untuk memulai demo
• kontrol input yang konsisten

Dengan begitu, Anda siap mendistribusikan game tanpa mengintegrasikan SDK tambahan.

Terkait:

• Untuk kreator game
• Kebijakan konten buatan AI
• Pemuatan aset secara streaming — pola pemuatan progresif untuk game berukuran besar
• Service worker untuk caching game — simpan aset dalam cache agar kunjungan berikutnya dimuat seketika
• Perbandingan Engine Game Web — ukuran build dan waktu pemuatan di berbagai engine
• Cara Merilis Game Anda di itch.io — mengoptimalkan game browser untuk embed itch.io