First Contentful Paint (FCP) Nedir?

Bir web sitesine girmeye çalışırken belirli bir süre siteye giremediğinizde, aklınıza ne geliyor? Muhtemelen sitenin çalışıp çalışmadığını merak ediyorsunuzdur? Çoğu durumda, büyük olasılıkla site çalışır durumdadır, ancak herhangi bir içeriğin ekranınızda görünmesi çok uzun sürebilir.

İçeriğin ekranınızda gösterilmesi için geçen süre, First Contentful Paint (FCP) olarak bilinir. FCP aynı zamanda bir diğer Core Web Vital (CWV) metriği olan Largest Contentful Paint’in (LCP) de büyük bir parçasıdır.

FCP Nedir?

First Contentful Paint (FCP) metriği, kullanıcının web sitesine eriştiği an ile tarayıcısında bir şey gördüğü an arasındaki süreyi ölçer. Bu, web sitesi performansının en önemli unsurlarından biridir ve aynı zamanda bir diğer Core Web Vital (CWV) metriği olan Largest Contentful Paint’in (LCP) de büyük bir parçasıdır.

İyi Bir FCP Puanı Kaç Olmalıdır?

FCP için en uygun süre sıfır ile 1 saniye arasında olacak şekilde saniye cinsinden ölçülür. FCP’niz ne kadar düşükse, kullanıcılar temel içeriği o kadar hızlı görür.

• Harika FCP süresi = 1 saniyeden az
• İyileştirmesi Gereken FCP süresi = 1 ile 3 saniye arasında
• Zayıf FCP süresi = 3 saniyeden fazla

FCP puanınızı derinlemesine incelemek için Lighthouse, GTmetrix veya PageSpeed Insights’ı kullanabilirsiniz. Lighthouse’un puanlaması, logaritmik bir ölçek kullanılarak yüzdelik dilimlere dönüştürülen gerçek web sitesi performans verilerine dayanır.

FCP Puanınızın Düşük Olmasının Nedeni Nedir?

Bir web sitesinin içeriğinin hızlı bir şekilde görüntülemesini engelleyen herhangi bir şey, daha düşük bir FCP puanına yol açar. Bu tür yavaşlamalara aşağıdaki listedekileri neden olabilir:

• Daha uzun yanıt sürelerine yol açan düşük performanslı bir sunucu.
• JavaScript ve CSS gibi çok sayıda oluşturmayı engelleyen kaynak. Bu dosyalar genellikle bir sayfanın en üstüne yüklendiğinden, FCP üzerindeki etkileri daha fazladır.
• Yanlış yapılandırılmış bir önbellek, geri gelen ziyaretçilerin önceki ziyaretlerinden bu yana değişmeyen içerik istemesine neden olur.
• Eksik veya verimsiz sıkıştırma.

First Contentful Paint Neden Önemli?

FCP, Google tarafından kullanıcı merkezli bir performans metriği olarak tanımlanır. Bir kullanıcı, ekranında görüntülenen içeriği gördüğünde, sayfanın gerçekten başarılı bir şekilde yüklendiğinden emin olur. FCP ne kadar hızlı gerçekleşirse, kullanıcının sayfada kalması ve siteyle etkileşime devam etmesi o kadar olasıdır. Google’ın algoritması, hızlı yükleme süreleri olan ve mobil uyumlu temalara sahip web sitelerine öncelik verir. FCP, bir Google PageSpeed Insights raporu sırasında dikkate alınan önemli bir ölçümdür.

Başka bir deyişle, sitenizin SEO sıralamasını yükseltmek veya kullanıcı deneyimini geliştirmek istiyorsanız, FCP’nizi bilmek ve geliştirmek bir zorunluluktur.

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

FCP, hem lab testing (yayın öncesi) hem de field araçları kullanılarak ölçülebilir.

Lab testing ile FCP’yi ölçmek, web sitesini canlıya almadan önce hataları gidermek için yararlı bir teknik olsa da, performansı değerlendirmek için en güvenilir yaklaşım değildir. Neyse ki field testleri, farklı türde cihazlar, ağlar ve yazılımlar kullanırken kullanıcıların web sitenizle nasıl etkileşime girdiğini gösterebilir.

FCP’yi ölçmek için kullanabileceğiniz bazı araçlar aşağıdakileri içerir:

Lab Tools

• Lighthouse

• Chrome DevTools
• PageSpeed Insights

• Gtmetrix

Field Tools

• Chrome User Experience Report
• Search Console (Speed Report)
• Web-vitals JavaScript library

Lighthouse FCP Skorunu Nasıl Belirler?

Lighthouse, web sitenizdeki her sayfanın kalitesini ölçerek, web sayfalarının genel performansını iyileştirmek için kullanılan açık kaynaklı bir araçtır. Herkese açık veya özel herhangi bir web sayfasına karşı çalıştırılabilir. 6 ana performans metriği aşağıdaki gibidir:

• First Contentful Paint
• Largest Contentful Paint
• Speed Index
• Total Blocking Time
• Cumulative Layout Shift
• Time to Interactive

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

FCP, gerçekleşmeden önce iki aşamadan geçer:

• The First Paint
• The Contentful Paint

First Paint (FP), web sayfanızın mevcut görüntüsünde herhangi bir değişiklik olduğunda gerçekleşir. Bu metrik, tarayıcının kullanıcının ekranındaki ilk pikselleri oluşturma süresini ölçer. Kullanıcının görünüm alanında yapılan her şey FP’yi tetikler.

Bu metrikle ilgili problem, FP’nin kullanıcıların etkileşimde bulunabileceği anlamlı bir içerik olmadan da, sayfa yükleme sırasında kolayca tetiklenebilmesidir. Bir web sitesinin arka plan renginin değiştiği durumlarda, ana içerik veya herhangi bir etkileşim biçimi daha uzun sürse bile, FP tetiklenir.

