Görsel Lazy Loading ve CLS Önleme Teknikleri

Görsel Performansı Neden Önemli

Görseller bir içerik sitesinde neredeyse her zaman sayfa ağırlığının en büyük payını oluşturur ve 480px genişliğinde bir küçük resmin yeterli olacağı yerde 4000x3000 bir orijinali sunmak kolayca olur. Lazy loading'i, boyutları ve modern formatları doğru yapmak, görsel ağırlıklı bir blogda Core Web Vitals için yapabileceğiniz en yüksek getirili işlerden biridir ve jekcms bunun şaşırtıcı bir kısmını sizin için otomatikleştirir.

Native Lazy Loading: %90 Çözüm

loading="lazy" özelliği Chrome'da sürüm 76'dan, Firefox'ta 75'ten ve Safari'de 15.4'ten beri desteklenir — bugün tarayıcı trafiğinin ezici çoğunluğunu kapsar. Bir görsel etiketine eklemek çok basittir:

<img src="/uploads/images/2026/03/yazi-kucukresim.avif"
     alt="Makale küçük resmi"
     width="480" height="300"
     loading="lazy">

Tarayıcı, görsel görünüm alanından belirli bir mesafe içine girene kadar yüklemeyi erteler. Sayfanın üst kısmındaki görseller hemen yüklenir; daha aşağıdaki görseller kullanıcı kaydırdıkça yüklenir.

Sürekli gördüğümüz kritik hata: hero görsel ve ilk görünen içerik görseli dahil sayfadaki her görsele loading="lazy" eklemektir. Bu performansa zarar verir çünkü tarayıcının yüklemeye karar vermeden önce elemanın konumunu değerlendirmesi gerekir ve LCP elemanınıza gereksiz gecikme ekler. Başlangıç görünüm alanında görünen görselleri asla tembel yüklemeyin.

jekcms, native desteği olmayan küçük bir tarayıcı payı için JavaScript tabanlı bir IntersectionObserver yedeği içermez — native loading="lazy" tek başına gerçek dünya trafiğinin büyük çoğunluğunu kapsar ve JS tabanlı bir yedek eklemek neredeyse her ziyaretçi için gereksiz ekstra ayrıştırma yüküdür. Çok eski tarayıcıları özellikle desteklemeniz gerekiyorsa bu yedeği kendiniz eklemeniz gerekir; jekcms'in kutudan çıktığı haliyle içerdiği bir şey değildir.

Width ve Height: Otomatik Halledilir

Cumulative Layout Shift (CLS) çoğunlukla açık boyutları olmayan görsellerden kaynaklanır — tarayıcı, görsel indirilene kadar ne kadar alan ayırması gerektiğini bilemez. Düzeltme her <img> etiketine width ve height özellikleri eklemektir.

jekcms'te bunu çoğunlukla kendiniz hatırlamak zorunda değilsiniz. Tema şablonlarının ürettiği ham <img> etiketlerini inceleyen genel bir çıktı filtresi, width/height eksik olduğunda görselin gerçek boyutlarını media tablosundan arayıp sayfa tarayıcıya gönderilmeden önce otomatik olarak doldurur. Eksikse decoding="async" da ekler. Bu yalnızca /uploads/ altındaki görsellerde çalışır — logonuz, ikonlarınız ve diğer tema varlıklarınız dokunulmadan kalır.

Kaplar İçin Aspect-Ratio CSS

Kaynak görselin boyutlarından bağımsız olarak tutarlı bir şekil isteyen görsel kapları için (yazı kartları, galeri küçük resimleri, hero bannerlar), CSS aspect-ratio özelliğinin object-fit: cover ile birleşimi en temiz yaklaşımdır:

.card-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f0f0;
}
.card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

Bir tuzak: aspect-ratio, açık bir height tarafından geçersiz kılınır. İkisini birden ayarlarsanız height kazanır — birini kullanın.

fetchpriority: LCP Görseli Otomatik Terfi Eder

