First Contentful Paint (FCP) Nasıl İyileştirilir?
Lighthouse hayatımıza girdiği dönemden itibaren sayfa hızıyla ilgili yeni parametreler oluştu. Bu parametrelerin en önemlilerinden birisi First Contentful Paint(FCP)'dir. 2021 Ocak ayı itibariyle geçerli olan Lighthouse'un 6. versiyonunda FCP'nin sonuca etkime yüzdesi %15'tir.
FCP'yi metrik olarak benimsemek ve anlamak için önce işin psikolojisini incelemek gerekiyor. Bu metriğin mantığını asansörlere konulan aynalardan aynıdır:
Kısaca özetlemek gerekirse; 1900'lerin ilk yarısında yapıların yükselen yapılarda asansör kullanımı çok artar ancak asansör sistemleri bugüne göre ilkeldi. Bu sebeple asansörde geçirilen sürenin daha kısa algılanması adına asansörlere ayna konulma fikri ortaya çıkıyor.
Konumuza dönmek gerekirse; bir sayfaya ulaşmaya çalıştığınızdaki bekleme süresinde algısal olarak sizi bekleten nokta FCP'dir. Zaten First Contentful Paint'in tanımı da, kullanıcının tükettiği ilk yazı, görsel, beyaz olmayan canvas vb.. öğelere kadar geçen süredir. FCP'nin birimi saniyedir.
Lighthouse'ta FCP'nin renk skalası şu şekilde belirlenir;
- 0-2 saniye: Yeşil => Hızlı
- 2-4 saniye: Turuncu => Geliştirme Gerekli
- 4+ saniye: Kırmızı => Yavaş
HTTP arşiv verilerine göre hızlı denebilecek site sayısı %25'tir, var olan sitelerin %50'si de yavaş kabul edilen sınıftadır.
FCP'yi iyileştirmek için neler yapılabilir?
Sunucu yanıt süresinin azaltılması
Genel olarak sunucu ve yazılımın sunucu tarafında yapılması gereken iyileştirmeler olarak yorumlanabilir. Sunucu yanıt süresini negatif etkileyen konuları maddelemek gerekirse;
- Sunucunun paylaşımlı olması, konfigürasyonu yani sunucu ayarları, sunucu kaynakları problemin sebebi olabilir. Sunucunuzun kapasitesinin trafiğiniz oranında artırılması gerekir. Bazı durumlarda amatörce yazılmış veritabanı sorguları, komplekliği yüksek yazılım parçacıkları sunucunun yanıt süresini ciddi olarak etkiler.
- CDN kullanılmaması özellikle içeriklere ulaşmada gecikme yaratacağı için FCP'yi etkiler. İçeriğin boyutu arttıkça; örneğin büyük boyutlu animasyonlu gif ya da video CDN'siz çağırılmaya çalışılıyorsa ve ana sunucu bulunduğunu kıtada değilse FCP'yi çözmek için CDN çözümlerini incelemeniz gerekebilir.
- Statik içerikleri düzgün ve tutarlı cache politikası ile sunmamanız durumunda ziyaretçi sayınız arttığında sunucunuza gerekenden fazla yük bindiriyor olabilirsiniz. Halbuki gerek yok; her sayfada logonuzu yüklediğinize göre eğer logonuzu uzun süreli cache'te tutmazsanız gereksiz yere sunucunuzun yanıt süresini zedelemiş olursunuz.
- Sayfaya ulaşılırken gereksiz sayfa yönlendirmeleri yapıyorsanız FCP'nizi gereksiz yere etkilemiş olursunuz.
Örneğin eskiden şöyle saçma kurgular oluyordu: Kullanıcı bir siteye girmek istediğinde önde http => https yönlendirmesi oluyor, sonra mobilse https://www => https://m yönlendirmesi yapılıyor, bir de sayfa kaldırılıp 301 ile başka yere yönlendirilmişse kullanıcı vergi dairesinde masadan masaya dolaşır gibi geziyordu. Daha iyi anlaşılması için uç bir örnek oldu ama daha makul bir örnek vermek gerekirse; 301 yönlendirme ile başka bir URL'e yönlendirdiğiniz sayfayı da başka bir sayfaya 301 ile yönlendirdiyseniz aynı mantıksızlığı yapıyor olabilirsiniz.
- Üçüncü parti servislerinize bağlanırken preconnect ya da dns-prefect ön eki kullanmıyorsanız ve çok fazla üçüncü parti servisle bağlantı sağlıyorsanız FCP için hiç faydalı bir şey yapmazsınız.
Oluşturmayı engelleyen kaynakların azaltılması
İtiraf edeyim bu tek madde olarak yazılan nokta başlı başına aylar alabilecek yüktedir.
Bu çalımayı yapabilmek için sayfanın oluşmasını engelleyecek yükteki tüm JS, CSS gibi kaynakların oluşma zamanından sonra yüklenmesi, ancak sayfanın ilk görülen kısmının site yüklenirken ilk başta yüklemesini sağlamak gibi bir çözüm yöntemi var. Ancak bunu yapmak için tüm JS, CSS gibi kaynaklar incelenerek en çok zaman alan işlemlerin ayrılması gerekiyor. Ayrıca mümkün olduğu kadar az üçüncü parti kullanılırsa FCP'nin optimize hale gelmesine yardımcı olur.
