FCP (First Contentful Paint) Nedir?
Kısa tanım
FCP (First Contentful Paint), kullanıcının bir sayfaya gitmeye başlamasından sayfadaki herhangi bir içeriğin (metin, görsel, svg veya beyaz olmayan canvas) ekranda ilk kez çizilmesine kadar geçen süredir. Ziyaretçiye sayfanın yüklendiğine dair ilk görsel işaretin ne zaman verildiğini ölçer. web.dev'e göre 75. yüzdelikte 1,8 saniye veya altı iyi, 3 saniyenin üstü zayıftır.
Diğer adları: First Contentful Paint, ilk içerikli boyama, ilk zengin içerikli boyama
Hangi çizim "içerik" sayılır?
FCP, ekranın boş beyaz görüntüden çıkıp kullanıcıya bir şey göstermeye başladığı anı yakalar. Ancak her piksel sayılmaz. Metin, görseller (CSS arka plan görselleri dahil), <svg> öğeleri ve beyaz olmayan <canvas> içerik kabul edilir. Sadece arka plan renginin boyanması ya da boş bir canvas FCP'yi tetiklemez.
Web fontları burada sinsi bir rol oynar: tarayıcı fontu beklerken metni görünmez tutuyorsa, metin DOM'da hazır olsa bile FCP gecikir. Çapraz kökenli iframe'lerdeki çizimler de Paint Timing API tarafından her zaman raporlanmaz; bu, sahada ve laboratuvarda farklı değerler görmenin nedenlerinden biridir.
FCP ile LCP aynı şeyi ölçmez
FCP ilk içeriğin, LCP ise görünür alandaki en büyük içeriğin ne zaman çizildiğine bakar. Tipik bir ürün sayfasında FCP logo ve menü göründüğünde gerçekleşir, LCP ise büyük ürün görseli yüklendiğinde. İki değer arasındaki fark, sayfanın neyi beklettiğini anlatır: FCP hızlı ama LCP yavaşsa sorun genellikle ana görselin geç keşfedilmesi ya da ağır olmasıdır; ikisi birden yavaşsa darboğaz daha erkendedir, yani sunucuda ya da render'ı durduran kaynaklardadır.
Eşikler: saha verisi ve Lighthouse
| Kaynak | İyi | Orta | Zayıf |
|---|---|---|---|
| Saha (web.dev, 75. yüzdelik) | ≤ 1,8 sn | 1,8–3 sn | > 3 sn |
| Lighthouse mobil | ≤ 1,8 sn | 1,8–3 sn | > 3 sn |
| Lighthouse masaüstü | ≤ 0,9 sn | 0,9–1,6 sn | > 1,6 sn |
FCP, Lighthouse performans puanında %10 ağırlığa sahiptir. Sahada ölçülen FCP; önceki sayfanın kapanması, yönlendirmeler, bağlantı kurulumu ve TTFB sürelerini de içerir. Bu nedenle laboratuvarda temiz bir bağlantıyla ölçülen değer, gerçek kullanıcıların yaşadığından genellikle iyimserdir. FCP bir Core Web Vitals metriği değildir ama LCP'nin ön koşuludur: ilk çizim gecikirse en büyük çizim de gecikir.
FCP'yi geriye iten nedenler
- Render'ı engelleyen CSS ve JavaScript:
<head>içindeki senkron script'ler ve büyük stil dosyaları indirilip işlenene kadar tarayıcı hiçbir şey çizmez. Ayrıntılar render engelleyen kaynaklar maddesinde. - Görünmez metin: Font yüklenene kadar metnin gizlenmesi.
font-displayile yedek fontun hemen gösterilmesi sağlanabilir:@font-face { font-family: "Marka"; src: url("/fonts/marka.woff2") format("woff2"); font-display: swap; } - Yavaş ilk yanıt: Sunucu geç cevap veriyorsa ön yüz optimizasyonları sınırlı fayda sağlar.
- Boş HTML kabuğu: İçeriğin tamamı istemci tarafında JavaScript ile üretiliyorsa, ilk çizim paketin indirilip çalışmasını bekler.
Pratik sıralama genellikle şudur: önce sunucu yanıtını, sonra web fontlarını ve kritik stilleri, en son da üçüncü taraf script'leri ele almak.