What event ends the First Contentful Paint timer?

The browser draws the first text, image, SVG, or non-white canvas content

Every network request completes

The largest visible element finishes rendering

The page becomes fully interactive

Which statement about FCP and rankings is correct?

FCP is a diagnostic metric, not a Core Web Vital

FCP is one of the three Core Web Vitals

FCP is the only Lighthouse metric Google ranks on

A page has a slow TTFB and a slow FCP. Where should the investigation begin?

Server response, caching, redirects, and connection setup

Why should you inspect a filmstrip alongside FCP?

To verify the first painted content is meaningful to the visitor

To convert field data into lab data

To make Lighthouse use a faster network

To calculate Cumulative Layout Shift manually

İlk İçerikli Boyama (FCP)

TL;DR — First Contentful Paint (FCP), ziyaretçinin boş beyaz bir ekran yerine sayfanızdaki ilk içeriği — herhangi bir metni, görseli veya grafiği — gördüğü andır. Ne kadar hızlıysa o kadar iyidir; 1,8 saniyenin altı “iyi” kabul edilir. Yararlı bir hız kontrolüdür, ancak Google’ın sıralamada kullandığı metriklerden biri değildir.

FCP gerçekte nedir?

Birisi sayfanızın bağlantısına tıkladığında, tarayıcı sayfanızı getirip işlerken kısa bir süre hiçbir şeye — boş bir ekrana — bakar. First Contentful Paint, bu boş ekranın gerçek bir şeye dönüştüğü andır: bir başlık, logo, fotoğraf veya ziyaretçinin gerçekten görebildiği herhangi bir şey.

Fikrin tamamı bundan ibarettir. FCP tek bir basit soruyu yanıtlar: “Kullanıcı, sayfanın çalıştığını ve bir şeyler yaptığını ne kadar sürede görecek?” İçeriği yarım saniyede boyayan bir sayfa hızlı hissettirir. Üç saniye boyunca boş kalan bir sayfa bozukmuş gibi hissettirir — insanlar da sayfadan ayrılır.

Neler “içerik” sayılır?

FCP, tarayıcı aşağıdakilerden herhangi birini ekrana çizdiğinde tetiklenir:

Metin (başlık, paragraf veya gezinme bağlantısı)
Arka plan görselleri dâhil görseller
<svg> grafikleri
Beyaz olmayan bir <canvas> öğesi

Tek başına düz bir arka plan rengi sayılmaz — bu, First Paint adı verilen farklı ve daha erken bir olaydır. FCP yalnızca gerçek içerik göründüğünde ölçülür.

İyi bir skor nedir?

Google’ın gerçek ziyaretçiler üzerinden ölçülen aralıkları şöyledir:

FCP süresi	Değerlendirme
1,8 saniye veya daha kısa	İyi
1,8–3,0 saniye	İyileştirme gerekli
3,0 saniyeden uzun	Zayıf

FCP değerinizi, Core Web Vitals değerlerinizi de gösteren PageSpeed Insights ve Lighthouse gibi araçların raporlarında görebilirsiniz.

FCP Google sıralamalarımı etkiler mi?

Hayır — doğrudan etkilemez. Çoğu kişinin yanlış anladığı nokta budur. Google’ın sıralamada gerçekten kullandığı metrikler üç Core Web Vital olan LCP, INP ve CLS’dir. FCP bunlardan biri değildir.

Yine de takip etmeye değer olmasının nedeni şudur: FCP’yi yavaşlatan etkenler — ağır çalışan bir sunucu, sayfanın çizilmesini engelleyen büyük stil sayfaları ve komut dosyaları — çoğu zaman bir sıralama sinyali olan Largest Contentful Paint’i (LCP) olumsuz etkileyen etkenlerle aynıdır. Bu nedenle FCP’nin temel nedenlerini gidermek sıklıkla LCP’ye de yardımcı olur — ancak bunu garanti etmez; çünkü LCP’nin kendine özgü nedenleri de vardır (belirli en büyük öğenin boyutu ve yükleme önceliği). FCP’yi bir duman alarmı gibi düşünün: kontrol etmeye değerdir, ancak yangının söndüğünü kanıtlamaz.

Hızlı çözümler

FCP’niz yavaşsa olağan şüpheliler ve yapabilecekleriniz şunlardır:

Oluşturmayı engelleyen dosyalar. Sayfanızın <head> bölümündeki CSS ve JavaScript, yüklenmeleri tamamlanana kadar tarayıcının herhangi bir şey çizmesini engelleyebilir. Bir numaralı neden budur.
Yavaş bir sunucu. Sunucunuzun yanıt vermesi uzun sürüyorsa (yüksek Time to First Byte), baytlar ulaşana kadar tarayıcı boyama yapamaz.
Metninizi gizleyen yazı tipleri. Bazı yazı tipi yapılandırmaları, web yazı tipi yüklenirken metni üç saniyeye kadar görünmez bırakır. Kuralı font-display: swap olarak değiştirmek yedek metni hemen gösterir.

Laboratuvar ve alan verileri arasındaki farkı, FCP/LCP tanı zincirini ve eksiksiz çözüm listesini içeren teknik sürümü mü istiyorsunuz? Advanced sekmesine geçin.

