Torrent Dişli

Mobil oyun oynarken trafik nasıl optimize edilir

1) Neden trafiği optimize edin

Daha az gecikme - daha istikrarlı oturum ve daha yüksek tutma.

Veri tasarrufu - daha düşük kullanıcı maliyetleri ve "indirimli tarife" riski.

Hızlı başlangıç - kabartmalar/reklamlar ile oyunların daha fazla çalışır.

Zayıf bir ağda güvenilirlik (3G/cafe-Wi-Fi/dolaşım).

2) Gerçekten izlemeye değer metrikler

İlk Contentful Paint (FCP )/En Büyük Contentful Paint (LCP): Oyuncu ne zaman "gördü've ne zaman" oynayabilir ".

INP/TBT Arabirim Yanıtı.

Trafik/oturum (MB) ve pik bit hızı.

RTT/jitter/kayıplar (özellikle canlı oyunlar/akışlar için).

Cache Hits - Uygulama/CDN önbelleğinden gelen isteklerin yüzdesi.

3) Ağ yığını: temel hijyen

Çoğullama ve daha sağlam paket kaybı işlemi için HTTP/2/HTTP/3 (QUIC) etkinleştirin.

TLS oturumu devam ettirme ve 0-RTT (H3 için) - daha az el sohbeti.

DNS-prefetch/CDN ve oyun sağlayıcılarına Preconnect.

Yetkili önbellek ilkesi: 'Cache-Control', 'ETag', sürüm varlıkları.

4) CDN ve coğrafya

Statik ve medyayı CDN'ye PoP ile kullanıcıya yaklaştırın.

CDN (WebP/AVIF) üzerinde görüntü yeniden boyutlandırma/'kabul et 'tabanlı uzlaşmayı etkinleştirin.

Canlı video için - kenardaki çoklu bit hızı profilleri (HLS/DASH).

5) Sıkıştırma ve formatlar (aslında yüzde onlarca tasarruf sağlar)

Görüntüler: WebP/AVIF + 'srcset/size', sprite ve SVG simgeleri.

Fontlar: WOFF2, istenen glifler için alt küme, 'font-display: swap'.

Video: H.264/HEVC/AV1 (varsa), otomatik oynatma yerine poster.

Metin/JSON: Brotli (br)> Gzip, CDN/sunucu üzerinde etkinleştir.

JS/CSS: küçültme, ağaç sallama, kod bölme.

6) Oyun tuvali: yuvalar, mini oyunlar, tuval/WebGL

Uyarlanabilir DPR için oluştur: 'devicePixelRatio' sınırı 1. Mobilde 5-2 - keskinlik devam ediyor, trafik/CPU düşüyor.

Doku atlasları ve doku sıkıştırması (ASTC/ETC/BC, desteklenen yerlerde) - daha az indirme.

Varlıkların "aynı anda'değil, seviyeler/ekranlar arasında tembel değişimi.

"Ağır" gölgeleri/filtreleri kaldırın, animasyonların sıklığını zayıf cihazlarda 30-45 fps ile sınırlayın.

Iframe yuvaları için: hafif varlıklar hakkında sağlayıcılarla pazarlık yapın ve yalnızca kritik kaynakları toplu olarak önceden yükleyin.

7) Canlı oyunlar ve akışlar: megabaytları acı çekmeden kaydedin

360p/480p/720p eşikleri ile uyarlanabilir bit hızı (ABR); genişliğe/RTT'ye göre profil seçimi.

Düşük Gecikmeli HLS/DASH yalnızca gerektiğinde; LLC'yi herkes için etkinleştirmeyin.

Konuşma için ses bit hızı 64-96 kbps genellikle yeterlidir.

Lobi dışı otomatik oynatma: gösteri posteri/animasyonlu GIF/webm önizlemesi.

8) Gerçek zamanlı iletişim

WebSocket: ikili protokoller, paket mesajlar, her 25-30 saniyede bir kalp atışı.

WebRTC-data - sadece dar durumlar için; Medya ile ilgili değilse "gereksiz" NAT baypasından kaçının.

Yükü sıkıştırın (protokol tamponları/MessagePack), "şişman" JSON'u sürmeyin.

9) PWA/Servis Çalışanı: Mobilde Trafik Kurulu

App Shell: Başlığı/navigasyonu ve iskeleti önbelleğe alıyoruz - anında ilk ekran.

Çalışma zamanı önbelleğe alma: Resimler için 'Bayat-While-Revalidate', TTL ile API için 'Önce Ağ'.

Arka plan senkronizasyonu: etkileşimi engellemeden ertelenmiş telemetri/günlük kaydı.

Çevrimdışı geri dönüş: boşluk yerine anlaşılabilir ekranlar (retrays ve gereksiz isteklerden tasarruf).

10) Akıllı indirmeler ve öncelikler

Kritik CSS sıralı, gerisi istek üzerine.

'defer/async' for scripts, import () sonraki ekranlar için.

Tembel yükleme oyun listeleri (paket başına 20-30 kart), 'IntersectionObserver'.

Niyete göre Prefetch: kullanıcı kartta oyalandığında - oyun varlıklarını yukarı çekin.

11) Faturalandırma ve ödeme: trafik de önemlidir

