First Contentful Paint (FCP) Nedir? Nasıl Optimize Edilir?

Google’ın sonuç sayfalarında üst sıralarda yer almak isteyenler, First Contentful Paint (FCP) Nedir? Nasıl Optimize Edilir? sorusuyla kullanıcı deneyimi odaklı bir metrikten yararlanmanın yollarını öğrenebilirler.

Bilindiği üzere Önemli Web Verileri (Web Vitals), web sitesi sahiplerinin sitelerini kullanıcı deneyimine göre değerlendirmesine yardımcı olan bir dizi önlemi içerir ve aslında iki ayrı kategoride incelenirler.

Web Vitals metrikleri, Core Web Vitals ve non-Core Web Vitals olmak üzere ikiye ayrılır ve her metrik, sayfa deneyiminin bir bölümünün ne kadar “iyi” olduğunu ölçer.

Non-Core Web Vitals metrikleri, belirli bir sorunun teşhis edilmesine yardımcı olmak için genellikle Core Web Vitals metrikleri için tamamlayıcı ölçümler olarak hizmet ederler. Örneğin, İlk İçerikli Boyama (FCP) yükleme deneyimi açısından kritik bir değerdir ve LCP ile ilgili sorunları teşhis etmede yararlıdır.

FCP ( First Contentful Paint ) şu anda Core Web Vitals metriklerinden olmasa da algılanan yükleme süresi için önemli bir göstergedir. Uzmanlar Core Web Vitals setinin zaman içinde büyüyeceğini ve Google’ın ileride First Contentful Paint’i bu sete dahil edeceğini öngörmektedir.

FCP Nedir?

İlk İçerikli Boyama anlamına gelen First Contentful Paint (FCP), bir sayfanın yüklenmeye başladığı andan o sayfanın içeriğinin herhangi bir bölümünün ekranda görüntülendiği ana kadar geçen süreyi ölçen bir metriktir.

Diğer metriklerin aksine FCP, yanıt süresiyle ilgili yalnızca teknik bir metrik değildir. FCP, arka planda ne yüklendiğine değil, kullanıcının deneyimine ve sitede ilk olarak ne algıladığına odaklanır.

FCP, kullanıcının sayfanızın bir kısmının değiştiğini görebildiği zamandır (tarayıcının sayfanızdaki ilk DOM öğesini oluşturduğu zamandır). Buna resimler, beyaz olmayan tuval öğeleri veya metinler dahildir ve bu genellikle bir başlık çubuğu veya arka plan resmi olarak görüntülenir. Söz konusu öğe, sunucudan yüklenen ilk öğe olmayabilir, ancak kullanıcının görebileceği ilk öğedir, bu da onu sitenizin kulanıcı deneyimi (UX) açısından çok önemli kılar.

FCP ilginç bir metriktir, nispeten özneldir. Kullanıcıların sitenizin hızlı yüklendiğini algılamasına neden olabilir. İlk Etkileşimli Gecikme (FID) değeriniz, yani bir ziyaretçinin web sitenizle etkileşime girdikten sonra web sitenizin yanıt verme süresi, rakiplerinizinkinden çok daha büyük olsa da düşük FCP nedeniyle siteniz ziyaretçilere daha hızlı görünebilir.

Bununla birlikte, elbette ki FCP, ziyaretçileri kandırmak için değildir. Önemli olan düşük FCP sürelerinin LCP (Largest Contentful Paint) gibi diğer sayfa hızı metriklerini etkileyebilmesidir.

First Contentful Paint Neden Önemli?

Google, sıralamalarında sayfa hızına değer verdiğinden; FCP süresini azaltmaya yönelik herhangi bir optimizasyonun, UX’i artıracağı ve sitenizin genel yükleme sürelerini olumlu etkileyeceği unutulmamalıdır.

Doğrudan bir site performansı metriği olmasa da FCP’nin kullanıcı odaklı bir algı metriği olduğunu söyleyebiliriz: İki web sitesinin aynı yükleme süresine sahip olduğunu varsayalım; daha düşük FCP süresine sahip olanın daha hızlı olduğu sanılabilir. Bu algı kullanıcı deneyimini etkileyebilir.

Bununla birlikte First Contentful Paint’in, genel site performansını daha yüksek bir düzeye çıkarmada etkili olduğu inkar edilemez. FCP’yi düşürmek için yaptığınız tüm işlemler genel sayfa hızınızı da iyileştirir. Bu nedenle FCP’yi genel performansınızın bir göstergesi olarak kabul edebilirsiniz.

