Hızlı Sayfa Deneyimi İçin Core Web Vitals Optimizasyonu

Yazar: Leoliva Yayınlama Tarihi: 3 Ekim 2024

Core Web Vitals, Google'ın web sayfalarının kullanıcı deneyimini ölçmek için kullandığı üç temel metriği ifade eder: Largest Contentful Paint (LCP), First Input Delay (FID) ve Cumulative Layout Shift (CLS). Bu metrikleri optimize etmek, sitenizin performansını ve kullanıcı deneyimini önemli ölçüde iyileştirebilir.

1. Largest Contentful Paint (LCP) Optimizasyonu

LCP, sayfanın en büyük içerik öğesinin yüklenme süresini ölçer. Hedef, LCP'nin 2.5 saniye veya daha az olmasıdır.

Örnek: Görsel Optimizasyonu


<!-- HTML -->
<picture>
  <source media="(max-width: 600px)" srcset="small-image.jpg">
  <source media="(max-width: 1500px)" srcset="medium-image.jpg">
  <img src="large-image.jpg" alt="Optimize edilmiş görsel" loading="lazy">
</picture>

<script>
// JavaScript: Görsel yükleme performansını ölçme
const imgs = document.querySelectorAll('img');
let totalLoadTime = 0;

imgs.forEach(img => {
  const startTime = performance.now();
  img.onload = () => {
    const endTime = performance.now();
    totalLoadTime += endTime - startTime;
    console.log(`Görsel yükleme süresi: ${endTime - startTime}ms`);
  };
});

window.addEventListener('load', () => {
  console.log(`Toplam görsel yükleme süresi: ${totalLoadTime}ms`);
});
</script>

2. First Input Delay (FID) Optimizasyonu

FID, kullanıcının ilk etkileşiminden (örneğin, bir düğmeye tıklama) tarayıcının bu etkileşime yanıt vermeye başlamasına kadar geçen süreyi ölçer. Hedef, FID'in 100ms veya daha az olmasıdır.

Örnek: JavaScript Yürütmesini Optimize Etme


<!-- HTML -->
<button id="heavyButton">Ağır İşlem</button>

<script>
// Ağır işlemi web worker'a taşıma
const worker = new Worker('heavy-task.js');

document.getElementById('heavyButton').addEventListener('click', () => {
  worker.postMessage('start');
});

worker.onmessage = (e) => {
  console.log('İşlem tamamlandı:', e.data);
};

// FID'i ölçme
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('FID:', entry.processingStart - entry.startTime);
  }
});

observer.observe({type: 'first-input', buffered: true});
</script>

// heavy-task.js
self.onmessage = function(e) {
  if (e.data === 'start') {
    // Ağır işlem simülasyonu
    let result = 0;
    for (let i = 0; i < 1000000000; i++) {
      result += i;
    }
    self.postMessage(result);
  }
};

3. Cumulative Layout Shift (CLS) Optimizasyonu

CLS, sayfa yüklenirken veya etkileşim sırasında beklenmedik düzen değişikliklerini ölçer. Hedef, CLS'nin 0.1 veya daha az olmasıdır.

Örnek: Düzen Kaymasını Önleme


<!-- HTML -->
<style>
.image-container {
  width: 300px;
  height: 200px; /* Sabit yükseklik belirleme */
  background-color: #f0f0f0; /* Yükleme öncesi yer tutucu renk */
}
.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* Görüntüyü kırpmadan sığdırma */
}
</style>

<div class="image-container">
  <img src="large-image.jpg" alt="Optimize edilmiş görsel" loading="lazy">
</div>

<script>
// CLS'yi ölçme
let cls = 0;
new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntries()) {
    if (!entry.hadRecentInput) {
      cls += entry.value;
      console.log('Güncel CLS değeri:', cls);
    }
  }
}).observe({type: 'layout-shift', buffered: true});

// Sayfa yüklendiğinde son CLS değerini raporla
window.addEventListener('load', () => setTimeout(() => {
  console.log('Toplam CLS:', cls);
}, 1000));
</script>

4. Genel Performans İyileştirmeleri

