Kullanıcıların web sitenize girdiğindeki ilk deneyimini genellikle web sitenizin yüklenme hızı belirler. Kendinizi yavaş yüklenen, metin içeriği, görsel içeriği ya da sayfasının tamamı bir süre görünmez olan bir sitede hayal edin. Sonsuz kaynaklarla dolu internet dünyasında yapacağınız ilk şey, bu siteden çıkmak ve şansınızı bir başkasında denemek olacaktır, öyle değil mi?
Merak etmeyin, yalnız değilsiniz! Kullanıcı deneyimi geliştirmek için web sitelerinin yapması gereken ilk şey web site yüklenme hızını arttırmak.
Google’ın performans ve SEO skoru hesaplayan araçları için, web site hızı ve bu hızı belirleyen alt metrikler eskisinden çok daha önemli.
”İlk Zengin İçerikli Boyama kavramı” sayfa hızı ölçümünün en doğru ve nokta atışı şekilde gerçekleşebilmesi için kullanılan metriklerden bir tanesi. Peki, nedir ”İlk Zengin İçerik Boyama”, ya da bir başka deyişle, First Contentful Paint? Gelin detaylıca göz atalım!
Hızlı Erişim Menüsü
İlk Zengin İçerikli Boyama Ne Anlama Gelir?
Kullanıcı tarafından algılanan yüklenme hızını tespit etmek için Google tarafından kullanılan çok da eski olmayan bir metrik ile tanışın. Kullanıcıların sayfanıza girdiğinde uzun bir süre boyunca yüklenmeyi beklemesi yeterince ”heves kırıcı”, öyle değil mi? Google’ın da bu metrik ile size denemek istediği şey şu: Beklemek zaten can sıkıcı, en azından bekleme süreci tamamen bembeyaz bir ekranla sürmemeli!
İlk Zengin İçerikli Boyama, siteniz yüklendikten sonra içerik ile dolacak alanların renkli boyamalarla yüklenme sırasında kullanıcıya gösterilmesidir. Google’ın kullandığı metrik ise bu boyanmış ekranın görülmesi ile sayfanın yüklenmeye ilk başladığı anın arasındaki süreyi ölçer. Burada kullandığımız ”içerik” kelimesi ise her türlü içeriği kapsayabilir: bir metin, bir görsel, bir arka plan görseli, <svg> elementleri ya da <canvas> elementleri.
İlk Zengin İçerikli Boya Tam Olarak Hangi Anda Kullanıcıya Gösteriliyor?
Kullanıcının sitenize girdiği ilk andan itibaren First Contentful Paint adı verilen görünüme erişmesine kadar geçen aşamaları inceleyelim. Hazır mısınız?
- İlk Görünüm: Kullanıcı sitenize girer ve özelleşmemiş beyaz bir alan görür. Bu alan, henüz sitenizin yüklenmeye ilk başladığı milisaniyedeki görüntüdür.
- İlk Boyama: Daha sonra, kullanıcı ”first paint” adı da verilen İlk Boya’yı görür. Bu aşamada, kullanıcının, tarayıcıyı sitenize yönlendirmesi ile birlikte sitenizden alınan ilk pixel görüntülerinin gördüğü aşamadır. Bu aşama, ilk içerikli boya aşaması ile sıklıkla karıştırılır. Peki, ilk içerikli boya ile ilk boya arasındaki fark nedir? Şöyle söyleyelim: İlk boya görünümü içerisinde sayfadaki içerikler ile ilişkili olarak özelleşen alanlar bulunmaz.
- İlk Zengin İçerikli Boyama: Bir sonraki aşama, kullanıcının ilk zengin içerikli boyama ile karşılaştığı adımdır. Sitenin Doküman Obje Modeli üzerinden herhangi bir ya da birkaç içeriğin çekilerek boyama yolu ile kullanıcıya aktarıldığı bu aşamada, kullanıcı sitenin genel görünümü ile ilgili bilgi edinir. Bu aşamada metinler, görüntüler, ölçeklenebilir vektör grafikleri ve çok daha fazlası boyalı şekilde genel görünümleri çerçevesinde sayfada bulunur.
Küçük bir hatırlatma yapalım: First Contentful Paint, yani İlk Zengin İçerikli Boyama, bir sayfada bulunan içeriklerin bazılarının-asgari bir kısmının- boyanmış halde çerçeve olarak görüldüğü andır. Fakat bir sayfanın ”İlk İçerik Boyama” aşamasında olduğunu söylememiz için mutlaka sayfada bulunan tüm içeriklerin boyanmış olması gerekmez.
Largest Contentful Paint (LGP) isimli metrik, sayfa içerisindeki görsel ya da metin bloglarının en yüksek oranda görünür hale geldiği an ile ilk yüklenme anı arasındaki süreyi hesaplar. Bu süre ise size LCP skorunuzu verir.
- LCP skoru 2.5 saniye veya daha az ise, elinizde iyi bir skor var demektir.
- 2,5 ile 4 saniye arası ”geliştirilebilir”,
- 4 saniye ve üzeri ise ”zayıf” olarak nitelendirilir.
İlk İçeriksel Boyama İle LGP arasındaki farkı görmek için aşağıdaki görseli inceleyin.
Kısacası; FCP, asgari sayıda içeriğin sayfa yüklenmesi sırasında temsil edildiği bir ilk boyamayı gösteririr. LCP ise içeriklerin maksimum oranda görünür hale geldiği ilk andır.
Google Lighthouse ve İlk İçerik Boyama
İlk Zengin İçerikli Boyama, Google Lighthouse raporundaki Performans kategorisinde değerlendirilen altı metrikten biri olarak karşımıza çıkıyor. Aynı kategorideki diğer metrikler ise Hız İndeksi, Etkileşim Zamanı, İlk Anlamlı Boyama, İlk CPU Boşta, Maksimum Olası İlk Giriş Gecikmesi olarak sıralanabilir. Metriklerin tamamından alınan belirli puanlar web sayfanızın toplam performans skorunu belirler.
Google Lighthouse sistemi üzerinden size sunulan raporda web sayfanızın skoru özel bir rneklendirme sistemi ile size iletilir.
- 0-2 saniye aralığındaki FCP, yeşil renkte gösterilir. HTTP arşivindeki puan aralığı ise 75-100 arasıdır.
- 2-4 saniye aralığındaki FCP, turuncu renkte gösterilir. HTTP arşivindeki puan aralığı ise 50-74 arasıdır.
- 4 ve üzeri saniyede tanımlanan FCP, kırmızı renkte gösterilir. HTTP arşivindeki puan aralığı ise 0-49 arasıdır.
Sayfamın İlk Zengin İçerikli Boyama Skorunu Nasıl Geliştirebilirim?
Web sayfanızın Performans skorunu arttırmak adına, FCP puanını iyileştirmeye ihtiyacınız olduğunu söylemiştik. Peki bu iyileştirme nasıl olacak? Bunun için birkaç farklı adımı takip edin:
Dilerseniz Google’ın Lighthouse’u üzerinden devam edin. Bu platformda web sayfanıza özel olarak şekillendirilen Fırsatlar isimli bir kısım bulunur. Bu kısmın temel mantığı, düzeltilmesi durumunda size en yüksek oranlı iyileştirmeleri sağlayacak olan problemleri görünür kılmaktır. Sayfa hızınızın artmasını sağlayacak olan iyileştirmelere göz atarak bunlarla başlayabilirsiniz. İşte bazıları:
- Sayfanızın kaynak kodunda bulunan ve yüklenmeyi engelleyen kaynakları bulun ve kaldırın.
- Cache kullanarak web sitenizin daha hızlı açılmasını sağlayın ve kullanıcı deneyimini arttırın.
- Sunucu Yanıt Süresini düşürmeye çalışın.
- Kullanılmayan CSS veya Javascript dosyalarını kaynak kodunuzdan kaldırın.
- Sitenizde bulunan metin içeriklerini sıkıştırın.
Daha iyi bir performans için daha güçlü bir optimizasyon süreci yönetin! Google Görsel Optimizasyonu içeriğine göz atarak devam edin!