First Contentful Paint (FCP) Nedir?

DursunKaptan · 27 Haz 2025

First Contentful Paint (FCP) Nedir?

First Contentful Paint (FCP), bir web sayfasının tarayıcı tarafından ilk kez herhangi bir içeriğinin (metin, resim, canvas vb.) render edilme süresini ölçen temel bir performans metriğidir. Kullanıcıya "sayfa yükleniyor" hissini veren ilk görsel geri bildirim anını ifade eder ve Core Web Vitals metriklerinden biridir.

FCP Neden Önemli?

Kullanıcı Algısı: Kullanıcılar, sayfanın çalıştığını FCP ile anlar ("Bir şeyler oluyor!").
SEO Etkisi: Google, FCP'yi sayfa hızı değerlendirmesinde kullanır (Core Web Vitals kapsamında).
Performans İşareti: Düşük FCP, sunucu ve ağ optimizasyonunun iyi olduğunu gösterir.

FCP Nasıl Çalışır?

Tarayıcı, sayfa yüklenirken aşağıdaki süreçleri takip eder:

HTML/CSS/JS İndirilir ve işlenmeye başlar.
DOM/CSSOM oluşturulur.
Render Ağacı (Render Tree) oluşur.
Layout (Yerleşim) hesaplanır.
Paint (Boyama) işlemiyle ekranda ilk içerik belirir → FCP zamanı kaydedilir.

Örnek FCP Öğeleri:

Bir başlık (<h1>) veya paragraf (<p>),
Logo resmi (<img>),
SVG veya canvas içeriği.

İyi ve Kötü FCP Değerleri

İyi (Good): 1.8 saniye veya altı
Geliştirilmeli (Needs Improvement): 1.8-3 saniye
Kötü (Poor): 3 saniye üzeri

Not: FCP, sayfanın tamamen kullanıma hazır olduğunu göstermez. Örneğin, bir yükleme çubuğu (spinner) FCP'yi tetikleyebilir. Ana içerik için LCP (Largest Contentful Paint) daha kritiktir.

FCP'yi Etkileyen Faktörler

Yavaş Sunucu Yanıtı (Yüksek TTFB)
- Optimize edilmemiş backend, yavaş veritabanı sorguları.
- Çözüm: CDN kullanın, önbelleğe alın, sunucu tepki süresini (TTFB) düşürün.
- <head> içindeki CSS/JS dosyalarının main thread'i bloklaması.
  - Kritik CSS'yi inline yapın.
  - JavaScript'i async veya defer ile yükleyin.

FCP ile LCP Arasındaki Fark

Metrik

Ölçtüğü Şey

Önem Derecesi

[td]FCP[/td][td]İlk içeriğin görünme süresi[/td][td]"Sayfa çalışıyor mu?"[/td][td]LCP[/td][td]En büyük içeriğin görünme süresi[/td][td]"Sayfa kullanıma hazır mı?"[/td]

FCP Nasıl Ölçülür?

Gerçek Kullanıcı Verisi (RUM):
- Google Search Console (Core Web Vitals raporu),
- web-vitals.js:
  javascript
  import { getFCP } from 'web-vitals';
  getFCP(console.log);
- Lighthouse (Chrome DevTools veya PageSpeed Insights),
- Chrome DevTools > Performance sekmesi.

FCP Optimizasyonu İçin 5 Pratik Adım

Sunucu Yanıt Süresini (TTFB) İyileştirin
- Önbellek, CDN, veritabanı optimizasyonu.
- <link rel="preload" as="font" href="font.woff2">

Örnek Kötü FCP Senaryoları

Senaryo 1: Sunucu yavaş → TTFB 3 saniye → FCP 3.5 saniye.
Senaryo 2: 2MB'lık bir CSS dosyası render'ı engelliyor → FCP 4 saniye.

Sonuç

FCP, kullanıcıların sayfanızın yüklenmeye başladığını görmesi için kritik bir metriktir. Optimizasyon için:

Sunucu hızını artırın,

Render engellemeyi ortadan kaldırın,

Kaynakları önceliklendirin.

First Contentful Paint (FCP) Nedir?

DursunKaptan

Astsubay Kıdemli Çavuş