TL;DR — FCP, gezinmenin başlangıcından herhangi bir sayfa içeriğinin (metin, görsel, <svg> veya beyaz olmayan <canvas>) ilk kez oluşturulmasına kadar geçen süredir. Bir Core Web Vital değildir — tamamlayıcı, hem laboratuvar hem de alan ortamında kullanılan bir tanı metriği ve LCP’nin yapı taşlarından biridir (FCP, LCP’den önce veya onunla aynı anda gerçekleşir). Alan eşikleri (p75): İyi ≤ 1,8 sn, iyileştirme gerekli ≤ 3,0 sn, zayıf > 3,0 sn. Lighthouse 10’da Performans skorunun %10’unu oluşturur. FCP’nin saati gezinmeyle başladığından yönlendirme süresini, bağlantı kurulumunu ve TTFB’yi içerir; bu nedenle laboratuvar (Lighthouse) ve alan (CrUX) değerleri sıklıkla farklılaşır. Sorunu bulunduğu yerde giderin: önce oluşturmayı engelleyen CSS/JS, ardından TTFB, sonra yazı tipleri.

FCP tam olarak neyi ölçer?

Buradaki doğruluk temelini, Philip Walton’ın web.dev makalesindeki Google tanımı oluşturur: “First Contentful Paint (FCP) measures the time from when the user first navigated to the page to when any part of the page’s content is rendered on the screen.” (çeviri) “First Contentful Paint (FCP), kullanıcının sayfaya ilk kez gitmeye başladığı andan sayfa içeriğinin herhangi bir bölümünün ekranda oluşturulduğu ana kadar geçen süreyi ölçer.” Aynı belgeye göre “Content” şu anlama gelir: “text, images (including background images), <svg> elements, or non-white <canvas> elements.” (çeviri) “metin, görseller (arka plan görselleri dâhil), <svg> öğeleri veya beyaz olmayan <canvas> öğeleri.”

Bütün yükü taşıyan sözcük herhangi sözcüğüdür. FCP, neyin oluşturulduğuyla ilgilenmez — 40 piksellik bir logo, tam boyutlu bir ana görselle aynı şekilde sayılır. Bu, “ekranda henüz herhangi bir şey var mı?” sinyalidir; tam da bu nedenle bir tamamlanma metriği değil, erken göstergedir.

Kolayca gözden kaçabilecek ve değeri yorumlama biçiminizi değiştiren bir ayrıntı vardır: FCP’nin saati gezinmeyle başlar, dolayısıyla HTML’niz daha ayrıştırılmadan önce gerçekleşen her şeyi kapsar. Google’ın kendi Key Point ifadesi şöyledir: “FCP includes any unload time from the previous page, connection set up time, redirect time, and Time To First Byte (TTFB) which can be significant when measured in the field.” (çeviri) “FCP, önceki sayfanın boşaltılma süresini, bağlantı kurulum süresini, yönlendirme süresini ve alanda ölçüldüğünde önemli olabilen Time To First Byte (TTFB) süresini içerir.” Yanıt vermesi 1,5 sn süren bir sunucu, tarayıcı tek bir baytı bile işlemeden 1,8 sn’lik bütçenizin büyük bölümünü tüketmiş olur.

FCP bir Core Web Vital DEĞİLDİR

Çoğu sayfa bu konuda kaçamak konuştuğu için açık söyleyeyim: FCP bir Core Web Vital değildir ve Google’ın sıralama sinyallerinin bir parçası değildir. Core Web Vitals; LCP, INP ve CLS’dir — Google’ın Arama sıralamasıyla ilgili Core Web Vitals sayfasında FCP’den hiç söz edilmez.

Google’ın sınıflandırmasına göre FCP, tanı amacıyla yararlı olan ve “Other Web Vital” olarak adlandırılan tamamlayıcı bir metriktir. web.dev bunu şöyle ifade eder: “the metrics Time to First Byte (TTFB) and First Contentful Paint (FCP) are both vital aspects of the loading experience, and are both useful in diagnosing issues with LCP (slow server response times or render-blocking resources, respectively).” (çeviri) “Time to First Byte (TTFB) ve First Contentful Paint (FCP) metriklerinin ikisi de yükleme deneyiminin hayati unsurlarıdır ve LCP sorunlarının tanılanmasında — sırasıyla yavaş sunucu yanıt süreleri veya oluşturmayı engelleyen kaynaklar bakımından — yararlıdır.”

Dolayısıyla paydaşlara sunulacak dürüst çerçevenin iki yönü vardır ve ikisini de çekinmeden belirtmelisiniz:

FCP sıralamaları doğrudan etkilemez. FCP’yi “SEO için” optimize etmeyin.
FCP, sıralamaları etkileyen LCP için çok iyi bir tanı metriğidir. Oluşturmayı engelleyen kaynaklar önce FCP’de kendini gösterir.

FCP ile First Paint (FP) arasındaki fark

Bu ikisi sürekli birbirine karıştırılır:

First Paint (FP), tarayıcı herhangi bir şeyi — gerçek içerik içermeyen düz bir arka plan rengini bile — boyadığında tetiklenir.
FCP yalnızca uygun içerik oluşturulduğunda tetiklenir: metin, görseller (arka plan görselleri dâhil), <svg> öğeleri veya beyaz olmayan <canvas> öğeleri. Bu, genel bir “herhangi bir DOM içeriği” kuralı değil, spesifikasyonda tanımlanmış belirli bir listedir. Arka plan görseli DOM’da metin olmadığı hâlde sayıldığı için bu ayrımı doğru biçimde korumak önemlidir.

