Nima uchun HTML5 o’yinlari tezroq yuklanadi

Kirish: tezlik = konvertatsiya

Brauzerdagi o’yinlar uchun «tezroq yuklanadi» degan ma’noni anglatadi: kamroq bayt, kamroq so’rovlar, birinchi kadrni kutish kamroq. HTML5-stek (HTML/CSS/JS/WebGL/WASM) zamonaviy yetkazib berish va «qutidan» keshlash imkonini beradi, yaʼni qisqa TTFB, past LCP va tezkor Time-to-First-Interaction (TTFI).

1) Tarmoq va transport: nima uchun veb andoza tezroq

HTTP/2 и HTTP/3 (QUIC)

Multiplekslash: oʻnlab assetalar (spraytlar, kod chankalari) bitta birikma orqali ketadi - hech qanday «boʻron» TCP.

0-RTT и TLS 1. 3: tez qo’l qo’yish, birinchi baytgacha qisqa yo’l.

Oqimlarning ustuvorligi: tanqidiy assetalar (dvigatelning boshlanishi, bosh atlas) koʻproq ustuvorlikka ega boʻladi.

CDN va chetdagi kesh

POP tugunlari o’yinchiga yaqinroq bo’lib, o’zgarmas assetalarni kesh qiladi.

’stale-while-revalidate’ eski versiyani koʻrsatish va yangi versiyani tortish imkonini beradi.

Sarlavhalar (retsept):


Cache-Control: public, max-age=31536000, immutable
Content-Encoding: br   // для JS/CSS (Brotli)
Cross-Origin-Resource-Policy: cross-origin
Timing-Allow-Origin:

2) Bandling va kod-split: «kerakli darajada» yetkazib beramiz

ES modullari va dinamik import

Kodni level packs ga bo’lamiz: «lobbi», «tutorial», «1-3 darajalar», «do’kon».

Birinchi ekran faqat tashabbuskor chankni oladi (50-150 KB gz/br). Qolganlari - talabga binoan.

Tree-shaking va minifikatsiya

Foydalanilmayotgan vosita/kutubxona APIlarini olib tashlayapmiz.

Oʻlik kodni agressiv kesish uchun Terser/LightningCSS + module sideEffects = false.

Dinamik yuklash namunasi:

js
//Jangovar rendererni faqat const {BattleRenderer} = await import (’./chunks/battleRenderer. js');
new BattleRenderer(). mount(canvas);

3) Assetalar: baytlarning asosiy tejamkorligi

Rasmlar

UI/rasmlar uchun WebP/AVIF: PNG/JPEG ga nisbatan minus 25-50%.

Sprayt-listlar va atlaslar so’rovlar sonini va qo’shimcha xarajatlarni kamaytiradi.

Device/Client Hints:’Accept-CH: DPR, Width, Viewport-Width’→ server/edge kerakli oʻlchamni beradi.

3D/Teksturalar

Basis/UASTC (KTX2): GPU-teksturalarning universal siqilishi (ETC1S/ASTC/BC) - bitta faylni yuklaymiz, videokarta shaklida ochamiz.

Mip-darajalar progressiv yuklanadi: avval past sifat → so’ngra apsempl.

Audio

MP3/AAC o’rniga Opus - past bitreytlarda yaxshiroq; talab bo’yicha yo’l oqimi (zona musiqasi - zona kirgandan keyin).

Video/kat-sahnalar

qisqa roliklar uchun WebCodecs/MediaSource va LL-HLS; poster va birinchi segment - oldindan yuklash, qolganlari - dangasa.

4) Dvigatelni ishga tushirish: avval «skelet», so’ngra «go’sht»

Lazy scene graph

Faqat muhim sahna tugunlarini (UI, kamera, fon) yuklaymiz. Modellar/sheyderlar - birinchi zarurat bo’yicha.

Orqa fon asset jobs: yuklovchi birinchi navbatda turadi.

Service Worker (SW) «issiq kesh» sifatida

Birinchi tashrifda mijozning yadrosi, atlaslar manifesti, sheyderlar oʻrnatiladi va keshlanadi.

Qayta kirishda - oflayn tayyorgarlik va TTFI bir zumda ~.

SW strategiyasi misoli (soddalashtirilgan):

js self. addEventListener('fetch', e => {
e. respondWith(caches. open('game-v12'). then(async c => {
const cached = await c. match(e. request);
const fresh = fetch(e. request). then(r => { c. put(e. request, r. clone()); return r; });
return cached          fresh;
}));
});

5) WebGL va WASM: brauzerdagi «mahalliy» tezlik

WebGL/WebGPU: sheyderlar va renderlar - GPUda; CPU mantiqqa mos keladi.

WebAssembly (WASM): dvigatelning og’ir qismlari (fizika, yo’l, to’qimalarni ochish) deyarli mahalliy kutubxonalar kabi ishlaydi.

Oqimlar (Web Workers): to’qimalar/audio dekodlari, parsing darajalari, asosiy oqimni bloklamasdan - qoplarni tayyorlash.

Birinchi kadrni optimallashtirish (FTF - First Time to Frame):

FTF uchun «go’zallikni» qurbon qilamiz: low-poly/low-res yuklaymiz, to-strimim high-res keyinroq.

6) Yuklashni ustuvorlashtirish: muhim narsaga birinchi o’tishga ruxsat bering

HTML yordamlari:

html
<link rel="preconnect" href="https://cdn. example. com">
<link rel="preload" as="script" href="/app. a1b2c3. js" crossorigin>
<link rel="preload" as="image" href="/atlases/ui@1x. avif" imagesrcset="/ui@2x. avif 2x">

