Web Sitesi Performans Optimizasyonu: Hız ve Core Web Vitals Rehberi 2025

Web sitenizin yavaş yüklenmesi, potansiyel müşterilerinizi kaybetmenize ve SEO sıralamalarınızın düşmesine neden olur. Google’ın 2025 araştırmasına göre, sayfa yükleme süresi 3 saniyeden fazla olan sitelerde ziyaretçilerin %53’ü sayfayı terk ediyor.

Bu kapsamlı rehberde, web sitenizin performansını nasıl ölçeceğinizi, hangi optimizasyonları yapacağınızı ve Google Core Web Vitals metriklerini nasıl geçeceğinizi öğreneceksiniz.

İçindekiler

1. Web Performansı Neden Kritik?
2. Performans Ölçüm Araçları
3. Google Core Web Vitals
4. Resim ve Medya Optimizasyonu
5. CSS ve JavaScript Optimizasyonu
6. Sunucu ve Hosting Optimizasyonu
7. Cache Stratejileri
8. CDN (Content Delivery Network) Kullanımı
9. Mobil Performans Optimizasyonu
10. WordPress ve E-Ticaret Platformları için Özel İpuçları

---

Web Performansı Neden Kritik?

İstatistiklerle Performans Etkisi

📊 1 saniye gecikme = %7 dönüşüm kaybı
📊 0.1 saniye iyileştirme = %8 dönüşüm artışı
📊 3 saniye > yükleme = %53 terk oranı
📊 Mobil kullanıcıların %70'i yavaş sitelere geri dönmüyor

Performansın Etki Alanları

1. Kullanıcı Deneyimi (UX)

Yavaş siteler:

• ❌ Kullanıcıları sinirlendiriyor
• ❌ Marka güvenini azaltıyor
• ❌ Geri dönüş oranını düşürüyor
• ❌ Olumsuz yorumlara yol açıyor

Hızlı siteler:

• ✅ Kullanıcı memnuniyetini artırıyor
• ✅ Daha uzun oturum süreleri
• ✅ Daha fazla sayfa görüntüleme
• ✅ Daha yüksek dönüşüm oranları

2. SEO ve Sıralama

Google 2021’den beri Page Experience Update ile performansı doğrudan sıralama faktörü olarak kullanıyor:

• Core Web Vitals metriклeri sıralama sinyali
• Mobil performans öncelikli (mobile-first indexing)
• Yavaş siteler sıralamada düşüyor
• Hızlı siteler rekabet avantajı kazanıyor

3. Dönüşüm Oranları

Gerçek vaka çalışmaları:

Şirket	İyileştirme	Sonuç
Amazon	100ms hızlanma	%1 gelir artışı
Walmart	1s hızlanma	%2 dönüşüm artışı
Pinterest	%40 hız artışı	%15 SEO trafik artışı
COOK	0.85s hızlanma	%7 dönüşüm artışı

4. Mobil Kullanıcılar

Türkiye’de internet kullanımının %75’i mobil cihazlardan:

• Mobil ağlar genelde daha yavaş
• Mobil cihazlar daha az güçlü
• Mobil kullanıcılar daha sabırsız
• Mobil performans = işletme başarısı

---

Performans Ölçüm Araçları

1. Google PageSpeed Insights (Ücretsiz)

🔗 pagespeed.web.dev

Özellikler:

• Core Web Vitals skorları
• Mobil ve masaüstü ayrı analiz
• Gerçek kullanıcı verileri (Field Data)
• Laboratuvar verileri (Lab Data)
• Detaylı öneriler

Nasıl Kullanılır:

1. URL'inizi girin
2. "Analyze" butonuna tıklayın
3. Mobil ve Masaüstü skorlarını inceleyin
4. Opportunities (Fırsatlar) bölümündeki önerileri uygulayın
5. Diagnostics (Teşhisler) kısmını kontrol edin

Hedef Skorlar:

• ✅ 90-100: Mükemmel (Yeşil)
• ⚠️ 50-89: Orta (Turuncu)
• ❌ 0-49: Kötü (Kırmızı)

2. GTmetrix (Ücretsiz + Premium)

🔗 gtmetrix.com

Özellikler:

• Detaylı waterfall analizi
• Farklı lokasyonlardan test
• Video kayıt özelliği
• Tarihsel performans takibi
• Öneri raporları

Avantajları:

• Daha teknik detaylar
• Hangi kaynakların yavaş yüklendiğini gösterir
• Server response time analizi

3. WebPageTest (Ücretsiz)

🔗 webpagetest.org

Özellikler:

• 40+ farklı lokasyondan test
• Farklı cihaz simülasyonları
• Farklı bağlantı hızları (3G, 4G, LTE)
• Filmstrip view (görsel yüklenme sırası)
• Çok detaylı metrikler

İleri Seviye Özellikler:

• JavaScript devre dışı test
• Tekrar ziyaret simülasyonu (cached)
• Custom scripting

4. Lighthouse (Chrome DevTools)

Chrome tarayıcısında yerleşik:

F12 > Lighthouse sekmesi > Generate Report

Avantajları:

• Yerel olarak çalışır
• Development sırasında test
• Progressive Web App (PWA) kontrolü
• Accessibility (erişilebilirlik) testi
• Best practices kontrolü

5. Real User Monitoring (RUM)

Gerçek kullanıcı verilerini izler:

Popüler RUM Araçları:

• Google Analytics 4: Ücretsiz, temel metrikler
• Cloudflare Web Analytics: Ücretsiz, gizlilik odaklı
• New Relic: Premium, kurumsal çözüm
• Dynatrace: Premium, detaylı analiz

---

Google Core Web Vitals

Google’ın 2020’de tanıttığı Core Web Vitals, kullanıcı deneyimini ölçen 3 temel metriktir.

1. LCP (Largest Contentful Paint)

En büyük içerik öğesinin yüklenme süresi

Ne Ölçer:

• Sayfanın ana içeriğinin ne kadar hızlı yüklendiği
• Görsel olarak sayfa ne zaman kullanılabilir hale geliyor

LCP Öğeleri:

• <img> etiketleri
• <video> poster resimleri
• background-image ile CSS arka planları
• Blok-seviye text elementleri (<p>, <h1>, vb.)

Hedef Değerler:

✅ İyi:      0 - 2.5 saniye
⚠️ Orta:     2.5 - 4.0 saniye
❌ Kötü:     4.0+ saniye

LCP’yi İyileştirme:

1. Sunucu Yanıt Süresini Azaltın

- Optimize edilmiş hosting kullanın
- CDN kullanın
- Server-side caching uygulayın
- Database sorgularını optimize edin

2. Render-Blocking Kaynaklarını Ortadan Kaldırın

<!-- ❌ Kötü: Render-blocking CSS -->
<link rel="stylesheet" href="styles.css" />

<!-- ✅ İyi: Critical CSS inline, diğerleri async -->
<style>
  /* Critical CSS buraya */
  body {
    margin: 0;
    font-family: sans-serif;
  }
</style>
<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />

3. Resimleri Optimize Edin

<!-- ❌ Kötü: Optimize edilmemiş, büyük resim -->
<img src="hero-image.jpg" alt="Hero" />

<!-- ✅ İyi: Modern format, boyutlandırılmış, lazy load -->
<img src="hero-image.webp" alt="Hero" width="1200" height="600" fetchpriority="high" decoding="async" />

4. Preload Kullanın

<!-- Hero görseli ve fontları önceden yükle -->
<link rel="preload" href="/hero.webp" as="image" />
<link rel="preload" href="/fonts/main.woff2" as="font" type="font/woff2" crossorigin />

2. FID (First Input Delay) → INP (Interaction to Next Paint)

Kullanıcı etkileşiminden sonraki yanıt süresi