Dolayısıyla her zaman FP ≤ FCP’dir. Çoğu sayfada ikisi neredeyse aynıdır; çünkü üzerinde içerik bulunmayan bir arka plan renginin boyanması nadirdir. Aralarında anlamlı bir fark olduğunda bu genellikle, herhangi bir gerçek içerikten önce dekoratif bir arka planın boyandığı anlamına gelir. Paint Timing API hem first-paint hem de first-contentful-paint girdilerini döndürür; ancak analiz edilmeye değer olan FCP’dir. FP nadiren eyleme geçirilebilir bir bilgi sunar.

FCP ile LCP arasındaki fark

İnsanların birbirine karıştırdığı diğer ikili şöyledir:

FCP = herhangi bir içeriğin boyandığı an. Erken tetiklenir. Küçük bir logo veya gezinme bağlantısı olabilir.
LCP = görünüm alanındaki en büyük öğenin oluşturulduğu an. FCP ile aynı anda veya FCP’den sonra tetiklenir.

Google’ın ifadesiyle FCP, herhangi bir içeriğin; LCP ise ana içeriğin ne zaman boyandığını ölçer. Bu nedenle LCP’nin daha seçici olması amaçlanır. Bunu “daha seçici” olarak okuyun, “doğruluğu onaylanmış” olarak değil — iki metrik de sayfanın gerçek ana içeriğinin tamamlandığını veya ziyaretçi için yararlı olduğunu kanıtlamaz. FCP yalnızca uygun bir şeyin boyandığını; LCP ise uygun adayların en büyüğünün boyandığını doğrular. Bir sayfanın FCP’si hızlı (logo 0,5 sn’de), LCP’si yavaş (ana görsel 4 sn’de) olabilir — bu farkın kendisi yararlı bir tanı sinyalidir. FCP’niz LCP’nize yakınsa bu da çoğu zaman iyiye işarettir: İlk boyanan öğenin aynı zamanda en büyük öğe olduğu ve kullanıcı için önemsiz arayüz süslerine erken boyama harcanmadığı anlamına gelir.

Bilinmeye değer bir ölçüm tuhaflığı vardır: kaynaklar arası görsel zamanlamasına ilişkin güvenlik kısıtlamaları nedeniyle tarayıcı API’si nadir durumlarda LCP’yi FCP’den daha erken bildirebilir. Bu, fiziksel olarak gerçekleşmiş bir olay değil, ölçümden kaynaklanan bir artefakttır.

Eşikler — laboratuvar ve alan verileri neden uyuşmaz?

Alan eşikleri (CrUX, p75): İyi ≤ 1,8 sn · iyileştirme gerekli ≤ 3,0 sn · zayıf > 3,0 sn. Google, sayfa yüklemelerinin mobil ve masaüstü olarak ayrılarak 75. yüzdelik dilimde ölçülmesini önerir.

Ancak Lighthouse masaüstünde farklı ve daha katı eşikler kullanır — yeşil yaklaşık 0–0,9 sn, turuncu 0,9–1,6 sn, kırmızı ise 1,6 sn’nin üzeridir — çünkü laboratuvar gerçek dünya koşullarını değil, simüle edilmiş bir cihazda temiz ve kısıtlanmış bir Chrome oturumunu çalıştırır. (Aşağıdaki skor ağırlıkları gibi bu aralıklar da Lighthouse sürümüne özgüdür; burada yazının hazırlandığı sıradaki güncel denetim belgesi esas alınmıştır.) Lighthouse FCP skoru “a comparison of your page’s FCP time and FCP times for real websites, based on data from the HTTP Archive.” (çeviri) “FCP skorunuz, HTTP Archive verilerine dayanarak sayfanızın FCP süresiyle gerçek web sitelerinin FCP sürelerinin karşılaştırılmasıdır.”

Bu, FCP hakkında en sık karşılaşılan kafa karışıklığıdır; dolayısıyla şu ayrımı iyice benimseyin:

1,8 sn’lik “iyi” sınırı alan (CrUX p75) eşiğidir. Lighthouse masaüstünün “yeşil” sınırı yaklaşık 0,9 sn’dir. Bunlar farklı amaçlara hizmet eden farklı ölçeklerdir.

Alan ve laboratuvar değerleri, birinin evrensel olarak “daha doğru” olmasından değil, esas olarak farklı kitleleri örneklemelerinden dolayı ayrışır. Lighthouse, sabit cihaz ve ağ koşullarında tek bir temiz oturum çalıştırır. Alan/CrUX ise gerçek cihazları, gerçek ağları, önbellek durumlarını ve gezinme türlerini bir araya getirir — normal bir gezinmedeki gibi otomatik olarak yeni bir FCP üretmeyen geri/ileri önbelleği geri yüklemeleri ve önceden oluşturulmuş sayfalar da buna dâhildir; bunlar için ayrı yaşam döngüsü işlemleri gerekir (web-vitals kütüphanesi bunu sizin için yapar). Çoğu sitede alan değeri gerçekten daha yüksek görünür — gerçek kullanıcılar, laboratuvar çalıştırmasının atladığı yönlendirme zincirlerini, önceki sayfanın boşaltılma süresini ve soğuk bağlantıları beraberinde getirir — ancak bu bir eğilimdir, kural değildir. Laboratuvar ve alan arasındaki farkı sorun olarak yorumlamadan önce benzer koşulları karşılaştırdığınızdan emin olun (aynı cihaz sınıfı ve aynı ağ koşulları). Gerçek dünyadaki değeriniz için alan verilerini, tanılama için Lighthouse’ı kullanın.

