First Contentful Paint

First Contentful Paint (FCP) Nedir?

First Contentful Paint (FCP), sayfa yükleme hızını ölçmenin bir yoludur. Sayfa hızını tek bir zaman noktası olarak özetleyemezsiniz, aslında yükleme sürecinde ziyaretçinin siteyi hızlı veya yavaş yükleniyormuş gibi algılayabileceği birkaç an vardır. FCP, sayfanın istendiği andan ilk anlamlı içeriğin ekranda ilk kez oluşturulduğu ana kadar geçen süre farkını ölçer.

Peki bu size tam olarak ne söylüyor? FCP'nin öncelikle "kullanıcı odaklı bir metrik" olduğunu söylüyor çünkü ziyaretçinin deneyimlediği yükleme hızı hakkında bir şeyler söylüyor. user experience hakkında bir şeyler söylüyor. FCP anında, bir ziyaretçinin ekranda gerçekten "bir şey" gördüğünden emin olabilirsiniz.

Kelimeleri inceleyelim: 'First','Contentful' ve 'Paint'.

1. First:  First ile elbette tarayıcınızda önemli bir şeyin göründüğü tam ilk anı kastediyoruz.
2. Contentful: Contentful ile içerikli bir HTML öğesini kastediyoruz. Yani boş bir öğe veya arka plan rengi gibi bir düzen öğesi değil, bir metin, bir görsel (arka plan görseli dahil), SVG veya canvas gibi.
   
3. Paint: Paint, (aşağı yukarı) tarayıcının ekrana bir şey koymaya hazır olduğu anlamına gelir. Bu basit görünüyor ama aslında tarayıcının en karmaşık görevidir. Ekrana bir şey koymak için tarayıcının bir öğenin tüm özelliklerini hesaplamaya hazır olması gerekir. Aşağıda, ekrana herhangi bir şey eklenmeden önce gerekli olan oluşturma sürecinin bir örneği bulunmaktadır.

İyi bir First Contentful Paint skoru nedir?

İyi bir FCP skoru 0 ile 1,8 saniye arasındaki herhangi bir değerdir. FCP skorunuz 1,8 ile 3 saniye arasındaysa iyileştirme gerektirir. 3 saniyenin üzerindeki herhangi bir FCP skoru zayıf olarak kabul edilir. Largest Contentful Paint için Core Web Vitals'ı geçmek için ziyaretçilerinizin en az %75'inin 'iyi' bir FCP skoruna sahip olması gerekir.

Core Web Vitals'da her zaman olduğu gibi, daha hızlı bir First Contentful Paint skoru daha yüksek bir skordan iyidir. 

First Contentful Paint (FCP) nasıl ölçülür?

FCP, Google tarafından gerçek kullanıcılardan veri toplanarak ölçülür. Bu veriler CrUX veri setinde saklanır. Bu veriler CrUX API veya Google BigQuery aracılığıyla herkese açıktır. FCP ayrıca laboratuvar testleri aracılığıyla da ölçülebilir. En yaygın laboratuvar testi Lighthouse olarak adlandırılır.

CrUX veri setinden First Contentful Paint'i alma

First Contentful Paint, CrUX veri setinden pagespeed.web.dev, CrUX API veya Google BigQuery aracılığıyla okunabilir.

Real User Monitoring (RUM) ile First Contentful Paint'i ölçme 

RUM Tracking, Real User Monitoring anlamına gelir. Real User Monitoring ile First Contentful Paint'i gerçek kullanıcı etkileşimleri aracılığıyla takip edebilirsiniz. RUM Tracking'in avantajı, taze veriler için 28 gün beklemenize gerek olmaması ve verilerin çok daha ayrıntılı bir şekilde sorgulanıp analiz edilebilmesidir.

Lighthouse'da FCP'yi ölçme

1. FCP'sini ölçmek istediğiniz sayfayı Chrome'da açın. Eklentilerin sizi rahatsız etmemesi ve sayfanızın FCP'sini yavaşlatmaması için bunu gizli modda yaptığınızdan emin olun.
2. Sayfaya sağ tıklayın ve Öğeyi İncele'yi seçin. Bu şekilde Chrome geliştirici konsolunu açarsınız.
3. Konsolun üst kısmında Lighthouse sekmesini göreceksiniz. Üzerine tıklayın. Ardından Kategoriler altında Performans'ı seçin (diğerlerini boş bırakın) ve Cihaz altında Mobil'i seçin.
4. Şimdi Rapor Oluştur'a tıklayın. Lighthouse sayfanızın hız raporunu oluşturacaktır. Raporun sol üst köşesinde sayfanızın FCP'sinin ne olduğunu göreceksiniz.

