Hızlı Açılan Web Siteleri Nasıl Yapılır? Web Sitesi Hızlandırma Rehberi

Bir saniye. Tek bir saniye, web sitenizin başarısını belirleyebilir.

İstatistiklere göre, bir web sitesi 3 saniyede açılmazsa, ziyaretçilerin %40'ı sayfayı kapatıyor. Bu demektir ki, yavaş site = direkt gelir kaybı.

Ancak sadece ziyaretçi kaybı değil. Google da hızlı siteleri tercih ediyor. Hızlı açılan web siteleri daha iyi SEO sıralaması alıyor. Ayrıca, mobil kullanıcılar için (ve günümüzde trafik %60+ mobil'den), hız hayati.

Bu rehberde, web sitenizi hızlandırmanın tüm yollarını öğreneceksiniz.

Web Sitesi Hızı: Temel Konseptler

Core Web Vitals (Google'ın Hız Metrikleri)

Google, web sitesi hızını 3 metric'le ölçüyor:

1. LCP (Largest Contentful Paint):

• Ana görsel veya metin kaç sürede yükleniyor?
• Hedef: < 2.5 saniye
• LCP = açılan sayfadaki en büyük visible element

2. FID (First Input Delay):

• Ziyaretçi tıklamaya tepki kaç sürede?
• Hedef: < 100ms
• Örnek: Button'a tıkla, form submit olana kadar geçen zaman

3. CLS (Cumulative Layout Shift):

• Sayfa yüklenirken elementler ne kadar hareket ediyor?
• Hedef: < 0.1
• Örnek: Text okuyorsun, sonra image yükleniyor, text aşağı kayıyor

Core Web Vitals İyileştirme: Pratik Çözümler

LCP'yi Hızlandırma (< 2.5 saniye)

Problem 1: Büyük Resimler

Sayfa yüklendiğinde en büyük görsel/text LCP'yi belirler. Eğer 5MB fotoğraf koyarsan, açılması uzun sürer.

Çözüm:

<!-- ❌ Yanlış: 5MB image -->
<img src="hero.jpg" alt="Hero"> <!-- ~5MB, açılması 3+ saniye -->

<!-- ✅ Doğru: Optimized image -->
<img src="hero-optimized.jpg" alt="Hero"> <!-- ~50KB, açılması <1 saniye -->
<!-- Önce small boyutlu load, lazy load sonra -->

Image Optimization Tools:

• Squoosh: squoosh.app
• TinyPNG: tinypng.com
• ImageOptim (Mac): imageoptim.com

Hedef: Her image < 200KB (mobil), < 500KB (desktop)

Problem 2: Render-Blocking JavaScript

JavaScript dosyası yüklenmeden sayfa render'lanmıyor.

<!-- ❌ Yanlış: Render-blocking -->
<head>
    <script src="app.js"></script>
</head>

<!-- ✅ Doğru: Async/defer -->
<head>
    <script src="app.js" async></script>
</head>

<!-- ✅ Veya sitenin sonuna koy -->
<body>
    ...
    <script src="app.js"></script>
</body>

Problem 3: Render-Blocking CSS

CSS dosyası yüklenmeden sayfanın üst kısmı gösterilmiyor.

<!-- ❌ Yanlış: Blocking CSS -->
<link rel="stylesheet" href="styles.css">

<!-- ✅ Doğru: İnline critical CSS -->
<style>
    /* Sadece above-fold CSS */
    body { background: white; }
    .hero { padding: 20px; }
</style>
<link rel="stylesheet" href="styles.css">

Problem 4: Yavaş Server Response (TTFB)

Server yanıt verme süresi > 600ms = problem.

Çözüm:

• Hosting upgrade et (VPS → Cloud)
• Database query'leri optimize et
• Caching implement et (Redis, Memcached)
• CDN kullan (CloudFlare, Akamai)

FID'i Hızlandırma (< 100ms)

Problem: JavaScript Execution Too Long

JavaScript parsing ve execution çok süre alıyor → Button'a tıklamaya tepki yavaş.

Çözüm:

1. JavaScript Bundle'ı Küçült:

# Minify JS
npx terser app.js -o app.min.js

# Tree shake (kullanılmayan code'u sil)
# Webpack, Rollup ile yapılabilir

2. Web Workers Kullan:

// Main thread işini Web Worker'a yükle
const worker = new Worker('heavy-computation.js');
worker.postMessage(data);
worker.onmessage = (e) => {
    console.log(e.data);
};

3. Lazy Load Interactive Components:

<!-- Intersection Observer ile, user'a yaklaşınca load -->
<script>
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                loadComponent(entry.target);
            }
        });
    });
    observer.observe(document.querySelector('.component'));
