First Contentful Paint (FCP), algılanan sayfa yükleme hızını ölçmek için kullanıcı merkezli bir ölçümdür. FCP, bir hız testi aracının ölçtüğü şeyden ziyade, kullanıcıların bir web sitesinin performansını nasıl algıladığını ölçer.
First Contentful Paint, sayfa yükleme zaman çizelgesinde tarayıcıda herhangi bir oluşturma türünün algılandığı bir nokta olan First Paint’ten farklıdır. Öte yandan, FCP bazı içeriğin oluşturulmasını gerektirir. Bu içerik metin, resimler (arka plan resimleri, logolar dahil) veya beyaz olmayan <tuval> öğeler olabilir.
First Contentful Paint, ayrıca, en büyük öğenin görünüm alanında görünür hale gelmesinin ne kadar sürdüğünü ölçen Temel Web Verilerinden biri olan Largest Contentful Paint’ten (LCP) farklıdır.
Basit tutmak için, FCP’yi kullanıcının tarayıcısında herhangi bir içeriği görmesi için geçen süre olarak düşünebilirsiniz. Böylece, hızlı bir FCP, kullanıcıya bir şeyler olduğu konusunda güvence verir ve onları siteye bağlı tutar.
İlk Contentful Paint (FCP) Nasıl Ölçülür?
First Contentful Paint, laboratuvar testleri ve gerçek kullanım deneyimi (saha verileri) ile ölçülebilir. FCP’yi ölçmek için kullanabileceğiniz birkaç araç:
⦁ Llighthouse
⦁ Web Sayfası Testi
⦁ Chrome Geliştirme Araçları
⦁ Sayfa Hızı Analizleri
⦁ Chrome Kullanıcı Deneyimi Raporu
⦁ Firebase Performans İzleme (beta)
Google, sitenizdeki sayfa yüklemelerinin yüzde 75’ini hem mobil hem de masaüstü cihazlar arasında bölümlere ayırarak ölçer. Bu, kullanıcı deneyiminin doğru bir temsili olmasını sağlar.
WordPress’te İlk Contentful Paint (FCP) Süresi Nasıl İyileştirilir?
FCP’nin ne olduğunu ve neden önemli olduğunu ele aldık. İşte WordPress sitenizdeki First Contentful Paint’i iyileştirmenin ve kötü bir puanı düzeltmenin 10 yolu. Amaç FCP süresini 1,8 saniyenin altına düşürmektir:
Sunucu Yanıt Süresini (TTFB) Azaltın
Render-Blocking Kaynakları Ortadan Kaldırın
Kritik Yol CSS Oluşturun
Ekranın Üstündeki Komut Dosyasına Dayalı Öğelerden Kaçının
Büyük Görüntüleri Yüklemekten Kaçının
Sitenizin DOM Boyutunu Optimize Edin
Webfont Yükleme Sırasında Metnin Görünür Kalmasını Sağlayın
Kaynak İpuçlarını Kullanın
Birden Çok Sayfa Yönlendirmesinden Kaçının
Yukarıda yazdıklarımıza dikkat ederek sitenizde FCP optimizasyonunu sağlayabilirsiniz. Daha detaylı bilgi için diğer makalelerimize mutlaka göz atın.
