First Contentful Paint (FCP)

Philip Walton

Tarayıcı Desteği

  • 60
  • 79
  • 84
  • 14.1

Kaynak

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.

google.com&#39;dan FCP zaman çizelgesi
Bu yükleme zaman çizelgesinde, FCP ikinci karede gerçekleşir. Çünkü bu noktada ilk metin ve resim öğeleri ekranda oluşturulur.

Ö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çeriklerinin 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.

İyi FCP değerleri 1,8 saniye veya daha kısa, zayıf değerler 3,0 saniyeden uzundur ve iyileştirilmesi gerekenlerin arasındaki tüm değerlerdir
İyi FCP değerleri 1,8 saniye veya daha kısadır. Düşük değerler 3,0 saniyeden uzundur

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

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

Alan araçları

Laboratuvar araçları

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:

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.