</script>

CLS'yi Hızlandırma (< 0.1)

Problem 1: Unsized Images / Ads

Image yüklenmeden, image'ın boyutu bilinmiyor → Text kayıyor.

<!-- ❌ Yanlış: Boyut bilinmiyor -->
<img src="image.jpg" alt="Resim">

<!-- ✅ Doğru: Boyut belirtilmiş -->
<img src="image.jpg" alt="Resim" width="800" height="600">

<!-- ✅ Veya responsive aspect ratio -->
<div style="aspect-ratio: 16 / 9;">
    <img src="image.jpg" alt="Resim" style="width: 100%; height: 100%;">
</div>

Problem 2: Dynamically Added Content

Sayfa yüklendikten sonra banner/ad eklenince, layout shift.

<!-- ❌ Yanlış: Banner dinamik eklenince shift -->
<div id="banner"></div> <!-- Boyut bilinmiyor -->
<p>Content...</p>

<!-- ✅ Doğru: Placeholder space reserved -->
<div id="banner" style="height: 100px; background: #EEE;">
    <!-- Ad buraya yükleniyor -->
</div>
<p>Content...</p>

Problem 3: Animation Shift

CSS animation'lar layout shift'e neden olabilir.

/* ❌ Yanlış: Transform shift */
.element {
    animation: moveDown 1s;
}
@keyframes moveDown {
    from { top: 0; }
    to { top: 50px; }
}

/* ✅ Doğru: Transform (GPU accelerated) */
.element {
    animation: moveDown 1s;
}
@keyframes moveDown {
    from { transform: translateY(0); }
    to { transform: translateY(50px); }
}

Web Sitesi Hızlandırma: Teknik Çözümler

1. Image Optimization

Adım 1: Format Selection

• WebP: Modern browsers, 25% daha küçük
• AVIF: NextGen format, hatta daha küçük
• JPEG: Compatibility, renkli görseller
• PNG: Transparency gerekiyorsa

<picture>
    <source srcset="image.avif" type="image/avif">
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="Fallback">
</picture>

Adım 2: Responsive Images

<img 
    srcset="
        small.jpg 480w,
        medium.jpg 1024w,
        large.jpg 1920w"
    sizes="(max-width: 480px) 100vw, (max-width: 1024px) 80vw, 1200px"
    src="medium.jpg"
    alt="Responsive"
>

Adım 3: Lazy Loading

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

<!-- Veya JavaScript Intersection Observer -->

2. Caching Strategies

