Kritik sorunlar, Cloudflare cache ve çözüm stratejisi
| Toplam istek (playlist başlangıcı) | 143 adet |
| Ortalama yanıt süresi | 3,082 ms |
| En kötü yanıt süresi | 9,791 ms |
| >3 saniye süren | %41 (59/143) |
| Farklı boyut sayısı | 6 farklı boyut |
┌─────────────────┐ ┌──────────────────┐ ┌─────────────────┐
│ Browser │────▶│ Cloudflare │────▶│ Origin │
│ Request │ │ (BYPASS?) │ │ Server │
└─────────────────┘ └──────────────────┘ └────────┬────────┘
│
▼
┌─────────────────┐
│ ThumbmakerController │
└────────┬────────┘
│
┌────────────────────────────────┼────────────────────────────────┐
│ │ │
▼ ▼ ▼
┌─────────────────┐ ┌─────────────────┐ ┌─────────────────┐
│ Static File │ │ Laravel Cache │ │ Generate New │
│ (storage/) │ │ (Redis) │ │ (Intervention) │
│ ⚡ ~1ms │ │ ⚡ ~5ms │ │ 🐢 ~3000ms │
└─────────────────┘ └─────────────────┘ └─────────────────┘
storage/app/public/thumbmaker-cache/ altında fiziksel dosya. Nginx direkt serve eder.
30 gün TTL. İkincil cache katmanı.
Intervention Image ile işleme. Ortalama 3 saniye sürüyor.
Thumbmaker yanıtlarını Cloudflare edge'de cache'le. Tekrar eden istekler origin'e ulaşmaz.
Cloudflare Page Rule veya Cache Rule:
URL: *muzibu.com/thumbmaker*
Cache Level: Cache Everything
Edge Cache TTL: 1 month
Browser Cache TTL: 1 month
Queue'daki 100+ şarkının thumbnail'ını aynı anda yüklemek yerine, sadece görünür olanları yükle.
Intersection Observer API kullan:
<img data-src="{{ thumb(...) }}" loading="lazy" />
// Görünür olunca src'yi set et
Popüler şarkıların thumbnail'larını arka planda önceden oluştur.
Artisan komutu veya Queue job:
php artisan thumbmaker:warm --playlist=popular --sizes=120,300
6 farklı boyut yerine 3 standart boyut belirle. srcset ile responsive.
Standart boyutlar:
Small: 100x100 (liste, queue, küçük ikonlar)
Medium: 300x300 (kartlar, player)
Large: 600x600 (detay sayfaları, banner)
1. Cloudflare Dashboard → Rules → Page Rules
2. "Create Page Rule" tıkla
3. URL pattern:
*muzibu.com/thumbmaker*
4. Settings:
Static thumbnail dosyaları için:
*muzibu.com/storage/*/thumbmaker-cache/*
Settings:
Önemli: Query string ile cache key oluşturulmalı. "Cache Everything" bunu otomatik yapar.
Cloudflare Dashboard → Caching → Cache Rules → Create Rule
Expression:
(http.request.uri.path contains "/thumbmaker")
Action:
Eligible for cache
Edge TTL: Override - 1 month
Cache Key: Include query string
ThumbmakerController'da cache header'ları zaten var ama Cloudflare için optimize edilebilir:
// Mevcut (iyi ama geliştirilebilir):
->header('Cache-Control', 'public, max-age=2592000')
// Önerilen (Cloudflare optimize):
->header('Cache-Control', 'public, max-age=2592000, s-maxage=2592000, immutable')
->header('CDN-Cache-Control', 'max-age=2592000')
->header('Vary', 'Accept') // WebP desteği için
s-maxage: CDN için özel TTL
immutable: Tarayıcıya "bu asla değişmez" der, revalidation önler
CDN-Cache-Control: Cloudflare'a özel header
GÖREV: Thumbmaker Cloudflare Cache Durumu Testi HAZIRLIK: 1. DevTools aç (F12) → Network sekmesi 2. "Disable cache" KAPALI olsun (browser cache aktif) TEST: 1. https://www.muzibu.com/thumbmaker?src=https://www.muzibu.com/storage/tenant1001/1/Azeri-Sarkici.webp&w=300&h=300 adresine git 2. Sayfayı yenile (F5) 3. Network sekmesinde bu isteği bul 4. Response Headers'ı incele KONTROL ET: A) cf-cache-status header'ı var mı? - HIT = Cloudflare cache'den geldi ✅ - MISS = Origin'den geldi (ilk istek) - DYNAMIC = Cache'lenmiyor ❌ - BYPASS = Cache atlandı ❌ B) Cache-Control header'ı ne? - public, max-age=... olmalı C) cf-ray header'ı var mı? (Cloudflare'dan geçtiğinin kanıtı) RAPOR: 1. cf-cache-status: ___ 2. Cache-Control: ___ 3. Response time: ___ ms 4. Content-Type: ___ 5. cf-ray: ___ İKİNCİ DENEME: 1. Aynı URL'yi yeni sekmede aç 2. cf-cache-status: HIT mi? 3. Response time düştü mü?
GÖREV: Thumbmaker İlk vs Tekrar İstek Performans Karşılaştırması HAZIRLIK: 1. DevTools aç → Network sekmesi 2. "Disable cache" İŞARETLE (browser cache devre dışı) TEST A - YENİ GÖRSEL (Cache MISS): 1. Network'ü temizle 2. Şu URL'ye git (timestamp ile benzersiz): https://www.muzibu.com/thumbmaker?src=https://www.muzibu.com/storage/tenant1001/1/test.webp&w=200&h=200&t=[TIMESTAMP] 3. Kaydet: - Response time: ___ ms - cf-cache-status: ___ (MISS olmalı) TEST B - AYNI GÖRSEL (Cache HIT): 1. Network'ü temizle 2. AYNI URL'ye tekrar git (timestamp AYNI) 3. Kaydet: - Response time: ___ ms - cf-cache-status: ___ (HIT olmalı) TEST C - FARKLI BOYUT (Cache MISS): 1. Boyutu değiştir: w=300&h=300 2. Kaydet: - Response time: ___ ms - cf-cache-status: ___ (MISS olmalı, farklı cache key) KARŞILAŞTIRMA: | Test | Süre | cf-cache-status | |------|------|-----------------| | A (ilk) | ___ ms | ___ | | B (tekrar) | ___ ms | ___ | | C (farklı boyut) | ___ ms | ___ | BAŞARI KRİTERİ: - Test B, Test A'dan EN AZ 10x hızlı olmalı - Test B'de cf-cache-status: HIT olmalı
GÖREV: Cloudflare Cache Aktif İken Playlist Thumbnail Performansı HAZIRLIK: 1. https://www.muzibu.com adresine git ve giriş yap 2. DevTools aç → Network sekmesi 3. "Preserve log" İŞARETLE 4. Network'ü temizle TEST: 1. Sol menüden Sektörler → Cafe → Daily Coffee Pop Playlist'e git 2. Play butonuna bas 3. 30 saniye bekle 4. Network'teki thumbmaker isteklerini filtrele (Filter: thumbmaker) KAYIT AL: A) THUMBMAKER İSTEK SAYISI: - Toplam thumbmaker isteği: ___ B) CF-CACHE-STATUS DAĞILIMI: | Status | Adet | Yüzde | |--------|------|-------| | HIT | ___ | ___% | | MISS | ___ | ___% | | DYNAMIC | ___ | ___% | | BYPASS | ___ | ___% | C) PERFORMANS: - HIT istekleri ortalama süresi: ___ ms - MISS istekleri ortalama süresi: ___ ms - En yavaş istek: ___ ms (___ status) D) TOPLAM VERİ: - Thumbmaker toplam boyut: ___ KB - Thumbmaker toplam süre: ___ ms BAŞARI KRİTERİ: - HIT oranı > %50 (tekrar ziyarette > %90) - HIT istekleri < 100ms - Toplam süre < 5 saniye (önceden 30+ saniye idi)