Core Web Vitals'ı iyileştirmek için genel performans optimizasyonları da önemlidir.

Örnek: Kaynak Önceliklendirme ve Lazy Loading


<!-- HTML -->
<head>
  <link rel="preload" href="critical.css" as="style">
  <link rel="preload" href="important-font.woff2" as="font" type="font/woff2" crossorigin>
</head>
<body>
  <link rel="stylesheet" href="critical.css">
  <script src="app.js" defer></script>

  <img src="above-fold-image.jpg" alt="Hemen görünen görsel">
  <img src="below-fold-image.jpg" alt="Aşağıdaki görsel" loading="lazy">

  <script>
  // Performans metriklerini ölçme
  window.addEventListener('load', () => {
    setTimeout(() => {
      const timing = performance.getEntriesByType('navigation')[0];
      console.log('Sayfa Yükleme Süresi:', timing.loadEventEnd - timing.navigationStart);
      console.log('DOM Content Loaded:', timing.domContentLoadedEventEnd - timing.navigationStart);
    }, 0);
  });
  </script>
</body>

5. Core Web Vitals Ölçüm ve İzleme Aracı

Core Web Vitals metriklerini düzenli olarak ölçmek ve izlemek önemlidir.

Örnek: Core Web Vitals İzleme Aracı


<!-- HTML -->
<div id="coreWebVitalsReport"></div>

<script>
// Core Web Vitals'ı ölçme ve raporlama
function measureCWV() {
  const cwvReport = {};

  new PerformanceObserver((entryList) => {
    const lcpEntry = entryList.getEntries().at(-1);
    cwvReport.LCP = lcpEntry.renderTime || lcpEntry.loadTime;
  }).observe({type: 'largest-contentful-paint', buffered: true});

  new PerformanceObserver((entryList) => {
    const fidEntry = entryList.getEntries()[0];
    cwvReport.FID = fidEntry.processingStart - fidEntry.startTime;
  }).observe({type: 'first-input', buffered: true});

  new PerformanceObserver((entryList) => {
    cwvReport.CLS = entryList.getEntries().reduce((sum, entry) => sum + entry.value, 0);
  }).observe({type: 'layout-shift', buffered: true});

  // Raporlama
  setTimeout(() => {
    const reportElement = document.getElementById('coreWebVitalsReport');
    reportElement.innerHTML = `
      <h3>Core Web Vitals Raporu</h3>
      <p>LCP: ${cwvReport.LCP?.toFixed(2) || 'N/A'} ms</p>
      <p>FID: ${cwvReport.FID?.toFixed(2) || 'N/A'} ms</p>
      <p>CLS: ${cwvReport.CLS?.toFixed(3) || 'N/A'}</p>
    `;
  }, 3000); // 3 saniye sonra rapor oluştur
}

measureCWV();
</script>

Sonuç

Core Web Vitals optimizasyonu, web sitenizin performansını ve kullanıcı deneyimini önemli ölçüde iyileştirebilir. Bu metrikleri optimize etmek için:

Görselleri ve diğer medya öğelerini optimize edin
JavaScript yürütmesini iyileştirin ve gereksiz kod yükünü azaltın
Düzen kaymalarını önlemek için sayfa yapısını dikkatli bir şekilde planlayın
Kritik CSS'i inline olarak yükleyin ve diğer kaynakları önceliklendirin
Lazy loading tekniklerini kullanın
CDN (İçerik Dağıtım Ağı) kullanarak içerik teslimini hızlandırın
Sunucu yanıt sürelerini iyileştirin
Core Web Vitals metriklerini düzenli olarak ölçün ve izleyin

Bu optimizasyonları yaparak, sitenizin arama motoru sıralamalarını iyileştirebilir, kullanıcı memnuniyetini artırabilir ve dönüşüm oranlarınızı yükseltebilirsiniz. Unutmayın ki web performansı optimizasyonu sürekli bir süreçtir ve düzenli olarak gözden geçirilmesi gerekir.

Dijital Pazarlama

Web Hizmetleri

Yapay Zeka ve Veri Senkanisazyon

Barındırma ve Diğerleri