Performans

Vitrin performansı; kullanıcı deneyimini, dönüşüm oranlarını ve arama görünürlüğünü doğrudan etkiler. Bu sayfa, geliştiricinin tema kodunda kontrol edebildiği noktalara odaklanır.

Hedefler

Bir vitrinden bekleyeceğiniz Core Web Vitals aralıkları:

Görseller

En büyük kazancı buradan alırsınız.

<img
  src="{{ product.image }}"
  width="800"
  height="800"
  loading="lazy"
  alt="{{ product.title }}"
/>

Slider'da ilk slide deseni

Hero slider gibi LCP olan slider'larda ilk slide eager + fetchpriority high, diğer slide'lar lazy:

{% for key, IMAGE in SETTING.IMAGES %}
  {% if key == 0 %}
    <img src="{{ IMAGE.IMG1.PATH }}"
         width="{{ IMAGE.IMG1.WIDTH }}" height="{{ IMAGE.IMG1.HEIGHT }}"
         alt="{{ IMAGE.TITLE|striptags }}"
         fetchpriority="high" loading="eager" decoding="async">
  {% else %}
    <img data-src="{{ IMAGE.IMG1.PATH }}"
         width="{{ IMAGE.IMG1.WIDTH }}" height="{{ IMAGE.IMG1.HEIGHT }}"
         alt="{{ IMAGE.TITLE|striptags }}"
         class="lazyload" loading="lazy">
  {% endif %}
{% endfor %}

İlk slide src ile hemen yüklenir → LCP'yi bu belirler. Diğerleri data-src + lazyload ile Swiper kaydırınca yüklenir.

CSS (yazdığınız theme.css)

assets/css/theme.css dosyasının nasıl yüklendiğini T-SOFT yönetir. Sizin etkileyebildiğiniz, içine ne yazdığınız:

JavaScript (yazdığınız theme.js)

theme.js dosyasının yüklenmesini T-SOFT yapar — <script> etiketi yazmayın, defer eklemeyin. Performansa etkiniz, dosyanın içine yazdığınız kodun ağırlığıyla olur.

Temel kurallar

Element varsa çalıştırma örneği

theme.js her sayfada yüklendiği için, bir elemente kod bağlamadan önce o elementin sayfada olup olmadığını kontrol edin:

const addToCartBtn = document.querySelector('[data-toggle="add-to-cart"]');

if (addToCartBtn) {
  addToCartBtn.addEventListener('click', () => {
    console.log('Sepete ekle butonuna tıklandı');
  });
}

Buton yalnızca ürün sayfasında bulunur; if kontrolü sayesinde diğer sayfalarda gereksiz listener oluşmaz.

Üçüncü taraf script'leri

Tema içine eklediğiniz analytics / pixel / chat widget'larını dikkatli yönetin — bunlar genellikle performans regresyonunun en büyük tek sebebidir.

Render hacmi

Bir sayfa ne kadar fazla section/snippet işlerse o kadar yavaşlar.

Fontlar

Birincil, ikincil ve RTL fontlar panelden seçilir; yüklemeyi, preload'u ve font-display davranışını T-SOFT yönetir. Tema kodunda ek @font-face veya <link rel="preload"> yazmanıza gerek yoktur. Detay için bkz. Temayı Özelleştir.

Yaygın tuzaklar — geliştirici tarafında

Sıradaki adım