FCP First Contentful Paint Nedir ? Nasıl Yapılır?

Merhaba arkadaşlar google search console da fcp sorunu = 3 (sn) değerinden uzun diye bir uyarı ile karşılaştım birçok linkte. İnternette araştırdım ve ;

"Google PageSpeed internet sitelerin hızını belirlemek için PageSpeed Insights algoritmasına bazı yeni kıstaslar kattı. Bunlardan biri de FCP idi. FCP İngilizce First Contentful Paint kelimelerinin baş harflerinden oluşur. Türkçe Karşılığı İlk İçerik Boyaması olarak adlandırılabilir. Web site içeriği gelmeden o bölgelerin boyanması anlamına gelir. Örnek olarak CNN sayfasına girip anlık olarak yakaladığım FCP görüntüsü görülebilir. Henüz içerik yüklenmedi ama içeriğin olduğu alanlar bir çeşit boyama ile işaretlenmiş durumda. "

gibi bir açıklama buldum.Olayın ne olduğunu anladım ancak nasıl yapacağıma yada nasıl düzeltmem gerektiğine dair en ufak bir bilgi yok internette. İçinizde bu konu hakkında bilgisi olan bizi aydınlatabilecek arkadaşlar var mı acaba. Şimdiden çok teşekkür ederim.



Kimseden ses yok sanırım Birdaha bi ön plana çıkarıyım konuyu belki yazan olur.

Bu tanım SPA (Single Page App)'lerden sonra çok fazla kullanılmaya başlandı. Basit bir şekilde anlatayım. Kullanıcı ilk siteye girdiğinde kullanıcıya hemen bir ekran çiz diyor google. https://github.com/danilowoz/react-content-loader Buraya bakın bu tarz siteler çok görürsünüz. Önce bu tarz bir loader gelir, ondan sonra sayfa çizmeye başlanır. Single Page dememin sebebi şu orada yoğun bir endpoint haberleşmesi var. Client Rest'e request atıyor. Data state'e yazılıp html'de render ediyor. Bu işler vakit alındığı için kullanıcı beklemesin sayfa gelsin ama sen dataları gelince yükle diyor.

Gelelim Server Side dillere; Client'dan request geldiğinde request'i back-end tabanlı diller render ediyor. Dolayısıyla content loader'ı wordpress tarzı projelerde direk kullanamazsınız ne kullanabilirsiniz ? Dom'a daha sonradan yükleme durumun olabileceği içerikler. Resimler, fontlar gibi staticler. O zaman da lazy load falan kullanıyorsunuz. Dom yükleniyor. Kullanıcı bir ekranla karışılaşıyor ondan sonra sen resimleri getiriyorsun gibi. Umarım anlatabilmişimdir.