Core Web Vitals: AIDE Bunları Nasıl Ölçer ve Optimize Eder?

Google PageSpeed Insights (PSI) 2024 sonunda Lighthouse v12'ye geçti ve eski "uses-optimized-images" + "modern-image-formats" audit'leri tek bir image-delivery-insight audit'inde birleşti. AIDE Mart 2026'da bu API değişikliğini destekleyecek şekilde güncellendi.

Bu yazı şunları açıklar:

AIDE'in PSI'dan hangi sinyalleri çektiği
Yeni image-delivery-insight audit'inin eskiden ne farkı var
Üç Core Web Vitals metriği (LCP / INP / CLS) için pratik optimizasyon

AIDE'in PSI entegrasyonu

Her tarama sırasında AIDE Lighthouse audit'lerini Google PSI v5 API'sından çeker. Bu, kendi Lighthouse koşumumuz olmadığından gerçek kullanıcı verisi (CrUX) + lab ölçümü kombinasyonu sağlar.

# packages/checks/src/aide_checks/integrations/pagespeed.py
result = await psi_client.audit(url, strategy="mobile")
# result.audits → {audit_id: AuditResult}

PSI yanıtından AIDE şu audit'leri okur:

| Audit | Check | Ne ölçer? | |---|---|---| | largest-contentful-paint | seo-largest-contentful-paint | LCP (sayfa içerik tamamlama süresi) | | interaction-to-next-paint | seo-interaction-to-next-paint | INP (etkileşim gecikmesi) | | cumulative-layout-shift | seo-cumulative-layout-shift | CLS (görsel kayma) | | image-delivery-insight | seo-image-optimization | görsel format, sıkıştırma, lazy-load | | unused-css-rules | perf-unused-css | gereksiz CSS bayt'ları | | render-blocking-resources | perf-render-blocking | kritik render'ı geciktiren kaynaklar |

image-delivery-insight: PSI v5'in birleştirdiği audit

Eskiden iki ayrı audit vardı:

uses-optimized-images — sıkıştırma uygunluğu
modern-image-formats — AVIF / WebP'ye geçiş tasarrufu

PSI v5 bunları tek bir image-delivery-insight altında birleştirdi. Yeni audit detayları farklı bir şema ile döner:

{
  "id": "image-delivery-insight",
  "score": 0.62,
  "details": {
    "type": "table",
    "items": [
      {
        "url": "https://siteniz.com/banner.jpg",
        "wastedBytes": 184320,
        "totalBytes": 290800,
        "modernFormats": "avif"
      }
    ]
  }
}

AIDE parser her iki şemayı da destekler — eski details.overallSavingsBytes ile yeni details.items[].wastedBytes ikisi de okunabilir. Yani PSI hangi versiyonu döndürürse döndürsün, seo-image-optimization check'i çalışır.

LCP optimizasyonu: 2.5 saniyeden hızlı

LCP (Largest Contentful Paint) sayfanın en büyük görsel öğesi ekrana çizilene kadar geçen süredir. Hedef: < 2.5 saniye (mobil 4G'de).

En sık LCP düşmanları:

Hero görseli compress edilmemiş → AVIF / WebP'ye geçir
Hero görseli <img loading="lazy"> ile etiketlenmiş → ilk fold içindeki görseller loading="eager" olmalı (yoksa default eager)
Hero görseline fetchpriority="high" verilmemiş → bu modern hint, tarayıcıya bu kaynağı önce çekmesini söyler:
```
<img src="/hero.avif" alt="..." fetchpriority="high" />
```
Hero font'u FOIT (flash of invisible text) yapıyor → <link rel="preload"> ile öncelikli yükle, font-display: swap kullan
Server cevap süresi (TTFB) yüksek → CDN edge cache, ClickHouse vb. analitik DB'leri ana request hattından çıkar

LCP elementi tarayıcı DevTools "Performance Insights" panelinde işaretlenir; AIDE'in raporu da eleman selector'ını gösterir.

INP optimizasyonu: 200ms'den hızlı

INP (Interaction to Next Paint) bir kullanıcı etkileşiminin (tıklama, klavye, dokunmatik) sonraki paint'e kadar geçen sürenin en kötü yüzdelik diliminin ölçümüdür. Hedef: < 200ms.

INP düşmanları neredeyse her zaman uzun JavaScript görevleri:

3rd-party script'ler ana thread'i bloke ediyor → analytics, chat widget'ları async/defer ile yükle, mümkünse Cloudflare Worker / Web Worker'a taşı
Hydration fırtınası → React 18+ useTransition, Suspense boundary'leri ile etkileşimi geciktirme
Event handler'lar uzun çalışıyor → 50ms'den uzun task'lar requestIdleCallback veya scheduler.postTask ile böl

// Bad: ana thread'i 400ms bloke eder
button.addEventListener('click', () => {
  for (let i = 0; i < 1e7; i++) heavyMath(i)
})

// Good: scheduler API ile böl
button.addEventListener('click', async () => {
  for (let i = 0; i < 1e7; i++) {
    if (i % 10000 === 0) await scheduler.yield()
    heavyMath(i)
  }
})

CLS optimizasyonu: 0.1'den düşük

CLS (Cumulative Layout Shift) sayfa yüklendikten sonra elementlerin beklenmedik kaymaları ölçer. Hedef: < 0.1.

CLS sorunları:

Görsel boyutları rezerve edilmemiş — <img> etiketinde width ve height attribute'ları olmalı:
```
<img src="/banner.avif" alt="..." width="1200" height="600" />
```
Web font geç yüklendiğinde içerik kayar (FOUT) — font-display: optional veya font matching ile fallback metric'lerini eşleştir
Reklam / iframe boyutu önceden bilinmiyor — aspect-ratio CSS ile yer rezerve et:
```
.ad-slot { aspect-ratio: 728 / 90; }
```
Dynamically inserted content (cookie banner, pop-up) — sayfa yüklendikten sonra DOM'a sokulan element'ler kayma yapar; mümkünse modal / fixed positioning kullan

AIDE skoruna nasıl yansır?

seo-largest-contentful-paint, seo-interaction-to-next-paint, seo-cumulative-layout-shift her biri Performance kategorisinde 5'er ağırlık taşır. Toplam Performance kategorisi SEO skorunda %20 paya sahiptir.

Bir örnek hesaplama:

LCP = 1.8s   → PASS (100%)
INP = 240ms  → WARNING (60%)
CLS = 0.07   → PASS (100%)
image-opt = 88% → PASS (100%)

Performance kategorisi = (100 + 60 + 100 + 100) / 4 = 90
SEO skoruna katkı = 90 × 0.20 = 18 puan

Detaylı algoritma için: SCORING_SYSTEM rehberi.

Pratik kontrol listesi

Bu beş madde tek başına ortalama bir SaaS sitesinin Performance skorunu 25–35 puan yukarı çekmeye yeter. AIDE'in SEO scan profili ile öncesi/sonrası karşılaştırmasını ölçebilirsin.