FCP, sayfada ilk içerik parçasının (metin, görsel, SVG veya non-white canvas) ekranda görünmeye başladığı ana kadar geçen süreyi ölçen metriktir.
SEO tarafında FCP’nin değeri şurada: Google’ın performans değerlendirmeleri ve kullanıcı davranışı (özellikle mobilde “bekleme ≥ çıkış”) birbirini tetikler. FCP’yi iyileştirmek, LCP/INP gibi metriklere giden zinciri de hızlandırdığı için Google/Yandex/Bing’de rekabetçi sayfalarda daha stabil bir “sayfa deneyimi” tabanı kurmana yardımcı olur.
FCP Nedir?
FCP (First Contentful Paint), kullanıcı sayfaya girdiğinde tarayıcının DOM’dan ilk içerik öğesini render ettiği ana kadar geçen süredir. FCP’de “içerik” sayılan öğeler; metin, görsel, non-white <canvas> ve SVG gibi öğelerdir; iframe içeriği FCP hesabına dahil edilmez.
FCP Metriğinde Hangi Unsurlar Dikkate Alınır?
FCP, “sayfanın tamamen açılması” değil, ilk görsel geri bildirim anını ölçer. Bu yüzden FCP’yi etkileyen unsurlar genelde “ilk boyamayı başlatan” render yolundaki gecikmelerdir:
- Sunucu yanıtı ve ağ gecikmesi (TTFB/DNS/TLS): HTML geç gelirse tarayıcı render’a geç başlayamaz.
- Render-blocking CSS: Kritik CSS geç yüklenirse ilk boyama gecikir.
- JavaScript yükü ve ana thread blokajı: Ağır JS parsing/execute, ilk içerik çizimini geciktirebilir.
- Kritik font ve görsel davranışı: İlk içerik metinse font yükleme stratejisi, ilk boyamayı etkileyebilir (özellikle ilk ekranda).
- Client-side rendering yoğunluğu: İçeriğin büyük kısmı JS ile sonradan oluşturuluyorsa ilk render anı ileri kayabilir.
Ideal FCP Puanı Kaç Olmalı?
Google’ın FCP eşikleri şu şekilde sınıflanır (değerlendirme yaklaşımı Core Web Vitals’ta olduğu gibi genelde p75 mantığıyla okunur):
- İyi (Good): ≤ 1.8 saniye
Kullanıcı hızlı bir “ilk içerik” sinyali alır; sayfanın boş durmadığı anlaşılır.
- Geliştirilmeli (Needs improvement): 1.8 – 3.0 saniye
İlk içerik gecikir; özellikle mobilde “sayfa yavaş” algısı ve çıkış davranışı artabilir.
- Kötü (Poor): > 3.0 saniye
Kullanıcı uzun süre boş ekran görür; performans zincirinde kök nedenleri (TTFB, render-blocking, JS yükü) önceliklendirmek gerekir.
FCP Nasıl Ölçülür?
FCP’yi ölçerken hem lab hem de field verisini birlikte okumak en sağlıklısıdır; çünkü lab test tanı koyar, field veri ise gerçek kullanıcı deneyimini temsil eder.
- Google PageSpeed Insights: Lighthouse tabanlı lab metrikleri verir; ayrıca uygun sayfalarda CrUX/field özeti de gösterir.
- Lighthouse (Chrome DevTools): FCP’yi ve “neden gecikiyor?” kısmını (kritik istekler, render-blocking, main thread) görmek için idealdir.
- Google Search Console – Core Web Vitals: FCP’yi tek başına raporlamaz; fakat field data ile “sayfa deneyimi” sorunlarını URL grupları halinde takip edip kök nedenleri önceliklendirmeni sağlar.
- CrUX (Chrome UX Report): Gerçek kullanıcı trendini (mobil/desktop kırılımıyla) okumada güçlüdür.
- WebPageTest: Lokasyon/cihaz profilleriyle waterfall üzerinden “ilk boyama neden gecikiyor?” sorusuna detaylı cevap verir.
FCP Nasıl Optimize Edilir?
Aşağıdaki başlıklar, PageSpeed/Lighthouse’ta en sık çıkan uyarı kümeleriyle uyumlu şekilde “ne yap → neden işe yarar” mantığında hazırlanmıştır.
- TTFB’yi düşür (FCP’nin başlangıç kilidi)
HTML geç geliyorsa tarayıcı render’a geçemez; bu yüzden cache, CDN ve sunucu optimizasyonu FCP’yi doğrudan hızlandırır. Özellikle ilk isteğin yanıt süresi iyileştikçe FCP zinciri daha erken başlar.
- Render-blocking CSS’i azalt
Kritik CSS’i öne almak, kullanılmayan CSS’i temizlemek ve kritik olmayan stilleri ertelemek ilk boyamanın gecikmesini azaltır. FCP’de amaç “ilk ekranda gereken stiller hemen gelsin, geri kalanı sonra.”
- JavaScript yükünü hafiflet (main thread’i boşalt)
Ağır JS; parsing, compile ve execute süresiyle ilk boyamayı geciktirebilir. Gereksiz üçüncü parti scriptleri azaltmak, kritik olmayan JS’i ertelemek ve bundle’ı küçültmek FCP’yi hızlandırır.
- Kritik kaynakları doğru önceliklendir (preload/preconnect)
İlk ekranda gereken font/CSS gibi kaynakları doğru şekilde önceliklendirmek, tarayıcının ilk boyamayı daha erken yapmasına yardım eder. Özellikle font gecikmesiyle metin geç görünüyorsa bu adım etkili olur.
- Font stratejisini düzenle
Metin ilk içerikse font yükleme davranışı FCP’yi etkileyebilir. Uygun font davranışı ve mümkünse self-host yaklaşımı, ilk içerik boyamasını daha stabil hale getirir.
- Client-side rendering ağırlığını azalt (mümkünse SSR/ön render)
İlk içerik JS ile “sonradan kuruluyorsa” FCP doğal olarak gecikir. Kritik içeriği daha erken sunan mimari tercihleri FCP’yi ve genel algıyı iyileştirebilir.
Sonuç
FCP, kullanıcıya “site çalışıyor ve içerik geliyor” sinyalini veren ilk eşik olduğu için hız algısını ve sayfa deneyimi performansını doğrudan etkiler. FCP’yi TTFB + render-blocking + JS yükü ekseninde iyileştirdiğinde, hem Core Web Vitals zinciri daha sağlıklı ilerler hem de SEO tarafında daha stabil bir performans tabanı oluşur.