Bu, bu sayfa için Lighthouse raporunun bir ekran görüntüsüdür. Bu sayfanın mobil cihazdaki FCP'si 0,8 saniyedir! Fena değil, değil mi?

Çevrimiçi bir araçla FCP ölçme

FCP'yi bir dizi çevrimiçi araçla da ölçebilirsiniz. En bilinenleri GTMetrix, pingdom ve pagespeed.web.dev'dir. Bu araçlarla çalışmak kolaydır ve belirli laboratuvar koşulları altında LCP hakkında bazı veriler sunar.

First Contentful Paint'i İyileştirme

Artık First Contentful Paint'in ne olduğunu bildiğinize göre, onu hızlandırmak için çalışmaya başlayabiliriz. Hızlı bir FCP'nin arkasındaki fikir aslında oldukça basittir: tarayıcının hemen oluşturmaya başlayabilmesini sağlamak. Oluşturmanın gecikmesine neden olabilecek her şey zayıf bir FCP skoruyla sonuçlanacaktır.

Tıpkı Largest Contentful Paint'te olduğu gibi First Contentful Paint de 2 veya 4 kategoriye ayrılabilir:

1. Time to first byte (TTFB) - Sayfa yüklenmeye başladığı andan tarayıcının HTML'nin ilk baytını aldığı ana kadar geçen süre. 
2. Kaynak yükleme gecikmesi - TTFB ile tarayıcının FCP kaynağını yüklemeye başladığı an arasındaki süre
   
3. Kaynak yükleme süresi - FCP kaynağının kendisinin yüklenmesi için geçen süre.
   
4. Öğe oluşturma gecikmesi - FCP kaynağının yüklenmesinin tamamlandığı an ile LCP öğesinin tamamen oluşturulduğu an arasındaki süre
   

Hız ipucu: LCP öğesinin bir ağ kaynağı gerektirmediğinden emin olarak 2. ve 3. adımları kolayca ortadan kaldırabilirsiniz. Bir metin öğesi durumunda font-display:swap kullanmayı düşünün. Küçük bir görsel öğesi durumunda görseli satır içi yerleştirmeyi düşünün.

Bu bize optimize etmemiz gereken yalnızca Time to First Byte ve Element Render delay'i bırakıyor.

Aşağıda FCP'yi iyileştirmek için sıklıkla kullandığım 14 çözüm bulunmaktadır. Ancak dikkatli olun, bir çözümü yanlış yerde kullanmak aslında gecikmelere neden olabilir. Bu yüzden kendiniz başlamadan önce bir sayfa hızı uzmanına danışmanız en iyisidir.

1. Hızlı sunucu yanıtı (TTFB)

TTFB (istek ile sunucunun gönderdiği ilk bayt arasındaki süre) her zaman oluşturma sürecinin ilk adımıdır. Bu noktadan itibaren tarayıcınız çoklu görev yapmaya başlar ve daha sonraki optimizasyonların etkisi azalmaya başlar. HTML kodu, tüm hız metriklerini doğrudan etkileyen tek istektir.

HTML kodunun sunucudan gönderilme hızı genellikle time to first byte (TTFB) olarak ölçülür. Bunu mümkün olduğunca hızlı yapmak önemlidir. Genellikle bunu sunucu taraflı önbelleklemeyi etkinleştirerek yaparsınız.

Time to first byte söz konusu olduğunda, düşük her zaman daha iyidir. 

Time to first byte'ı kendiniz kolayca ölçebilirsiniz. Şöyle yapılır:

1. Google Chrome'un geliştirici konsolunu açmak için Ctrl-Shift-I kısayolunu kullanın.
   
2. Konsolun üst kısmında bir Network sekmesi göreceksiniz. Üzerine tıklayın.
3. Sayfayı Ctrl-R ile yeniden yükleyin.
   