Fetch-ustuvorliklar va’fetchpriority ’

’ fetchpriority =» high»’ - tashabbuskor JS va UI atlaslari.

Qolgan assetalar’low’boʻlib, tanqidiy yoʻlga xalaqit bermaydi.

7) Metrika va SLO «tezkor» HTML5-o’yinlar

Maqsadli ko’rsatkichlar:

TTFB <200-300 ms (CDN bilan).
LCP (lobbi) <1. 8–2. Mobil telefonda 5 ta.
Time-to-First-Interaction (TTFI) < 2–3 с.
Birinchi Frame In-Game <1-2 s startdan keyin.
Total Download (birinchi ishga tushirish): lobbida 1-3 MB ≤, birinchi jang/darajagacha 5-10 MB ≤.
Qayta ishga tushirish: SW kesh orqali 0-200 KB ~.

Kuzatish darajasi: tarmoq/geo/qurilmalar bo’yicha RUM-hodisalar, Web Vitals, yuklovchining taraqqiyoti, taym-autlar bo’yicha nosozliklar.

8) Piplin yig’ilishi: «nozik birinchi bayt» ni qanday olish kerak

1. Bandl tahlili (source-map-explorer, webpack-bundle-analyzer).

2. Sahna/fich bo’yicha kod-split, «qalin» polifillarni olib tashlash (zamonaviy brauzerlarni targetlash).

3. Minifikatsiya: Terser/ESBuild + CSS Minify, dev-mantiqni olib tashlash.

4. Rasmlar:’sharp/squoosh’→ AVIF/WebP, generatsiya’srcset’.

5. To’qimalar: KTX2 konvert (Basis/UASTC), mip yaratish.

6. Audio: Opus VBR 48-96 kbps, kliplar - prevyu bilan qisqartirilgan.

7. Assetalar manifesti (artefakt) + hash-nomlar +’immutable’.

8. PWA/SW: yadro prekeshi,’stale-while-revalidate’bilan runtime-kesh atlaslari.

9. CDN: Preload-xintlar,’Surrogate-Control’, Soft-Purge.

9) Rantaym unumdorligi: o’yin yuklangandan keyin «uchib ketishi» uchun

Main-thread budget: JS-toshlarni ushlab turing <50 ms; og’ir - Workers.

Batch-render: draw-callsni guruhlang, instansingdan foydalaning.

GC bosimi: massivlarni/buferlarni ijaraga oling, o’yin tiklarida «axlat» dan qoching.

Moslashuvchan FPS: FPS tushganda o’yinga tegmasdan post-effektlar sifatini pasaytiring.

10) Anti-patternlar (bu o’yinni sekinlashtiradi)

Bitta monolit bandl 5-15 MB «startga».

GPU kompressiyasiz PNG-tekstura, KTX2/Basis yo’qligi.

’rng% N’ asset yuklagichida (determinatsiya qilish muhimroqdir, lekin bu ham PF haqida).

Kesh sarlavhalari yoki xesh nomlari bo’lmagan so’rovlar → har bir tashrif «sovuq».

Butun dunyo uchun polifillar (IE, eski Safari) - megabaytlarni behuda tortamiz.

SW/oldindan yuklash yo’qligi - takroriy tashriflar birinchisiday og’ir.

«Ogʻir» shriftlar (bir nechta’unicode-range’va’font-display: swap’yozilmagan).

11) Tezkor HTML5 o’yinining chek-ro’yxati

Tarmoq va CDN

HTTP/3 CDN/provayderlarga’preconnect’yoqilgan.
`Cache-Control: immutable` + hash-имена; `stale-while-revalidate`.

Kod va bandlalar

Sahnalar bo’yicha split kod; ES-modullar; tree-shaking.
Boshlang’ich JS ≤ 150 KB br; alohida kod xaritalari.

Assetes

UI uchun WebP/AVIF; Teksturalar uchun KTX2 Basis/UASTC.
Atlaslar va miplar; Opus audio; dangasa video/videolar.

PWA/kesh

Service Worker: yadro kashshoti, atlaslarning runtime-keshi.
Takroriy tashrif «issiq» keshdan yuklanadi.

Ustuvorliklar

’preload’tanqidiy idishlar/atlaslar;’fetchpriority’muhim narsa uchun.
Ikkinchi darajali sahnalar uchun past ustuvorlik.

Metrika

TTFB/LCP/TTFI/FTF/Download-budget dashbordda.
Og’irlik bo’yicha alertlar, hit-ratio CDN pasayishi.

12) Sarlavhalarning mini-retseptlari

Statika (JS/CSS/atlasi):


Cache-Control: public, max-age=31536000, immutable
Content-Encoding: br

JSON-manzara manifestlari (tez-tez o’zgaradi):


Cache-Control: public, max-age=60, stale-while-revalidate=120
Surrogate-Control: max-age=60, stale-if-error=600

Shriftlar:


Cache-Control: public, max-age=31536000, immutable
Cross-Origin-Resource-Policy: cross-origin

HTML5 o’yinlari tezroq yuklanadi, chunki veb-platforma samarali transportni birlashtiradi (HTTP/2-3, TLS 1. 3), aqlli yetkazib berish (CDN, kesh, oldindan yuklash), yengil assetalar (WebP/AVIF, KTX2, Opus) va inkremental boshlang’ich (kod-split, dangasa sahnalar, SW-kesh). WebGL/WASM va qat’iy metrik intizom qo’shing - va birinchi kadr soniyalarda paydo bo’ladi va qayta kirish deyarli bir zumda bo’ladi.