
Genel Bakış
İlk Zengin İçerikli Boyama (First Contentful Paint – FCP), ziyaretçilerin sayfanızdaki gerçek içeriği (örneğin metin, resimler, video ve benzeri) ne kadar hızlı görüntüleyebileceğini ölçen bir performans metriğidir.
Sayfanızın yükleme hızına bağlı olan FCP, eski raporlarımızda zaten izlediğimiz metriklerden biridir (sayfa yükleme süresi).
Sayfanızın FCP’si, sayfa yüklemenizin başlangıcından herhangi bir içeriğin ekranda görüntülendiği ana kadar geçen toplam süredir.
Düşük FCP süresi, ziyaretçileriniz içerik daha erken teslim edilirse sayfanın hızlı yüklendiğini algıladıklarından dolayı, olumlu bir kullanıcı deneyimine katkıda bulunur.
FCP metriği, en büyük zengin içerikli boyama (LCP) metriği gibi sayfa yükleme hızı ilgili metriktir.

İlk Zengin İçerikli Boyama Neyi Ölçüyor?
Google’a göre:
“İlk Zengin İçerikli Boyama, bir kullanıcı sayfanıza gittikten sonra tarayıcının ilk DOM içeriğini oluşturmasının ne kadar sürdüğünü ölçer. Sayfanızdaki resimler, beyaz olmayan < canvas > öğeler ve SVG’ler DOM içeriği olarak kabul edilir; iframe içinde olan herhangi birşey buna dahil değildir.”

Sayfanız tüketilebilir içeriği (metin gibi) ne kadar hızlı işlerse, ziyaretçinizin deneyimlediği algılanan performans o kadar iyi olur.
FCP, algılanan performansı ölçmek için önemlidir, kullanıcı merkezli bir metriktir, çünkü ziyaretçilerin ekranda herhangi bir tüketilebilir içeriği ilk görebileceği noktayı işaret eder.
Hızlı bir FCP, kullanıcıyı, sayfanızın yüklenmesi sırasında bir şeyler olduğu konusunda güvence altına alır.
Yavaş bir FCP, hiçbir şey yapmadığını ve dolayısıyla yavaş olduğunu gösterir.
Buna karşılık, İlk Boyama Zamanlaması (First Paint Timing), ekranda herhangi bir şeyin oluşturulduğu noktayı ölçer (örneğin, bir arka plan rengi, bir kenarlık ve benzeri)- ki bu çok daha az kullanışlıdır.
Sitemizde Metrikler – Performansı ve Kullanıcı Deneyimini Ölçme Standartları gibi diğer yazılarımızda başka kullanıcı deneyimi metrikleri konusunda daha geniş kapsamlı ve detaylı bilgiler veriyoruz.

İlk Zengin İçerikli Boyama’nın Performans Puanınızda Etkisi
Bu metrik, toplam Performans Puanının %15’ini oluşturur ve nispeten yüksek önemini gösterir.
Sayfanızı FCP’yi iyileştirecek şekilde optimize etmek hem gerçek sayfa yükleme sürelerinde hem de sitenizin performansıyla ilgili kullanıcı algısında genellikle önemli kazançlar sağlar.

İlk Zengin İçerikli Boyama için Eşikler
FCP eşikleri GTmetrix ölçme aracında aşağıdaki gibidir:
- İyi, burada yapılacak bir şey yok (934 milisaniye veya daha az)
- Tamam, ama iyileştirmeyi düşünün (934 ile 1205 milisaniye arasında)
- Önerilenden daha uzun (1205 ile 1600 milisaniye arasında)
- Önerilenden çok daha uzun (1600 milisaniyeden yüksek)
Google’a göre, FCP puanınızı nasıl yorumlayacağı aşağıdaki gibidir:
- 0–2 saniye arasında ise hızlı (yeşil renk)
- 2–4 saniye arasında ise orta (turuncu)
- 4 saniye üzerinde yavaş (kırmızı)

İlk Zengin İçerikli Boyama Nasıl İyileştirilir?
Aşağıda belirtilen belirli denetimlerin muhtemelen FCP’nize en fazla katkıyı sağladığını unutmayın.
Ancak sayfanızın FCP’si burada bahsedilmeyen diğer optimizasyonlardan da etkilenebilir.
İyi geliştirme uygulamalarını iş akışınıza dahil ederek FCP’nizi iyileştirin, örneğin şunları yapın:
Sunucu yanıt süresini azaltmak
Sunucu yanıt süresini azaltmak, sayfanızda hızlı bir FCP süresi sağlamanıza yardımcı olur.
Burada yapabileceğiniz şeylerden bazıları şunlardır:
- İlk sunucu yanıt süresinin azaltılması
- Bir içerik dağıtım ağı (CDN) kullanma
- Statik varlıkları verimli bir önbellek politikasıyla sunmak
- Birden çok sayfa yönlendirmesinden kaçınmak
- Önemli üçüncü taraf kökenleriyle erken bağlantılar kurmak
Oluşturmayı engelleyen kaynakları ortadan kaldırmak
Sayfanızdaki oluşturmayı engelleme davranışını ortadan kaldırmak, kaynakların olabildiğince hızlı yüklenmesini sağlar.
İstek sayılarını ve yük boyutlarını en aza indirmek
Kaynakların hızlı bir şekilde yüklenebilmesi ve tarayıcının sayfanızdaki içeriği daha kısa sürede oluşturmaya başlaması için istek sayınızı ve yük boyutlarınızı olabildiğince küçük tutmaya çalışın.
Not: Yapı denetimlerinden bazıları birbiriyle ilgilidir; birini iyileştirmek diğerlerini de geliştirebilir.

Siz de fikrinizi belirtin