4. Şimdi Chrome'un sunucunuza gönderdiği tüm ağ isteklerini göreceksiniz.
5. En üstteki ağ isteğine tıklayın, bu sayfanızın kendisi için yapılan istektir.
6. Şimdi bu ağ isteği hakkında daha fazla bilgi alacaksınız.  Sayfanızın TTFB'sini görmek için bu bilginin üst kısmındaki zamanlama sekmesine tıklayın.

2. HTTP/3

HTTP/3, HTTP protokolünün üçüncü sürümüdür. HTTP/3, eski HTTP/1.1 ve HTTP/2 protokollerinde bulunan birçok sorunu çözer. Örneğin, HTTP/2'den bu yana aynı bağlantı üzerinden aynı anda birden fazla dosya gönderebilirsiniz. HTTP/3, daha hızlı bir ilk bağlantı ve küçük ağ kesintilerinden daha az sorun sağlar.

Çok fazla ayrıntıya girmeden, HTTP/3 özellikle mobil ağ gibi daha yavaş bir ağda önemli bir hız kazancı sağlar. Ağ yöneticiniz, web sunucunuzun zaten daha hızlı HTTP/3 protokolüne uygun olup olmadığını size söyleyebilir.

Web sitenizin zaten daha hızlı HTTP/3 protokolünü kullanıp kullanmadığını kendiniz kontrol edebilirsiniz. Google Chrome'un ağ denetçisini açmak için Ctrl-Shift-I kısayolunu kullanın. Tablo başlığına sağ tıklayın ve Protokol'ü seçin. Şimdi sitenizin hangi protokolü kullandığını görmek için sayfayı yeniden yükleyin.

3. Tarayıcı Önbellekleme

Ağ bağlantısı, sayfa hızı söz konusu olduğunda genellikle zayıf bir halkadır. Ağı tamamen atlamak çok daha kolay olmaz mıydı?

Bir ziyaretçi daha önce sitenizi ziyaret etmişse, ağ kaynaklarının  (örneğin bir stil sayfası)  ziyaretçinin tarayıcısı tarafından ne kadar süre saklanabileceğini belirtebilirsiniz. Ziyaretçi bu dosyalardan birine tekrar ihtiyaç duyduğunda, tarayıcının önbelleğinden anında çıkarlar. Sonuç olarak, tarayıcı çok daha hızlı oluşturmaya başlayabilir ve FCP'yi hızlandırabilir.

4. Sıkıştırma

Ağ hızı neredeyse her durumda zayıf bir halkadır. İyi bir First Contentful Paint için dosyaların ağ üzerinden mümkün olduğunca hızlı gönderilmesi çok önemlidir. Sıkıştırma, sunucudan gönderilmesi gereken bayt sayısını azaltır – daha az bayt, bir ağ kaynağını beklemek için daha az zaman demektir. Sıkıştırma, bence hak ettiği ilgiyi görmeyen bir tekniktir. Ne yazık ki, çok fazla web yöneticisi "sıkıştırmayı açar" ve sonra bir daha bakmaz. Bu üzücü çünkü işleri biraz daha hızlı yapmanın kolay bir yolu.

İki popüler sıkıştırma tekniği vardır: Gzip ve Brotli. Gzip en çok kullanılan sıkıştırma tekniğidir ancak Brotli hızla yetişiyor. Brotli, Google'ın kendisi tarafından oluşturulmuştur ve HTML, JavaScript veya CSS dosyaları söz konusu olduğunda %15 ila %20 daha iyi sonuçlar verir. Bu nedenle Brotli, web için idealdir.

Dinamik sıkıştırma ile statik sıkıştırma arasında da bir fark vardır. Dinamik sıkıştırmada dosyayı web sunucunuz üzerinden göndermeden hemen önce sıkıştırırsınız; statik sıkıştırmada ise sıkıştırılmış dosya sunucuda saklanır. Bu genellikle çok daha akıllıca bir sıkıştırma yoludur, ancak nadiren kullanılır.

5. Kaynak ipuçları ile erken web fontları

Kaynak ipuçları, tarayıcı kendi başına yapmadan önce bir indirme veya ağ bağlantısı başlatır. Web fontları veya görseller gibi bazı ağ kaynakları, yalnızca tarayıcı bunları görüntülemesi gerektiğinden emin olduktan sonra indirilir.

