Görsel, Font ve Sunucu Ayarlarıyla LCP ve CLS Optimizasyonu

Hızlı Özet (TL;DR)

Google’ın arama sıralama algoritmasında doğrudan kalite sinyali olarak kullandığı Core Web Vitals metriklerinden LCP (Largest Contentful Paint - En Büyük İçerikli Boyama) sayfanın algılanan açılış hızını, CLS (Cumulative Layout Shift - Kümülatif Düzen Kayması) ise sayfa yüklenirken ekran öğelerinin görsel kararlılığını ölçer. Bir web sayfasının LCP değerini 2.5 saniyenin, CLS skorunu ise 0.1 puanın altında tutabilmek için; sunucu ilk bayt yanıt süresinin (TTFB) 200 ms altına çekilmesi, kahraman (hero) görsellerinin WebP/AVIF formatlarında fetchpriority="high" ve preload ile sunulması, tüm <img> ve <iframe> etiketlerine kesin boyut nitelikleri atanması ve özel web fontlarının (WOFF2) metrik uyumlu yedek fontlarla (size-adjust) hizalanması şarttır.

LCP ve CLS Alt Bileşenlerinin Teknik Anatomisi

Bir web sayfasında LCP süresinin yüksek çıkması yalnızca “görselin dosya boyutu büyük” diye açıklanamaz. Google Chrome Kullanıcı Deneyimi Raporu (CrUX) verilerine göre LCP toplam süresi dört ardışık alt fazdan oluşur ve herhangi birindeki darboğaz tüm metriği kırmızıya düşürür:

LCP / CLS Alt Fazı veya Unsuru	İdeal Bütçe Payı	Temel Darboğaz Kaynağı	Mühendislik Müdahalesi
1. TTFB (Time to First Byte)	Toplam LCP’nin %30’u (< 200 ms)	Yavaş veritabanı sorguları, PHP/SSR gecikmesi, uzak sunucu	Statik Site Üretimi (SSG), Brotli sıkıştırma, CDN ve HTTP/3
2. Kaynak Yükleme Gecikmesi (Resource Load Delay)	< %10	Tarayıcının LCP görselini geç keşfetmesi (CSS arka plan görseli)	HTML içinde <img> kullanımı, <link rel="preload"> ve fetchpriority="high"
3. Kaynak Yükleme Süresi (Resource Load Time)	%40	Sıkıştırılmamış PNG/JPEG dosyaları, eksik srcset yapısı	WebP / AVIF dönüşümü, duyarlı (responsive) srcset ve sizes
4. Öğe İşleme Gecikmesi (Element Render Delay)	< %10	Oluşturmayı engelleyen (Render-blocking) CSS ve senkron JS	Kritik CSS’in ayrıştırılması, defer kullanımı ve font ön yükleme
5. CLS Görsel/Medya Kayması	0.00 Puan	Boyutları belirtilmemiş görsel, video, harita veya dinamik banner	Açık width, height ve CSS aspect-ratio rezervasyonu
6. CLS Tipografik Kayma (FOUT)	< 0.02 Puan	Web fontu yüklendiğinde satır yüksekliği ve harf genişliğinin değişmesi	Yerel WOFF2, font-display: swap ve @font-face metrik geçersiz kılma

Sunucu Ayarları ve 200 ms Altı TTFB Optimizasyonu

Tarayıcı sunucudan ilk HTML baytını alana kadar hiçbir görseli, stil dosyasını veya yazı tipini indiremez. Bu nedenle TTFB (İlk Bayt Süresi), LCP optimizasyonunun temel taşıdır. Kurumsal web projelerinde TTFB süresini 200 milisaniyenin (hatta statik mimarilerde 50 milisaniyenin) altına indirmek için sunucu katmanında şu ayarlar uygulanmalıdır:

1. Statik HTML Önbellekleme ve Derleme Zamanı Üretimi (SSG)

Her ziyaretçi isteğinde arka planda veritabanına bağlanıp HTML birleştiren dinamik sunucular yerine, sayfaların derleme anında (Build-time) üretildiği Astro SSG mimarisi tercih edilmelidir. Böylece web sunucusu (Nginx, Apache veya LiteSpeed) diske ya da RAM önbelleğe giderek hazır HTML dosyasını 10–30 ms içinde doğrudan ağ kartına iletir.

2. Brotli / Gzip Sıkıştırma ve HTTP/2 - HTTP/3 Çoklama (Multiplexing)

Metin tabanlı varlıklar (HTML, CSS, JS, SVG, JSON-LD) sunucudan gönderilirken mutlaka Brotli (br) veya Gzip (deflate) algoritmasıyla sıkıştırılmalıdır. Ayrıca statik varlıkların tarayıcı ve uç CDN sunucularında uzun süreli saklanması için .htaccess veya Nginx yapılandırmasında değişmez (immutable) önbellek başlıkları tanımlanmalıdır:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/avif "access plus 1 year"
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType text/css "access plus 1 year"
</IfModule>