FCP’nin Lighthouse skorundaki yeri

Bu yazı hazırlandığı sırada güncel sürüm olan — ancak kalıcı bir değer sunmayan — Lighthouse 10’da FCP, Performans skorunun %10’unu oluşturur. Ağırlıkların tamamı şöyledir:

Metrik	Ağırlık
Total Blocking Time (TBT)	%30
Largest Contentful Paint (LCP)	%25
Cumulative Layout Shift (CLS)	%25
First Contentful Paint (FCP)	%10
Speed Index	%10

Performans skoru, her bir metrik skorunun ağırlıklı ortalamasıdır. Google, araştırmaları geliştikçe ağırlıkların zaman içinde değiştiğini belirtir — FCP, Lighthouse 8’den 10’a kadar %10 düzeyinde kalmıştır; ancak “%10” değerini değişmez kabul etmeden önce kullandığınız sürümde bunu doğrulayın. Pratik açıdan bakıldığında kusursuz bir FCP, Lighthouse skorunuzu yalnızca belirli bir ölçüde yükseltebilir. Kötü bir FCP de çoğu zaman kötü bir LCP’ye işaret eder (ortak temel nedenleri vardır); ancak bu, skorun garanti ettiği bir sonuç değil, kontrol edilmeye değer bir örtüşmedir.

FCP’nin yavaş olmasına ne yol açar?

Kabaca öncelik sırasına göre:

Oluşturmayı engelleyen kaynaklar — bir numaralı sorundur. <head> içindeki CSS ve senkron JS tarayıcıyı beklemeye zorlar: Bu dosyalar indirilip ayrıştırılana kadar tarayıcı CSSOM’u ve oluşturma ağacını kuramaz, dolayısıyla hiçbir şeyi boyayamaz.
Yüksek TTFB — baytlar ulaşmadan FCP tetiklenemez. Yavaş bir sunucu ilk domino taşıdır ve FCP ölçümünün içindedir.
Yönlendirme zincirleri — her yönlendirme, ilk bayttan önce eklenen tam bir gidiş-dönüştür.
Web yazı tipi yükleme stratejisi — font-display: block (veya herhangi bir kuralın bulunmaması) metni yaklaşık 3 saniyeye kadar görünmez bırakabilir. Arka planda teknik olarak boyama gerçekleşse bile kullanıcı yararlı hiçbir şey görmez.

FCP nasıl düzeltilir?

Belgelerde bulunmayan bir öncelik sırasıyla eksiksiz listeyi burada bulabilirsiniz. Bunlar evrensel çözümler değil, yaygın müdahale noktalarıdır — sayfanıza uymayabilecek çözümlere (ön bağlantı kurma, önceden yükleme veya font-display değişikliği) başvurmadan önce sizin FCP adayınızı gerçekte hangi kaynağın veya aşamanın geciktirdiğini belirlemek için kendi izinizi ya da film şeridinizi inceleyin:

Önce bunları yapın (en büyük kazanımlar):

Oluşturmayı engelleyen CSS ve JavaScript’i ortadan kaldırın. İlk ekranda gereken kritik CSS’yi doğrudan <head> içine satır içi olarak ekleyin; kalanını eşzamansız yükleyin; kritik olmayan komut dosyalarına async/defer ekleyin. Bir <link> etiketini başka yere taşımak işe yaramaz — etiket nerede bulunursa bulunsun, tüm CSS yüklenip ayrıştırılana kadar tarayıcı boyama yapmaz.
TTFB’yi (sunucu yanıt süresini) azaltın. Önbellekleme, CDN veya daha hızlı bir kaynak sunucu — ilk baytın daha erken gönderilmesini sağlayan her şey FCP’yi doğrudan kısaltır.
Yazı tipi yüklemesini düzeltin. font-display: swap (yedek metni hemen gösterir ve web yazı tipi hazır olduğunda ona geçer) veya font-display: optional (web yazı tipi önbellekte değilse onu atlar) kullanın. Kritik metinlerde font-display: block kullanmayın — FCP açısından en kötü seçenektir.

Ardından geri kalanını düzenleyin:

<link rel="preconnect"> ile gerekli kaynak sunuculara önceden bağlanın — önemli üçüncü taraf kaynak sunucularla erkenden bağlantı kurmak 100–500 ms kazandırabilir.
Kritik bir yazı tipi veya LCP görseli için önemli istekleri önceden yükleyin (<link rel="preload">).
CSS’yi küçültün, kullanılmayan CSS’yi ve kullanılmayan JavaScript’i kaldırın — daha küçük dosyalar daha hızlı ayrıştırılır ve boyamanın önündeki engeli daha çabuk kaldırır.
Birden fazla yönlendirmeden, çok büyük ağ yüklerinden ve aşırı DOM boyutundan kaçının; statik varlıkları verimli bir önbellek politikasıyla sunun ve kritik istek derinliğini en aza indirin. Bunların tümü ilk boyamaya katkıda bulunan genel yük düzenlemeleridir.

