`, `

`, 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** ```html ``` 3. **Resimleri Optimize Edin** ```html ``` 4. **Preload Kullanın** ```html ``` ### 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** ```javascript // ❌ 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** ```javascript // ❌ 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** ```html ``` 4. **Event Handler'ları Optimize Edin** ```javascript // ❌ 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** ```html ``` 2. **Dinamik İçerik için Alan Ayırın** ```css /* Reklam alanı için minimum yükseklik */ .ad-container { min-height: 250px; background: #f0f0f0; /* Placeholder renk */ } ``` 3. **Font Loading Stratejisi** ```html ``` 4. **Animation'ları Doğru Kullanın** ```css /* ❌ 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:** ```html ``` #### 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 ```html ``` ### Resim Boyutlandırma #### Responsive Images ```html ``` #### Art Direction ```html ``` ### Lazy Loading ```html ``` ### 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:** ```bash # 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 ```html ``` #### 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: ```html ``` **Critical CSS Oluşturma Araçları:** - **Critical:** npm paketi - **Penthouse:** npm paketi - **CriticalCSS:** Online araç #### 2. **CSS Minify ve Compress** ```bash # npm ile cssnano kullanımı npm install cssnano postcss-cli # Minify işlemi postcss input.css -u cssnano -o output.min.css ``` **Önce:** ```css body { margin: 0; padding: 0; font-family: 'Arial', sans-serif; } ``` **Sonra:** ```css body { margin: 0; padding: 0; font-family: Arial, sans-serif; } ``` #### 3. **Kullanılmayan CSS'i Kaldırın** ```bash # 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** ```html ``` **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): ```javascript // ❌ 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: ```javascript // ❌ 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** ```bash # 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):** ```apache # GZIP Compression 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 ``` **Nginx:** ```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):** ```apache 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" ``` **Nginx:** ```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):** ```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** ```html ``` ### 2. **Touch Optimization** ```css /* 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** ```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: ```javascript // 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:** ```php // 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:** ```sql -- 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:** ```liquid {%- comment -%} Lazy load resimleri {%- endcomment -%} {{ product.featured_image | image_url: width: 800 | image_tag: loading: 'lazy' }} {%- comment -%} Preconnect kritik kaynaklara {%- endcomment -%} ``` **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ı:** ```php // 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](/blog/seo-optimizasyonu-rehberi) - [E-Ticaret Platformu Seçimi](/blog/e-ticaret-platformu-secimi-karsilastirma) - [Modern Web Tasarım Trendleri 2025](/blog/modern-web-tasarim-trendleri-2025) - [E-Ticaret Sitesi Açma Rehberi](/blog/e-ticaret-sitesi-acmak-icin-rehber) **Profesyonel web performans optimizasyonu desteği mi arıyorsunuz?** [Yılmaz Soft uzman ekibi](/iletisim) sitenizin performansını analiz edip en etkili optimizasyonları gerçekleştirebilir. --- **Son Güncelleme:** 18 Ocak 2025 **Yazar:** Yılmaz Soft Performans Optimizasyon Ekibi