Öte yandan, Contentful Paint, Document Object Model’de (DOM) ilk içeriğin ne zaman boyandığına odaklanır.

Bu ikisini bir araya getirerek, sadece herhangi bir boyayı değil, aynı zamanda kullanıcıların etkileşimde bulunabileceği içeriğe sahip ilk boyayı da ölçen metrik, First Contentful Paint’tir (FCP).

FCP Değeri Nasıl Optimize Edilir?

Bir sitede FCP’yi iyileştirmek, tarayıcının sunucuya yaptığı istek sayısını azaltmayı, tarayıcının getirdiği veri miktarını azaltmayı veya sunucu yanıt süresini iyileştirmeyi gerektirir.

FCP değerini optimize etmek için yapmanız gerekenler aşağıdakileri içerebilir:

• Barındırma sağlayıcınızı değiştirin veya paylaşımlı hosting yerine dedicated hosting kullanmayı seçin. Siteniz diğer sitelerle sunucu kaynaklarını paylaşmadığından, dedicated hosting, VDS hosting  paylaşımlı hosting hizmetlerinden çok daha hızlı çalışır.
• Komut dosyaları (JavaScript) ve stil sayfaları (CSS) gibi oluşturmayı engelleyen kaynakların sayısını azaltın. Bir CSS veya JavaScript dosyasına yapılan her istek sitenizi yavaşlatır. Mümkün olduğunda, tüm JavaScript ve CSS dosyalarını tek bir dosyada birleştirin. Bu, sunucuya yapılan isteklerin sayısını azaltır, gerekli tüm işlevleri elde etmek için tek bir istek yeterlidir.
• CSS ve JavaScript dosyalarının boyutunu küçültün. Bu dosyalar genellikle bir insan için okumayı kolaylaştırmak için yorumlar ve boşluklar içerir. Ancak, tarayıcı için bu bilgi gereksizdir. Stil sayfalarından ve komut dosyalarından mümkün olduğunca fazla sayıda karakter kaldırarak siteyi daha hızlı hale getirir. Bunu https://www.minifier.org/ gibi çevrimiçi araçları veya geliştirme araçlarını kullanarak başarabilirsiniz.
• Kullanılmayan CSS veya JavaScript’i kaldırın. Üçüncü taraf yazılımlar genellikle JavaScript’i ve mümkün olduğu kadar çok farklı türde web sitesini desteklemek için tasarlanmış stil sayfalarını içerir. Ancak, bu kodun yalnızca bir bölümünü kullanıyorsanız, siteyi hızlandırmak için kullanılmayan bölümleri ortadan kaldırmaya çalışın.
• Birden çok sayfa yönlendirmesinden kaçının. Her yönlendirme, sunucuya yeni bir istektir ve sayfanın yüklenmesini ve oluşturulmasını tamamlamak için zaman ekler.
• Mümkün olduğunda kritik istekleri önceden yükleyin. Sayfanızın kurulumunda, tarayıcıya, sayfayı oluşturmak için birden çok varlık (genellikle CSS ve JavaScript dosyaları) yüklemesi gerektiğini söyleyin. Tarayıcıya, oluşturmadan önce bu varlıkları getirmesini söylemek, sunucuya geri gönderilen isteklerin sayısını azaltır.
• Sunucunuzdan veri alma süresini azaltmak için verimli bir CDN’den (içerik dağıtım ağı) yararlanın.
• 5.000 KB’yi (5 MB) aşan yüklerden kaçının. Bu aynı zamanda hücresel veri için ödeme yapan kullanıcılara da yarar sağlar.
• Statik varlıkları verimli bir önbellek ilkesiyle sunun. Verimli önbelleğe alma, verileri yerel olarak önbelleğe alarak sitenizi geri gelen kullanıcılar için hızlandırır. Bu, sunucudan veri isteme ihtiyacını ortadan kaldırır.
• 1500’den fazla düğüme, 32 düğümden daha büyük bir derinliğe veya 60’tan fazla düğüme sahip bir ana düğüme sahip DOM ağaçlarından (bir web sayfasının grafik temsili) kaçının. Bunu, bir sayfayı birden çok küçük sayfaya bölerek başarabilirsiniz.
• Web sayfası aktarımları için sıkıştırmayı kullanın. En azından sunucuyu gzip kullanacak şekilde yapılandırın. Mümkünse daha iyi hız ve sıkıştırma sağlayan Brotli kullanın.
• Mümkünse web yazı tiplerini önceden yükleyin, çünkü bazı tarayıcılar tüm yazı tipleri önceden yüklenmediği sürece sayfayı görüntülemez.

Özetle diyebiliriz ki, First Contentful Paint, Google’ın Core Web Vitals (Önemli Web Verileri) metriklerinden biridir ve web sitenizin Google sıralamalarında önemli bir rol oynar.

Kritik kaynakları satır içine alarak, kritik olmayan kaynakları erteleyerek ve kullanılmayan öğeleri kaldırarak oluşturmayı engelleyen kaynaklardan kurtulmak, siteniz için FCP puanlarını iyileştirmeye yardımcı olabilir.

Sitenizin DOM boyutunu optimize etmek de, sayfa yükleme hızını iyileştirmenin ve ardından sitenizdeki FCP puanlarını iyileştirmenin harika bir yoludur. Benzer şekilde, yüksek öncelikli kaynakları önceden yüklemek, web sayfalarınız için sayfa yükleme hızlarını iyileştirebilir.

Bu ipuçlarını kullanarak, web sitenizdeki FCP sürelerini azaltarak web sitenizi daha iyi bir konuma taşıyabilirsiniz.