Düşük bir FCP süresi çoğunlukla yüksek bir toplam yükleme süresiyle çakışmaz, bu yüzden eğer nerede durduğunuzu görmek için tek bir metrik kullanmanız gerekiyorsa, FCP iyi bir yol gösterici olabilir.

First Contentful Paint Nasıl Ölçülür?

FCP, sayfada ilk metnin veya görselin görünür hale geldiği zamanı işaretler. Bu, tarayıcının DOM içeriğinin ilk parçasını oluşturmasının ne kadar sürdüğünün bir ölçüsüdür. FCP değeri için ölçülen içerik; metinleri, ana ve arka plan görsellerini, beyaz olmayan ögeleri ve ölçeklenebilir vektör grafik (SVG) öğelerini içerir. Yükleniyor animasyonu ya da şirket logosu gibi basit bir şey bile FCP’yi tetikleyebilir.

FCP değerinizi kontrol etmek için çeşitli araçları incelemeden önce, neyin iyi bir FCP puanı olarak kabul edildiğini bilmeniz gerekir. First Contentful Paint puanını yorumlarken aşağıdaki eşiklere bakılır:

İyi	0 saniye ile 1,8 saniye arasında
İyileştirme Gerekiyor	1,8 saniye ile 3 saniye arasında
Zayıf	3 saniyeden fazla

İyi bir kullanıcı deneyimi sağlamak isteyen sitelerin, 1.8 saniye veya daha düşük FCP değerine sahip olmaya çalışması önerilir. FCP değeri ne kadar düşükse o kadar iyidir.

FCP’yi ölçmek için kullanılan araçların başında ücretsiz bir site hızı ölçüm aracı olarak bilinen PageSpeed ​​Insights gelir. Buna Chrome DevTools, Search Console ve Lighthouse’u ekleyebiliriz. Eğer JavaScript’te FCP’yi ölçmek isterseniz Paint Timing API’sini kullanabilirsiniz ancak FCP’yi JavaScript’te ölçmek biraz karmaşık olabilir.

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

İki terim zaman zaman birbirinin yerine kullanılabilse de 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çerikli olsun ya da olmasın, tarayıcının ilk bilgi baytlarını oluşturduğu zamandır.

İlk İçerikli Boyama anlamına gelen FCP (First Contentful Paint) ise tarayıcının belge nesne modelinden (DOM) herhangi bir içeriği ilk kez oluşturduğu zamandır. Bir arka plan resmi ya da bir metin parçası gibi kullanıcının içerik olarak tüketebileceği öğeler FCP’ye örnek teşkil eder.

First Paint anındaki ekran First Contentful Paint ile görüntülenenle tamamen aynı da olabilir.

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, En Büyük İçerikli Boyama anlamına gelir. Görüntü alanında en büyük görselin veya metin bloğunun göründüğü andır. Sayfanın yüklendiğinin en önemli göstergesi olduğu için LCP değeri çok önemlidir.

Chrome’s DevTools’dan FP, FCP ve LCP değerlerini görebilirsiniz. Bunun için incelemek istediğiniz web sayfasını açıp sağ tıklayın ve “İncele” yi seçin. Performance sekmesine tıklayıp soldan “reload” butonuna basın. Chrome, sayfayı analiz edecek ve ayrıntılı bir rapor verecektir. “Timing” satırında FP, FCP ve LCP’yi görebilirsiniz.

FCP Değeri Nasıl Optimize Edilir?

Sunucu yanıt sürelerinin yavaşlığı ve oluşturmayı engelleyen (Render-blocking) kaynaklar genellikle düşük bir FCP puanının sebebidir.

Sitenizin FCP’sini optimize ettiğinizde, yalnızca genel yükleme sürelerini hızlandırmak ve sayfa hızı derecelendirmelerini artırmakla kalmaz, aynı zamanda ziyaretçilerinize tam anlamıyla isteklerinin yerine getirildiğini ve yüklemenin durmadığını da göstermiş olursunuz.

Google web.dev‘e göre FCP değerini düşürmek için yapılması gerekenler şunlardır:

