Web Sitem Neden Yavaştı? Nuxt 3 ile %90 Hız Artışı Sağlayan Sırlarla Tanışın!

Portfolyo sitem aleynaertin.com'u frontend developer olarak ilk deploy ettiğimde, her şey mükemmel görünüyordu. Ama Türkiye'den erişen ziyaretçilerim sayfaların yüklenmesini beklerken sıkılıp kaçıyordu. Lighthouse skorlarım berbattı: LCP 4 saniye civarı, TTFB 2-3 saniye, toplam yükleme süresi 8+ saniye. Kullanıcı deneyimi faciası! Neyse ki Nuxt 3, Strapi, Vercel üçlüsünde derinlemesine optimizasyon yaparak site hızını %90 artırdım. İşte adım adım nasıl yaptım.

Vercel Region'ı Frankfurt'a Taşıyarak Latency'yi Ezdim

Türkiye'den ABD (Washington) bölgesine ping atmak, TTFB'yi öldürüyordu – ortalama 200-300ms gecikme. Vercel'in varsayılan Edge ağı ABD odaklı olunca, CDN edge'leri uzak kalıyordu.

Çözüm: Proje ayarlarından region'ı fra1 (Frankfurt) olarak değiştirdim. Bu, Türkiye'ye 50-80ms mesafede bir edge sağladı. Sonuç? TTFB anında %60 düştü.

# Vercel CLI ile
vercel --prod --region fra1

Vercel dashboard'undan da Environments > Regions sekmesinden fra1 seçtim. Artık hydration bile daha hızlı!

Hybrid Rendering ve ISR ile TTFB'yi Devrimleştirdim

Nuxt 3'ün nitro.routeRules özelliğiyle sayfaları ISR moduna aldım. Strapi'den (Render'da host) dinamik veri çekiyorduk ama her request'te full SSR latency'si yaşıyorduk.

nuxt.config.ts'ye şu kuralları ekledim:

export default defineNuxtConfig({
  nitro: {
    routeRules: {
      '/': { isr: 3600 }, // Ana sayfa 1 saatte bir regenerate
      '/projeler/**': { isr: true }, // Proje sayfaları on-demand ISR
      '/blog/**': { isr: 3600 * 24 } // Blog günlük yenilenir
    }
  }
})

ISR ile statik shell önceden hazırlandı, Strapi fetch'i arka planda. TTFB 2.5s'den 250ms'ye indi – devrimsel! Hybrid rendering sayesinde SEO dostu static + dinamik kaldı.

Cloudinary + NuxtImg ile LCP'yi Roketledim

Standart <img>'ler LCP'yi mahvediyordu: Büyük hero görselleri fetch priority'siz yüklenmiyordu, lazy loading çakışması vardı.

@nuxt/image modülünü entegre ettim, Cloudinary provider ile:

// nuxt.config.ts
export default defineNuxtConfig({
  image: {
    provider: 'cloudinary',
    cloudinary: {
      baseURL: 'https://res.cloudinary.com/your-account/image/upload/'
    }
  }
})

Şablonlarda:

<NuxtImg
  src="/hero.jpg"
  alt="Aleyna Ertin Portfolyo"
  sizes="100vw"
  :format="['webp', 'avif']"
  fetchpriority="high"
  loading="eager"
  width="1200"
  height="600"
/>

LCP görseline fetchpriority="high" ve loading="eager" verdim (lazy çelişkisi yok artık). Küçük görsellerde loading="lazy". WebP/AVIF otomatik, boyutlar optimize. LCP 4s'den 0.8s'ye!

Sonuçlar? Lighthouse Patladı!

Öncesi: Performance 45, LCP 4.2s, TTFB 2.8s.

Sonrası: 95, LCP 0.9s, TTFB 300ms. %90 hız artışı!

aleynaertin.com şimdi roket! Senin sitende ne sorun var, söyle de birlikte çözelim.