Next.js 15 ile Core Web Vitals Optimizasyonu
Google'ın sıralama algoritmasında Core Web Vitals artık kritik bir faktör. Yavaş yüklenen siteler sadece kullanıcıları kaybetmiyor, aynı zamanda SEO sıralamasında da geride kalıyor. Kurumsal web sitesi geliştirirken performans optimizasyonu baştan göz önünde bulundurulmalı.
Core Web Vitals Nedir?
Core Web Vitals, Google'ın kullanıcı deneyimini ölçmek için belirlediği 3 temel metrikten oluşur:
1. LCP (Largest Contentful Paint)
- İdeal değer: < 2.5 saniye
- Ne ölçer: Sayfadaki en büyük içeriğin yüklenme süresi
- Neden önemli: Kullanıcı ilk izlenimini belirler
2. CLS (Cumulative Layout Shift)
- İdeal değer: < 0.1
- Ne ölçer: Sayfa yüklenirken içeriklerin beklenmedik şekilde kayması
- Neden önemli: Kullanıcı yanlış yere tıklama yapar
3. INP (Interaction to Next Paint)
- İdeal değer: < 200ms
- Ne ölçer: Kullanıcı etkileşiminden görsel yanıta kadar geçen süre
- Neden önemli: Site ne kadar "responsive" hissettiriyor
Core Web Vitals Calculator
Sitenizin performans skorunu hesaplayın
İdeal: < 2.5s
İdeal: < 0.1
İdeal: < 200ms
Next.js 15'in Performans Özellikleri
Modern web tasarım projelerinde performans artık opsiyonel değil, zorunlu. Next.js 15 ile dijital çözümlerimiz daha hızlı ve verimli.
1. Server Components (Varsayılan)
Next.js 15'te tüm componentler varsayılan olarak Server Component. Bu ne anlama geliyor?
// app/products/page.tsx
// Bu artık otomatik olarak server component!
export default async function ProductsPage() {
const products = await db.product.findMany();
return (
<div>
{products.map(product => (
<ProductCard key={product.id} product={product} />
))}
</div>
);
}
Avantajları:
- Sıfır JavaScript client'a gönderilir
- Veritabanı sorguları doğrudan component içinde (CRM sistemleri gibi data-heavy uygulamalarda kritik)
- Hassas API key'ler server'da kalır
- İlk sayfa yükleme süresi dramatik düşüş (SEO için çok önemli)
2. Image Optimization (next/image)
E-ticaret projelerinde görsel optimizasyonu kritik önem taşır.
import Image from 'next/image';
export default function Hero() {
return (
<Image
src="/hero-image.jpg"
alt="Hero"
width={1920}
height={1080}
priority // LCP için kritik!
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
/>
);
}
next/image ne yapar:
- Otomatik WebP/AVIF dönüşümü
- Lazy loading (viewport dışındakiler yüklenmez)
- Responsive sizes (mobilde küçük, desktop'ta büyük) - Responsive tasarım
- CLS önleme (width/height belirtilince)
3. Font Optimization
// app/layout.tsx
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap', // CLS önleme
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return (
<html className={inter.variable}>
<body>{children}</body>
</html>
);
}
Font optimization avantajları:
- Self-hosted (Google Fonts'a harici istek yok)
- CLS sıfır (font-display: swap)
- Otomatik subsetting (sadece kullanılan karakterler)
4. Parallel Routes & Streaming
Dashboard ve panel sistemlerinde streaming kritik performans artışı sağlar.
// app/dashboard/layout.tsx
export default function DashboardLayout({
children,
analytics,
notifications
}) {
return (
<div>
<Suspense fallback={<AnalyticsSkeleton />}>
{analytics}
</Suspense>
<Suspense fallback={<NotificationsSkeleton />}>
{notifications}
</Suspense>
{children}
</div>
);
}
Streaming ne sağlar:
- Sayfa parça parça yüklenir
- Kullanıcı hemen içerik görmeye başlar
- Yavaş veri kaynağı tüm sayfayı bloklamaz (API entegrasyonları)
Gerçek Dünya Optimizasyon Örnekleri
Örnek 1: E-Ticaret Ürün Sayfası
Önce (Eski Next.js):
- LCP: 4.2s
- CLS: 0.28
- INP: 580ms
- Bundle size: 280KB
Sonra (Next.js 15):
- LCP: 1.1s (-74%)
- CLS: 0.001 (-99%)
- INP: 120ms (-79%)
- Bundle size: 85KB (-70%)
Yapılanlar:
- Server Components kullanıldı
- next/image ile görsel optimizasyonu
- Dynamic import ile code splitting
- Partial Prerendering ile instant load
Örnek 2: Blog Detay Sayfası
// app/blog/[slug]/page.tsx
import { Suspense } from 'react';
export default async function BlogPost({ params }) {
const post = await getPost(params.slug);
return (
<>
{/* Kritik içerik hemen yüklenir */}
<article>
<h1>{post.title}</h1>
<div dangerouslySetInnerHTML={{ __html: post.content }} />
</article>
{/* Related posts streaming ile lazy load */}
<Suspense fallback={<RelatedPostsSkeleton />}>
<RelatedPosts slug={params.slug} />
</Suspense>
{/* Comments daha da geç yüklenir */}
<Suspense fallback={<CommentsSkeleton />}>
<Comments postId={post.id} />
</Suspense>
</>
);
}
Adım Adım Optimizasyon Checklist
Profesyonel web tasarım hizmetimizle bu optimizasyonları baştan uyguluyoruz.
1. LCP İyileştirme
- Hero image için
priorityprop kullan - Font'ları
next/fontile optimize et - CDN kullan (Cloudflare, Vercel Edge) - Altyapı çözümlerimiz
- Server Components ile initial HTML render hızlandır
2. CLS İyileştirme
- Tüm image'lara
widthveheightbelirt - Font için
font-display: swapkullan - Dinamik içerikler için placeholder/skeleton ekle
- Ad slot'ları için reserve space
3. INP İyileştirme
- Heavy JavaScript'i dynamic import ile lazy load et
- useTransition kullanarak non-blocking updates yap
- Debounce/throttle search input'larında
- Web Worker ile heavy işlemleri offload et
Gerçek Sonuçlar, Gerçek Müşteriler
Projelerimizle elde edilen kanıtlanmış başarı hikayeleri
E-Ticaret & Retail
"Next.js 15'e geçiş sonrası sayfa yükleme hızımız %70 arttı. Conversion rate'imiz 2 katına çıktı!"
SaaS & B2B
"Server Components ve Image optimization sayesinde LCP'miz dramatik şekilde iyileşti."
Haber & İçerik
"Artık kullanıcılar okurken layout shift yaşamıyor. Bounce rate %35 düştü."
Next.js 15 Migration Rehberi
Mevcut web sitenizi Next.js 15'e migrate etmek mi istiyorsunuz? İletişime geçin.
1. Mevcut Projeyi Güncelle
npm install next@latest react@latest react-dom@latest
2. App Router'a Geçiş
pages/
index.tsx → app/page.tsx
blog/[slug].tsx → app/blog/[slug]/page.tsx
api/users.ts → app/api/users/route.ts
3. Server Component Refactor
// Önce (Client Component - Gereksiz)
'use client';
import { useEffect, useState } from 'react';
export default function Products() {
const [products, setProducts] = useState([]);
useEffect(() => {
fetch('/api/products').then(r => r.json()).then(setProducts);
}, []);
return <div>{products.map(...)}</div>;
}
// Sonra (Server Component - Daha Hızlı)
export default async function Products() {
const products = await db.product.findMany();
return <div>{products.map(...)}</div>;
}
Performans Monitoring
Yapay zeka destekli analiz araçlarımızla performansınızı sürekli izleriz.
Vercel Analytics ile İzleme
// app/layout.tsx
import { Analytics } from '@vercel/analytics/react';
export default function RootLayout({ children }) {
return (
<html>
<body>
{children}
<Analytics />
</body>
</html>
);
}
Google Search Console Core Web Vitals Raporu
- Google Search Console → Deneyim → Core Web Vitals
- "Kötü URL'ler" varsa detaya gir
- PageSpeed Insights ile test et
- Önerileri uygula
SSR vs SSG vs ISR - Hangisi Ne Zaman?
Blog sistemlerimizde ISR, e-ticaret çözümlerimizde SSR kullanıyoruz.
SSR (Server-Side Rendering)
Ne zaman: Her request'te dinamik veri (user-specific dashboard)
export const dynamic = 'force-dynamic';
SSG (Static Site Generation)
Ne zaman: Nadiren değişen içerik (blog posts, landing pages)
export default async function BlogPost() {
// Build time'da çalışır
}
ISR (Incremental Static Regeneration)
Ne zaman: Periyodik güncellenen içerik (ürün kataloğu, haber)
export const revalidate = 3600; // 1 saatte bir
Sonuç
Next.js 15 ile Core Web Vitals optimizasyonu artık çok daha kolay:
- Server Components ile sıfır JavaScript
- next/image ile otomatik görsel optimizasyonu
- Streaming ile instant page load
- Font optimization ile CLS sıfır
Ayrıca AEO (Answer Engine Optimization) ile Google AI Overview'da görünürlüğünüzü artırabilirsiniz.
Hemen Başlayın
K-ONTECH olarak işletmenizin web sitesini Next.js 15 ile Core Web Vitals standartlarına optimize ediyoruz. Tüm hizmetlerimizi ve başarı hikayelerimizi inceleyebilirsiniz.
Ücretsiz Danışmanlık İsteyin!
Projeniz için özel çözümlerimizi ve fiyatlarımızı öğrenin. Hemen yanıt veriyoruz!
Etiketler: #NextJS #WebPerformance #CoreWebVitals #SEO #WebGeliştirme
