First Contentful Paint (FCP)

Philip Walton

FCP nedir?

İlk Zengin İçerikli Boyama (FCP), kullanıcının sayfaya ilk geldiği andan sayfa içeriğinin herhangi bir bölümünün ekranda oluşturulmasına kadar geçen süreyi ölçer. Bu metrikte "içerik"; metin, resimler (arka plan resimleri dahil), <svg> öğeleri veya beyaz olmayan <canvas> öğelerini ifade eder.

Önceki resimde gösterilen yükleme zaman çizelgesinde FCP, ikinci karede gerçekleşir. Bu, ilk metin ve resim öğelerinin ekranda oluşturulması anlamına gelir.

İçeriğin bir kısmının oluşturulmuş olsa da tamamının oluşturulmadığını fark edeceksiniz. Bu, First Contentful Paint ve Largest Contentful Paint (LCP) arasında yapılması gereken önemli bir ayrımdır. Bu ayrım, sayfanın ana içeriğinin yüklenmesi bittiğinde ölçüm yapmayı hedefler.

İyi bir FCP puanı nedir?

İyi bir kullanıcı deneyimi sağlamak için sitelerde İlk İçerikli Boya'nın 1,8 saniye veya daha kısa olması gerekir. Kullanıcılarınızın çoğunda bu hedefe ulaştığınızdan emin olmak için iyi bir ölçüm eşiği, mobil ve masaüstü cihazlara göre segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimidir.

FCP nasıl ölçülür?

FCP laboratuvarda veya sahada ölçülebilir. Aşağıdaki araçlarda kullanılabilir:

Alan araçları

• PageSpeed Insights
• Chrome Kullanıcı Deneyimi Raporu
• Search Console (Hız Raporu)
• web-vitals JavaScript kitaplığı

Laboratuvar araçları

• Lighthouse
• Chrome Geliştirici Araçları
• PageSpeed Insights

JavaScript'te FCP'yi ölçme

JavaScript'te FCP'yi ölçmek için Paint Timing API'yi kullanabilirsiniz. Aşağıdaki örnekte, first-contentful-paint adlı bir paint girişini işleyen ve bunu konsola kaydeden bir PerformanceObserver işleminin nasıl oluşturulacağı gösterilmektedir.

new PerformanceObserver((entryList) => {
  for (const entry of entryList.getEntriesByName('first-contentful-paint')) {
    console.log('FCP candidate:', entry.startTime, entry);
  }
}).observe({type: 'paint', buffered: true});

Önceki kod snippet'inde, günlüğe kaydedilen first-contentful-paint girişi, ilk zengin içerikli öğenin ne zaman boyandığını gösterir. Ancak bazı durumlarda bu giriş FCP ölçümü için geçerli olmaz.

Aşağıdaki bölümde, API'nin raporladıkları ile metriğin hesaplanma şekli arasındaki farklar listelenmiştir.

Metrik ile API arasındaki farklar

• API, arka plan sekmesinde yüklenen sayfalar için bir first-contentful-paint girişi gönderir ancak FCP hesaplanırken bu sayfalar göz ardı edilmelidir (ilk boyama zamanları yalnızca sayfa tüm süre boyunca ön plandaysa dikkate alınmalıdır).
• Sayfa geri-ileri önbellekten geri yüklendiğinde API, first-contentful-paint girişlerini raporlamaz. Ancak kullanıcılar bunları farklı sayfa ziyaretleri olarak deneyimlediği için bu durumlarda FCP ölçülmelidir.
• API, kaynak dışı iFrame'lerden gelen boyama zamanlarını bildirmeyebilir ancak FCP'yi doğru şekilde ölçmek için tüm kareleri dikkate almanız gerekir. Alt çerçeveler, toplama için boyama zamanlarını üst çerçeveye bildirmek üzere API'yi kullanabilir.
• API, FCP'yi gezinmenin başlangıcından itibaren ölçer. Ancak önceden oluşturulmuş sayfalar için FCP, kullanıcının deneyimlediği FCP süresine karşılık geldiğinden activationStart'den itibaren ölçülmelidir.

Geliştiriciler, tüm bu ince farklılıkları ezberlemek yerine FCP'yi ölçmek için web-vitals JavaScript kitaplığını kullanabilir. Bu kitaplık, bu farklılıkları sizin için yönetir (mümkün olduğunda; iframe sorununun bu kapsamda yer almadığını unutmayın):

import {onFCP} from 'web-vitals';

// Measure and log FCP as soon as it's available.
onFCP(console.log);

JavaScript'te FCP'nin nasıl ölçüleceğine dair eksiksiz bir örnek için onFCP() kaynak koduna bakabilirsiniz.

FCP'yi iyileştirme

Belirli bir site için FCP'yi nasıl iyileştireceğinizi öğrenmek üzere Lighthouse performans denetimi çalıştırabilir ve denetimin önerdiği belirli fırsatlara veya teşhislere dikkat edebilirsiniz.

Genel olarak FCP'yi (herhangi bir site için) nasıl iyileştireceğinizi öğrenmek üzere aşağıdaki performans kılavuzlarına bakın:

• Oluşturmayı engelleyen kaynakları ortadan kaldırma
• CSS'yi küçültme
• Kullanılmayan CSS'yi kaldırma
• Kullanılmayan JavaScript'i kaldırma
• Gerekli kaynaklara önceden bağlanma
• Sunucu yanıt sürelerini azaltma (TTFB)
• Birden çok sayfa yönlendirmesinden kaçınma
• Önemli istekleri önceden yükleme
• Çok büyük ağ yüklerinden kaçının
• Statik öğeleri verimli bir önbellek politikasıyla yayınlayın
• Aşırı büyük bir DOM boyutundan kaçının
• Kritik isteklerin derinliğini en aza indirin
• Web yazı tipi yüklemesi sırasında metnin görünür olduğundan emin olma
• İstek sayısını az ve aktarma boyutlarını küçük tutun

Değişiklik günlüğü

Metrikleri ölçmek için kullanılan API'lerde ve bazen de metriklerin tanımlarında zaman zaman hatalar keşfedilir. Sonuç olarak, bazen değişikliklerin yapılması gerekir. Bu değişiklikler, dahili raporlarınızda ve kontrol panellerinizde iyileştirmeler veya regresyonlar olarak görünebilir.

Bu metrikleri yönetmenize yardımcı olmak amacıyla, söz konusu metriklerin uygulanmasında veya tanımında yapılan tüm değişiklikler bu Değişiklik Günlüğü'nde gösterilecektir.

Bu metriklerle ilgili geri bildirimlerinizi web-vitals-feedback Google grubunda paylaşabilirsiniz.