• Render-blocking kaynakları kaldırın (gereksiz kaynakları sitenizin kodunun üstüne yüklerseniz ziyaretçilerin tarayıcılarının web sitenizin görünen kısmını indirmesi daha uzun sürer).
• CSS dosyalarını küçültün (CSS dosyaları genellikle olması gerekenden daha büyüktür. CSS dosyalarını küçültmek, sayfa yükleme performansınızı iyileştirebilir).
• Kullanılmayan CSS’i kaldırın (Stil sayfalarınızda kullanılmayan kod bulundurmamalısınız. Siteniz her istendiğinde,boşuna yüklenmemesi için eski veya kullanılmayan kodlar kaldırılmalıdır.).
• Gerekli kaynaklara ön bağlantı (“preconnect“) kullanmak, tarayıcının önemli üçüncü taraf bağlantılarına öncelik vermesine yardımcı olur ve sayfa yüklemeyi hızlandırır.
• Sunucu yanıt sürelerini azaltın (TTFB’yi azaltmak, sayfa yükleme sürelerini optimize etmeye ve FCP, LCP gibi diğer sayfa hızı metriklerini iyileştirmeye yardımcı olacaktır.).
• Birden çok sayfa yönlendirmesinden kaçının (Yönlendirmeler sayfa yükleme hızınızı yavaşlatır, Ağdaki ek gezi, kaynağın yüklenmesini yüzlerce milisaniye geciktirebilir).
• Önceden yükleme istekleri, sayfalarınızın daha hızlı yüklenmesini sağlayabilir.
• Muazzam ağ yükleri, uzun yükleme süreleriyle yüksek oranda ilişkilidir.
• HTTP önbelleğe alma, tekrar eden ziyaretlerde sayfa yükleme sürenizi hızlandırabilir (Bir tarayıcı bir kaynak istediğinde, kaynağı sağlayan sunucu, tarayıcıya kaynağı geçici olarak ne kadar süreyle saklaması veya önbelleğe alması gerektiğini söyleyebilir. Bu kaynağa yönelik sonraki herhangi bir istek için tarayıcı, onu ağdan almak yerine yerel kopyasını kullanır).
• Aşırı DOM boyutundan kaçının (Büyük bir DOM ağacı, genellikle, kullanıcı sayfayı ilk yüklediğinde görünmeyen birçok düğüm içerir; bu yükleme süresini yavaşlatır. Ayrıca kullanıcılar ve komut dosyaları sayfanızla etkileşime girdikçe, tarayıcının sürekli olarak düğümlerin konumunu ve stilini yeniden hesaplaması gerekir. Üstelik JavaScript’iniz document.querySelectorAll(‘li’) gibi genel sorgu seçicileri kullanıyorsa, bilmeden çok sayıda düğüme referanslar depoluyor olabilirsiniz, bu da kullanıcılarınızın cihazlarının bellek özelliklerini zorlayabilir).
• Kritik istek derinliğini en aza indirin (Kritik istek zincirleri, sayfa oluşturma için önemli olan bir dizi bağımlı ağ isteğidir. Zincirlerin uzunluğu ve indirme boyutları ne kadar büyük olursa, sayfa yükleme performansı üzerindeki etkisi o kadar önemli olur).
• Web yazı tipi yüklemesi sırasında metnin görünür kalmasını sağlayın (Bazı tarayıcılar, yazı tipi yüklenene kadar metni gizler).
• İstek sayılarını düşük, aktarım boyutlarını küçük tutun.

Şimdi dilerseniz bu önerilerin bazılarına biraz daha yakından bakalım.

Oluşturmayı Engelleyen Kaynakları Kaldırmak

Oluşturmayı engelleyen (Render-blocking) kaynakları kaldırmak, FCP sürenizi azaltmada en etkili faktör olabilir. Bu kaynaklar, web sitenizde sayfanızın oluşturması gereken dosyalardır ve bunlara HTML, JavaScript, yazı tipleri ve CSS dosyaları dahildir. Bunları “oluşturmayı engelleyen” yapan özellik, sayfadaki herhangi bir şeye öncelik vermeleri ve bitene kadar başka şeylerin yükleme sürecini durdurmalarıdır.

Bu bekletme, iki nedenden dolayı FCP’de çarpıcı bir artışa neden olur; render-blocking dosyalarının boyutu genellikle büyüktür ve bunlar çoğunlukla site içeriği değil yalnızca yapı ve biçimlendirme içeriği barındırır. Bu kaynakları kritik işleme yolundan kaldırarak, içerikli boyama için alan açabilirsiniz. Kaynakların yüklenmesini erteleyebilir, CSS, HTML ve JavaScript dosyalarınızı küçültüp birleştirebilirsiniz.

Bazı WordPress temaları ve bazı önbelleğe alma eklentilerinde oluşturma engelleme seçenekleri bulabilir ve bunları etkinleştirerek FCP süresini azaltmaya çalışabilirsiniz.

Yazı Tipi Yükleme Sırasında Metni Görünür Kılma