FCP → TTFB → LCP tanı zinciri

FCP’yi pratikte böyle kullanırdım; belgelerin işaret edip geliştirmediği çerçeve de budur. Üç yükleme metriğini tek bir iş akışı olarak ele alın:

FCP yüksekse → oluşturmayı engelleyen kaynakları kontrol edin (<head> içindeki CSS/JS). Bu, en yaygın neden ve en hızlı kazanımdır.
TTFB’yi de kontrol edin — FCP bunu içerdiğinden yavaş bir sunucu, oluşturmayı engelleyen kaynaklar henüz devreye girmeden FCP’yi yükseltir. web.dev’in rehberliğine göre TTFB hem FCP’den hem LCP’den önce gerçekleştiği için sunucunuz, kullanıcıların 75. yüzdelik diliminin “iyi” bir FCP değerine ulaşmasını sağlayacak kadar hızlı yanıt vermelidir.
Aynı sorunlar çoğu zaman LCP’ye de zincirleme yansır — bu, gerçekten sıralama sinyali olan metriktir — çünkü FCP ve LCP sıklıkla ortak temel nedenlere sahiptir. Bu, kontrol edilmeye değer bir örtüşmedir; garanti değildir. LCP’nin kendine özgü etkenleri vardır (belirli en büyük öğenin boyutu, önceliği ve yükleme yolu), dolayısıyla FCP’nin nedenlerini gidermek LCP’nin de düzeltileceğini garanti etmez. Burası bakılacak doğru ilk yerdir, son adım değildir.

Bir SEO uzmanı açısından FCP’nin değeri budur: Daha seçici LCP ölçümü henüz tamamlanmadan, yükleme yolunun sağlıklı olup olmadığı hakkında hızlı ve düşük maliyetli bir erken sinyal verir.

Yapay zekâ özeti

Advanced sürümünün kısa özeti:

FCP = gezinmenin başlangıcından herhangi bir içeriğin ilk kez oluşturulmasına kadar geçen süre — metin, görseller (arka plan görselleri dâhil), <svg> veya beyaz olmayan <canvas>. “Ekranda henüz herhangi bir şey var mı?” sinyalidir.
FCP bir Core Web Vital DEĞİLDİR. Sıralama sinyalleri LCP, INP ve CLS’dir. FCP, doğrudan sıralama faktörü değil, hem laboratuvarda hem de alanda kullanılan tamamlayıcı bir tanı metriğidir.
LCP’nin yapı taşlarından biridir (FCP, LCP’den önce veya onunla aynı anda gerçekleşir); bu nedenle, sıralamaları etkileyen LCP’ye zarar veren oluşturmayı engelleyen kaynakları ve yavaş TTFB’yi de sıklıkla yakalar. Ancak FCP’nin nedenlerini gidermek LCP’nin düzeltileceğini garanti etmez; LCP’nin kendine özgü etkenleri vardır.
Alan eşikleri (CrUX p75): İyi ≤ 1,8 sn · iyileştirme gerekli ≤ 3,0 sn · zayıf > 3,0 sn.
Laboratuvar ≠ alan; “alan değeri her zaman daha yüksektir” ifadesi bir eğilimdir, kural değildir. Lighthouse masaüstünün yaklaşık 0,9 sn’lik “yeşil” sınırı, sabit koşullardaki tek bir temiz çalıştırmayı temel aldığı için 1,8 sn’lik alan eşiğinden daha katıdır. Alan/CrUX; gerçek cihazları, ağları, önbellek durumlarını ve gezinme türlerini (bfcache geri yüklemeleri ve önceden oluşturulmuş sayfalar dâhil) bir araya getirir. Farkı sorun olarak yorumlamadan önce örneklem gruplarını eşleştirin — gerçek dünyadaki değeriniz için alan verilerini, tanılama için laboratuvar verilerini kullanın.
FCP ve FP: First Paint, arka plan rengi bile olsa herhangi bir boyamada tetiklenir; FCP ise uygun içerik (metin, arka plan görselleri dâhil görseller, SVG veya beyaz olmayan canvas) gerektirir. Her zaman FP ≤ FCP’dir.
FCP ve LCP: FCP = herhangi bir uygun içerik; LCP = uygun adayların en büyüğü. İkisi de sayfanın gerçek ana içeriğinin tamamlandığını veya yararlı olduğunu kanıtlamaz — bunlar vekil metriklerdir. Hızlı FCP ile yavaş LCP arasındaki fark gerçek ve yaygındır.
Lighthouse 10’daki ağırlığı (bu yazı hazırlandığı sırada güncel): %10 — TBT %30, LCP %25, CLS %25, FCP %10, Speed Index %10; ağırlıklar Lighthouse sürümleri arasında değişir.
Başlıca çözümler, sırasıyla: oluşturmayı engelleyen CSS/JS’yi ortadan kaldırın → TTFB’yi azaltın → yazı tiplerini düzeltin (font-display: swap/optional) → ön bağlantı kurup gerekli istekleri önceden yükleyin → küçültme/önbellek/DOM düzenlemeleri yapın.

Resmî belgeler

