⚡ İXTİF Homepage Performans Analizi

Google Lighthouse performans raporuna dayalı optimizasyon planı
📅 13 Aralık 2025 🎯 Tenant: ixtif.com 📊 Kaynak: b-html.txt 🎨 Hedef: Performans İyileştirme

✅ Yapılacaklar Listesi

15/21
Tamamlanan görev
%71 tamamlandı

P0 - KRİTİK Hemen Yapılacaklar

KADEME 1 🟢 Düşük Risk - Font Optimizasyonu

Geri alma: Tek satır silmek yeterli

KADEME 2 🟢 Düşük Risk - Script Optimizasyonu

Geri alma: Attribute silmek yeterli

KADEME 3 🟡 Orta Risk - CSS Optimizasyonu

Geri alma: CSS değişikliklerini revert etmek

KADEME 4 🟡 Orta Risk - JS Optimizasyonu

Geri alma: Import/script geri eklemek

ATLANMIŞ ⚠️ Tenant-Aware Risk - Global Değişiklikler

Bu görevler tüm tenant'ları etkileyebilir, manuel yapılması önerilir

📊 Tespit Edilen Sorunlar - Özet

1.189 KB
Resim Optimizasyonu
Potansiyel tasarruf
1.343 KB
Cache Eksikliği
23 kaynak önbelleksiz
1.150 ms
Font Yükleme
4 webfont gecikmesi
44 KB
Yinelenen JS
Swiper.js iki kez

🎯 Yapılacaklar - Öncelik Sırasına Göre

1

Resim Optimizasyonu - 1.189 KB Tasarruf Kritik

🖼️ Sorun:

  • • hero.png → 973 KB (901 KB tasarruf potansiyeli)
  • • WebP yerine PNG kullanılıyor
  • • Gösterim boyutundan çok daha büyük resimleryükleniyor
  • • Thumbmaker kullanan resimler de optimize edilebilir