Bazen bir sayfadaki tüm metnin, diğer tüm içerik görüntülenirken bir anda geldiğini görürsünüz. Bunun nedeni, tarayıcının onu gizlemesidir. Metnin yazı tipi – font dosyası görüntülenmeye “hazır” değilse, yüklenmesi gecikebilir. Çok düşük FCP değerine sahip olmanın en iyi yollarından biri sitenizin metin içeriğini görünür kılmak olabilir.

Çeşitli yazı tipi görüntüleme parametrelerini kullanabilir, tarayıcıya sitenizin metnini bir sistem yazı tipi kullanarak hemen yüklemesini ve yüklendikten sonra belirttiğiniz ekran yazı tipiyle değiştirmesini söyleyebilirsiniz.

Bazı temalar bunu varsayılan olarak yapar ve siteniz, dosyalar tamamen yüklenene kadar sayfanızın içeriğini gizlemek yerine otomatik olarak bir sistem yazı tipinden geçiş yapar.

HTML, CSS ve JavaScript’i Küçültme

Sitenizin HTML, CSS ve JavaScript dosyalarından gereksiz karakterleri (boşluklar gibi) çıkarmak sayfa boyutunu küçültür. Bu, sayfa hızını artırır ve FCP’yi iyileştirir. Örneğin insanların okumasını ve ayrıştırmasını kolaylaştırsa da tarayıcıların ve sunucuların boşluklara ihtiyacı yoktur.

Bir WordPress kullanıcısıysanız, muhtemelen temanızda veya önbelleğe alma eklentinizde küçültme seçeneği mevcuttur.

İlk Bayt Süresini Azaltma (TTFB)

İlk bayta kadar geçen süre anlamına gelen TTFB, sunucunuzun bir ziyaretçinin isteğine yanıt verme hızını ölçer. TTFB, ilk veri baytının tarayıcıya aktarıldığı zamandır. FCP bu metriğe bağlıdır, bu nedenle TTFB ne kadar hızlı olursa, First Contentful Paint’iniz o kadar hızlı olur. TTFB’yi azaltmanın ve sayfanızı hızlandırmanın en iyi yolu kaliteli bir hosting hizmeti almak, gerekiyorsa CDN kullanmak ve tarayıcı önbelleğe almayı etkinleştirmektir.

Bu üç bileşene yeterince özen gösterildiğinden emin olmak, TTFB’yi ve buna bağlı olarak FCP değerinizi önemli ölçüde azaltabilir.

DOM Boyutunu Küçük Tutma

Genellikle hızlı bir FCP değerini en sınırlayıcı faktörlerin başında aşırı büyük DOM’a sahip olmak gelir. Çoğumuz ziyaretçileri etkilemek için ana sayfalarımızı ve açılış sayfalarımızı aşırı karmaşık hale getirebiliyoruz. Ancak, eklenen öğeler DOM’u şişirir ve daha yüksek bir FCP süresine neden olur. Oysa yukarıda da bahsettiğimiz gibi FCP ne kadar düşükse o kadar iyidir.

Kullandığınız CSS seçicilerinin sayısını azaltarak buna yardımcı olabilirsiniz. Sözde seçiciler sorunları karmaşıklaştırır ve DOM’unuzun boyutunu artırır. Bununla birlikte, seçicilerin geçerli olduğu öğe sayısını da azaltabilirsiniz.

SVG veya WebP Görselleri Kullanma

Her site için gerekli olmasa da önemli görsellerin dosya boyutunu büyük oranda düşürmenin FCP’ye yardımcı olması mümkündür. .gif, .jpg ve .png gibi sıklıkla kullanılan resim dosyalarını .webp veya .svg dosyalarıyla değiştirmek zaman kazanmanızı sağlayabilir.

Bu yöntem büyük olasılıkla, LCP değerinizi, FCP’den daha fazla etkileyecektir, ancak yeterince küçük bir SVG logosunun ziyaretçilerinizin gördüğü ilk şey olmasını sağlayabilir.

Dilerseniz WebP Nedir? adlı yazımıza göz atabilir, eğer WordPress kullanıcısıysanız, güncel blog yazılarımızdan artık yerleşik .webp desteği sunulduğuna dair bilgilere ulaşabillirsiniz.

Özet

First Contentful Paint (FCP), sayfanın yüklenmeye başladığı 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. Hızlı bir FCP değeri, kullanıcıların henüz içerikten tam olarak yararlanamasalar da aktif bir sayfaya ulaştıklarını anlamalarını sağlar.

İleride, Core Web Vitals setine dahil edileceği öngörülen bu metriğin neden önemli olduğunu FCP Nedir? Nasıl Optimize Edilir? sorusunun yanıtlarında bulmuş olmanız dileklerimizle…