<IfModule mod_headers.c>
  <FilesMatch "\.(webp|avif|woff2|css|js)$">
    Header set Cache-Control "public, max-age=31536000, immutable"
  </FilesMatch>
</IfModule>

Görsel Optimizasyonu: WebP, AVIF, Preload ve Fetch Priority

Masaüstü ve mobil web sayfalarının %75’inden fazlasında LCP öğesi, sayfanın üst kısmında (Above the Fold) yer alan ana kahraman (Hero) görselidir. Bu görselin tarayıcı tarafından en erken aşamada keşfedilmesi ve en düşük bayt maliyetiyle çizilmesi gerekir:

1. Preload ve Fetchpriority Nitelikleri ile Erken Keşif

Tarayıcının ön yükleme tarayıcısı (Preload Scanner), HTML belgesini yukarıdan aşağıya okurken <img> etiketine gelene kadar vakit kaybedebilir. Özellikle görsel bir CSS dosyasının içinde background-image: url(...) olarak tanımlanmışsa tarayıcı önce CSS’i indirir, ayrıştırır, DOM ağacıyla eşleştirir ve görseli en son sıraya koyar. Bu hatayı önlemek için LCP görseli mutlaka standart <img> veya <picture> etiketiyle yazılmalı ve <head> bloğunda preload ile önceliklendirilmelidir:

<head>
  <link
    rel="preload"
    as="image"
    href="/img/hero-endustriyel-800.webp"
    imagesrcset="/img/hero-endustriyel-480.webp 480w, /img/hero-endustriyel-800.webp 800w, /img/hero-endustriyel-1376.webp 1376w"
    imagesizes="(max-width: 768px) 100vw, 1376px"
    fetchpriority="high"
  />
</head>

Sayfa gövdesindeki <img> etiketinde ise kesinlikle loading="lazy" kullanılmamalı, tam tersine loading="eager", decoding="async" ve fetchpriority="high" nitelikleri atanmalıdır. loading="lazy" yalnızca ekranın alt kısmında kalan (Below the Fold) ikincil görsellere uygulanmalıdır.

2. WebP ve AVIF Formatları ile Duyarlı (Responsive) Boyutlandırma

Geleneksel JPEG ve PNG formatları, modern sıkıştırma algoritmalarına kıyasla %40 ila %70 oranında daha fazla bant genişliği tüketir. Görseller derleme boru hattında (örneğin sharp kütüphanesiyle) hem WebP hem de AVIF formatlarına dönüştürülmeli ve mobil ekranlara (375px–480px) masaüstü boyutundaki (1920px) dev görsellerin gönderilmesi srcset ile engellenmelidir:

<picture>
  <source
    type="image/avif"
    srcset="/img/fabrika-480.avif 480w, /img/fabrika-800.avif 800w, /img/fabrika-1376.avif 1376w"
    sizes="(max-width: 768px) 100vw, 800px"
  />
  <source
    type="image/webp"
    srcset="/img/fabrika-480.webp 480w, /img/fabrika-800.webp 800w, /img/fabrika-1376.webp 1376w"
    sizes="(max-width: 768px) 100vw, 800px"
  />
  <img
    src="/img/fabrika-800.webp"
    width="800"
    height="450"
    alt="Maysa Yazılım Endüstriyel Üretim Sahası"
    fetchpriority="high"
    decoding="async"
  />
</picture>

CLS Optimizasyonu: Görsel Boyut Rezervasyonu ve Font Metrik Uyumu

Kullanıcı sayfada bir paragrafı okurken veya “Teklif Al” düğmesine tıklamak üzereyken, yukarıda geç yüklenen bir görselin ya da web fontunun metni aniden aşağı itmesi CLS (Kümülatif Düzen Kayması) puanını bozar. Sıfır düzen kayması (CLS = 0.00) hedefi için iki temel mühendislik disiplini uygulanır:

1. Tüm Medya ve Çerçeve Öğelerinde Kesin Boyut Nitelikleri

Tarayıcı HTML’i ilk çizdiğinde (First Paint), henüz görsel dosyası indirilmemiş olsa bile o görselin ekranda kaplayacağı dikdörtgen alanı önceden bilmelidir. Tüm <img>, <svg>, <video> ve <iframe> etiketlerine width ve height nitelikleri eksiksiz yazıldığında, modern tarayıcılar otomatik olarak aspect-ratio: attr(width) / attr(height) oranını hesaplar ve sayfa düzeninde tam boyutta boş bir kutu rezerve eder:

<img src="/img/logo.webp" width="200" height="60" alt="Maysa Yazılım Kurumsal Logo" />