Sitenin görünür kısmını oluşturmak için bir kaynağa ihtiyacınız olduğundan eminseniz, bir "kaynak ipucu" eklemek neredeyse her zaman iyi bir fikirdir. Bu, tarayıcının kaynağı hemen indirmeye veya bağlanmaya başlamasını sağlar. Sonuç olarak, kaynak daha erken kullanılabilir hale gelir ve tarayıcı daha erken oluşturmaya başlayabilir.

Ancak kaynak ipuçları konusunda dikkatli olun, yanlış kullanırsanız sayfanızı gerçekten yavaşlatabilirler.

"Preloading" ile erken indirme

<link rel="preload" href="/static/font/opensans600.woff2" as="font" type="font/woff2" crossorigin>

Preload bağlantısı, sayfa hızı cephaneliğindeki en güçlü araçlardan biridir. Preload bağlantısı aracılığıyla, daha sonra ihtiyaç duyacağınız bir ağ kaynağını indirirsiniz. Bu genellikle fontlar, kritik betikler ve sitenin görünür kısmındaki görseller için çok iyi bir fikirdir.

Preconnect ile önceden bağlanma

Preconnect bağlantısı zaten bir sunucuya bağlanır. Bu, dosyaları CDN veya Google analytics gibi üçüncü taraf bir sunucuda barındırdığınızda kullanışlıdır.

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

6. Prefetch ile sonraki sayfayı önceden getirme

<link rel="prefetch" href="/page2.html">

Prefetch ile düşük öncelikli kaynakları getirebilirsiniz. Bu, daha sonra ihtiyaç duyacağınızı düşündüğünüz kaynakları getirmenin kullanışlı bir yoludur – örneğin birinin sonraki sayfa bağlantısına tıklamasını beklediğinizde.

7. Yönlendirmelerden kaçının

Yaygın bir hata, çok uzun bir yönlendirme zinciri olmasıdır. Açıklayayım: Siteniz muhtemelen güvenli bir bağlantı üzerinden çalışıyor. Bir ziyaretçi https eklemeden sitenizi yazdığında, web sitenizin güvenli olmayan sürümüne yönlendirilir. Ancak her şey doğru ayarlanmışsa, ziyaretçi güvenli web sitesine yönlendirilir. Bunu aşağıdaki yeşil örnekte görebilirsiniz.

Ancak bazen yönlendirme, kırmızı örnekte gösterildiği gibi bir veya daha fazla ara adım üzerinden gerçekleşir. Web sitesinin yavaş çalışmasına ve zayıf bir First Contentful Paint skoruyla sonuçlanmasına neden olan bu ara adımlardır. Her ara adım ekstra zaman maliyetine neden olur ve bu hızla birikebilir. Bu nedenle, her zaman tek bir yönlendirme ile doğru sayfaya ulaştığınızdan emin olun.

8. CSS'yi Küçültün

Harici bir CSS dosyası her zaman oluşturmayı engeller. Bu, bir tarayıcının normalde tüm stil sayfaları indirilip analiz edilene kadar içeriği görüntülemeye başlayamayacağı anlamına gelir. Bu nedenle, stil sayfalarını mümkün olduğunca küçük tutmak en iyisidir. Bu şekilde stil sayfasının indirilmesi için çok uzun beklemenize gerek kalmaz.

Kısa kod ile CSS boyutunu küçültme

CSS boyutunu küçültmenin yollarından biri kısa kodlar kullanmaktır. Bunlar, bir CSS seçicinin en önemli özelliklerini tek bir satırda yazmanıza olanak tanıyan tek satırlık ifadelerdir.

body{
    font-style: normal;
    font-weight: 400;
    font-stretch: normal;
    font-size: 0.94rem;
    line-height: 1.6;
    font-family: "Segoe UI", "Segoe UI", system-ui, -apple-system, sans-serif;
}

Ayrıca şöyle de yazabilirsiniz:

body{font: 400 .94rem/1.6 Segoe UI,Segoe UI,system-ui,-apple-system, sans-serif;}

CSS boyutunu daha da küçültme

Seçicileri virgülle birleştirerek,  satır sonlarını ve boşlukları kaldırarak ve daha kısa renk kodları yazarak CSS boyutunu daha da küçültmek mümkündür.

