DA
Tüm yazılara dön
Core Web Vitals Optimizasyonu: Google'ın Sayfa Deneyimi Metriklerini İyileştirme

Core Web Vitals Optimizasyonu: Google'ın Sayfa Deneyimi Metriklerini İyileştirme

Core Web VitalsWeb PerformanceSEOGoogle RankingUser Experience

Core Web Vitals Optimizasyonu: Google'ın Sayfa Deneyimi Metriklerini İyileştirme

Core Web Vitals, Google tarafından 2021'de ranking faktörü olarak belirlenen kullanıcı deneyimi metrikleridir. Bu metrikler, web sitenizin gerçek kullanıcı deneyimini ölçer ve arama motoru sıralamanızı doğrudan etkiler.

Core Web Vitals Nedir?

Core Web Vitals, Google'ın Page Experience Update'inin merkezinde yer alan üç temel metrikten oluşur:

1. Largest Contentful Paint (LCP)

  • Ölçtüğü: Sayfa yükleme performansı
  • İdeal değer: 2.5 saniye altı
  • Ölçüm: En büyük content elementinin render süresi

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

  • Ölçtüğü: Sayfa etkileşim cevap verme süresi
  • İdeal değer: 100ms altı (FID), 200ms altı (INP)
  • Ölçüm: İlk kullanıcı etkileşiminden yanıt süresine kadar

3. Cumulative Layout Shift (CLS)

  • Ölçtüğü: Görsel kararlılık
  • İdeal değer: 0.1 altı
  • Ölçüm: Beklenmeyen layout kaymaları

Core Web Vitals'ın SEO Etkisi

Ranking Impact:

CWV Skor Durumu → SEO Etkisi → Traffic Impact
Tümü İyi       → +5-10%    → +15-20%
Kısmen İyi     → Nötr      → -%5
Tümü Kötü      → -5-15%    → -20-30%

Mobile-First Impact:

  • Mobil cihazlarda daha kritik
  • Progressive Web App (PWA) gereksinimleri
  • AMP sayfalarında otomatik optimizasyon

Core Web Vitals Test Aracımızı Kullanma

Core Web Vitals Test Aracımız ile performansınızı kapsamlı analiz edebilirsiniz:

Aracın Özellikleri:

  1. Real User Monitoring (RUM)

    • Gerçek kullanıcı verileri
    • 28 günlük ortalama
    • Device type breakdown

  2. Lab Data Analysis

    • Lighthouse integration
    • Controlled environment test
    • Reproducible results

  3. Performance Suggestions

    • Prioritized optimization list
    • Impact estimation
    • Implementation guide

Test Sonuçlarını Yorumlama:

Metrik    | İyi      | İyileştirilebilir | Kötü
----------|----------|-------------------|--------
LCP       | ≤ 2.5s   | 2.5s - 4.0s      | > 4.0s
FID       | ≤ 100ms  | 100ms - 300ms    | > 300ms
INP       | ≤ 200ms  | 200ms - 500ms    | > 500ms
CLS       | ≤ 0.1    | 0.1 - 0.25       | > 0.25

Largest Contentful Paint (LCP) Optimizasyonu

LCP'yi Etkileyen Faktörler:

  1. Server Response Time
  2. Render-blocking Resources
  3. Resource Load Time
  4. Client-side Rendering

LCP İyileştirme Stratejileri:

1. Critical Resource Optimization

<!-- Hero image preloading -->
<link rel="preload" as="image" href="hero-image.jpg" />

<!-- Critical CSS inline -->
<style>
  .hero {
    background: url("hero-image.jpg");
  }
  .header {
    position: fixed;
    top: 0;
  }
</style>

<!-- Non-critical CSS lazy load -->
<link
  rel="preload"
  href="non-critical.css"
  as="style"
  onload="this.onload=null;this.rel='stylesheet'"
/>

2. Image Optimization

<!-- Responsive images with modern formats -->
<picture>
  <source srcset="hero.avif" type="image/avif" />
  <source srcset="hero.webp" type="image/webp" />
  <img
    src="hero.jpg"
    alt="Hero image"
    width="1200"
    height="600"
    loading="eager"
    fetchpriority="high"
  />
</picture>

3. Server-Side Optimization

// Next.js optimization
export default function HomePage() {
  return (
    <div>
      <Image
        src="/hero.jpg"
        alt="Hero"
        width={1200}
        height={600}
        priority={true}
        placeholder="blur"
        blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ..."
      />
    </div>
  );
}

First Input Delay (FID) ve INP Optimizasyonu

FID/INP'yi Etkileyen Faktörler:

  1. JavaScript Execution Time
  2. Main Thread Blocking
  3. Large JavaScript Bundles
  4. Third-party Scripts

Optimizasyon Teknikleri:

1. JavaScript Splitting