Sistem ödeme diyaloglarını kullanın (Apple/Google Pay) - daha ekonomik ve sürdürülebilirdir.

Ödeme adımlarında yönlendirmeleri ve ekstra analitik pikselleri en aza indirin.

Kripto modülünde, tüm ağları/simgeleri yüklemeyin - yalnızca seçilen ağ/jeton.

12) "Oburluk" olmadan telemetri ve A/B

Sadece gerekli olayları toplayın, toplu ve her N saniye/boyutuna göre bir kez gönderin.

Prod'daki hata ayıklama günlüklerini kapatın, olaylardaki alanları kırpın.

A/B bayrakları - kolay uzaktan yapılandırma yoluyla, megabayt şemaları çekmeyin.

13) Oyuncular için uygulamalar (hızlı trafik kazanır)

IOS/Android'de Veri Tasarrufu/Trafik Tasarrufu özelliğini etkinleştirin.

Mümkünse, Wi-Fi 5/6 üzerinden oynayın; Bir mobil ağda, "1-2 çubuk" - daha yüksek kayıptan kaçının.

Ayarlarda otomatik oynatılan video/önizlemeyi devre dışı bırakın.

Telegram ve tarayıcıda, her iki haftada bir önbelleği temizleyin - ancak sık sık oynamadan önce (önbellek yardımcı olur).

Uygulama/PWA güncellemesini takip edin - yeni sürümler genellikle daha ekonomiktir.

14) Geliştirici/Ürün Kontrol Listesi (bir sayfa)

1. HTTP/2/3, TLS 1. 3, CDN/oyun alanlarına önceden bağlanır.

2. Resim yeniden boyutlandırmalı CDN, metin başına AVIF/WebP, Brotli.

3. App Shell + SW: çevrimdışı-geri dönüş, çalışma zamanı- кеш, arka plan senkronizasyonu.

4. Varlıkların tembel yüklenmesi, kod bölüşümü, kritik CSS satır içi.

5. Dinamik DPR (≤2), sıkıştırılmış dokular, 30-45 fps zayıf.

6. ABR video genişliği/RTT, lobide otomatik oynatma kapalı.

7. Ambalajlı WebSocket; Veri için sıkıştırılmış protokol.

8. Batchami ile telemetri; prod-debag devre dışı.

9. Gereksiz yönlendirmeler olmadan kasiyer; Sistem ödeme diyalogları

10. İzleme: LCP/INP/trafik/oturum, önbellek isabetleri, RTT/kaybı.

15) Sık yapılan hatalar ve bunların nasıl düzeltileceği

Listelerdeki video/stream otomatik oynatmayı bir poster/önizleme ile değiştirin.

Tüm cihazlarda 3 × varlık çekiyoruz - 'srcset'/DPR profillerini kullanın.

Dev JS demetleri - rota ayırma, kullanılmayan depoların kaldırılması.

Sıfır Önbellek Kontrolü - TTL/ETag ve sürüm yapılandırması.

Chat/telemetry spam - toplu, kalp atışı aralığını artırın.

Tek bir WebSocket kanalındaki her şey (oyun + sohbet + analitik) - kritikliğe göre bölün.

16) "Havayı yapan" Mini desenler

Kötü bir ağa sahip canlı tablolarda "Video kalitesini düşürün" düğmesi.

Retina yüklemeden önce oyunlar için yer tutucu kapakları.

Son Oturum Kaydetme (Durum Önbelleği) - Daha az yeniden deneme.

Son çalışan masa/yuvaya deeplink - eksi iki ekran ve bir varlık paketi.

17) SSS

Trafik optimizasyonu kaliteyi düşürür mü?

Uyarlamalı olarak yaparsanız (DPR/ABR/' srcset ') - hayır: cihaz ve ağ için en iyi kalite/hız dengesini verirsiniz.

Tüm kullanıcıların Düşük Gecikme modunu etkinleştirmesi gerekiyor mu?

Hayır. Trafikte daha pahalıdır ve kayıplara duyarlıdır. Turnuva/canlı vakalar için ayrılın.

Yerel istemci yerine PWA - aşağıdaki trafik?

Genellikle evet: daha az SDK ve arka plan iş parçacığı, artı SW önbellek. Ama uygulamaya bağlıdır.

AVIF/WebP ne kadar tasarruf sağlar?

Fark edilebilir bir kalite kaybı olmadan JPEG/PNG'ye karşı ortalama %25-45.

Her zaman DPR'yi düşürmeli miyiz?

Zayıf cihazlarda/düşük ağda dinamik olarak azaltın; Wi-Fi 6 ile bayrak gemilerinde, 2 tutabilirsiniz. 0.

Trafik optimizasyonu'her şeyi kesmek'değil, kaliteyi ve hacmi cihaza, ağa ve senaryoya uyarlamakla ilgilidir. Hızlı ağ yığınını (HTTP/3, CDN, önbellek), akıllı varlıkları (WebP/AVIF, dokular, ABR), düzgün tuval ve PWA önbelleğini birleştirin, telemetri gürültüsünü azaltın ve hızlı indirme, istikrarlı oyun ve somut veri tasarrufu elde edin. Oyuncular ağ nedeniyle daha az sıklıkta düşer, daha sık geri döner ve ürün hem tutma hem de altyapı maliyetlerinde kazanır.