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:

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

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);
};

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:

LCP Time	Conversion Rate	Change
1 saniye	100% (baseline)	-
2 saniye	85%	-15%
3 saniye	72%	-28%
5 saniye	55%	-45%
10 saniye	30%	-70%

Ö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.