FCP, tarayıcının DOM'daki içeriğin ilk byte'nı render ettiği ve kullanıcıya sayfanın gerçekten yüklendiğine dair ilk geri bildirimi sağladığı anı ifade eder. Kullanıcının sayfaya ilk gittiği andan sayfa içeriğinin herhangi bir bölümünün ekranda görüntülendiği ana kadar geçen süreyi ölçer.
First Contentful Paint, tarayıcının ilk kez herhangi bir metni, görüntüyü (arka plan görüntüleri dahil), videoyu, içine öğe eklenmiş timestamp, iframe içeriğini hariç tutar. Ancak bekleyen font yazı tipleriyle birlikte metni içerebilir. Kullanıcılar anlamsız da olsa ilk sayfa içeriğini görüp etkileşime geçmeye hazır bir duruma gelir.
FCP user-centric metriklerden perceived load speed (algılanan yükleme hızı) ile de doğrudan ilgilidir. PLS, sayfadaki tüm görsel öğelerin ekrana ne kadar hızlı yansıltıdığını niteler.
Dikkat edilmesi gereken önemli bir nokta ise FCP'nin önceki sayfadan; unload time, bağlantı kurulma süresi, redirect ve Time to First Byte (TTFB) içerdiğidir.
Yukarıdaki yükleme çizelgesine baktığımızda FCP'nin ikinci karede gerçekleştiğini görebiliyoruz.
FCP Zamanlama Skorları
FCP metriği; LCP, First Paint, First Meaningful Paint gibi kavramlarla da sık sık karıştırılmaktadır. Birbirine yakın olan bu kavramları kısaca ayrıştırmak gerekirse;
First Paint
First Paint, sayfanın ilk kez render edilmeye başladığı zamanı işaret eder. FCP'nin aksine içinde içerik olmayan boş bir alan olabilir. Navigasyon ile tarayıcının ilk kez pikseli ekrana render ettiği ve body'nin varsayılan arka plan renginden görsel olarak farklı herhangi bir şeyi çözümlemeye başladığı zaman arasındaki süredir.
LCP
Bazı içeriklerin render edilmiş olmasına rağmen, tüm içeriklerin render edilmediğini sayfalar ile karşılaşabiliriz. First Contentful Paint ile Largest Contentful Paint arasında en önemli ayrım ise LCP'nin sayfanın en büyük ana içerik öğesinin ne zaman oluşturulduğunu ölçmesi ve kullanıcıya sayfadaki en büyük içeriğin gösterilmesini ifade eder.
First Meaningful Paint
Sayfadaki en büyük above-the-fold değişikliğinin olduğu ve fontların yüklendiği render aşamasıdır. FMP, sayfa yükleme süresindeki küçük farklara çok duyarlığı olduğu için tutarsız (bimodal) sonuçlara yol açabilir. Tarayıcıya özgü farklılar nedeni ile de standartlaştırılamayacağı ve tüm web tarayıcılarında aynı şekilde uygulanmayabilir. Genel optimizasyon için ise sayfanın üst çerçevesinde yer alan "valuable content" elementlerinin render aşamasına müdahale edebilir ve yükleme performansını artırabiliriz.
FCP Nasıl Çalışır?
FCP'nin nasıl çalıştığını anlayabilmek adına tarayıcının bir sayfayı yüklerken gerçekleştirdiği adımlara göz atabiliriz.
1. Gezinme Başlangıcı
Tarayıcı, kullanıcı bir bağlantıya tıkladığında veya bir URL'yi adres çubuğuna yazdığında sayfayı yükleme sürecine başlar.
2. DNS Çözümlemesi ve Bağlantı Kurulması
URL'yi IP adresine çözümleyerek hedef sunucuyla bağlantı kurar. DNS çözümlemesi, TCP bağlantısı ve SSL bağlantılarını içerir.
3. HTTP İsteği ve Yanıtı
Sunucuya HTTP isteğini gönderir ve sunucudan gelecek olan HTML yanıtını bekler. HTML'nin hızlı ve verimli bir şekilde yüklenmesi, FCP'nin hızlanmasına katkıda bulunur. İçeriğin tanımlanması ve DOM'un oluşturulmasında rol oynar.
4. HTML Dökümünün Ayrıştırılması
Sunucudan gelen HTML dökümünü ayrıştıılmayarmaya başlanır. Dökümandaki kaynaklar (CSS, JavaScript, Görseller vb.) tespit edilir ve sayfa için gerekli kaynaklar indirilir.
5. Render Ağacı Oluşturulması
HTML ve CSS'yi kullanarak bir render ağacı oluşturur ve sayfanın görsel olarak nasıl görüneceğini belirler. Render ağacı oluşturulurken, CSSOM (CSS Object Model) ve DOM (Document Object Model) birlikte çalışır. CSS dosyaları ve bazı JavaScript dosyaları render işlemine engel olabilir. Tarayıcılar, bu tür kaynakların indirilip irender edilmesini bekler. Ayrıştırmayı bloklayıcı kaynaklar, FCP'nin ve diğer page speed metriklerinin gecikmesine neden olabilir.
6. İlk İçerik Renderı (First Contentful Paint)
Render ağacı tamamlandığında gerekli tüm kritik kaynaklar işlenmiş olur. Tarayıcılar ekranda ilk içeriği gösterdiği an FCP'yi tanımlamış ve sayfayı kullanıcılara göstermeye başlamıştır.
FCP'yi Etkileyen Faktörler
1. Render Bloklayıcı Kaynaklar
CSS ve bazı JavaScript dosyaları, sayfanın render edilmesini engelleyebilir. Eğer optimizasyon işlemleri yapılmazsa, tarayıcılar kaynakları indirip işleyene kadar sayfa render edilmez. HTML, JS ve CSS'in ayrıştırılması ve render ağacının oluşturulması süreci, FCP'yi etkileyebilir.
Kritik Kaynakların Kullanımı: Yalnızca sayfanın üst kısmında görünen (above-the-fold) stil kurallarını içeren kritik CSS önceden yükletilebilir, inline olarak