fetchpriority özelliği, tarayıcıya hangi kaynağın önce indirilmesi gerektiğini belirtmenizi sağlar — LCP görseli için bu, Largest Contentful Paint'ten anlamlı bir süre kısaltabilir. jekcms, bir yardımcı fonksiyona manuel bir "bu LCP görseli mi?" bayrağı geçmenizi gerektirmez. Width/height'ı dolduran aynı çıktı filtresi, render edilen sayfayı tarar, henüz eager olarak işaretlenmemiş ilk yeterince büyük içerik görselini bulur, ondaki loading="lazy"'i söker ve otomatik olarak fetchpriority="high" loading="eager" ekler. Ondan sonraki her görsel, açıkça ayarlanmamışsa loading="lazy" alır. Temanız belirli bir görselde zaten fetchpriority="high" ya da loading="eager" ayarlıyorsa, jekcms buna saygı duyar ve dokunmaz.

Yedekli AVIF/WebP

AVIF, eşdeğer görsel kalitesinde tipik olarak WebP'den %30-50 daha küçük dosyalar üretir ve JPEG'den belirgin ölçüde daha küçüktür. Yükleme sırasında jekcms'in Media sınıfı, sunucunuzun GD kurulumu destekliyorsa üç boyutta — küçük resim (400px), orta (800px) ve büyük (1600px) — AVIF ve WebP sürümleri üretir, orijinalin yanında saklar. picture() yardımcı fonksiyonu bunları standart bir <picture> elemanına bağlar:

<picture>
    <source srcset="/uploads/images/2026/03/photo-medium.avif" type="image/avif">
    <source srcset="/uploads/images/2026/03/photo-medium.webp" type="image/webp">
    <img src="/uploads/images/2026/03/photo-medium.jpg"
         alt="Açıklama"
         width="800" height="500"
         loading="lazy">
</picture>

Tarayıcı desteklediği ilk formatı seçer: varsa AVIF, sonra WebP, son çare olarak orijinal. Bir sunucuda AVIF/WebP kodlama mevcut değilse, jekcms yüklemeyi başarısız kılmak yerine orijinal formatı sunmaya geri döner.

Bilinçli Olarak Dışarıda Bıraktıklarımız

Bazı görsel optimizasyon rehberlerinde göreceğiniz birkaç şey bilinçli olarak jekcms'in bir parçası değildir: düşük kaliteli görsel yer tutucu (LQIP) sistemi yoktur — baskın renk çıkarımı yok, BlurHash yok. Bir yer tutucu efekti istiyorsanız en basit yaklaşım, kap üzerinde CSS ile düz bir nötr arka plan rengi kullanmaktır; bu hiçbir maliyet getirmez ve görsel başına işlem gerektirmez — jekcms bunu otomatik olarak üretmez ya da saklamaz. Native lazy loading, otomatik boyut/öncelik yönetimi ve AVIF/WebP dönüşümüyle sınırlı tutulan işlem hattı, JavaScript bağımlılığı ya da ekstra veritabanı sütunu eklemeden ölçülebilir performans kazanımının büyük kısmını karşılar.

Kaçınılması Gereken Yaygın Hatalar

• LCP görselini tembel yükleme. Bu, en önemli görsel elemanınızı geciktirir. jekcms'in otomatik terfi mekanizması çoğu durumda bunu sizin için halleder — ama bir tema şablonunda hero görsele elle loading="lazy" yazarsanız bu korumayı geçersiz kılarsınız.
• AVIF'i yedeksiz sunma. Trafiğin küçük bir kısmı hâlâ AVIF'i çözemez. Tek bir AVIF kaynaklı <img> etiketini elle yazmak yerine her zaman jekcms'in picture() yardımcı fonksiyonunun tam yedek zincirini üretmesine izin verin.
• Küçük resimler için devasa orijinaller kullanma. 400x250 küçük resim için 4000x2500 kaynak gerekmez — jekcms yükleme sırasında doğru boyut varyantlarını otomatik üretir; orijinal yerine bunları kullanın.

Görsel optimizasyonu göz alıcı bir iş değildir, ama native lazy loading, otomatik width/height ve fetchpriority yönetimi ile AVIF/WebP dönüşümü sayesinde bunun çoğu her yazıda düşünmenize gerek kalmadan gerçekleşir.