// Code splitting with dynamic imports
const HeavyComponent = lazy(() => import("./HeavyComponent"));

// Route-based splitting
const HomePage = lazy(() => import("./pages/Home"));
const AboutPage = lazy(() => import("./pages/About"));

function App() {
  return (
    <Suspense fallback={<Loading />}>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/about" element={<AboutPage />} />
      </Routes>
    </Suspense>
  );
}

2. Web Workers Usage

// main.js
const worker = new Worker("heavy-calculation.js");

worker.postMessage({
  type: "CALCULATE",
  data: largeDataSet,
});

worker.onmessage = function (e) {
  if (e.data.type === "RESULT") {
    updateUI(e.data.result);
  }
};

// heavy-calculation.js
self.onmessage = function (e) {
  if (e.data.type === "CALCULATE") {
    const result = performHeavyCalculation(e.data.data);
    self.postMessage({
      type: "RESULT",
      result: result,
    });
  }
};

3. Event Delegation

// Yerine bu kötü yaklaşım:
document.querySelectorAll(".button").forEach((btn) => {
  btn.addEventListener("click", handleClick);
});

// Bu daha iyi yaklaşım:
document.addEventListener("click", function (e) {
  if (e.target.matches(".button")) {
    handleClick(e);
  }
});

4. Input Responsiveness

// Debouncing for input handlers
function debounce(func, delay) {
  let timeoutId;
  return function (...args) {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
}

const searchInput = document.getElementById("search");
const debouncedSearch = debounce(performSearch, 300);
searchInput.addEventListener("input", debouncedSearch);

Cumulative Layout Shift (CLS) Optimizasyonu

CLS'yi Etkileyen Faktörler:

  1. Images without dimensions
  2. Ads, embeds, iframes
  3. Dynamic content injection
  4. Web fonts (FOIT/FOUT)

CLS İyileştirme Stratejileri:

1. Image Dimensions

<!-- Yanlış - boyutları belirtilmemiş -->
<img src="image.jpg" alt="Image" />

<!-- Doğru - boyutlar belirtilmiş -->
<img src="image.jpg" alt="Image" width="800" height="600" />

<!-- Modern CSS aspect-ratio -->
<style>
  .image-container {
    aspect-ratio: 16 / 9;
    overflow: hidden;
  }
  .image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
</style>

2. Font Loading Optimization

<!-- Font preloading -->
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

<!-- Font-display swap -->
<style>
  @font-face {
    font-family: "CustomFont";
    src: url("font.woff2") format("woff2");
    font-display: swap; /* Prevents FOIT */
  }
</style>

<!-- Fallback font matching -->
<style>
  body {
    font-family: "CustomFont", "Arial", sans-serif;
    /* Size adjustment for fallback */
    font-size-adjust: 0.55;
  }
</style>

3. Dynamic Content Placeholders

/* Skeleton loading for dynamic content */
.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

.ad-placeholder {
  width: 300px;
  height: 250px;
  background-color: #f5f5f5;
  border: 1px dashed #ddd;
}

4. Iframe Reservations

<!-- Ad container with reserved space -->
<div class="ad-container" style="width: 300px; height: 250px;">
  <script
    async
    src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"
  ></script>
  <ins
    class="adsbygoogle"
    style="display:block"
    data-ad-client="ca-pub-xxxxx"
    data-ad-slot="xxxxx"
    data-ad-format="rectangle"
  ></ins>
</div>

Technical Implementation Best Practices

1. Performance Monitoring

// Web Vitals measurement
import { getCLS, getFID, getFCP, getLCP, getTTFB } from "web-vitals";

function sendToAnalytics(metric) {
  gtag("event", metric.name, {
    event_category: "Web Vitals",
    event_label: metric.id,
    value: Math.round(
      metric.name === "CLS" ? metric.value * 1000 : metric.value
    ),
    non_interaction: true,
  });
}

getCLS(sendToAnalytics);
getFID(sendToAnalytics);
getLCP(sendToAnalytics);

2. Resource Hints Implementation

<!-- DNS prefetch for external domains -->
<link rel="dns-prefetch" href="//fonts.googleapis.com" />
<link rel="dns-prefetch" href="//www.google-analytics.com" />

<!-- Preconnect for critical external resources -->
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

<!-- Prefetch for next navigation -->
<link rel="prefetch" href="/next-page.html" />

<!-- Preload critical resources -->
<link rel="preload" href="critical.css" as="style" />
<link rel="preload" href="hero-image.jpg" as="image" />

3. Critical CSS Extraction

// Gulp task for critical CSS
const gulp = require("gulp");
const critical = require("critical");

gulp.task("critical", function () {
  return critical.generate({
    inline: true,
    base: "dist/",
    src: "index.html",
    dest: "index-critical.html",
    width: 1300,
    height: 900,
    minify: true,
  });
});

WordPress Core Web Vitals Optimization

Plugin Recommendations:

  1. WP Rocket: Comprehensive caching
  2. Autoptimize: CSS/JS optimization
  3. EWWW Image Optimizer: Automatic image optimization
  4. Asset CleanUp: Remove unused CSS/JS

WordPress Specific Fixes:

// functions.php optimizations

// Remove unused scripts
function remove_unused_scripts() {
    if (!is_admin()) {
        wp_deregister_script('jquery-migrate');
        wp_dequeue_style('wp-block-library');
    }
}
add_action('wp_enqueue_scripts', 'remove_unused_scripts');

// Preload critical resources
function add_resource_hints() {
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/style.css" as="style">';
    echo '<link rel="preload" href="' . get_template_directory_uri() . '/js/main.js" as="script">';
}
add_action('wp_head', 'add_resource_hints');

// Lazy load images
function add_lazy_loading($content) {
    $content = str_replace('<img', '<img loading="lazy"', $content);
    return $content;
}
add_filter('the_content', 'add_lazy_loading');

E-commerce Specific Optimizations

Product Pages:

// Product image optimization
function optimizeProductImages() {
  const productImages = document.querySelectorAll(".product-image");

  productImages.forEach((img, index) => {
    if (index === 0) {
      // First image - high priority
      img.loading = "eager";
      img.fetchPriority = "high";
    } else {
      // Other images - lazy load
      img.loading = "lazy";
    }
  });
}

// Shopping cart optimization
function optimizeCartInteractions() {
  const cartButtons = document.querySelectorAll(".add-to-cart");

  cartButtons.forEach((button) => {
    button.addEventListener("click", function (e) {
      // Immediate visual feedback
      this.textContent = "Adding...";
      this.disabled = true;

      // Async cart update
      setTimeout(() => {
        updateCart(this.dataset.productId);
      }, 0);
    });
  });
}

Mobile-First Core Web Vitals

Mobile Optimization Strategies:

/* Mobile-first CSS */
.hero-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

@media (min-width: 768px) {
  .hero-image {
    height: 400px;
  }
}

/* Touch-friendly interactive elements */
.button {
  min-height: 44px;
  min-width: 44px;
  touch-action: manipulation;
}

/* Optimize for mobile viewport */
@viewport {
  width: device-width;
  initial-scale: 1;
}

Progressive Enhancement:

// Feature detection and progressive enhancement
if ("IntersectionObserver" in window) {
  // Use modern lazy loading
  lazyLoadWithIntersectionObserver();
} else {
  // Fallback for older browsers
  lazyLoadWithScrollEvent();
}

if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/sw.js");
}

