First Contentful Paint (FCP)

Philip Walton

Tarayıcı Desteği

  • 60
  • 79
  • 84
  • 14.1

Kaynak

İlk Zengin İçerikli Boyama (FCP), algılanan yükleme hızını ölçmek için önemli ve kullanıcı merkezli bir metriktir. Sayfa yükleme zaman çizelgesinde, kullanıcının ekranda herhangi bir şey görebildiği ilk noktadır. Hızlı bir FCP, kullanıcıyı bir şeylerin olduğuna ikna etmenize yardımcı olur.

FCP, kullanıcının sayfaya ilk kez gitmesinden 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.

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

İlk içerik öğesi oluşturulduğunda içeriğin tamamı oluşturulmaz. Bu, FCP ile sayfanın ana içeriklerinin yüklenmesinin ne zaman sona erdiğini ölçen Largest Contentful Paint (LCP) arasında yapılması gereken önemli bir farktır.

İyi bir FCP puanı nedir?

İyi bir kullanıcı deneyimi sağlamak için sitelerin FCP'sinin 1, 8 saniye veya daha kısa olması gerekir. Kullanıcılarınızın çoğu için bu hedefe ulaştığınızdan emin olmak amacıyla, ölçülmesi gereken bir eşik, mobil ve masaüstü cihazlar arasında segmentlere ayrılmış sayfa yüklemelerinin 75. yüzdelik dilimidir.

İyi FCP değerleri 1,8 saniye veya daha kısa, düşük değerler 3,0 saniyeden uzun ve iyileştirme gerektirenler arasındaki tüm değerlerdir
İyi FCP değerleri 1,8 saniye veya daha kısadır. Kötü değerler 3,0 saniyeden uzundur.

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

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

Saha araçları

Laboratuvar araçları

JavaScript'te FCP'yi ölçme

JavaScript'te FCP'yi ölçmek için Paint Timing API'yi kullanın. Aşağıdaki örnekte, first-contentful-paint adıyla bir paint girişini dinleyen ve bunu konsola kaydeden bir PerformanceObserver öğesinin 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});

Bu örnekte günlüğe kaydedilen first-contentful-paint girişi, ilk zengin içerikli öğenin ne zaman boyandığını belirtir. Ancak bazı durumlarda bu giriş FCP ölçümü için geçerli değildir.

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

Metrik ve API arasındaki farklar

  • API, bir arka plan sekmesinde yüklenen sayfalar için bir first-contentful-paint girişi gönderir, ancak FCP hesaplanırken bu sayfalar yoksayılmalıdır. İlk boyama zamanlamaları yalnızca sayfa tüm süre boyunca ön plandaysa dikkate alınır.
  • API, sayfa geri-ileri önbellekten geri yüklendiğinde first-contentful-paint girişlerini raporlamaz ancak bu durumlarda FCP ölçülmelidir çünkü kullanıcılar bunları farklı sayfa ziyaretleri olarak görür.
  • API, kaynaklar arası iframe'lerden alınan boyama zamanlarını raporlamayabilir ancak FCP'yi doğru şekilde ölçmek için tüm kareleri dikkate almanız gerekir. Alt çerçeveler, boyama zamanlarını toplama için üst çerçeveye bildirmek üzere API'yi kullanabilir.
  • API, gezinme başlangıcından itibaren FCP'yi ölçer ancak kullanıcının deneyimlediği FCP süresine karşılık geldiği için önceden oluşturulmuş sayfalar için FCP ölçülmesi activationStart gerekir.

Geliştiriciler tüm bu ince farkları ezberlemek yerine, mümkün olduğunda (iframe'ler hariç) bu farklılıkları sizin yerinize işleyen FCP'yi ölçmek için web-vitals JavaScript kitaplığını kullanabilir:

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 tam bir örnek için onFCP() kaynak koduna bakın.

FCP nasıl iyileştirilir?

Belirli bir site için FCP'yi iyileştirmeyi öğrenmek istiyorsanız bir Lighthouse performans denetimi yürütebilir ve denetimin önerdiği belirli fırsatlara veya teşhislere dikkat edebilirsiniz.

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

Değişiklik günlüğü

Bazı durumlarda, metrikleri ölçmek için kullanılan API'lerde veya bazen metriklerin tanımlarında hatalar keşfedilir. Bu nedenle, değişikliklerin bazen yapılması gerekir ve bu değişiklikler dahili raporlarınızda ve kontrol panellerinizde iyileştirme veya regresyon olarak gösterilebilir.

Bu durumu yönetmenize yardımcı olmak için 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österilmiştir.

Bu metriklerle ilgili geri bildiriminiz varsa web-önemli geri bildirim Google grubunda geri bildirimlerinizi gönderin.