Above the Fold (Ekranın Üst Kısmı) Nedir?
Kısa tanım
Above the fold (ekranın üst kısmı), bir web sayfası açıldığında kullanıcının hiç kaydırmadan görebildiği ilk bölümdür. Terim, katlanmış hâlde satılan gazetelerin görünen üst yarısından gelir. Web'de bu sınır sabit bir piksel değeri değildir; cihaza, ekran boyutuna ve tarayıcı penceresine göre değişir. Sayfanın ana mesajı ve çoğu zaman LCP öğesi bu alanda bulunur.
Diğer adları: ilk ekran, ekranın üst kısmı, the fold, fold çizgisi
Gazete bayisinden tarayıcıya
Geniş boy gazeteler bayilerde ortadan ikiye katlanmış olarak sergilenirdi. Okurun ilk gördüğü, katlama çizgisinin (fold) üstündeki manşet ve fotoğraftı; editörler en güçlü haberi bu yüzden oraya yerleştirirdi. Web tasarımcıları terimi, sayfa yüklendiğinde kaydırmadan görünen alan için ödünç aldı. Bu çizginin altında kalan bölüme de below the fold denir.
Sabit bir piksel çizgisi yok
Gazetede katlama yeri bellidir, ekranda değildir. 360 piksel genişliğindeki bir telefonda, 13 inçlik bir dizüstünde ve dikey tutulan bir tablette ilk ekran bambaşka içerikler gösterir. Tarayıcı araç çubukları, yer imleri çubuğu, çerez bildirimi ve kullanıcının yakınlaştırma ayarı da görünen yüksekliği değiştirir. Bu nedenle “fold 600 pikseldedir” gibi tek bir değere göre tasarım kararı vermek yanıltıcıdır. Daha sağlıklı yöntem, analitik verilerinizdeki gerçek ekran boyutlarına bakıp en yaygın birkaç viewport için ilk ekranı ayrı ayrı değerlendirmektir.
Sık görülen bir başka yanılgı, kullanıcıların kaydırmadığı varsayımıdır. İnsanlar kaydırır; yeter ki ilk ekran sayfanın ne sunduğunu açıkça söylesin ve devamında bir şey olduğunu hissettirsin. Her şeyi ilk ekrana sığdırmaya çalışmak genellikle kalabalık ve okunması zor bir üst bölümle sonuçlanır.
İlk ekranda neler olmalı?
- Sayfanın ne hakkında olduğunu söyleyen net bir başlık ve kısa bir açıklama
- Sayfanın amacına uygun birincil eylem: iletişim, satın alma, arama, kayıt
- Gerekiyorsa kullanıcıyı aşağı kaydırmaya davet eden görsel bir ipucu
Bu öncelikleri belirlemek UX tasarımının işidir ve tek bir doğru şablon yoktur; bir ürün sayfası ile uzun bir rehber yazısının ilk ekranı farklı görevler üstlenir.
Performans açısından neden kritik?
LCP (Largest Contentful Paint), kullanıcının görüntü alanında görünen en büyük görsel ya da metin bloğunun ne zaman çizildiğini ölçer. Dolayısıyla LCP öğesi neredeyse her zaman ilk ekrandadır ve buradan iki pratik kural çıkar:
- İlk ekrandaki ana görseli geç yüklemeyin.
loading="lazy"verilmiş bir giriş görseli, tarayıcı yerleşimi hesaplayıp görselin ekranda olduğunu anlayana kadar beklemeye alınır ve LCP gecikir. Lazy loading yalnızca ilk ekranın altındaki içerik için uygundur. - Ana görsele öncelik verin. Görselin HTML'de doğrudan bulunması (CSS arka planı ya da JavaScript ile sonradan atanan bir adres yerine) ve
fetchpriority="high"ile işaretlenmesi indirmenin erken başlamasına yardım eder.
<img src="/img/giris.webp" width="1200" height="600"
alt="Panelin genel görünümü" fetchpriority="high">İlk ekrana sonradan eklenen duyuru bantları, çerez çubukları ya da boyutu belirtilmemiş görseller içeriği aşağı iterek CLS değerini kötüleştirir. Google'ın sayfa deneyimi rehberi de ana içeriğe erişimi engelleyen müdahaleci geçiş reklamlarından (intrusive interstitials) kaçınılmasını önerir. Ölçüm ve iyileştirme adımları için web.dev'in LCP optimizasyon rehberi sağlam bir başlangıç noktasıdır.
Kendi sitenizde kontrol
Geliştirici araçlarında farklı cihaz boyutlarını seçip sayfayı yeniden yükleyin ve her birinde kaydırmadan neyin göründüğüne bakın. Ardından Performance panelinde veya Lighthouse raporunda LCP öğesinin hangisi olduğunu bulun; bu öğenin lazy yüklenmediğinden ve ilk HTML yanıtında yer aldığından emin olun.