2024 Güncellemesi: Google, Mart 2024’te FID’yi INP (Interaction to Next Paint) ile değiştirdi.

INP Ne Ölçer:

• Kullanıcının tıklama, dokunma veya klavye girişinden sonra sayfanın ne kadar hızlı yanıt verdiği
• Tüm sayfa yaşam döngüsündeki etkileşimleri ölçer (FID sadece ilkini ölçüyordu)

Hedef Değerler:

✅ İyi:      0 - 200ms
⚠️ Orta:     200 - 500ms
❌ Kötü:     500ms+

INP’yi İyileştirme:

1. JavaScript Yükünü Azaltın

// ❌ Kötü: Büyük işlemler main thread'i blokluyor
function processLargeData(data) {
  // 5000 öğeyi senkron işle
  data.forEach((item) => heavyCalculation(item));
}

// ✅ İyi: İşlemi parçala, async yap
async function processLargeData(data) {
  const chunkSize = 100;
  for (let i = 0; i < data.length; i += chunkSize) {
    const chunk = data.slice(i, i + chunkSize);
    await new Promise((resolve) => {
      requestIdleCallback(() => {
        chunk.forEach((item) => heavyCalculation(item));
        resolve();
      });
    });
  }
}

2. Code Splitting Kullanın

// ❌ Kötü: Tüm kod başta yükleniyor
import HeavyComponent from './HeavyComponent';

// ✅ İyi: Lazy loading ile gerektiğinde yükle
const HeavyComponent = React.lazy(() => import('./HeavyComponent'));

3. Third-Party Script’leri Yönetin

<!-- ❌ Kötü: Senkron yükleme -->
<script src="https://example.com/widget.js"></script>

<!-- ✅ İyi: Async veya defer -->
<script src="https://example.com/widget.js" defer></script>
<!-- veya -->
<script src="https://example.com/widget.js" async></script>

4. Event Handler’ları Optimize Edin

// ❌ Kötü: Her scroll'da çalışır
window.addEventListener('scroll', function () {
  // Ağır işlem
  updateUI();
});

// ✅ İyi: Throttle/debounce kullan
import { throttle } from 'lodash';

window.addEventListener(
  'scroll',
  throttle(function () {
    updateUI();
  }, 100)
); // 100ms'de bir çalış

3. CLS (Cumulative Layout Shift)

Sayfa yüklenirken beklenmedik layout kaymaları

Ne Ölçer:

• Sayfa yüklenirken içeriğin ne kadar “zıpladığını”
• Kullanıcının yanlışlıkla yanlış yere tıklama riski

Hedef Değerler:

✅ İyi:      0 - 0.1
⚠️ Orta:     0.1 - 0.25
❌ Kötü:     0.25+

CLS Nedenleri:

1. Boyutsuz resimler
2. Dinamik içerik (reklamlar, bannerlar)
3. Web fontları (FOIT/FOUT)
4. Geç yüklenen iframe’ler
5. CSS animasyonları

CLS’yi İyileştirme:

1. Her Zaman Resim/Video Boyutları Belirtin

<!-- ❌ Kötü: Boyut yok, layout shift olur -->
<img src="image.jpg" alt="Product" />

<!-- ✅ İyi: Boyutlar belirtilmiş -->
<img src="image.jpg" alt="Product" width="800" height="600" />

<!-- ✅ Daha İyi: Aspect ratio ile responsive -->
<img src="image.jpg" alt="Product" width="800" height="600" style="aspect-ratio: 4/3; width: 100%; height: auto;" />

2. Dinamik İçerik için Alan Ayırın

/* Reklam alanı için minimum yükseklik */
.ad-container {
  min-height: 250px;
  background: #f0f0f0; /* Placeholder renk */
}

3. Font Loading Stratejisi

<!-- font-display ile flash'ı kontrol et -->
<style>
  @font-face {
    font-family: 'CustomFont';
    src: url('/fonts/custom.woff2') format('woff2');
    font-display: swap; /* Fallback fontla başla, yüklenince değiş */
  }