✅ Çözüm Stratejisi:

  • • WebP dönüşümü: Tüm PNG/JPG resimleri WebP formatına çevir (60-80% boyut azalması)
  • • Responsive resimleri: srcset kullanarak farklı ekran boyutları için farklı boyutlar sun
  • • Thumbmaker ayarları: Kalite parametresini 80-85 arasına çek (60'tan yükselt)
  • • Lazy loading: Hero görseli dışındaki tüm resimlere loading="lazy" ekle
  • • CDN kullanımı: Resimleri CDN üzerinden sun (Cloudflare Images veya BunnyCDN)

🎯 Beklenen Sonuç:

Sayfa yükleme süresi 1-2 saniye azalacak. LCP (Largest Contentful Paint) metriği önemli ölçüde iyileşecek. Mobil kullanıcılar için veri tasarrufu sağlanacak.

2

Browser Cache Eksikliği - 1.343 KB Yüksek Öncelik

🖼️ Sorun:

23 kaynak hiç cache edilmiyor (TTL: None). Her sayfa yüklemesinde tekrar tekrar indiriliyor:

FontAwesome Webfontlar: 928 KB
CSS Dosyaları: 98 KB
JavaScript Dosyaları: 63 KB
İçerik bundle'ları: 254 KB

✅ Çözüm Stratejisi:

  • • Nginx cache headers: Static asset'ler için uzun süreli cache (1 yıl)
  • • Versiyonlama: CSS/JS dosyalarına hash veya versiyon ekle (app.js?v=hash)
  • • Font cache: Webfontlar için 1 yıl cache-control header'ı ekle
  • • ETags: Değişmemiş dosyalar için 304 Not Modified yanıtı

🎯 Beklenen Sonuç:

Tekrarziyaretlerde %80-90 daha hızlı yükleme. 1.3 MB'den fazla veri transferi engellenir. Server yükü azalır.

3

Font Görüntüleme Gecikmesi - 1.150 ms Yüksek Öncelik

🖼️ Sorun:

FontAwesome webfontları yüklenene kadar metin görünmüyor (FOIT - Flash of Invisible Text):

fa-regular-400.woff2 370 ms gecikme
fa-solid-900.woff2 310 ms gecikme
fa-light-300.woff2 270 ms gecikme
fa-brands-400.woff2 200 ms gecikme

✅ Çözüm Stratejisi:

  • • font-display: swap ekle → Metin hemen görünsün, font yüklenince değişsin
  • • Preload kritik fontlar: <link rel="preload"> ile en önemli fontları önceliklendir
  • • Lokal hosting: FontAwesome CDN yerine kendi sunucudan sun (cache kontrolü)
  • • Subset oluştur: Sadece kullanılan icon'ları içeren custom font oluştur (boyut %50-70 azalır)
  • • WOFF2 formatı: Eski formatlar yerine sadece WOFF2 kullan (modern tarayıcılar için yeterli)

🎯 Beklenen Sonuç:

FCP (First Contentful Paint) 300-500 ms hızlanır. Kullanıcı sayfa yüklenirken boş ekran görmez. Icon'lar gecikmeden görünür.

4

Yinelenen JavaScript Kodu - 44 KB Orta Öncelik

🖼️ Sorun:

Swiper.js kütüphanesi iki kez yükleniyor (40 KB + 40 KB = 80 KB):

❌ cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js (İlk yükleme)
❌ cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js (Tekrar yükleme)

✅ Çözüm Stratejisi:

  • • Kod incelemesi: Hangi dosyaların Swiper.js import ettiğini tespit et
  • • Tek import: Global bir script olarak sadece bir kez yükle (layout.blade.php)
  • • Module bundling: Webpack/Vite ile tek bundle'a topla, yinelemeyi engelle
  • • Lazy load: Swiper kullanılan sayfalarda dinamik import yap

🎯 Beklenen Sonuç:

44 KB veri tasarrufu. JavaScript parse süresi azalır. Page load daha hızlı.

5

Gereksiz Polyfill'ler - 13 KB Orta Öncelik

🖼️ Sorun:

Facebook Pixel (fbevents.js) eski tarayıcılar için polyfill içeriyor:

  • • @babel/plugin-transform-classes
  • • @babel/plugin-transform-regenerator
  • • Array.from, Array.prototype.filter/find/includes polyfills
  • • String.prototype.startsWith polyfill

Modern tarayıcılar bu özellikleri zaten destekliyor, polyfill gereksiz.

✅ Çözüm Stratejisi:

  • • Self-hosted analytics: Facebook Pixel yerine Google Analytics 4 veya Plausible kullan
  • • Modern build: Babel config'i ES6+ target'a ayarla (IE11 desteği kaldır)
  • • Script loading: 3rd party script'ler async/defer ile yükle (render blocking engelle)
  • • Conditional loading: Sadece eski tarayıcılarda polyfill yükle (feature detection)

🎯 Beklenen Sonuç:

13 KB azalma. JavaScript execution süresi kısalır. Modern tarayıcılarda native API kullanımı.

6

Düzen Kayması Sorunu - CLS: 0.112 Orta Öncelik

🖼️ Sorun:

Sayfa yüklenirken elementler hareket ediyor (CLS skoru: 0.112):

Ürün listesi section (x-data) 0.084 shift
Hero Swiper (heroSwiper) 0.007 shift

✅ Çözüm Stratejisi:

  • • Aspect ratio: Resimler ve container'lara sabit yükseklik/genişlik oranı tanımla
  • • Skeleton loading: İçerik yüklenirken placeholder göster (layout değişmesin)
  • • Min-height: Dinamik içeriklere minimum yükseklik ver
  • • Font preload: Font yüklenmeden önce fallback font kullan (boyut değişimi engelle)
  • • x-cloak: Alpine.js elementlerine x-cloak ekle (render öncesi gizle)

🎯 Beklenen Sonuç:

CLS skoru 0.1'in altına iner (iyi seviye). Kullanıcı deneyimi iyileşir, tıklama hataları azalır.

7

Zorunlu Yeniden Düzenleme - 116 ms Düşük Öncelik

🖼️ Sorun:

JavaScript kodları DOM geometrik ölçümlerini sık sık okuyor (layout thrashing):

Livewire (livewire.js) 71 ms
Yandex Metrica 3 ms
Swiper init 42 ms

✅ Çözüm Stratejisi:

  • • Batch DOM reads: Tüm ölçümleri önce oku, sonra yazma işlemlerini yap
  • • CSS animations: JavaScript yerine CSS transition/animation kullan
  • • RequestAnimationFrame: Layout değişikliklerini RAF içinde grupla
  • • Virtual scrolling: Uzun listeler için sanal kaydırma kullan

🎯 Beklenen Sonuç:

Scroll ve animasyon performansı %30-40 iyileşir. 60 FPS smooth scrolling.

8

LCP İyileştirmesi - 3.250 ms Kritik

🖼️ Sorun:

En büyük içerik (LCP) çok geç yükleniyor. İXTİF Teslimat görseli:

TTFB (Time to First Byte) 0 ms
Kaynak yükleme gecikmesi 1.540 ms
Kaynak yükleme süresi 1.550 ms
Element oluşturma gecikmesi 160 ms

✅ Çözüm Stratejisi:

  • • fetchpriority="high": LCP görseline yüksek öncelik ver
  • • Preload: <link rel="preload" as="image"> ile LCP resmini önyükle
  • • loading="eager": LCP elementi için lazy loading KALDIR (zaten var)
  • • Above the fold: İlk ekranda görünen kritik CSS'i inline yap
  • • CDN: Resimleri CDN'den sun (latency azalır)
  • • Responsive images: Mobil için küçük boyut sun

🎯 Beklenen Sonuç:

LCP 2.5 saniyenin altına iner (iyi seviye). Google PageSpeed skoru yükselir.

9

Render Blocking CSS - 3.510 ms Yüksek Öncelik

🖼️ Sorun:

6 CSS dosyası render'ı engelliyor (toplamm 40.4 KB):

tenant-2.css 26.3 KB - 1.030 ms
swiper-bundle.min.css 5.4 KB - 900 ms
homepage.css 2.8 KB - 620 ms
3 diğer CSS dosyası 5.9 KB - 1.860 ms

✅ Çözüm Stratejisi:

  • • Critical CSS: İlk ekran için gerekli CSS'i <style> tag'i ile inline yap
  • • Defer non-critical CSS: Kalan CSS'leri preload + onload ile async yükle
  • • Bundle CSS: Birden fazla küçük CSS'i tek dosyada birleştir
  • • Minify & Compress: CSS sıkıştırma ve Gzip/Brotli compression
  • • Remove unused: PurgeCSS ile kullanılmayan CSS'leri temizle

🎯 Beklenen Sonuç:

FCP (First Contentful Paint) 1-2 saniye hızlanır. Sayfa daha çabuk render olur.

10

3rd Party Script Yönetimi Orta Öncelik

🖼️ Tespit Edilen 3rd Party Scripts:

Facebook Pixel
133 KB (fbevents.js + config)
20 gün cache
Yandex Metrica
84 KB (tag.js + sync)
1 saat cache
Microsoft Clarity
26 KB (clarity.js)
1 gün cache
JSDelivr CDN
49 KB (Swiper)
7 gün cache

⚠️ Toplam 3rd party yük: 292 KB

✅ Çözüm Stratejisi:

  • • Async/Defer loading: Tüm analytics script'leri async veya defer ile yükle
  • • Lazy load: Kullanıcı etkileşiminde yükle (scroll, click sonrası)
  • • Self-host: Swiper gibi kritik kütüphaneleri kendi sunucundan sun
  • • Consent management: Cookie onayı alınana kadar analytics yükleme
  • • Minimize tracking: Gerçekten gerekli mi değerlendir, gereksizleri kaldır

🎯 Beklenen Sonuç:

3rd party etkisi %50-70 azalır. Sayfa yüklenirken external bağımlılık azalır. Privacy iyileşir.

📊 Uygulama Öncelik Matrisi

Görev Etki Efor Öncelik Tahmini Kazanım
1. Resim Optimizasyonu Çok Yüksek Orta P0 - Kritik 1-2 sn hızlanma
8. LCP İyileştirmesi Çok Yüksek Düşük P0 - Kritik 0.8-1 sn hızlanma
2. Cache Politikası Yüksek Düşük P1 - Yüksek Tekrar ziyaret %80 hızlı
3. Font Display Yüksek Düşük P1 - Yüksek 300-500 ms FCP iyileşme
9. Render Blocking CSS Yüksek Orta P1 - Yüksek 1-2 sn FCP iyileşme
4. Yinelenen JS Orta Düşük P2 - Orta 44 KB tasarruf
6. Layout Shift Orta Orta P2 - Orta UX iyileşme
10. 3rd Party Management Orta Orta P2 - Orta 200+ KB tasarruf
5. Polyfill Temizleme Düşük Düşük P3 - Düşük 13 KB tasarruf
7. Forced Reflow Düşük Yüksek P3 - Düşük Scroll performansı

🛣️ Uygulama Yol Haritası

📌 Faz 1: Kritik İyileştirmeler (Hemen Başla)

✅ Yapılacaklar:
  • • Hero.png → WebP dönüşümü
  • • LCP görseline fetchpriority="high"
  • • Tüm resimlere loading="lazy" (hero hariç)
  • • Nginx cache headers ekle
🎯 Hedef:
  • • LCP: 3.25s → 2.0s
  • • Sayfa boyutu: -1.2 MB
  • • Tekrar ziyaret: %80 hızlı

📌 Faz 2: Font & CSS Optimizasyonu (1 Hafta İçinde)

✅ Yapılacaklar:
  • • FontAwesome'a font-display: swap
  • • Kritik CSS inline
  • • Non-critical CSS defer
  • • PurgeCSS ile temizlik
🎯 Hedef:
  • • FCP: -500ms
  • • Render blocking: %50 azalma
  • • Font flash önlendi

📌 Faz 3: JavaScript & 3rd Party (2 Hafta İçinde)

✅ Yapılacaklar:
  • • Swiper.js yinelemesini kaldır
  • • Analytics lazy load
  • • Layout shift düzeltmeleri
  • • Self-host kritik kütüphaneler
🎯 Hedef:
  • • JS boyutu: -250 KB
  • • CLS: 0.112 → 0.05
  • • 3rd party etkisi: %70 azalma

📌 Faz 4: İleri Düzey İyileştirmeler (1 Ay İçinde)

✅ Yapılacaklar:
  • • CDN kurulumu (Cloudflare/BunnyCDN)
  • • HTTP/3 aktifleştir
  • • Service Worker (offline support)
  • • Forced reflow optimizasyonları
🎯 Hedef:
  • • PageSpeed: 90+
  • • Mobil performans: A grade
  • • PWA ready

🎯 Beklenen Genel Sonuçlar

%60-70
Yükleme Hızı Artışı
İlk yükleme 4-5 saniyeden 1.5-2 saniyeye düşecek
-2.5 MB
Toplam Veri Tasarrufu
Resimlerde 1.2 MB, cache ile 1.3 MB tasarruf
90+
PageSpeed Skoru
Mevcut 60-70'lerden 90+ puana yükselecek

💡 SEO & Kullanıcı Deneyimi Kazançları

🔍 SEO İyileştirmeleri:
  • • Google Core Web Vitals: Tüm metrikler "İyi" seviyesinde
  • • Mobil-first indexing: Performans avantajı
  • • Ranking boost: Hızlı siteler üst sıralarda
  • • Bounce rate azalması: %15-20 düşüş beklenir
👥 Kullanıcı Deneyimi:
  • • Dönüşüm oranı artışı: %10-15 beklenir
  • • Sayfa görüntüleme süresi: %20-30 artış
  • • Mobil kullanıcı memnuniyeti: Önemli iyileşme
  • • Server yükü: %40-50 azalma (cache sayesinde)

⚙️ Teknik Uygulama Notları

🔧 Nginx Cache Configuration

# Static asset'ler için cache headers
location ~* \.(woff2|woff|ttf|eot)$ → 1 year
location ~* \.(css|js)$ → 1 year (versiyonlu olmalı)
location ~* \.(jpg|jpeg|png|gif|webp|svg)$ → 1 year
# ETags aktif
etag on;

🖼️ Resim Dönüşüm Stratejisi

1. Thumbmaker parametreleri:
- Format: WebP
- Quality: 85
- Progressive: true
2. Responsive srcset:
- 400w, 800w, 1200w, 1600w boyutları
- sizes attribute ile viewport tanımla
3. Fallback:
- WebP desteklemeyen tarayıcılar için JPG

📦 JavaScript Bundle Strategy

1. Vendor bundle: Swiper, Alpine (cache edilebilir)
2. App bundle: Custom kodlar (sık değişen)
3. Page-specific: Sadece ilgili sayfalarda yükle
4. Analytics: Lazy load, kullanıcı etkileşimi sonrası