Web Performansında 100/100 PageSpeed Skoru Nasıl Alınır? (Sıfır JavaScript Mimarisi)

Her 100 milisaniyelik gecikme e-ticaret sitelerinde dönüşüm oranını %7 düşürmekte ve Google sıralamalarında sitenizi geriye atmaktadır. Günümüz web geliştirme dünyasında en büyük yanılgı, basit bir içerik sitesi için megabaytlarca JavaScript kütüphanesi yüklemektir.

Bu makalede, fatihkahraman.com üzerinde uyguladığım ve Google PageSpeed Insights testlerinde hem mobilde hem masaüstünde 100/100 tam puan sağlayan teknikleri paylaşıyorum.

1. Largest Contentful Paint (LCP) < 0.8s Optimizasyonu

LCP, sayfanın ana görseli veya başlığının ekranda belirdiği andır. LCP süresini 1 saniyenin altına çekmenin formülü:

• Hero Görselleri için Priority Fetch: Hero alanındaki ilk görsele fetchpriority="high" ve loading="eager" verin.
• Ekran Dışı Görseller için Lazy Load: İlk ekranda görünmeyen tüm görsellere loading="lazy" ve decoding="async" ekleyin.
• Modern Görsel Formatları: PNG/JPEG yerine SVG ve WebP/AVIF tercih edin.

<!-- LCP Görseli için Doğru Kullanım -->
<img 
  src="/assets/images/fatih-kahraman.svg" 
  alt="Fatih Kahraman" 
  width="360" 
  height="360" 
  fetchpriority="high" 
  decoding="async"
/>

2. Cumulative Layout Shift (CLS) = 0.00 Garantisi

Sayfa yüklenirken sonradan yüklenen bir görsel veya font yüzünden butonların aşağı kayması kullanıcıyı çileden çıkarır ve Google tarafından cezalandırılır.

Çözüm: Tüm <img> ve <svg> etiketlerine mutlaka sabit width ve height öznitelikleri verilmelidir. CSS ile height: auto; max-width: 100%; tanımlandığında tarayıcı görsel yüklenmeden önce gereken alanı rezerve eder.

3. Font Yükleme Stratejisi (FOIT / FOUT Önleme)

Google Fonts kullanırken DNS çözümleme süresini sıfırlamak için preconnect etiketleri head'in en tepesinde yer almalıdır:

<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet" />

4. JavaScript Yükünü Asenkronlaştırma ve Defer Etme

Sayfa render edilirken HTML ayrıştırıcısını (DOM parser) bloke eden senkron scriptler PageSpeed puanını anında 70'lere düşürür. Tüm yardımcı scriptler defer özniteliğiyle çağrılmalıdır.