</style>

<!-- Veya preload -->
<link rel="preload" href="/fonts/custom.woff2" as="font" type="font/woff2" crossorigin />

4. Animation’ları Doğru Kullanın

/* ❌ Kötü: Width animasyonu layout shift yapar */
.box {
  transition: width 0.3s;
}
.box:hover {
  width: 300px;
}

/* ✅ İyi: Transform kullan, layout'u etkilemez */
.box {
  transition: transform 0.3s;
}
.box:hover {
  transform: scaleX(1.5);
}

---

Resim ve Medya Optimizasyonu

Resimlerin ortalama olarak sayfa ağırlığının %50-70’ini oluşturduğunu biliyor muydunuz?

Modern Resim Formatları

WebP: Yeni Standart

📊 JPEG'e göre %25-35 daha küçük
📊 PNG'ye göre %26 daha küçük (kayıpsız)
📊 Tüm modern tarayıcılarda destekleniyor (%95+)

Kullanım:

<picture>
  <!-- Modern tarayıcılar WebP kullanacak -->
  <source srcset="image.webp" type="image/webp" />
  <!-- Fallback: Eski tarayıcılar JPEG kullanacak -->
  <img src="image.jpg" alt="Description" width="800" height="600" />
</picture>

AVIF: Geleceğin Formatı

📊 JPEG'e göre %50 daha küçük
📊 WebP'ye göre %20 daha küçük
📊 Tarayıcı desteği: %80+ (ve artıyor)

Tavsiye: AVIF → WebP → JPEG sıralaması kullanın

<picture>
  <source srcset="image.avif" type="image/avif" />
  <source srcset="image.webp" type="image/webp" />
  <img src="image.jpg" alt="Description" width="800" height="600" />
</picture>

Resim Boyutlandırma

Responsive Images

<!-- Farklı ekran boyutları için farklı resimler -->
<img
  src="image-800w.jpg"
  srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w, image-1600w.jpg 1600w"
  sizes="
    (max-width: 400px) 400px,
    (max-width: 800px) 800px,
    (max-width: 1200px) 1200px,
    1600px
  "
  alt="Responsive image"
/>

Art Direction

<!-- Mobilde farklı, masaüstünde farklı resim -->
<picture>
  <source media="(max-width: 768px)" srcset="mobile-hero.jpg" />
  <source media="(min-width: 769px)" srcset="desktop-hero.jpg" />
  <img src="desktop-hero.jpg" alt="Hero image" />
</picture>

Lazy Loading

<!-- Native lazy loading -->
<img src="image.jpg" alt="Lazy loaded" loading="lazy" />

<!-- Above the fold resimleri hemen yükle -->
<img src="hero.jpg" alt="Hero" loading="eager" fetchpriority="high" />

<!-- İlk 2-3 resim hızlı, diğerleri lazy -->
<img src="image-1.jpg" alt="1" loading="eager" />
<img src="image-2.jpg" alt="2" loading="eager" />
<img src="image-3.jpg" alt="3" loading="lazy" />
<img src="image-4.jpg" alt="4" loading="lazy" />

Resim Sıkıştırma Araçları

Online Araçlar:

• TinyPNG/TinyJPG: Ücretsiz, kolay, kaliteli
• Squoosh: Google’ın aracı, çok formatlar
• ImageOptim: Mac için ücretsiz uygulama
• ShortPixel: Bulk işleme, WordPress eklentisi

Command Line:

# ImageMagick ile WebP'ye çevir
convert input.jpg -quality 85 output.webp

# cwebp ile WebP'ye çevir (daha optimize)
cwebp -q 85 input.jpg -o output.webp

# Batch işlem (tüm JPEG'leri WebP yap)
for file in *.jpg; do
  cwebp -q 85 "$file" -o "${file%.jpg}.webp"
done

Video Optimizasyonu

Background Video

<!-- ❌ Kötü: Otomatik oynatılan ağır video -->
<video src="background.mp4" autoplay loop></video>

