Yükleniyor...
FCP, tarayıcının DOM'daki içeriğin ilk byte'nı render ettiği ve kullanıcıya sayfanın gerçekten yüklendiğine dair ilk geri bildirimi sağladığı anı ifade eder. Kullanıcının sayfaya ilk gittiği andan sayfa içeriğinin herhangi bir bölümünün ekranda görüntülendiği ana kadar geçen süreyi ölçer.
First Contentful Paint, tarayıcının ilk kez herhangi bir metni, görüntüyü (arka plan görüntüleri dahil), videoyu, içine öğe eklenmiş timestamp, iframe içeriğini hariç tutar. Ancak bekleyen font yazı tipleriyle birlikte metni içerebilir. Kullanıcılar anlamsız da olsa ilk sayfa içeriğini görüp etkileşime geçmeye hazır bir duruma gelir.
FCP user-centric metriklerden perceived load speed (algılanan yükleme hızı) ile de doğrudan ilgilidir. PLS, sayfadaki tüm görsel öğelerin ekrana ne kadar hızlı yansıltıdığını niteler.
Dikkat edilmesi gereken önemli bir nokta ise FCP'nin önceki sayfadan; unload time, bağlantı kurulma süresi, redirect ve Time to First Byte (TTFB) içerdiğidir.
Yukarıdaki yükleme çizelgesine baktığımızda FCP'nin ikinci karede gerçekleştiğini görebiliyoruz.
FCP Zamanlama Skorları
FCP metriği; LCP, First Paint, First Meaningful Paint gibi kavramlarla da sık sık karıştırılmaktadır. Birbirine yakın olan bu kavramları kısaca ayrıştırmak gerekirse;
First Paint, sayfanın ilk kez render edilmeye başladığı zamanı işaret eder. FCP'nin aksine içinde içerik olmayan boş bir alan olabilir. Navigasyon ile tarayıcının ilk kez pikseli ekrana render ettiği ve body'nin varsayılan arka plan renginden görsel olarak farklı herhangi bir şeyi çözümlemeye başladığı zaman arasındaki süredir.
Bazı içeriklerin render edilmiş olmasına rağmen, tüm içeriklerin render edilmediğini sayfalar ile karşılaşabiliriz. First Contentful Paint ile Largest Contentful Paint arasında en önemli ayrım ise LCP'nin sayfanın en büyük ana içerik öğesinin ne zaman oluşturulduğunu ölçmesi ve kullanıcıya sayfadaki en büyük içeriğin gösterilmesini ifade eder.
Sayfadaki en büyük above-the-fold değişikliğinin olduğu ve fontların yüklendiği render aşamasıdır. FMP, sayfa yükleme süresindeki küçük farklara çok duyarlığı olduğu için tutarsız (bimodal) sonuçlara yol açabilir. Tarayıcıya özgü farklılar nedeni ile de standartlaştırılamayacağı ve tüm web tarayıcılarında aynı şekilde uygulanmayabilir. Genel optimizasyon için ise sayfanın üst çerçevesinde yer alan "valuable content" elementlerinin render aşamasına müdahale edebilir ve yükleme performansını artırabiliriz.
FCP'nin nasıl çalıştığını anlayabilmek adına tarayıcının bir sayfayı yüklerken gerçekleştirdiği adımlara göz atabiliriz.
Tarayıcı, kullanıcı bir bağlantıya tıkladığında veya bir URL'yi adres çubuğuna yazdığında sayfayı yükleme sürecine başlar.
URL'yi IP adresine çözümleyerek hedef sunucuyla bağlantı kurar. DNS çözümlemesi, TCP bağlantısı ve SSL bağlantılarını içerir.
Sunucuya HTTP isteğini gönderir ve sunucudan gelecek olan HTML yanıtını bekler. HTML'nin hızlı ve verimli bir şekilde yüklenmesi, FCP'nin hızlanmasına katkıda bulunur. İçeriğin tanımlanması ve DOM'un oluşturulmasında rol oynar.
Sunucudan gelen HTML dökümünü ayrıştıılmayarmaya başlanır. Dökümandaki kaynaklar (CSS, JavaScript, Görseller vb.) tespit edilir ve sayfa için gerekli kaynaklar indirilir.
HTML ve CSS'yi kullanarak bir render ağacı oluşturur ve sayfanın görsel olarak nasıl görüneceğini belirler. Render ağacı oluşturulurken, CSSOM (CSS Object Model) ve DOM (Document Object Model) birlikte çalışır. CSS dosyaları ve bazı JavaScript dosyaları render işlemine engel olabilir. Tarayıcılar, bu tür kaynakların indirilip irender edilmesini bekler. Ayrıştırmayı bloklayıcı kaynaklar, FCP'nin ve diğer page speed metriklerinin gecikmesine neden olabilir.
Render ağacı tamamlandığında gerekli tüm kritik kaynaklar işlenmiş olur. Tarayıcılar ekranda ilk içeriği gösterdiği an FCP'yi tanımlamış ve sayfayı kullanıcılara göstermeye başlamıştır.
CSS ve bazı JavaScript dosyaları, sayfanın render edilmesini engelleyebilir. Eğer optimizasyon işlemleri yapılmazsa, tarayıcılar kaynakları indirip işleyene kadar sayfa render edilmez. HTML, JS ve CSS'in ayrıştırılması ve render ağacının oluşturulması süreci, FCP'yi etkileyebilir.
Kritik Kaynakların Kullanımı: Yalnızca sayfanın üst kısmında görünen (above-the-fold) stil kurallarını içeren kritik CSS önceden yükletilebilir, inline olarak <style> içerisinde verilebilir ve ilk etapta ihtiyaç duyulmayan CSS'i asenkron ya da defer olarak yükleyebilirsiniz.
HTML, JS, CSS Minifikasyonu: Gereksiz boşlukları ve eklemelerin kaldırılması, JS-CSS dosyaları küçültülmesi gereksiz render yükü ortadan kaldırılmış olur.
Kod Ayırma (Code Splitting): JavaScript ve CSS kodlarının modüllere ayırarak sadece gerekli olan modüllerin yüklenmesini ve longtask optimizasyonu ile optimizasyon yapılabilir.
Asenkron ve Defer: Kritik olmayan dosyaların async veya defer nitelikleri ile yüklenmesi ile HTML Parsing engellenmemiş olur.
Sunucunun HTTP isteğine yanıt verme süresi, FCP üzerinde doğrudan etkilidir.
Sunucu Performansı: Sunucuların yanıt süresi ve kapasitesi Core Web Vitals metriklerini doğrudan etkilemektedir. Hızlı yanıt sağlayacak sunucular kullanmak, veritabanı sorgularını optimize etmek ve gereksiz işlemleri azaltarak performans artışı sağlanabilir.
Content Delivery Network (CDN): İçeriğinizi coğrafi olarak dağıtarak kullanıcıya daha yakın sunuculardan hızlıca sunmak için bir CDN kullanımı birçok dosya için destek olacaktır.
Önbellekleme: Sık kullanılan kaynakları önbelleğe (cache) alarak sunucu ve kullanıcı taraflı yük azaltılabilir. Tarayıcı önbellekleme politikalarını optimize ederek sık kullanılan statik kaynakların yeniden indirilmesinin önüne geçilebilir.
Kullanıcının internet bağlantı hızı ve erişim araçları, kaynakların indirilme performansına negatif etki edebilir.
Kaynak Optimizasyonu: Görsellerin optimize edilerek doğru formatların kullanılması ve boyutların küçültülmesi ilk erişimde oldukça büyük bir katkı sağlayacaktır.
HTTP/2: HTTP/1 yerine versiyon 2’yi kullanmak aynı anda birden fazla dosyanın daha hızlı bir şekilde ulaşılabilmesine olanak tanıyacaktır.
Görsellerin ve web yazı tiplerinin yüklenme süresi, FCP'yi etkileyebilir.
Görsel Optimizasyonu: Görselleri sıkıştırın ve doğru boyutlandırın. Modern görüntü formatları (örneğin, WebP) kullanın.
Web Yazı Tipleri: Yazı tiplerini optimize edin ve kritik CSS içine ekleyin. Font-display: swap; özelliğini kullanarak yazı tipleri yüklenene kadar sistem yazı tiplerinin kullanılmasını sağlayın.
Preload, Prefetch ve Preconnet web sayfalarının performansını iyileştirmek için kullanılan tekniklerdir.
Preload: Tarayıcıya, belirli kaynakların (CSS, JavaScript, fontlar) kritik olduğunu ve öncelikli olarak yüklenmesi gerektiğini belirtir.İlk render edilme süresini hızlandırır.
Prefetch: Tarayıcıya, gelecekte gerekli olacak kaynakları önceden yüklemesini sağlar. Bu, sayfa geçişlerinde veya ileride kullanılacak kaynakların daha hızlı yüklenmesini sağlar.
Preconnect: Belirli bir kaynaktan (3rd party) gelecekteki yüklemeleri hızlandırır. Bağlantının bir kısmını veya tamamını (DNS+TCP için HTTP ve DNS+TCP+TLS için HTTPS önceden gerçekleştirmiş olur. Tarayıcıya sayfanızın başka bir kaynakla bağlantı kurmayı amaçladığını ve işlemin mümkün olan en kısa sürede başlamasını istediğinizi bildirir.
Her üç teknik de tarayıcının kaynakları daha verimli yönetmesini sağlar, bu da FCP'yi iyileştirir ve kullanıcı deneyimini geliştirir.
CDN (Content Delivery Network), internet kullanıcılarına web içeriğini coğrafi olarak dağıtılmış sunucular aracılığıyla sunan bir sistemdir. CDN kullanımı, FCP'yi iyileştirmek için birçok avantaj ve sayfanın kullanıcıya daha hızlı yüklenmesini sağlar.
CDN, içeriği coğrafi olarak dağıtılmış bir sunucu ağı üzerinden sunar. Kullanıcıların fiziksel olarak daha yakın sunuculardan veri almasını sağlar ve gecikmeyi azaltır.
Kullanıcıya daha yakın olan sunucular üzerinden içerik sunulması, veri iletim süresini kısaltarak FCP'yi iyileştirir.
CDN, yükü birden fazla sunucuya dağıtarak ana sunucunun yükünü azaltır. Böylece sunucunun daha hızlı yanıt vermesini sağlar ve sunucu yanıt süresini iyileştirir.
Ana sunucunun yükünün azalması, daha hızlı HTTP yanıt süreleri ve dolayısıyla daha hızlı içerik yükleme süreleri sağlar.
CDN, statik içeriği (görüntüler, CSS, JavaScript dosyaları vb.) önbelleğe alır ve bu içeriği birçok sunucuda kopyalar. Aynı içeriğin tekrar tekrar ana sunucudan indirilmesini önler. Çok kısa süreli olmayan dinamik içerikler de kısa süreli cache işlemine alınabilir.
Önbelleğe alınmış içerik, kullanıcıya daha hızlı sunulabilir ve böylece FCP süresi kısalır.
CDN, DDoS saldırılarına karşı koruma sağlayarak sunucuya yapılan kötü niyetli istekleri filtreler. Server performansını stabil olarak koruyabilmek yanıt sürelerini iyileştirir.
Güvenlik tehditlerinin azaltılması, sunucunun performansını ve dolayısıyla FCP'yi olumlu yönde etkiler.
Birçok CDN sağlayıcısı, HTTP/2 protokolü ve Brotli sıkıştırma gibi modern web teknolojilerini destekler. HTTP/2, aynı anda birden fazla isteğin yapılmasını sağlar ve Brotli sıkıştırma, dosya boyutlarını küçülterek daha hızlı indirilmesini sağlar.
Modern ve Google tarafından önerilen web teknolojilerinin kullanımı veri iletimini hızlandırarak FCP'yi iyileştirir.
HTTP/2 destekleyen bir CDN, aynı anda birden fazla CSS ve JavaScript dosyasının indirilmesini sağlayarak sayfa yükleme sürelerini optimize eder.
Performance Paint Timing API, tarayıcının sayfanın çeşitli bölümlerini render etme sürelerini ölçmeye yarar. FCP, bu API ile doğrudan ölçülebilir ve analiz edilebilir.
Google Lighthouse, web sayfası performansını, erişilebilirliğini ve SEO'sunu analiz eden bir araçtır. FCP metriğini ölçmek ve optimize etmek için kullanılır. Lighthouse raporları, FCP'nin ne zaman gerçekleştiğini ve nasıl iyileştirilebileceğini gösterir.
Chrome DevTools, geliştiricilerin web uygulamalarını analiz etmelerini sağlayan bir araç setidir. Performans paneli, FCP'yi ve diğer önemli metrikleri ölçmek için kullanılabilir. "Performance" sekmesi ile FCP'nin ne zaman gerçekleştiğini görebilirsiniz.
Google PageSpeed Insights, web sayfalarının performansını analiz eden bir araçtır. FCP dahil olmak üzere çeşitli performans metriklerini ölçer ve iyileştirme önerileri sunar. FCP puanı, sayfanın ne kadar hızlı yüklendiğini gösterir.
Looker Studio, web performans verilerini görselleştirmek ve analiz etmek için kullanılır. FCP verilerini izlemek ve raporlamak için kullanabilirsiniz. Özelleştirilmiş raporlar, performans trendlerini görselleştirmenize yardımcı olur.
RUM, gerçek kullanıcıların web sayfası performansını izlemek için kullanılan bir tekniktir. FCP'yi gerçek kullanıcı verilerine dayalı olarak ölçer. Kullanıcıların gerçek deneyimlerine dayalı veriler toplar ve analiz eder.
Web Vitals API, web performansını izlemek için Google tarafından sunulan bir API'dir. FCP dahil olmak üzere önemli performans metriklerini gerçek zamanlı olarak izler ve raporlar. Geliştiriciler, bu API'yi kullanarak kullanıcı deneyimini optimize edebilirler.
Farklı tarayıcılardaki uygulama ve ölçümleme metodları, FCP metriği için tutarsız sonuçlar doğurabilir.
Tarayıcılar, FCP'yi farklı şekillerde ölçüp raporlayabilir. Örneğin; Safari, FCP'yi ekranda anlamlı bir içerik görünmeden önce raporlayabilirken, Chrome ve Firefox, ilk boyamaya neyin dahil edilmesi gerektiği konusunda daha katı kriterlere sahip olabilir. Küçük ölçümleme değişiklikleri, tarayıcılar tarafından raporlanan zamanlamalarda değişkenliğe yol açabilir. FCP ölçümlemesinin her tarayıcıda aynı şekilde analiz edilemeyebileceğini gösterebilir.
FCP, DOM'dan herhangi bir içeriğin ilk kez boyandığı zamanı işaretlemek için inşa edilen bir metriktir. Ancak görünmeyen öğeleri veya kullanıcı için anlamlı olmayan öğeleri içerebilir. "İçerik" tanımı tarayıcılarda değişkenlik gösterdiği için, bir tarayıcının içerik olarak kabul ettiği öğe, başka bir tarayıcıdan farklı olup kabul görmeyebilir. Tarayıcıların FCP'yi nasıl ele aldığı ve raporladığı konusundaki farklılıklar, bir tarayıcıdaki performans iyileştirmelerinin başka bir tarayıcıda geçerli olmayabileceği anlamına gelse de, birçok geliştirme dolaylı yollardan her tarayıcıda pozitif etki sağlayacaktır.
Kaynakça
https://developer.chrome.com/docs/lighthouse/performance/first-contentful-paint
LCP, kullanıcıların sayfanın tam olarak yüklendiğini ve kullanıma hazır olduğunu anlayabilmesi açısından kritik öneme sahip olan ana içeriği...
GTMetrix ile site performansınızı keşfedin! Hızlı ve etkili analizlerle web sitenizi nasıl iyileştireceğinizi öğrenin.
Interaction to Next Paint (INP), Core Web Vitals metriklerinin yeni bir üyesi olarak Mart 2024 tarihinde aramıza katılıyor.
CDN, web sitelerinin içeriklerini daha hızlı ve verimli bir şekilde kullanıcılara ulaştıran bir teknolojidir.
POPÜLER YAZILAR