Kritik CSS, tema oluşturma zamanında Puppeteer kullanılarak üretiliyor. Başsız bir tarayıcı her şablon türünü (ana sayfa, tekil gönderi, kategori, arama) ziyaret ediyor ve ekranın üst kısmındaki içeriğe uygulanan stilleri çıkarıyor. Sonuçta elde edilen CSS — şablon başına genellikle 4–8 KB — her sayfanın <head>'ine doğrudan satır içi ekleniyor. Tam stil sayfası <link rel="preload" as="style" onload="this.rel='stylesheet'"> aracılığıyla eş zamansız olarak yükleniyor.

Üçüncü Taraf Betikler Kritik Yolun Dışına Çıkarıldı

Analitik araçları, sohbet widget'ları, etiket yöneticileri gibi üçüncü taraf betikler, <link rel="preconnect"> kaynak ipuçları ve <script defer> ya da <script type="module"> nitelikleriyle yükleniyor. İlk etkileşim için gerekli olmayan hiçbir şey kritik yolda çalışmıyor. Bu tek değişiklik, eş zamanlı betik yüklemesi yapan jekcms.alfadizayn.com/tr/blog/jekcmste-islemsel-e-posta-varsayilan-smtpnin-otesi" class="auto-link" target="_blank" rel="noopener">varsayılan bir kurulumla karşılaştırıldığında PageSpeed puanında yaklaşık 15 puanlık bir iyileşme sağlıyor.

1,3 MB Google Fonts Yerine 68 KB Kendi Sunucunda Barındırma

Yazı tipleri sayfayla aynı kaynaktan sunuluyor. Google Fonts Inter değişken yazı tipi ailesinin tamamı 1,3 MB ağırlığında; Latin ve Türkçe aralıklarını kapsayan alt küme versiyonu 68 KB. Alt küme oluşturma, gereken tam Unicode aralıklarını belirten --unicodes bayrağıyla pyftsubset kullanıyor. Yazı tipi dosyaları bir yıl boyunca önbelleğe alınıyor ve değiştirilemez önbellek başlıklarıyla sunuluyor.

Açık Boyutlar Düzen Kaymasını Ortadan Kaldırıyor

Yerleşik temalardaki her <img>, CSS tarafından ayarlanan görüntü boyutunu değil, yüklenen küçük resim boyutunu eşleştiren açık width ve height niteliklerini içeriyor. Bu, tarayıcının görsel yüklenmeden önce doğru miktarda alan rezerve etmesine olanak tanıyarak Kümülatif Düzen Kaymasını ortadan kaldırıyor. get_featured_image() yardımcısı hem URL'yi hem de boyutları döndürüyor; özel temalar her ikisini de kullanmalı.

AVIF: En Buyuk Tekil Kazanim

JPEG/PNG'den AVIF'e gecis test sitelerimizde toplam gorsel yukunu %68 azaltti. Tipik bir blog gonderisi 1,8 MB'tan 580 KB'a dusuruldu. AVIF kalite 80, JPEG kalite 85 ile gorsel olarak ozdes cikti uretiyor.

Picture Elementi ile Geri Donus

<picture>
 <source srcset="/uploads/images/hero.avif" type="image/avif">
 <source srcset="/uploads/images/hero.webp" type="image/webp">
 <img src="/uploads/images/hero.webp"
 alt="Gonderi basligi" width="1200" height="630" loading="lazy">
</picture>

Kaynak Ipuclari ve Preconnect

Her harici kaynak icin JekCMS otomatik <link rel="preconnect"> enjekte eder. Baglanti basina 100-300 ms tasarruf saglar; mobil aglarda 500 ms'yi asabilir.

Rakamlar: Once ve Sonra

  • FCP: 3,2 sn → 1,1 sn
  • LCP: 4,8 sn → 1,9 sn
  • CLS: 0,24 → 0,01
  • TBT: 420 ms → 80 ms
  • Genel mobil puan: 54 → 97

En buyuk iyilestirme AVIF gorsellerden (LCP 1,4 sn azaldi), bunu kritik CSS (FCP 0,9 sn) ve ertelenmis betikler (TBT 340 ms) izledi.

PHP Duzeyinde HTML Kucultucu

JekCMS uretim modunda gereksiz bosluklari, yorumlari ve fazla nitelikleri kaldirarak HTML ciktisini kuculttuyor. Bu, sablon olusturulduktan sonra calisan bir PHP cikti arabellek filtresi tarafindan yonetilir. Kucultme HTML boyutunu ortalama %15-25 azaltir. GZIP sikistirma ile birlikte tipik bir blog gonderisi icin nihai HTML yuku 8-12 KB boyutundadir.

Neler Kucultulur

  • HTML etiketleri arasindaki bosluklar tek bosluga daraltilir
  • HTML yorumlari kaldirilir (IE uyumluluk yorumlari haric)
  • Script ve style etiketlerindeki gereksiz type nitelikleri kaldirilir
  • <pre> ve <code> bloklarinin icerigi oldugu gibi korunur

Tembel Yukleme Stratejisi

Ekranin altindaki gorseller yerel loading="lazy" kullanir. Sayfadaki ilk gorsel (genellikle one cikan gorsel) LCP'yi en aza indirmek icin fetchpriority="high" ile acil yuklenir. Bu iki katmanli yaklasim tarayicinin en onemli gorseli onceliklendirmesini saglarken diger her seyi erteler.

Yazi Tipi Yukleme: Gizli LCP Katili

Ozel web yazi tipleri sayfa yuklemesi sirasinda gorunmez metin olusumunun en yaygin nedenlerinden biridir; bu FOIT (Flash of Invisible Text) olarak bilinen bir olgudur.

JekCMS bunu tamamen onler: tum yazi tiplerini kendi sunucusunda barindirir ve her @font-face kuralinda font-display: swap bildirir. Tarayici sistem yazi tipi ile metni hemen olusturur, ardindan ozel yazi tipi yüklendiginde degistirir. Bu yaklasim yavas baglantilarda yaklasik 50 ms duzenleme kaymasi ekler ancak FOIT'in neden oldugu 200-800 ms'lik bos metin donemini ortadan kaldirir.

Yazi tipi dosyalari derleme asamasinda yalnizca Latin, Latin Extended ve Turkce karakter araliklerini icerecek sekilde alt kumelenir. Tam Inter yazi tipi ailesi tum kalinliklarda 840 KB agirligindadir; JekCMS'in kullandigi alt kume 142 KB agirligindadir — %83 azalma. WOFF2 sikistirmasi ve degismez onbellek basliklari (1 yil sure sonu) ile birlestiginde yazi tipleri ziyaretci basina tam olarak bir kez indirilir ve sonraki her sayfada disk onbellekten sunulur.

Gercek Kullanici Performansini Olcme

Lighthouse puanlari sentetik olcutlerdir. Gercek kullanici metrikleri cihaz ve ag kosullarina bagli olarak genellikle 10-20 puan farklilik gosterir.

JekCMS, gercek CLS, LCP, FID ve INP degerlerini analitik panelinize bildirmek icin Web Vitals JavaScript kutuphanesiyle entegre olur. Bu optimizasyonlari 47 JekCMS sitesine dagittiktan sonra ortanca gercek kullanici LCP'si mobil baglantilarda 3,8 saniyeden 1,4 saniyeye dustu. CLS, tum gorsellerdeki acik genislik ve yukseklik nitelikleri ve font-display: swap stratejisi sayesinde 0,18'den 0,03'e iyilesti.