<!-- ✅ İyi: Sıkıştırılmış, muted, preload -->
<video autoplay loop muted playsinline preload="none" poster="video-poster.jpg">
  <source src="background.webm" type="video/webm" />
  <source src="background.mp4" type="video/mp4" />
</video>

Video Yerine Animated WebP/GIF

Kısa animasyonlar için video yerine:

• Animated WebP (daha küçük)
• Optimized GIF
• Lottie animations (vektör tabanlı)

---

CSS ve JavaScript Optimizasyonu

CSS Optimizasyonu

1. Critical CSS

İlk ekranda görünen kısım için CSS’i inline olarak ekleyin:

<head>
  <!-- Critical CSS (above-the-fold) -->
  <style>
    /* Sadece hero ve header için CSS */
    header {
      background: #000;
    }
    .hero {
      padding: 100px 0;
    }
  </style>

  <!-- Diğer CSS'leri async yükle -->
  <link rel="preload" href="main.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
  <noscript><link rel="stylesheet" href="main.css" /></noscript>
</head>

Critical CSS Oluşturma Araçları:

• Critical: npm paketi
• Penthouse: npm paketi
• CriticalCSS: Online araç

2. CSS Minify ve Compress

# npm ile cssnano kullanımı
npm install cssnano postcss-cli

# Minify işlemi
postcss input.css -u cssnano -o output.min.css

Önce:

body {
  margin: 0;
  padding: 0;
  font-family: 'Arial', sans-serif;
}

Sonra:

body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

3. Kullanılmayan CSS’i Kaldırın

# PurgeCSS ile
npm install purgecss

# Kullanım
purgecss --css style.css --content index.html --output output.css

Chrome DevTools ile manuel kontrol:

F12 > Coverage sekmesi > Start > Kırmızı alanlar kullanılmayan kod

JavaScript Optimizasyonu

1. Defer ve Async

<!-- ❌ Kötü: Render'ı bloklar -->
<script src="script.js"></script>

<!-- ✅ İyi: Render bloklamaz, sıra önemliyse defer -->
<script src="script.js" defer></script>

<!-- ⚠️ Dikkatli: Sıra önemli değilse async -->
<script src="analytics.js" async></script>

Fark:

• defer: HTML parse edildikten sonra, DOMContentLoaded’dan önce çalışır, sıra korunur
• async: İndirme bittiğinde hemen çalışır, sıra garanti değil

2. Code Splitting

Modern bundler’larla (Webpack, Vite, Rollup):

// ❌ Kötü: Tüm kod tek dosyada
import { hugeLibrary } from 'huge-library';

// ✅ İyi: İhtiyaç olduğunda yükle
const loadHugeLibrary = async () => {
  const { hugeLibrary } = await import('huge-library');
  return hugeLibrary;
};

// Kullanıcı butona tıkladığında yükle
button.addEventListener('click', async () => {
  const lib = await loadHugeLibrary();
  lib.doSomething();
});

3. Tree Shaking

Kullanılmayan kodu otomatik kaldırma:

// ❌ Kötü: Tüm lodash'i import et
import _ from 'lodash';
_.debounce(fn, 100);

// ✅ İyi: Sadece gerekeni import et
import { debounce } from 'lodash-es';
debounce(fn, 100);

4. Minification

# Terser ile JavaScript minify
npm install terser

terser input.js -o output.min.js --compress --mangle

---

Sunucu ve Hosting Optimizasyonu

Hosting Seçimi

Hosting Türleri ve Performans

Tür	Hız	Maliyet	Uygun Olan
Shared Hosting	⭐⭐	$3-10/ay	Küçük bloglar
VPS	⭐⭐⭐⭐	$20-100/ay	Orta trafik siteleri
Dedicated Server	⭐⭐⭐⭐⭐	$100-500/ay	Yüksek trafik
Cloud Hosting	⭐⭐⭐⭐⭐	$10-1000/ay	Ölçeklenebilir projeler
Managed WordPress	⭐⭐⭐⭐	$30-300/ay	WordPress siteleri

