Site Hızı Optimizasyonu 2024 | Core Web Vitals Rehberi

Site Hızı Neden Bu Kadar Önemli?

Google'ın 2021'de başlattığı Page Experience Update ile site hızı resmi ranking faktörü oldu. Artık ne kadar kaliteli içeriğiniz olursa olsun, siteniz yavaşsa Google'da üst sıralara çıkmanız zorlaşıyor.

Core Web Vitals - Google'ın 3 Kritik Metriği

Site Hızı Ölçüm Araçları

Adım Adım Site Hızı Optimizasyonu

1. Mevcut Durumu Analiz Edin

1. Baseline Ölçümü: PageSpeed Insights ile mevcut skorları kaydedin
2. Bottleneck Tespiti: En yavaş yüklenen elemanları belirleyin
3. Competitor Analizi: Rakiplerinizin site hızlarını karşılaştırın
4. User Journey Mapping: Kritik sayfaları önceliklendirin

2. Görsel Optimizasyonu

Genellikle sayfa ağırlığının %50-70'ini görseller oluşturur. Görsel optimizasyonu en büyük etkiyi yaratır.

Örnek Responsive Image Kodu:

<picture>
  <source media="(min-width: 800px)" srcset="large.webp" type="image/webp">
  <source media="(min-width: 400px)" srcset="medium.webp" type="image/webp">
  <img src="small.jpg" alt="Açıklama" loading="lazy" width="400" height="300">
</picture>

3. CSS Optimizasyonu

Critical CSS Implementation:

1. Critical CSS Extraction: Above-the-fold için gerekli CSS'i tespit edin
2. Inline Critical CSS: Bu CSS'i HTML head'ine yerleştirin
3. Async Non-Critical CSS: Geri kalan CSS'i async yükleyin
4. CSS Minification: Gereksiz boşlukları ve yorumları temizleyin

Async CSS Loading Örneği:

<link rel="preload" href="styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'">
<noscript><link rel="stylesheet" href="styles.css"></noscript>

4. JavaScript Optimizasyonu

JavaScript, özellikle main thread'i bloke ettiği için FID skorunu doğrudan etkiler.

JS Optimizasyon Stratejileri:

• Code Splitting: Büyük JS dosyalarını parçalayın
• Tree Shaking: Kullanılmayan kodu temizleyin
• Minification: Dosya boyutunu küçültün
• Defer/Async: Doğru loading stratejisi kullanın
• Service Workers: Caching için kullanın

Script Loading Best Practices:

<!-- Critical JS - Inline -->
<script>
// Above-the-fold için gerekli minimal JS
</script>

<!-- Non-critical JS - Defer -->
<script src="app.js" defer></script>

<!-- Third-party - Async -->
<script src="analytics.js" async></script>

5. Server ve Hosting Optimizasyonu

6. Caching Stratejileri

Effective caching, repeat visitors için dramatik hız artışı sağlar.

Caching Katmanları:

• Browser Caching: Static resources için expires headers
• CDN Caching: Global edge locations
• Server-Side Caching: Full page veya object caching
• Database Caching: Query results caching

Örnek Cache Headers:

# .htaccess örneği
<IfModule mod_expires.c>
    ExpiresActive on
    
    # Images
    ExpiresByType image/jpg "access plus 1 year"
    ExpiresByType image/png "access plus 1 year"
    ExpiresByType image/webp "access plus 1 year"
    
    # CSS and JavaScript
    ExpiresByType text/css "access plus 1 month"
    ExpiresByType application/javascript "access plus 1 month"
    
    # HTML
    ExpiresByType text/html "access plus 1 hour"
</IfModule>

WordPress Site Hızı Optimizasyonu

WordPress siteleri için özel optimizasyon gereksinimleri vardır:

En İyi WordPress Hız Plugin'leri

WordPress Hosting Önerileri

• WP Engine: Managed WordPress hosting lideri
• SiteGround: Excellent performance/price ratio
• Kinsta: Google Cloud powered WP hosting
• Cloudways: Flexible cloud hosting

E-ticaret Site Hızı Optimizasyonu

E-ticaret siteleri özel challenges içerir: çok sayıda ürün görseli, dynamic content, checkout process.

E-ticaret Özel Optimizasyonları

• Product Image Optimization: Multiple sizes, WebP format
• Category Page Pagination: Infinite scroll vs. pagination
• Search Functionality: Ajax search, autocomplete
• Shopping Cart: Local storage, minimal requests
• Checkout Optimization: Single page checkout, guest option

Mobile Site Hızı Optimizasyonu

Google'ın mobile-first indexing yaklaşımı ile mobile performance kritik önem kazandı.

Mobile-Specific Optimizations

• AMP (Accelerated Mobile Pages): Ultra-fast mobile pages
• Progressive Web App (PWA): App-like experience
• Mobile-First Design: Mobile öncelikli CSS
• Touch Optimization: 44px minimum touch targets
• Reduced Animations: Prefer CSS transforms

Critical Mobile Metrics

Site Hızı Monitoring ve Maintenance

Continuous Monitoring Setup

1. Real User Monitoring (RUM): Google Analytics'te Core Web Vitals
2. Synthetic Monitoring: Pingdom, GTmetrix alerts
3. Performance Budget: CI/CD pipeline'da performance thresholds
4. Regular Audits: Aylık performance check

Performance Regression Prevention

• Performance Testing: Her deploy öncesi speed test
• Asset Monitoring: File size tracking
• Third-Party Audit: External script impact analysis
• Database Maintenance: Regular cleanup ve optimization

Gelişmiş Site Hızı Teknikleri

1. Service Workers ve PWA

Service Workers offline caching ve background sync sağlayarak repeat visits'i dramatik hızlandırır.

Basic Service Worker Örneği:

// sw.js
const CACHE_NAME = 'site-cache-v1';
const urlsToCache = [
  '/',
  '/css/style.css',
  '/js/app.js'
];

self.addEventListener('install', (event) => {
  event.waitUntil(
    caches.open(CACHE_NAME)
      .then((cache) => cache.addAll(urlsToCache))
  );
});

self.addEventListener('fetch', (event) => {
  event.respondWith(
    caches.match(event.request)
      .then((response) => response || fetch(event.request))
  );
});

2. HTTP/2 ve HTTP/3 Optimization

• Server Push: Critical resources'ları proactive push
• Multiplexing: Parallel requests without head-of-line blocking
• Header Compression: HPACK compression
• Binary Protocol: More efficient than HTTP/1.1

3. Edge Computing ve CDN

Content delivery network'ler kullanıcıya en yakın edge location'dan content serve eder.

CDN Best Practices:

• Global Coverage: Worldwide edge locations
• Smart Caching: Dynamic content caching
• Image Optimization: On-the-fly image processing
• Security: DDoS protection, WAF integration

Site Hızı ROI Hesaplama

Performance Investment Return

Sık Yapılan Site Hızı Hataları

Sonuç

Site hızı optimizasyonu 2024'te SEO başarısının temel taşlarından biri. Core Web Vitals metrikleri Google'ın ranking algoritmasında giderek daha önemli hale geliyor ve kullanıcı deneyimini doğrudan etkiliyor.

Unutmayın ki site hızı optimizasyonu bir kerelik iş değil, sürekli monitoring ve iyileştirme gerektiren bir süreç. Technology evolves, user expectations increase ve Google'ın standartları yükseliyor.

İyi performans gösteren siteler hem search rankings'te hem de user engagement'ta rakiplerini geride bırakıyor. Performance optimization'a yaptığınız yatırım hem SEO hem de conversion rate açısından kendisini katlanarak geri ödeyecektir.