Duyarlı (Responsive) CSS katmanında ise img { max-width: 100%; height: auto; } kuralı tanımlanarak görselin mobil ekranlarda taşmadan kendi en-boy oranını koruması sağlanır. Benzer şekilde harita, video veya üçüncü parti bileşenlerin yüklendiği kapsayıcı kutulara CSS üzerinde min-height veya aspect-ratio: 16 / 9; tanımlanarak yükleme anındaki zıplamalar tamamen engellenir.

2. Web Fontlarında Yerel Barındırma (Self-Hosting) ve Metrik Geçersiz Kılma

Harici bir alan adından (fonts.googleapis.com vb.) yüklenen yazı tipleri, ekstra DNS sorgusu ve TLS el sıkışması gerektirdiği için hem LCP’yi geciktirir hem de font dosyası inene kadar gösterilen sistem yazı tipi (Fallback Font) ile gerçek font arasındaki boyut farkından dolayı paragrafların satır sayısını değiştirerek CLS üretir (FOUT - Flash of Unstyled Text).

Bu sorunu ortadan kaldırmak için:

1. Font dosyaları yalnızca modern WOFF2 formatında kendi sunucunuzda (/fonts/) barındırılmalı ve kritik başlık fontu <link rel="preload" as="font" type="font/woff2" crossorigin> ile önceden yüklenmelidir.
2. @font-face tanımında size-adjust, ascent-override, descent-override ve line-gap-override CSS tanımlayıcıları kullanılarak yerel yedek fontun (Arial veya Segoe UI) harf genişliği ve satır yüksekliği, asıl web fontuyla (Inter, Plus Jakarta Sans vb.) milimetrik olarak eşitlenmelidir:

@font-face {
  font-family: 'Inter-Fallback';
  src: local('Segoe UI'), local('Arial');
  size-adjust: 107.4%;
  ascent-override: 90.2%;
  descent-override: 22.5%;
  line-gap-override: 0%;
}

@font-face {
  font-family: 'Inter';
  src: url('/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}

body {
  font-family: 'Inter', 'Inter-Fallback', sans-serif;
}

Bu yapılandırma sayesinde web fontu yüklendiği anda harfler değişse bile kutu yüksekliği 1 piksel dahi oynamaz ve CLS skoru 0.000 olarak kalır.

Kurumsal web projelerinizde, yüksek trafikli Özel Yazılım Geliştirme portallarınızda, sunucu yapılandırmalarınızda (Ortak Dosya Sunucusu ve Yedekleme) ve B2B sanayi arayüzlerinizde (Özel ERP & CRM ve İmalat Çözümleri) maksimum Google sıralaması ile ultra hızlı kullanıcı deneyimi yakalamak için Web Sayfası Tasarım hizmetimizi inceleyebilirsiniz.

Sıkça Sorulan Sorular

Sayfadaki tüm görsellere loading=“lazy” eklemek LCP puanını neden düşürür?

loading="lazy" niteliği, tarayıcıya “bu görseli hemen indirme, önce sayfa düzenini hesapla ve görsel kullanıcının ekran görüş alanına (viewport) gerçekten girdiğinde indirmeye başla” talimatı verir. Eğer ekranın en üstündeki ana (Hero) görsele loading="lazy" eklerseniz, tarayıcı görseli indirmek için sayfa yerleşiminin bitmesini bekler ve LCP süresi 500–800 milisaniye gecikir. Bu nedenle ilk ekranda görünen ana görselde asla lazy kullanılmamalı, fetchpriority="high" tercih edilmelidir.

WebP ve AVIF formatları arasındaki fark nedir ve eski tarayıcılarda sorun çıkarır mı?

WebP formatı JPEG’e kıyasla yaklaşık %30–35 daha küçük dosya boyutu sunarken ve tüm güncel tarayıcılar tarafından %98+ oranında desteklenirken; AVIF formatı %50’ye varan sıkıştırma verimliliği ve daha temiz renk geçişleri sağlar. HTML5 <picture> etiketi içinde önce <source type="image/avif">, altında <source type="image/webp"> ve en altta standart <img> kullanıldığında modern tarayıcılar en hafif formatı seçer, eski tarayıcılar ise sorunsuzca yedek formata düşer.

Font-display: swap ile font-display: optional arasındaki CLS farkı nedir?

font-display: swap kullanıldığında tarayıcı metni ilk anda sistem fontuyla hemen ekrana yazar ve özel web fontu indirildiğinde yazı tipini değiştirir; eğer yedek fontta size-adjust metrik ayarı yapılmamışsa bu değişim sırasında düzen kayması (CLS) yaşanabilir. font-display: optional ise özel font ilk 100 milisaniye içinde inmezse o sayfa görüntülemesinde font değişimini iptal ederek CLS riskini tamamen sıfırlar ve indirilen fontu bir sonraki sayfa geçişi için tarayıcı önbelleğinde hazır tutar.

Kaynaklar

• web.dev — Core Web Vitals