Monitoring ve Continuous Improvement

1. Real User Monitoring Setup

// Custom CWV tracking
class CoreWebVitalsTracker {
  constructor() {
    this.metrics = {};
    this.setupTracking();
  }

  setupTracking() {
    // LCP tracking
    new PerformanceObserver((entryList) => {
      const entries = entryList.getEntries();
      const lastEntry = entries[entries.length - 1];
      this.metrics.lcp = lastEntry.startTime;
      this.sendMetric("LCP", lastEntry.startTime);
    }).observe({ entryTypes: ["largest-contentful-paint"] });

    // FID tracking
    new PerformanceObserver((entryList) => {
      for (const entry of entryList.getEntries()) {
        this.metrics.fid = entry.processingStart - entry.startTime;
        this.sendMetric("FID", this.metrics.fid);
      }
    }).observe({ entryTypes: ["first-input"] });
  }

  sendMetric(name, value) {
    // Send to analytics
    gtag("event", "core_web_vitals", {
      metric_name: name,
      metric_value: Math.round(value),
      page_location: window.location.href,
    });
  }
}

new CoreWebVitalsTracker();

2. Performance Budget

{
  "budget": {
    "lcp": 2500,
    "fid": 100,
    "cls": 0.1,
    "fcp": 1800,
    "ttfb": 600
  },
  "alerts": {
    "slack_webhook": "https://hooks.slack.com/...",
    "email": "dev@company.com"
  }
}

Sonuç

Core Web Vitals optimizasyonu, modern SEO'nun vazgeçilmez bir parçasıdır. Core Web Vitals test aracımızla düzenli olarak performansınızı ölçerek:

  • Google ranking'inizde artış sağlayın
  • Kullanıcı deneyimini iyileştirin
  • Conversion oranlarınızı artırın
  • Mobil performansınızı optimize edin

Unutmayın: Core Web Vitals optimizasyonu teknik bir süreç olmakla birlikte, asıl amacı kullanıcılarınıza daha hızlı ve sorunsuz bir deneyim sunmaktır. Her optimizasyonu kullanıcı perspektifinden değerlendirin ve sürekli ölçüm yaparak iyileştirmeleri takip edin.

Back to all posts