Name: Enextware Technology
Address: Hacet Mah. Keykubat Blv. No:130 Kat: 1 Daire: 1 Parlayüksel Plaza, Alanya / Antalya, Alanya, Antalya, 07400, TR
Telephone: +90 536 628 0007
Price range: $$
Rating: 5

Google Core Web Vitals, 2021'den beri arama sıralamasında kritik bir faktör. 2025'te bu metrikler daha da önemli hale geldi. Bu rehberde, Core Web Vitals'ı optimize ederek SEO performansınızı nasıl artıracağınızı öğreneceksiniz.

Core Web Vitals Nedir?

Google'ın kullanıcı deneyimini ölçmek için belirlediği üç temel metrik:

1. Largest Contentful Paint (LCP)

Tanım: Sayfanın ana içeriğinin yüklenmesi için geçen süre

Hedefler:

• ✅ Mükemmel: <2.5 saniye

• ⚠️ İyileştirme Gerekli: 2.5-4 saniye

• ❌ Zayıf: >4 saniye

İstatistikler:

• LCP'si 2.5 saniyenin altında olan siteler: %25 daha fazla trafik

• Her 1 saniyelik LCP artışı: %7 conversion kaybı

• Mobile LCP ortalaması: 3.7 saniye (optimize edilmeli!)

2. First Input Delay (FID) / Interaction to Next Paint (INP)

Tanım: Kullanıcı etkileşimine verilen yanıt süresi

Not: 2024'ten itibaren FID yerine INP kullanılıyor

INP Hedefleri:

• ✅ Mükemmel: <200ms

• ⚠️ İyileştirme Gerekli: 200-500ms

• ❌ Zayıf: >500ms

Kullanıcı Etkisi:

• 100ms gecikme: %3 dönüşüm kaybı

• İyi INP skorlu siteler: %40 daha yüksek engagement

3. Cumulative Layout Shift (CLS)

Tanım: Sayfa yüklenirken beklenmeyen layout kaymaları

Hedefler:

• ✅ Mükemmel: <0.1

• ⚠️ İyileştirme Gerekli: 0.1-0.25

• ❌ Zayıf: >0.25

Kullanıcı Deneyimi:

• Yanlış tıklamalar: %65 kullanıcı şikayeti

• Mobilde daha kritik: %78 mobile kullanıcı etkileniyor

LCP Optimizasyonu

1. Server Response Time (TTFB) İyileştirme

Target: <800ms

Stratejiler:

// Next.js ile Server-Side Caching
import { unstable_cache } from 'next/cache';

const getCachedData = unstable_cache(
  async (id: string) => {
    return await db.getData(id);
  },
  ['data-cache'],
  { revalidate: 3600 } // 1 hour cache
);

CDN Kullanımı:

• Vercel Edge Network: Global <50ms response

• Cloudflare: 200+ data center

• AWS CloudFront: Regional optimization

Database Optimization:

• Connection pooling

• Query caching

• Index optimization

• Read replicas

2. Resource Loading Optimization

Critical CSS:

<head>
  <!-- Inline critical CSS -->
  <style>
    /* Above-the-fold styles */
    .hero { ... }
    .navigation { ... }
  </style>

  <!-- Preload important resources -->
  <link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin>
  <link rel="preload" href="/hero-image.webp" as="image">

  <!-- Defer non-critical CSS -->
  <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
</head>

Image Optimization:

import Image from 'next/image';

export default function Hero() {
  return (
    <div>
      {/* Priority loading for LCP image */}
      <Image
        src="/hero.jpg"
        alt="Hero Image"
        width={1920}
        height={1080}
        priority // This is crucial for LCP!
        quality={85}
        placeholder="blur"
        blurDataURL="data:image/jpeg;base64,..."
      />
    </div>
  );
}

3. Font Loading Optimization

Modern Font Loading:

/* font-display: swap prevents invisible text */
@font-face {
  font-family: 'Geist';
  src: url('/fonts/geist.woff2') format('woff2');
  font-display: swap;
  font-weight: 400;
}

Next.js Font Optimization:

import { Inter } from 'next/font/google';

const inter = Inter({
  subsets: ['latin'],
  display: 'swap',
  preload: true,
  variable: '--font-inter',
});

export default function Layout({ children }) {
  return (
    <html className={inter.variable}>
      <body>{children}</body>
    </html>
  );
}

INP/FID Optimizasyonu

1. JavaScript Bundle Reduction

Code Splitting:

import dynamic from 'next/dynamic';

// Lazy load heavy components
const HeavyChart = dynamic(() => import('./HeavyChart'), {
  ssr: false,
  loading: () => <ChartSkeleton />
});

// Route-based code splitting (automatic in Next.js)
export default function Page() {
  return <div>{/* Content */}</div>;
}

Bundle Analysis:

# Install bundle analyzer
npm install @next/bundle-analyzer

# Analyze bundle
ANALYZE=true npm run build

Results:

• Remove unused dependencies: %30 bundle size reduction

• Tree shaking: %20 reduction

• Dynamic imports: %40 faster initial load

2. Long Tasks Optimization

Web Workers for Heavy Computation:

// worker.ts
self.addEventListener('message', (e) => {
  const result = heavyComputation(e.data);
  self.postMessage(result);
});

// main.ts
const worker = new Worker(new URL('./worker.ts', import.meta.url));