Google’ın FCP hakkındaki birincil kaynak belgeleri.

web.dev (Google)

First Contentful Paint (FCP) — Philip Walton’ın temel tanımı, “nelerin içerik sayıldığı” listesi, 1,8 sn eşiği, TTFB/yönlendirmeler hakkındaki Key Point ve Paint Timing API ile web-vitals kütüphanesini kullanarak FCP’nin nasıl ölçüleceği.
Web Vitals — FCP’nin konumu: Core Web Vitals’ı (LCP, INP, CLS) tamamlayan ve LCP’yi tanılamak için yararlı olan bir “Other Web Vital.”
Largest Contentful Paint (LCP) — FCP ile LCP arasındaki ayrım ve iki metriğin birbiriyle ilişkisi.
Time to First Byte (TTFB) — TTFB’nin neden FCP’den önce gerçekleştiği ve FCP’ye dâhil olduğu.
User-centric performance metrics — FCP’nin hem laboratuvar hem de alan metriği olarak sınıflandırılması.

Lighthouse / Chrome Developers

First Contentful Paint audit — Lighthouse masaüstü değerlendirme aralıkları (yeşil ≤ 0,9 sn) ve FCP skorunun HTTP Archive verileriyle karşılaştırılarak nasıl hesaplandığı.
Lighthouse performance scoring — Lighthouse 10 Performans skorunda FCP’nin %10’luk payı dâhil olmak üzere metrik ağırlıkları.

Google Search Central

Core Web Vitals & Google Search — sıralamayla ilgili sayfa; LCP, INP ve CLS’yi listeler. Asıl önemli nokta, FCP’nin bu listede bulunmamasıdır.

Kaynaktan alıntılar

Google belgelerindeki resmî açıklamalar. Her bağlantı, kaynak sayfadaki alıntılanan bölüme doğrudan gider.

web.dev — tanım

“First Contentful Paint (FCP) measures the time from when the user first navigated to the page to when any part of the page’s content is rendered on the screen.” (çeviri) “First Contentful Paint (FCP), kullanıcının sayfaya ilk kez gitmeye başladığı andan sayfa içeriğinin herhangi bir bölümünün ekranda oluşturulduğu ana kadar geçen süreyi ölçer.” — Philip Walton, First Contentful Paint (FCP), web.dev (6 Aralık 2023’te güncellendi). Alıntıya git

web.dev — eşik

“sites should strive to have a First Contentful Paint of 1.8 seconds or less.” (çeviri) “Siteler, First Contentful Paint değerini 1,8 saniye veya altında tutmaya çalışmalıdır.” — aynı kaynak. Alıntıya git

web.dev — FCP’nin kapsadığı süreler (Key Point)

“FCP includes any unload time from the previous page, connection set up time, redirect time, and Time To First Byte (TTFB) which can be significant when measured in the field.” (çeviri) “FCP, önceki sayfanın boşaltılma süresini, bağlantı kurulum süresini, yönlendirme süresini ve alanda ölçüldüğünde önemli olabilen Time To First Byte (TTFB) süresini içerir.” — aynı kaynak.

web.dev — FCP’nin Core Web Vitals’a göre rolü

“the metrics Time to First Byte (TTFB) and First Contentful Paint (FCP) are both vital aspects of the loading experience, and are both useful in diagnosing issues with LCP (slow server response times or render-blocking resources, respectively).” (çeviri) “Time to First Byte (TTFB) ve First Contentful Paint (FCP) metriklerinin ikisi de yükleme deneyiminin hayati unsurlarıdır ve LCP sorunlarının tanılanmasında — sırasıyla yavaş sunucu yanıt süreleri veya oluşturmayı engelleyen kaynaklar bakımından — yararlıdır.” — Web Vitals, web.dev. Alıntıya git

Lighthouse — FCP skoru nasıl hesaplanır?

“Your FCP score is a comparison of your page’s FCP time and FCP times for real websites, based on data from the HTTP Archive.” (çeviri) “FCP skorunuz, HTTP Archive verilerine dayanarak sayfanızın FCP süresiyle gerçek web sitelerinin FCP sürelerinin karşılaştırılmasıdır.” — First Contentful Paint audit, developer.chrome.com.

Lighthouse — Performans skoru nasıl çalışır?

“The Performance score is a weighted average of the metric scores.” (çeviri) “Performans skoru, metrik skorlarının ağırlıklı ortalamasıdır.”
“The weightings have changed over time because the Lighthouse team is regularly doing research and gathering feedback to understand what has the biggest impact on user-perceived performance.” (çeviri) “Lighthouse ekibi, kullanıcı tarafından algılanan performans üzerinde neyin en büyük etkiye sahip olduğunu anlamak için düzenli olarak araştırma yapıp geri bildirim topladığından, ağırlıklar zaman içinde değişmiştir.” — Lighthouse performance scoring, developer.chrome.com.

Not: Yukarıdaki web.dev ve Chrome Developers sayfaları büyük ölçüde statik HTML olarak oluşturulur ve derin bağlantılar, sözcüğü sözcüğüne alıntılanan dizeleri hedefler. Birkaç pasajın (Key Point bilgi kutusu ve Lighthouse skor metodolojisi satırları) kararlı metin parçası bağlantıları bulunmadığından bunlar #:~:text= derin bağlantısı olmadan alıntılanmıştır; herhangi bir alıntıyı kesin kabul etmeden önce canlı sayfalarda doğrulayın. Lighthouse ağırlıkları Lighthouse 10 için verilmiştir — daha yeni bir Lighthouse sürümü yayımlandıysa yeniden doğrulayın.