Sunucu Özellikleri

Minimum Öneriler:

✅ SSD depolama (HDD'den 10x daha hızlı)
✅ HTTP/2 veya HTTP/3 desteği
✅ PHP 8.1+ (WordPress için)
✅ GZIP/Brotli sıkıştırma
✅ CDN entegrasyonu
✅ LiteSpeed veya Nginx (Apache'den hızlı)

GZIP/Brotli Sıkıştırma

Apache (.htaccess):

# GZIP Compression
<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
  AddOutputFilterByType DEFLATE application/json application/xml
</IfModule>

Nginx:

# Brotli Compression (daha iyi)
brotli on;
brotli_comp_level 6;
brotli_types text/plain text/css application/json application/javascript text/xml application/xml;

# GZIP Fallback
gzip on;
gzip_vary on;
gzip_comp_level 6;
gzip_types text/plain text/css application/json application/javascript text/xml application/xml;

Sonuç:

📊 HTML: %60-70 sıkıştırma
📊 CSS: %70-80 sıkıştırma
📊 JavaScript: %60-70 sıkıştırma
📊 JSON: %75-85 sıkıştırma

HTTP/2 ve HTTP/3

HTTP/2 Avantajları:

• Çoklu istekleri tek bağlantıda (multiplexing)
• Header sıkıştırma
• Server push
• %30-50 hız artışı

HTTP/3 (QUIC):

• UDP tabanlı (daha hızlı)
• Bağlantı kurma süresi %50 azalma
• Paket kaybında daha iyi performans

Kontrol:

Chrome DevTools > Network > Protocol sütunu

---

Cache Stratejileri

Cache, performans optimizasyonunun kralıdır. Doğru cache stratejisiyle %80-90 hız artışı mümkün.

1. Browser Cache

Apache (.htaccess):

<IfModule mod_expires.c>
  ExpiresActive On

  # Resimler - 1 yıl
  ExpiresByType image/jpg "access plus 1 year"
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"

  # CSS ve JavaScript - 1 ay
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"

  # Fontlar - 1 yıl
  ExpiresByType font/woff2 "access plus 1 year"
  ExpiresByType font/woff "access plus 1 year"

  # HTML - 1 gün
  ExpiresByType text/html "access plus 1 day"
</IfModule>

Nginx:

location ~* \.(jpg|jpeg|png|gif|ico|webp|svg)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

location ~* \.(css|js)$ {
  expires 1M;
  add_header Cache-Control "public";
}

location ~* \.(woff2|woff|ttf|otf)$ {
  expires 1y;
  add_header Cache-Control "public, immutable";
}

2. Server-Side Cache

WordPress için Cache Eklentileri

En İyiler:

1. WP Rocket (Premium - $49/yıl)
   • En kolay kurulum
   • En iyi performans
   • Lazy load, minify, cache dahil
2. LiteSpeed Cache (Ücretsiz)
   • LiteSpeed sunucular için en iyi
   • Object cache, CDN desteği
   • Resim optimizasyonu
3. W3 Total Cache (Ücretsiz)
   • En kapsamlı seçenekler
   • Karmaşık ama güçlü
4. WP Super Cache (Ücretsiz)
   • Basit ve etkili
   • Yeni başlayanlar için

Varnish Cache

Sunucu seviyesi cache (ileri seviye):

🚀 Statik sayfalar: 100-1000x hızlanma
🚀 Server yükü: %95 azalma
🚀 Eşzamanlı kullanıcı kapasitesi: 10x artış

3. CDN (Content Delivery Network)

CDN, statik dosyalarınızı dünya çapında sunucularda kopyalar, kullanıcılar en yakın sunucudan indirir.

Popüler CDN Sağlayıcılar:

Sağlayıcı	Ücretsiz Plan	Ücretli	Özellik
Cloudflare	✅ Unlimited	$20+/ay	En popüler, DDoS koruması
BunnyCDN	❌	$1/TB	En ucuz, hızlı
StackPath	❌	$10+/ay	Güvenlik odaklı
KeyCDN	❌	$0.04/GB	Pay-as-you-go
Amazon CloudFront	✅ 50GB/ay	Değişken	AWS ekosistemi

CDN Faydaları:

📊 Sayfa yükleme: %40-60 azalma
📊 Bandwidth maliyeti: %60 azalma
📊 Server yükü: %70 azalma
📊 Global erişim hızı: Eşitlenir

---

CDN Kullanımı

Cloudflare Kurulumu (Ücretsiz)

Adım 1: Cloudflare’e kaydolun

1. cloudflare.com > Sign Up
2. Sitenizi ekleyin
3. Free plan seçin

Adım 2: DNS kayıtlarını aktarın

1. Cloudflare, mevcut DNS kayıtlarınızı tarar
2. Kayıtları kontrol edin
3. Continue butonuna tıklayın

Adım 3: Nameserver’ları değiştirin

1. Domain sağlayıcınıza gidin (GoDaddy, Namecheap vb.)
2. Nameserver'ları Cloudflare'in verdiği ile değiştirin
3. Cloudflare'de "Check Nameservers" butonuna tıklayın
4. Propagasyon bekleme (1-24 saat)

Adım 4: Optimizasyon ayarları

Speed > Optimization:
✅ Auto Minify: CSS, JavaScript, HTML
✅ Brotli
✅ Early Hints
✅ Rocket Loader (dikkatli test edin)

Caching > Configuration:
✅ Caching Level: Standard
✅ Browser Cache TTL: 4 hours - 1 year arası

WordPress için CDN Entegrasyonu

WP Rocket ile:

WP Rocket > CDN sekmesi:
1. CDN URL'inizi girin (örn: cdn.siteadi.com)
2. CDN'e gönderilecek dosya türlerini seçin
3. Kaydet

Manuel (wp-config.php):

// CDN URL tanımla
define('WP_CONTENT_URL', 'https://cdn.siteadi.com/wp-content');

---

Mobil Performans Optimizasyonu

Mobil cihazlar için özel optimizasyonlar:

1. Viewport Optimization

<meta name="viewport" content="width=device-width, initial-scale=1" />

2. Touch Optimization

/* Touch hedefleri en az 48x48px */
button,
a {
  min-width: 48px;
  min-height: 48px;
  padding: 12px;
}

/* Touch gecikmeyi kaldır */
* {
  touch-action: manipulation;
}

3. Mobile-First CSS

/* Önce mobil stil yaz */
.container {
  padding: 10px;
}

/* Sonra büyük ekranlar için ekle */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

4. Adaptive Loading

Ağ hızına göre içerik yükle:

// Network Information API
if ('connection' in navigator) {
  const connection = navigator.connection;

  if (connection.effectiveType === '4g') {
    // Yüksek kalite resim yükle
    loadHighQualityImages();
  } else {
    // Düşük kalite resim yükle
    loadLowQualityImages();
  }
}

---

Platform Özel İpuçları

WordPress Optimizasyonu

Temel Ayarlar:

// wp-config.php

// Memory limit artır
define('WP_MEMORY_LIMIT', '256M');

// Revisions sınırla
define('WP_POST_REVISIONS', 3);

// Autosave aralığını artır
define('AUTOSAVE_INTERVAL', 300); // 5 dakika

// Trash otomatik temizleme
define('EMPTY_TRASH_DAYS', 7);

Database Optimizasyonu:

-- Gereksiz verileri temizle
DELETE FROM wp_postmeta WHERE meta_key = '_wp_old_slug';
DELETE FROM wp_options WHERE option_name LIKE '%_transient_%';

-- Database'i optimize et
OPTIMIZE TABLE wp_posts, wp_postmeta, wp_options;

Eklenti Önerileri:

• ✅ WP Rocket veya LiteSpeed Cache: Cache
• ✅ ShortPixel veya Imagify: Resim optimizasyonu
• ✅ Autoptimize: CSS/JS minify
• ✅ Query Monitor: Debug ve optimizasyon

Shopify Optimizasyonu

Tema Optimizasyonu:

{%- comment -%} Lazy load resimleri {%- endcomment -%}
{{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }}

{%- comment -%} Preconnect kritik kaynaklara {%- endcomment -%}
<link rel="preconnect" href="https://cdn.shopify.com">
<link rel="dns-prefetch" href="https://cdn.shopify.com">

Uygulama Yönetimi:

• Kullanmadığınız uygulamaları kaldırın
• Ağır uygulamaları performans dostu alternatiflerle değiştirin
• Popup/banner uygulamalarını minimize edin

WooCommerce Optimizasyonu

Performans Ayarları:

// functions.php

// Store notice'i devre dışı bırak
add_filter('woocommerce_demo_store', '__return_false');

// Gereksiz scriptleri kaldır
add_action('wp_enqueue_scripts', 'remove_woo_scripts', 99);
function remove_woo_scripts() {
    if (!is_checkout() && !is_cart()) {
        wp_dequeue_script('wc-cart-fragments');
    }
}

// Product gallery zoom'u kaldır (isteğe bağlı)
add_filter('woocommerce_single_product_zoom_enabled', '__return_false');

---

Performans Kontrol Listesi

Başlamadan Önce

• Mevcut performansı ölç (PageSpeed Insights)
• Core Web Vitals skorlarını kaydet
• Yavaş sayfaları tespit et

Resim Optimizasyonu

• Tüm resimleri WebP formatına çevir
• Responsive images kullan (srcset)
• Lazy loading ekle
• Alt metinleri ekle (SEO için de önemli)
• Width/height attribute’ları belirt

CSS/JavaScript

• Dosyaları minify et
• Kullanılmayan kodu kaldır
• Critical CSS uygula
• JavaScript’i defer/async yap
• Code splitting kullan

Sunucu

• GZIP/Brotli sıkıştırma aktif
• HTTP/2 veya HTTP/3 kullan
• Browser cache başlıkları ayarla
• Server response time < 200ms

Cache

• Browser cache yapılandır
• Server-side cache kur (WP Rocket vb.)
• Object cache aktif et (Redis/Memcached)
• CDN entegrasyonu yap

Mobil

• Mobil skorları kontrol et
• Touch hedeflerini optimize et
• Viewport meta ekle
• Mobil-first CSS kullan

İzleme

• Google Search Console Core Web Vitals raporu
• Real User Monitoring (RUM) kur
• Aylık performans raporları

---

Sonuç

Web performans optimizasyonu, tek seferlik bir işlem değil, sürekli iyileştirme gerektiren bir süreçtir. Bu rehberde öğrendiklerinizi adım adım uygulayarak:

✅ Sayfa yükleme hızı: %50-200 iyileşme
✅ Core Web Vitals: Yeşil skor
✅ SEO sıralaması: 5-10 pozisyon artış
✅ Dönüşüm oranı: %10-30 artış
✅ Kullanıcı memnuniyeti: Belirgin iyileşme

Hatırlatma: Her optimizasyondan sonra test edin ve ölçün. Veri olmadan optimizasyon, sadece tahmin yürütmektir.

---

İlgili Yazılar

• SEO Optimizasyonu Rehberi: Google’da İlk Sayfaya Çıkın
• E-Ticaret Platformu Seçimi
• Modern Web Tasarım Trendleri 2025
• E-Ticaret Sitesi Açma Rehberi

Profesyonel web performans optimizasyonu desteği mi arıyorsunuz?
Yılmaz Soft uzman ekibi sitenizin performansını analiz edip en etkili optimizasyonları gerçekleştirebilir.

---

Son Güncelleme: 18 Ocak 2025
Yazar: Yılmaz Soft Performans Optimizasyon Ekibi