worker.postMessage(data);
worker.addEventListener('message', (e) => {
  console.log('Result:', e.data);
});

Task Scheduling:

// Use requestIdleCallback for non-critical tasks
function scheduleNonCriticalWork(callback: () => void) {
  if ('requestIdleCallback' in window) {
    requestIdleCallback(callback);
  } else {
    setTimeout(callback, 1);
  }
}

scheduleNonCriticalWork(() => {
  // Analytics, logging, etc.
  trackPageView();
});

3. Third-Party Scripts Optimization

Script Loading Strategy:

import Script from 'next/script';

export default function Layout() {
  return (
    <>
      {/* Critical scripts - load immediately */}
      <Script src="https://example.com/critical.js" strategy="beforeInteractive" />

      {/* Non-critical scripts - load after interactive */}
      <Script src="https://www.googletagmanager.com/gtag/js" strategy="afterInteractive" />

      {/* Low priority scripts - lazy load */}
      <Script src="https://example.com/widget.js" strategy="lazyOnload" />
    </>
  );
}

CLS Optimizasyonu

1. Reserved Space for Dynamic Content

Images with Dimensions:

// ❌ Bad - causes layout shift
<img src="/image.jpg" alt="Product" />

// ✅ Good - reserves space
<img
  src="/image.jpg"
  alt="Product"
  width="800"
  height="600"
  style={{ aspectRatio: '4/3' }}
/>

// ✅ Best - Next.js Image
<Image
  src="/image.jpg"
  alt="Product"
  width={800}
  height={600}
/>

Skeleton Screens:

import { Suspense } from 'react';

function ProductSkeleton() {
  return (
    <div className="animate-pulse">
      <div className="h-48 bg-gray-200 rounded"></div>
      <div className="h-4 bg-gray-200 rounded mt-4 w-3/4"></div>
      <div className="h-4 bg-gray-200 rounded mt-2 w-1/2"></div>
    </div>
  );
}

export default function Page() {
  return (
    <Suspense fallback={<ProductSkeleton />}>
      <ProductList />
    </Suspense>
  );
}

2. Font Loading Impact

Prevent FOIT (Flash of Invisible Text):

@font-face {
  font-family: 'CustomFont';
  src: url('/fonts/custom.woff2') format('woff2');
  font-display: optional; /* Prevents layout shift */
}

3. Animations and Transitions

Use Transform instead of Layout Properties:

/* ❌ Bad - triggers layout */
.element {
  transition: height 0.3s;
}

/* ✅ Good - GPU accelerated */
.element {
  transition: transform 0.3s;
  will-change: transform;
}

/* Animate with translate */
.slide-in {
  transform: translateY(0);
}
.slide-out {
  transform: translateY(100%);
}

Monitoring ve Testing

1. Core Web Vitals Measurement

Real User Monitoring (RUM):

// web-vitals library
import { onCLS, onFID, onLCP } from 'web-vitals';

function sendToAnalytics(metric: any) {
  const body = JSON.stringify(metric);
  const url = '/api/analytics';

  if (navigator.sendBeacon) {
    navigator.sendBeacon(url, body);
  } else {
    fetch(url, { body, method: 'POST', keepalive: true });
  }
}

onCLS(sendToAnalytics);
onFID(sendToAnalytics);
onLCP(sendToAnalytics);

2. Performance Testing Tools

Automated Testing:

• Lighthouse CI: Continuous performance monitoring

• WebPageTest: Multi-location testing

• Chrome DevTools: Local debugging

• PageSpeed Insights: Google's official tool

CI/CD Integration:

# .github/workflows/performance.yml
name: Performance
on: [pull_request]

jobs:
  lighthouse:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - uses: treosh/lighthouse-ci-action@v9
        with:
          urls: |
            https://example.com
          budgetPath: ./budget.json

SEO Impact

Ranking Factors

Google Data:

• Core Web Vitals: Top 3 ranking factor

• Mobile performance: %60 weight increase

• Page experience signals: %40 CTR improvement

Business Impact:

• 100ms LCP improvement: %1 revenue increase

• Good Core Web Vitals: %24 lower bounce rate

• Mobile optimization: %70 more conversions

Search Console Integration

Monitoring:

1. Google Search Console → Core Web Vitals report

2. Identify URLs with issues

3. Fix and request reindexing

4. Monitor improvements

Timeline:

• Detection: 28 gün veri toplama

• İyileştirmeler: 7-14 gün sonra görünür

• Ranking etkisi: 4-8 hafta

Enextware Performance Garantisi

Tüm web sitelerimizde Core Web Vitals garantisi:

Hedeflerimiz:

• LCP: <1.5 saniye ✓

• INP: <100ms ✓

• CLS: <0.05 ✓

• Mobile Performance Score: >90 ✓

Sonuçlar:

• %156 organic trafik artışı (6 ay)

• %42 conversion rate iyileştirmesi

• %38 bounce rate azaltma

• Google ilk sayfa: %85 anahtar kelime başarısı

Ücretsiz Performance Audit

Web siteniz için ücretsiz Core Web Vitals analizi:

• Detaylı performans raporu

• Özelleştirilmiş iyileştirme önerileri

• ROI hesaplaması

• Implementation roadmap

İletişim:

📞 +90 536 628 0007

📧 info@enextware.com

🌐 https://enextware.com.tr

Google Core Web Vitals Optimizasyonu: 2025 SEO Rehberi