Yavaş FCP için triyaj kontrol listesi

FCP yüksek olduğunda bu listeyi sırayla izleyin — liste kabaca en büyük kazanımdan başlayacak şekilde düzenlenmiştir:

FCP kısa başvuru kılavuzu

Alan eşikleri (CrUX, 75. yüzdelik dilim)

FCP süresi	Değerlendirme
≤ 1,8 sn	İyi
1,8–3,0 sn	İyileştirme gerekli
> 3,0 sn	Zayıf

Lighthouse masaüstü değerlendirmesi (laboratuvar — not: alan ölçümünden daha katıdır)

FCP süresi	Renk
0–0,9 sn	Yeşil (hızlı)
0,9–1,6 sn	Turuncu (orta)
1,6 sn’nin üzeri	Kırmızı (yavaş)

Lighthouse 10 Performans skoru ağırlıkları (bu yazı hazırlandığı sırada güncel — ağırlıklar Lighthouse sürümleri arasında değişir)

Metrik	Ağırlık
Total Blocking Time	%30
Largest Contentful Paint	%25
Cumulative Layout Shift	%25
First Contentful Paint	%10
Speed Index	%10

Birbirinden ayrıştırılmış üç yükleme metriği

Metrik	Tetiklendiği an…	Core Web Vital mı?
First Paint (FP)	tarayıcı, arka plan rengi bile olsa herhangi bir şeyi boyadığında	Hayır
First Contentful Paint (FCP)	herhangi bir gerçek içerik (metin/görsel/SVG/canvas) boyandığında	Hayır (tanı metriği)
Largest Contentful Paint (LCP)	görünüm alanındaki en büyük öğe oluşturulduğunda	Evet

Olayların sırası: FP ≤ FCP ≤ LCP.

FCP için “içerik” sayılanlar metin · görseller (arka plan görselleri dâhil) · <svg> öğeleri · beyaz olmayan <canvas> öğeleri

Kısa bilgiler

FCP’nin saati gezinmeyle başlar — yönlendirme süresini, bağlantı kurulumunu ve TTFB’yi içerir.
FCP hem laboratuvarda hem de alanda ölçülebilir.
font-display: swap/optional kullanın; block seçeneğinden kaçının (metin yaklaşık 3 sn’ye kadar görünmez kalabilir).
Üçüncü taraf kaynak sunuculara ön bağlantı kurmak 100–500 ms kazandırabilir.

FCP ölçüm araçları

Alan (gerçek kullanıcı) verileri

PageSpeed Insights — URL’nizin CrUX p75 FCP (alan) değerini bir Lighthouse (laboratuvar) çalıştırmasıyla birlikte gösterir.
Chrome User Experience Report (CrUX) — API veya BigQuery üzerinden erişilebilen, alan değerlerinin arkasındaki gerçek kullanıcı veri kümesidir.
web-vitals JavaScript kütüphanesi — kendi ziyaretçilerinizden FCP verisi toplamak için onFCP(console.log) ekleyin (veya sonucu analiz sisteminize gönderin); kütüphane bfcache ve arka plan sekmesi uç durumlarını işler.

Laboratuvar (simüle edilmiş) verileri

Lighthouse — Chrome DevTools, PageSpeed Insights veya CLI içinde kullanılabilir. FCP’yi tanılamak için kullanın (“Eliminate render-blocking resources” denetimi temel denetimdir).
Chrome DevTools Performance panel — kaydedilmiş bir yüklemede first paint ve first contentful paint olaylarının tam olarak ne zaman tetiklendiğini görün.

Paint Timing API ile kendiniz ölçün

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

Veya web-vitals kütüphanesini kullanın (önerilir)

import {onFCP} from 'web-vitals';
onFCP(console.log);

Ham API’nin işlemediği, web-vitals kütüphanesinin ise ele aldığı birkaç durum vardır: Kütüphane arka plan sekmelerinde tetiklenen FCP’yi yok sayar, sayfa geri/ileri önbelleğinden geri yüklendiğinde FCP’yi yine bildirir (bfcache geri yüklemesinde yeni bir gezinme olayı otomatik olarak tetiklenmediğinden bunun açıkça işlenmesi gerekir) ve önceden oluşturulmuş sayfalarda saatin başlangıç noktası olarak gezinme başlangıcı yerine activationStart değerini kullanır. Kaynaklar arası iframe boyama zamanlaması ise bilinen bir eksikliktir — ana içeriği böyle bir iframe içinde oluşturulan sayfa, yanıltıcı derecede hızlı bir FCP gösterebilir.

Gerçek darboğazı gizleyen FCP hataları