h1{
  color : #000000;
}
h2{
  color : #000000;
}
h3{
  color : #000000;
}
h4{
  color : #000000;
}
h5{
  color : #000000;
}

Şu şekilde kısaltılabilir

h1,h2,h3,h4,h5{color:#000}

9. Critical CSS

CSS'yi Critical CSS kullanarak bir adım daha ileri götürebiliriz. Critical CSS, hızlı bir web sitesi ve hızlı bir First Contentful Paint için olmazsa olmazdır.

Critical CSS, sayfanın görünür kısmını göstermek için ihtiyaç duyduğunuz tüm seçicilerin (body, p, h1 vb. gibi) bir koleksiyonudur. Bu Critical CSS'yi ayrı bir stil sayfasına koymayın; bunun yerine doğrudan sayfanın <head> bölümüne ekleyin. Bu şekilde yeni bir dosya indirmenize gerek kalmaz ve tarayıcı yıldırım hızında oluşturmaya başlayabilir. Bu, daha hızlı bir FCP sağlar. Sayfanın görünür kısmı için doğrudan ihtiyaç duymadığınız CSS, ilk oluşturma döngüsü tamamlandıktan sonra yüklenir. Ziyaretçiniz için sayfa zaten tamamlanmıştır – arka planda hâlâ eklenmekte olan yeni stilleri kimse fark etmeyecektir.

Critical CSS, kendi Critical CSS aracımız ile kolayca oluşturulabilir. Web sayfanızın URL'sini araca yapıştırmanız yeterli, gerisini biz hallederiz!

10. JavaScript Yüklemeyi Erteleyin

Yavaş bir First Contentful Paint'in en yaygın nedenlerinden biri JavaScript'tir. JavaScript'i nasıl kullandığınıza bağlı olarak, sayfanın oluşturulmasını engelleyebilir. Normalde JavaScript, oluşturma ağacı (render tree) inşa edilmeden önce indirilir ve çalıştırılır. Oluşturma ağacı olmadan, bir tarayıcı ekrana hiçbir şey koyamaz – bu FCP'yi de içerir.

JavaScript'i erteleyerek bu sorunu aşabiliriz. Bunu üç şekilde yapabilirsiniz

Async JavaScript

<script async src="async.js"></script>

Bir script etiketine async özniteliği ekleyerek, JavaScript indirilirken sayfanın oluşturulması artık engellenmez. Async özniteliği, indirme ve oluşturma ağacının inşasının aynı anda gerçekleşebileceğini belirtir.

Betik çalıştırıldığında sayfa engellenir. Çoğu durumda, async özniteliği sayesinde tarayıcı, First Contentful Paint zaten sayfada iken sayfanın önemli bir bölümünü oluşturmak için yeterli zamana sahip olmuştur.

Defer JavaScript

<script defer src="async.js"></script>

Defer özniteliği aşağı yukarı async özniteliğiyle aynı şekilde çalışır. Bir script etiketine defer özniteliği ekleyerek, betik sayfanın inşasıyla eş zamanlı olarak indirilebilir. Tüm betikler indirildikten sonra, HTML kodunda bulundukları sırayla çalıştırılırlar. Bu da sayfanın görüntülenmesini engelleyebilir ancak çoğu durumda First Contentful Paint zaten ekrandadır.

11. Harici kaynaklara güvenmeyin

Harici fontlar, harici görseller, harici stil sayfaları veya harici betikler gibi harici kaynaklar, First Contentful Paint söz konusu olduğunda potansiyel bir darboğazdır. Dosyaların barındırıldığı sunucu üzerinde kontrolünüz olmadığından, ne kadar hızlı gönderileceğini bilemezsiniz. Ayrıca, web sunucusuyla mevcut bağlantıyı kullanamazsınız. Yeni bir sunucuya yeni bir bağlantı kurulmalıdır – ve bu zaman alır.

Engelleyici harici kaynaklar

Harici kaynak yok

12. Doğru font formatını kullanın

Fontlar, First Contentful Paint söz konusu olduğunda ekstra ilgiyi hak eder. İncelediğimiz sayfaların yaklaşık %99'unda FCP öğesi bir metin satırıdır. Harici web fontları kullandığınızda, bu fontları önce bir sunucudan indirmeniz gerekir, bu da – elbette – zaman alır. 

Son zamanlarda web fontları daha fazla ilgi görüyor ve daha yeni, daha hızlı font formatları var. Şu anda en hızlı font formatı woff2'dir, ardından woff gelir. Woff2, her modern tarayıcı tarafından desteklenir. 

Web fontunuzun tercih edilen sırasını CSS font-face bildiriminde belirtebilirsiniz. Bunu şu şekilde yaparsınız:

 @font-face {  
   font-family: 'myFont';  
   font-weight: 400;  
   font-style: normal;  
   font-display: swap;
   unicode-range: U+000-5FF 
   src: local('myFont'),
        url('/fonts/myFont.woff2') format('woff2'),
        url('/fonts/myFont.woff') format('woff');
}

13. Font display:swap

Web fontları kullanırken, bu fontların varsayılan davranışı font yüklenene kadar sayfadaki metni göstermemektir. Bu genellikle doğrudan First Contentful Paint aleyhine olur. 

Bunu font-display:swap kullanarak çözebilirsiniz. Bununla, web fontu arka planda yüklenirken metni tarayıcının bildiği bir fontta sayfada yine de göstermeyi seçebilirsiniz.

Font-display:swap olmadan

Font-display:swap ile

Tam makalemizi okuyun  Web fontu yüklenirken metnin görünür kalmasını sağlayın

14. DOM Boyutunu Küçültün

Bir web sayfası HTML'den oluşur. Bir tarayıcının yaptığı ilk şey HTML'yi DOM düğümlerine dönüştürmektir. Bu, daha sonra oluşturma ağacını inşa etmek için kullanılan HTML öğelerinin ağaç yapısıdır. Oluşturma ağacından tarayıcı oluşturmaya başlar; sonunda web sayfası ekranda belirir. 

Kaç DOM düğümünüz (HTML öğesi) olduğu ve bu DOM düğümlerinin ağaç yapısında ne kadar derinlerde olduğu, bir tarayıcının sayfanızı oluşturmasının ne kadar karmaşık olduğunu belirler. Çok fazla DOM düğümünüz olduğunda CSS ve JavaScript'in analiz edilmesi de daha fazla zaman alır. Bu da yine doğrudan FCP aleyhine olur.

Bunu şu şekilde çözün:

• Web sayfanızın bölümlerini tembel yükleme yapın
  İlk görüntülemeyi hızlandırmak için, web sitenizin alt bilgi gibi bölümlerini daha sonra AJAX aracılığıyla yüklemeyi düşünün.
• content-visibility kullanın
  CSS özelliği content-visibility, oluşturma sırasında tarayıcıya stil, düzen ve boyamayı atlamasını söyler. Bunu öğe görünür hale gelmeden hemen önce yapar.
•  Büyük sayfaları birden fazla sayfaya bölün
  DOM düğümlerinin sayısı, büyük sayfaları birden fazla sayfaya bölerek azaltılabilir.
•  Sonsuz kaydırma uygulayın
  Sonsuz kaydırma temelde tembel yüklemedir: görseller (pinterest) veya büyük veri tabloları gibi tekrarlanan öğeler arasında kaydırırken, sonsuz kaydırma sayfanızı önemli ölçüde hızlandırabilir.
• JavaScript DOM etkileşiminden kaçının
  Sayfanızda çok sayıda DOM düğümü olduğunda JavaScript konusunda ekstra dikkatli olun. Böyle bir komut çok sayıda DOM düğümü yükleyerek bellek kullanımını artırabilir.
• Karmaşık CSS bildirimlerinden kaçının
  Çok sayıda DOM düğümü ile karmaşık CSS komutları konusunda ekstra dikkatli olun. Örneğin, sayfanızdaki her div öğesi için last-child durumunu kontrol etmeniz gerekebilir.
• Tarayıcınızın ana iş parçacığını korumak için web worker'lar kullanın
  Web worker'lar, web sayfanızla paralel çalışabilen JavaScript'tir. Bu web worker'lara arka planda çalıştırılan komutlar verebilirsiniz. Web worker komutu çalıştırdığında, sonucu orijinal sayfaya iletir. Bunun avantajı, sayfa donmadan karmaşık JavaScript çalıştırabilmenizdir.