Merhaba arkadaşlar! Bugün sizlere FCP yani First Contentful Paint Nedir? Nasıl Optimize edilir? First Paint ile arasındaki fark nedir? Gibi sorulara cevap vereceğim.

Pagespeed Insights’ın bir konusu olan ve İlk Zengin İçerikli Boyama olarak adlandırılan bu metrik, bir sayfaya gönderilen istek ile, HTML DOM içinde yer alan anlamlı bir content’in ilk işlenmesine kadar geçen süreyi ölçer. Bu öğe bir metin, resim dosyası, placeholder, svg veya sayfanın içeriği ile alakalı herhangi bir bölüm olabilir. Söz konusu olan öğe, sunucudan yüklenen ilk öğe olmak zorunda değildir, ancak kullanıcının göreceği ilk öğedir, bu özelliği ise onu sitenin kulanıcı deneyimi açısından çok önemli kılar.

Web sitenizin ana sayfasının toplam yüklenme süresi (Largest Contentful Paint) 2.5 saniyeden az olmalıdır. First Contentful Paint süresi ise 2 saniyenin altında olması gerekir. FCP, sayesinde basitte olsa ziyaretçilerinize yükleme esnasında ilgilerini çekebilecek, içeriğiniz ile ilgili fikir verebilecek ve web sitenizden hemen çıkış yapılmasını engellemek için sunulan bir fırsat.

FCP, sadece teknik bir metrik değildir. FCP, arka planda ne yüklendiğine değil, kullanıcının sitede ilk olarak ne deneyimlediğine odaklanır. Bu sayede sitenize girmiş bir kullanıcının, sitenizin hızlı yüklendiğini algılamasına neden olabilir.

Tabii ki FCP’nin tek özelliği kullanıcıları kandırmak değidlir. Düşük bir FCP süresi LCP (largest contentful paint) gibi diğer sayfa hızı metriklerini etkileyebilir.

FCP Neden Önemlidir?

First contentful paint (FCP) metriği kullanıcı odaklı bir metriktir ve kullanıcıya sayfanın açılmakta olduğu ile alakalı somut sinyallerin aktarıldığı önemli bir bölümdür. Bu sebeple First Contentful Paint metriğini optimize etmek çok önemlidir.

Çünkü Google, algoritmasında sayfanızın hızına önem verir. Ayrıca First Contentful Paint, genel site performansını daha yüksek bir düzeye çıkarmada etkilidir. FCP’yi ne kadar düşürebilirseniz sayfanızın genel hızı da bir o kadar artar.

FCP metriği, kullanıcıya sunulan sayfa içeriğinin herhangi conten içeren bir bölümü, veya sayfanın yüklenme süreçlerinin devam ettiğinin gösterilebilmesi (bir loading screen gibi) algılanan sayfa açılış hızı ve kullanıcı deneyimi noktasında önemlidir.

İyi bir FCP süresi genelde İyi bir LCP süresine de işaret eder, bu yüzden eğer nerede durduğunuzu merak ediyorsanız, FCP iyi bir yol göstericidir.

FCP Nasıl Optimize Edilir?

FCP değerinizi test etmeden önce FCP puanlarının ne anlama geldiğini bilmeiz gereklidir. Üstteki görsel kafanızda bir fikir oluşturmuş olsa da biraz daha detaya inmekte fayda olacağını düşünüyorum.

Sitenizi ziyaret eden insanlara iyi ve akıcı bir site deneyimi yaşatmak istiyorsanız, 1.8 veya daha düşük bir FCP değerine sahip olmanız gereklidir. Üst limiti 1.8 olsa da sürenizi ne kadar aşağıya çekebilirseniz o kadar iyidir.

1.8 saniye ile 3 saniye arasında bir FCP skoruna sahipseniz, birazdan aşağıda vereceğim örnekler ile sürenizi İyi sınıfına çekebilirsiniz. Bu değere sahip bir siteniz varsa SEO sıralamalarında FCP skoru sizden yüksek olan sitelerin altında listelenirsiniz.

3 saniye ve daha üstündeki değerleri bir uyarı lambası olarak düşünebilirsiniz. Eğer FCP süreniz 3 veya üstüyse sitenizin ciddi bir optimizasyona ihtiyacı var demektir.

• Logo olarak kullandığınız görseli optimize edin. Örneğin 2000px genişliğinde olan bir logonuz var ise bunu 500px ile ölçeklendirerek tekrar yükleyin.
• Gereksiz JS ve CSS kodlarını web sitenizden kaldırın ve gerekli olanları sıkıştırın.
• İçeriğinizdeki gereksiz görselleri kaldırın.
• Kullandığınız görselleri optimize edin. Çok büyük ölçülere sahip resimleri doğru ölçüler ile kayıt edin ve tinypng.com üzerinden sıkıştırarak kullanın.
• Görsel, JS ve CSS dosyalarını cache yapısı ile sunun.
• Görsellerinizin lazyload gibi uygulamalar sayesinde sonradan yüklenmesini sağlayın.

FCP’yi ölçmek için kullanılabilecek bir sürü araç vardır (Chrome DevTools, Search Console ve Lighthouse). Ancak Google tarafından sağlanan PageSpeed aracı ile hem field hemde lab verilerini ortak olarak gözlemleyebilirsiniz.

First Paint ve First Contentful Paint Arasındaki Fark Nedir?

İki terim zaman zaman karıştılısa da FCP ve FP’nin teknik olarak iki farklı metrik olduğunu anlamanız önemlidir. İlk Boyama anlamına gelen First Paint (FP), ilk pikselin ekranda görüntülendiği, (içerisinde bir şey olup olmadığı önemsiz), tarayıcının ilk bilgi baytlarını oluşturduğu zamandır.

FCP (First Contentful Paint) ise tarayıcının belge nesne modelinden içeriği ilk kez oluşturduğu zamandır. First Paint ekranı ile First Contentful Paint ekranı tamamen aynı da olabilir. Ancak bu kötü bir kullanımdır.

FCP’yi yorumlarken LCP ve FP ile birlikte analiz etmeniz önerilir. Artık resmen Google’ın sıralama faktörlerine dahil edilmiş olan Core Web Vitals metriklerinden biri olan LCP, sitenizin yükselmesini istiyorsanız optimize etmeniz gereken bir faktördür. Artık nasıl yapılacağını da bildiğinize göre gereken tek şey uygulamak. Şimdiden kolay gelsin.