Browser Caching (Ziyaretçinin Browser'ında):

# .htaccess (Apache)
<FilesMatch "\.(jpg|jpeg|png|gif|css|js)$">
    Header set Cache-Control "max-age=31536000"
</FilesMatch>

<FilesMatch "\.(html)$">
    Header set Cache-Control "max-age=3600"
</FilesMatch>

Server-Side Caching (Database query'leri cache):

// WordPress'te object caching
wp_cache_set('data_key', $data, '', 3600); // 1 saat
$data = wp_cache_get('data_key');

CDN Caching (CloudFlare, Bunny.net):

• Static assets CDN'de cached
• User'ın coğrafyasına yakın server'dan serve
• Bandwidth azalır, hız artar

3. Minification & Compression

CSS Minify:

npx cssnano styles.css -o styles.min.css

JavaScript Minify:

npx terser app.js -o app.min.js

Gzip Compression (Server'dan):

# .htaccess
<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css text/javascript application/javascript
</IfModule>

Yüzde: CSS 30% küçülür, JS 40% küçülür

4. Code Splitting

Tüm JavaScript'i bir dosyada yükleme, sadece gerekli olanı yükle.

// Webpack configuration
const config = {
    entry: './src/index.js',
    output: { filename: 'bundle.js' },
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
};

5. Asynchronous Loading

kritik olmayan resources'ı async yükle.

<!-- Critical: Synchronous -->
<script src="critical.js"></script>

<!-- Non-critical: Async -->
<script src="analytics.js" async></script>

<!-- Deferred: Sayfadan sonra -->
<script src="non-critical.js" defer></script>

WordPress/Breakdance Hızlandırma

Burak'ın Breakdance + WordPress setup'ında:

RankMath + LiteSpeed Kombinasyonu

// LiteSpeed Cache Settings (WP Admin)
- Database optimization: ON
- CSS minify: ON
- JavaScript minify: ON
- HTML minify: ON
- Image lazy load: ON
- QUIC: ON (eğer destekleniyorsa)

Breakdance-Specific Optimization

// Breakdance Builder Settings
- Lazy load images: ON
- Code splitting: ON
- Defer non-critical CSS: ON
- Preload critical resources: ON

Plugin Optimization

// Siparişi düşür (her plugin = overhead)
- Aktif plugin'ler < 20 (ideal: < 15)
- Kullanılmayan plugin'leri deactive et
- Heavy plugin'ler identify et (Query Monitor kullan)

Web Sitesi Hızı Test Etme Tools

1. Google PageSpeed Insights

• pagespeed.web.dev
• Google'ın resmi aracı
• Desktop + Mobile scores
• Specific recommendations

2. GTmetrix

• gtmetrix.com
• Detailed waterfall chart
• Filmstrip view
• Custom recommendations

3. WebPageTest

• webpagetest.org
• Advanced metrics
• Location selection
• Video recording

4. Lighthouse (Built-in Chrome)

• DevTools → Lighthouse tab
• Performance, Accessibility, Best Practices
• Local testing

Web Sitesi Hızı vs Conversion Rate

Hız'ın conversion'a etkisi:

Örnek: 10.000 aylık ziyaretçi

• Hızlı site (1s): 100 conversion
• Yavaş site (5s): 55 conversion
• Kayıp: 45 lead/ay = 225.000 TL/ay

Web Sitesi Hızlandırma Checklist

• [ ] Resimler optimized (< 200KB mobil, < 500KB desktop)
• [ ] LCP < 2.5 saniye
• [ ] FID < 100ms
• [ ] CLS < 0.1
• [ ] Render-blocking JS/CSS minimize
• [ ] Lazy loading implemented
• [ ] Caching strategy (browser + server + CDN)
• [ ] JavaScript minified & code split
• [ ] Gzip compression enabled
• [ ] Image formats modern (WebP, AVIF)
• [ ] TTFB < 600ms
• [ ] Plugin'ler minimal
• [ ] Database optimized
• [ ] CDN configured
• [ ] Lighthouse score > 90

Sonuç: Web Sitesi Hızı = Business Metric

Hızlı site:

• %40 daha fazla ziyaretçi kalıyor
• %30-50 daha fazla conversion
• %20 daha iyi Google ranking
• %25 daha az bounce rate

Hızlı açılan web sitesinin maliyeti: 0 TL (optimization) Hızlı açılan web sitesinin kazancı: Çok büyük

Web sitesi hızlandırmada yardımcı olabiliriz. İletişime geçin.