FCP’yi bir Core Web Vital olarak değerlendirmek. FCP yararlı bir tanı metriğidir; ancak Google’ın sıralama sistemlerinde kullanılan Core Web Vitals, LCP, INP ve CLS’dir. FCP’yi alan CWV verilerinin yerine koymak için değil, boş ekran aşamasını araştırmak için kullanın.
İlk boyanan öğe olduğu için küçük bir logoyu optimize etmek. Daha erken ancak anlamsız bir boyama, yararlı sayfa içeriği hâlâ geç gelirken FCP’yi iyileştirebilir. Değişikliğin ziyaretçinin gerçekten gördüğü şeyi iyileştirdiğini doğrulamak için FCP ile birlikte LCP’yi ve film şeridini inceleyin.
Sayfa boşken görsel sıkıştırmayla başlamak. Hiçbir şey boyanamıyorsa olağan engeller sunucu yanıt süresi, oluşturmayı engelleyen CSS, senkron JavaScript veya yazı tipleridir. İlgisiz varlıkları değiştirmeden önce istek şelalesini izleyin.
Birbiriyle ilgisiz Lighthouse çalıştırmalarını karşılaştırmak. Cihaz emülasyonu, ağ koşulları, önbellek durumu ve çalıştırmalar arasındaki değişkenlik laboratuvar FCP’sini etkiler. Aynı ayarlar altında tekrarlanan çalıştırmaları karşılaştırın ve mümkün olduğunda sonucu alan verileriyle doğrulayın.

Boş ekran bütçesi

Son değeri tek bir sorun olarak ele almak yerine FCP’yi art arda gelen üç soruya ayırın:

HTML’nin ulaşması ne kadar sürüyor? TTFB’yi inceleyin. Yavaş bir yanıt, tarayıcının yararlı bir işe başlayamayacağı anlamına gelir; bu nedenle sunucu, önbellek, yönlendirmeler veya bağlantı kurulumuyla başlayın.
Tarayıcının oluşturma yapabilmesi ne kadar sürüyor? Oluşturmayı engelleyen stil sayfalarını, senkron komut dosyalarını ve yazı tipi davranışını inceleyin. HTML ulaşmış olsa bile ana iş parçacığı veya oluşturma yolu hâlâ engelleniyor olabilir.
İlk içerik olarak gerçekte ne görünüyor? İlk boyamanın, deneyimi iyileştirmeden metriği daha iyi gösteren sembolik bir öğe değil, anlamlı bir metin veya görsel olduğunu doğrulamak için film şeridi ya da iz kullanın.

Bu çerçeve çözümleri doğru sırada tutar: önce iletim, sonra oluşturma, üçüncü olarak yararlılık. Hangi aşamanın değiştiğini anlayabilmek için her değişiklikten sonra aynı laboratuvar profilini yeniden çalıştırın.

Kendinizi sınayın: First Contentful Paint

FCP’nin neyi ölçtüğü ve nasıl tanılanacağı hakkında beş kısa soru. Her biri için bir yanıt seçin, ardından kontrol edin.

Zaman ayırmaya değer kaynaklar

Google / web.dev

First Contentful Paint (FCP) — temel başvuru kaynağı: tanım, eşikler, ölçüm kodu ve eksiksiz optimizasyon listesi.
Web Vitals — FCP’nin Core Web Vitals ile ilişkisi ve neden bir tanı metriği olduğu.
Largest Contentful Paint (LCP) — FCP’nin tanılamanıza yardımcı olduğu ve Core Web Vital olan metrik.
Time to First Byte (TTFB) — FCP’nin içinde yer alan sunucu yanıt metriği.

Lighthouse

First Contentful Paint audit — masaüstü değerlendirme aralıkları ve skorun nasıl hesaplandığı.
Lighthouse performance scoring — metrik ağırlıkları; FCP %10.

İlgili yazılarım

The Beginner’s Guide to Technical SEO — sayfa hızının büyük resimdeki yeri.
Core Web Vitals: What They Are & How to Improve Them — FCP’nin katkıda bulunduğu sıralama sinyali metrikleri.

Sektörden kaynaklar

First Contentful Paint (FCP) — Philip Walton’ın temel Google makalesi: tanım, eşikler, Paint Timing API kodu ve eksiksiz optimizasyon listesi.
Web Vitals — FCP’nin konumunu (Core Web Vitals’ı tamamlayan bir “Other Web Vital”) ve LCP’yi tanılamadaki rolünü açıklayan Google çerçevesi.
First Contentful Paint audit — Lighthouse masaüstü değerlendirme aralıklarını ve FCP skorunun HTTP Archive verileriyle karşılaştırılarak nasıl hesaplandığını açıklayan Chrome Developers belgesi.
Time to First Byte (TTFB) — TTFB’nin neden FCP’den önce gerçekleştiğini ve FCP’ye dâhil olduğunu, ayrıca yavaş bir sunucunun tarayıcı tek bir piksel boyamadan FCP bütçenizi nasıl tükettiğini açıklayan Google rehberi.
Eliminate render-blocking resources — FCP’nin bir numaralı düşmanı olan, <head> içindeki ve tarayıcının boyama yapmasını engelleyen CSS ile senkron JS hakkında Chrome Developers rehberi.
Ensure text remains visible during webfont load — font-display değerlerini ve block seçeneğinin FCP’yi neden geciktirdiğini, swap veya optional seçeneklerinin ise metni nasıl görünür tuttuğunu açıklayan Chrome Developers denetimi.
First Contentful Paint — CMS’ye özgü optimizasyon ipuçları ve alan ile laboratuvar arasındaki farkın açık bir anlatımını içeren NitroPack’in pratik FCP rehberi.