Kalan Sorunlar Analizi

HLS Burst Loading ve Thumbnail Tekrarı - Basit Anlatım

Bugün Ne Başardık?

Fix 1: Debug-Log

Her şarkıda 14 gereksiz istek atılıyordu.

14 → 0

%100 azalma

Fix 2: Track-Hit

Dinleme sayısı çift kaydediliyordu.

2 → 1

Artık doğru sayılıyor

Kalan 2 Sorun

Sorun 1: HLS Burst Loading

Ne Oluyor?

Play butonuna bastığında, şarkının TAMAMI bir seferde indiriliyor. 3 dakikalık bir şarkı için 15-20 parça (segment) aynı anda sunucudan çekiliyor.

Hatta daha kötüsü: Sonraki şarkı da aynı anda indiriliyor! Yani play'e bastığında 2 şarkının tamamı (30-40 parça, 7-9 MB) birden geliyor.

Şu Anki Durum: BURST

Tüm parçalar aynı anda

1 2 3 4 5 6 7 8 9 10 ... 18

⬆️ HEPSİ 2 SANİYEDE!

Sonuç:

  • • İlk 2 saniyede 18 istek
  • • Sunucu anlık yoğunluk
  • • Skip yapılırsa veri israfı

Olması Gereken: PROGRESSIVE

Parçalar sırayla, ihtiyaç oldukça

0:00 1:00 2:00 3:00

⬆️ ZAMANLA, GEREKTİKÇE

Sonuç:

  • • Önce 3-4 parça
  • • Dinledikçe devamı gelir
  • • Skip yapılırsa israf yok

Gerçek Hayat Örneği

BURST (Şu an)

Restoranda oturuyorsun, garson gelip tüm menüyü masaya koyuyor. Çorba, salata, ana yemek, tatlı, içecek - hepsi aynı anda. Sen daha çorbayı bitirmeden tatlı eriyor.

Yarısını yemeden kalkarsan? Hepsi çöpe.

PROGRESSIVE (Olması gereken)

Restoranda garson sırayla getiriyor. Önce çorba. Çorba biterken salata geliyor. Salata biterken ana yemek hazırlanıyor.

Yarıda kalkarsan? Sadece getirilen kadar ödeme.

Sayılarla Sorun

Durum İndirilen Veri Kullanılan İsraf
Şarkı tam dinlendi 3 MB 3 MB 0 MB
30 saniyede skip 3 MB 0.5 MB 2.5 MB
10 saniyede skip 3 MB 0.15 MB 2.85 MB
+ Sonraki şarkı preload +3 MB ? ?

Ortalama kullanıcı şarkıların %30'unu skip ediyor. Bu da ciddi bant genişliği israfı demek.

Peki Neden Böyle Yapılmış?

Gapless playback (kesintisiz çalma) için.

Bir şarkı bitip diğeri başlarken hiç boşluk olmasın diye, sonraki şarkı önceden tamamen indiriliyor. Böylece geçiş anında donma yok.

⚠️ Risk:

Bu değeri düşürürsek, yavaş internetli kullanıcılarda şarkı geçişlerinde kısa donmalar olabilir.

Çözüm Önerisi

1

Mevcut şarkı için buffer'ı düşür

150 saniye → 30 saniye (ilk 3-4 parça)

2

Sonraki şarkı preload'unu geç başlat

Şarkı başında değil, son %20'de başlat

3

Test et, gapless bozulursa geri al

Checkpoint var, güvenle deneyebiliriz

Sorun 2: Thumbnail 3x Tekrarı

Ne Oluyor?

Her şarkı değiştiğinde, aynı kapak resmi 3 kez indiriliyor. Aynı URL, aynı boyut, aynı resim - ama 3 ayrı HTTP isteği.

Network'te Gördüğümüz

200 /thumb/Cant_Ta_0.jpg/120/120 ← 1. istek
200 /thumb/Cant_Ta_0.jpg/120/120 ← 2. istek (AYNI!)
200 /thumb/Cant_Ta_0.jpg/120/120 ← 3. istek (AYNI!)

3 istek de 200 OK dönüyor. 304 Not Modified (cache'den al) dönseydi sorun olmazdı.

Neden 3 Kez İsteniyor?

Player'da 3 farklı yerde kapak resmi gösteriliyor:

Mobil Player

100x100 px

Desktop Player

120x120 px

Media Session

Bildirim alanı

Her biri x-effect ile şarkı değiştiğinde img.src = ... yapıyor. Aynı URL olsa bile tarayıcı 3 ayrı istek atıyor.

Gerçek Hayat Örneği

Şu Anki Durum

Evde 3 kişi aynı anda markete gidip aynı ürünü alıyor. 3 ayrı yolculuk, 3 ayrı kasa kuyruğu.

Sonuç: 3 kat zaman ve enerji israfı.

Olması Gereken

Bir kişi markete gidip alıyor, eve getiriyor, herkes aynı üründen kullanıyor.

Sonuç: 1 yolculuk, 3 kişi faydalanıyor.

Çözüm Önerileri

A

JavaScript'te önbellek

Resmi bir kez indir, değişkende tut, 3 yerde aynı değişkeni kullan. URL değişmedikçe yeni istek atma.

B

Sunucu cache header'ı

Thumbnail'lere Cache-Control header'ı ekle. Tarayıcı aynı URL'yi tekrar isteyince 304 Not Modified döner.

C

Tek img elementi

Mobil/desktop için ayrı img yerine, CSS ile görünürlük kontrol et. Sadece 1 img elementi, 1 istek.

İki Sorunun Karşılaştırması

HLS Burst Thumbnail 3x
Ne kadar veri? 3-6 MB / şarkı 50-100 KB / şarkı
Kaç istek? 15-20 istek / şarkı 3 istek / şarkı
Fix zorluğu 🟡 Orta (riskli) 🟢 Kolay
Risk Gapless bozulabilir Risk yok
Öneri Test edip karar ver Hemen düzeltilebilir

Sonuç ve Öneri

✅ Önce Thumbnail Fix (Kolay, Risksiz)

3x tekrarı engellemek basit ve hiçbir şeyi bozmaz. JavaScript'te basit bir cache mekanizması ekleyerek çözülür.

⚠️ Sonra HLS Buffer (Dikkatli Test Gerekli)

Buffer değerlerini düşürmek daha fazla tasarruf sağlar ama gapless playback'i etkileyebilir. Önce test ortamında deneyelim.