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 metrik için "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 siteler 1, 8 saniye veya daha kısa bir İlk Zengin İçerikli Boyama değerine sahip olmalıdır. 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.

ziyaret edin.

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 Bildir
• Search Console (Hız) Rapor)
• 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ı size bildirir. 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, kaynaklar arası iframe'lerden gelen boyama zamanlarını raporlamayabilir, ancak FCP'yi doğru bir şekilde ölçmek için tüm çerçeveleri dikkate almanız gerekir. Alt çerçeveler, boyama zamanlarını toplama için üst çerçeveye raporlamak üzere API'yi kullanabilir.
• API, gezinme başlangıcından itibaren FCP'yi ölçer ancak önceden oluşturulmuş sayfalarda FCP activationStart ile ölçülmelidir. Çünkü bu süre, kullanıcının deneyimlediği FCP süresine denk gelir.

Geliştiriciler, tüm bu ince farklılıkları ezberlemek yerine, bu farklılıkları sizin için ele alan FCP'yi ölçmek için web-vitals JavaScript kitaplığını kullanabilir (mümkün olduğunda iframe sorununun ele alınmadığı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 ilişkin eksiksiz bir örnek için onFCP() kaynak koduna bakabilirsiniz.

FCP nasıl iyileştirilir?

Belirli bir sitede FCP'yi nasıl iyileştireceğinizi öğrenmek istiyorsanız Lighthouse performans denetimi çalıştırabilir ve denetimin önerdiği belirli fırsatlara veya teşhis sonuçlarına dikkat edebilirsiniz.

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

• 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 kısaltın (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 istek derinliğini en aza indirin
• Web yazı tipi yüklemesi sırasında metnin görünür olduğundan emin olma
• İstek sayılarını düşük ve aktarım boyutlarını küçük tutma

Değişiklik günlüğü

Hatalar bazen metrikleri ölçmek için kullanılan API'lerde ve bazen metriklerin tanımlarında 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.