İ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.
İ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.
FCP nasıl ölçülür?
FCP, laboratuvarda veya sahada ölçülebilir ve aşağıdaki araçlarda kullanılabilir:
Saha araçları
- PageSpeed Insights
- Chrome Kullanıcı Deneyimi Raporu
- Search Console (Hız Raporu)
web-vitals
JavaScript kitaplığı
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:
- Oluşturmayı engelleyen kaynakları ortadan kaldırın
- CSS'yi küçültün
- Kullanılmayan CSS'yi kaldırma
- Kullanılmayan JavaScript'i kaldırın
- Gerekli kaynaklara önceden bağlanma
- Sunucu yanıt sürelerini azaltma (TTFB)
- Birden çok sayfa yönlendirmesini önleme
- Önemli istekleri önceden yükleme
- Çok büyük ağ yüklerinden kaçınma
- Statik öğeleri etkili bir önbellek politikasıyla yayınlama
- Aşırı büyük bir DOM boyutundan kaçınma
- Kritik istek derinliğini en aza indirme
- Web yazı tipi yüklenirken metnin görünür durumda kalmasını sağlama
- İstek sayısını az ve aktarım boyutlarını küçük tutun
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.