Ana içeriğe geç
Kategoriye Dön

CDN Entegrasyonu ve Statik Dosya Optimizasyonu

CDN nedir, Cloudflare ücretsiz CDN kurulumu, Nginx cache header yapılandırması, gzip/brotli sıkıştırma, görsel optimizasyonu ve cache-control header rehberi.

Okuma süresi: 14 dk Web Hosting / Uygulama
cdncloudflarenginxgzipbrotlicacheoptimizasyonperformansstatik dosya
Yazar
REXE Teknoloji Ağ ve Güvenlik Ekibi
Editör
REXE Teknoloji Teknik Yayın Editörü
İlk yayın
Son güncelleme

CDN Entegrasyonu ve Statik Dosya Optimizasyonu Rehberi

Web sitenizin hızı, kullanıcı deneyimi ve SEO sıralaması için kritik öneme sahiptir. CDN (Content Delivery Network) ve statik dosya optimizasyonu, sayfa yükleme sürelerini dramatik biçimde azaltabilir. Bu rehberde CDN'in ne olduğunu, Cloudflare kurulumunu, Nginx cache yapılandırmasını ve sıkıştırma tekniklerini ele alacağız.

CDN Nedir?

CDN (İçerik Dağıtım Ağı), statik içerikleri (resimler, CSS, JavaScript, videolar) dünya genelindeki sunuculara dağıtarak kullanıcılara en yakın sunucudan sunan bir ağ altyapısıdır.

CDN'in Faydaları:

  • Sayfa yükleme sürelerini %50-80 azaltabilir
  • Kaynak sunucu üzerindeki yükü azaltır
  • DDoS saldırılarına karşı koruma sağlar
  • Küresel kullanıcılara düşük gecikme sunar
  • Bant genişliği maliyetlerini düşürür

Cloudflare Ücretsiz CDN Kurulumu

Cloudflare, ücretsiz planında CDN, DDoS koruması ve SSL sertifikası sunar.

1. Cloudflare Hesabı Oluşturma

  1. cloudflare.com adresine gidin
  2. Ücretsiz hesap oluşturun
  3. "Add a Site" butonuna tıklayın
  4. Domain adınızı girin
  5. Free planı seçin

2. DNS Kayıtlarını Aktarma

Cloudflare mevcut DNS kayıtlarınızı otomatik olarak tarar. Kayıtları doğrulayın:

A     @        203.0.113.50    Proxied (turuncu bulut)
A     www      203.0.113.50    Proxied (turuncu bulut)
CNAME api      api.example.com  DNS only (gri bulut)

"Proxied" (turuncu bulut) seçeneği trafiği Cloudflare üzerinden geçirir ve CDN + DDoS koruması sağlar. "DNS only" (gri bulut) sadece DNS çözümlemesi yapar.

3. Nameserver Değişikliği

Domain kayıt şirketinizde nameserver'ları Cloudflare'in verdiği değerlerle değiştirin:

ns1.cloudflare.com
ns2.cloudflare.com

4. Cloudflare Ayarları

SSL/TLS: Full (strict) modunu seçin

Caching:

  • Browser Cache TTL: 4 hours
  • Cache Level: Standard

Speed:

  • Auto Minify: JavaScript, CSS, HTML'i etkinleştirin
  • Brotli: Etkinleştirin

Page Rules (Ücretsiz planda 3 kural):

example.com/static/*
  Cache Level: Cache Everything
  Edge Cache TTL: 1 month

Nginx Cache Header Yapılandırması

Nginx'te statik dosyalar için doğru cache header'ları ayarlamak, tarayıcı ve CDN cache'ini optimize eder.

hljs bash
sudo nano /etc/nginx/sites-available/mysite
hljs nginx
server {
    listen 80;
    server_name example.com;
    root /var/www/mysite;

    # HTML dosyaları - cache'leme (her zaman güncel)
    location ~* \.html$ {
        add_header Cache-Control "no-cache, must-revalidate";
        add_header Pragma "no-cache";
    }

    # CSS ve JavaScript - versiyonlanmış dosyalar için uzun cache
    location ~* \.(css|js)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
    }

    # Görseller
    location ~* \.(jpg|jpeg|png|gif|ico|webp|avif|svg)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Vary "Accept-Encoding";
    }

    # Font dosyaları
    location ~* \.(woff|woff2|ttf|eot|otf)$ {
        expires 1y;
        add_header Cache-Control "public, immutable";
        add_header Access-Control-Allow-Origin "*";
    }

    # Video ve ses dosyaları
    location ~* \.(mp4|webm|ogg|mp3)$ {
        expires 30d;
        add_header Cache-Control "public";
    }

    # API endpoint'leri - cache'leme
    location /api/ {
        add_header Cache-Control "no-store, no-cache";
        proxy_pass http://localhost:3000;
    }
}

Gzip Sıkıştırma

Gzip, metin tabanlı dosyaları (HTML, CSS, JS) sıkıştırarak transfer boyutunu %60-80 azaltır.

hljs bash
sudo nano /etc/nginx/nginx.conf
hljs nginx
http {
    # Gzip ayarları
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_min_length 256;
    gzip_types
        text/plain
        text/css
        text/xml
        text/javascript
        application/json
        application/javascript
        application/xml
        application/xml+rss
        application/atom+xml
        image/svg+xml
        font/truetype
        font/opentype
        application/vnd.ms-fontobject;
}

Brotli Sıkıştırma

Brotli, gzip'e göre %15-25 daha iyi sıkıştırma oranı sunar ve modern tarayıcılar tarafından desteklenir.

hljs bash
# Brotli modülünü kur
sudo apt install libnginx-mod-brotli -y

# Nginx yapılandırmasına ekle
sudo nano /etc/nginx/nginx.conf
hljs nginx
http {
    # Brotli ayarları
    brotli on;
    brotli_comp_level 6;
    brotli_static on;
    brotli_types
        text/plain
        text/css
        application/json
        application/javascript
        text/xml
        application/xml
        image/svg+xml;
}
hljs bash
sudo nginx -t
sudo systemctl reload nginx

# Sıkıştırmayı test et
curl -H "Accept-Encoding: br" -I https://example.com
# Content-Encoding: br görünmeli

Görsel Optimizasyonu

WebP Dönüşümü

WebP formatı, JPEG ve PNG'ye göre %25-35 daha küçük dosya boyutu sunar.

hljs bash
# cwebp aracını kur
sudo apt install webp -y

# Tek dosya dönüştür
cwebp -q 80 image.jpg -o image.webp

# Toplu dönüştürme
for f in /var/www/mysite/images/*.jpg; do
    cwebp -q 80 "$f" -o "${f%.jpg}.webp"
done

Nginx'te WebP Sunumu

hljs nginx
# WebP desteği olan tarayıcılara WebP sun
map $http_accept $webp_suffix {
    default "";
    "~*webp" ".webp";
}

server {
    location ~* \.(jpg|jpeg|png)$ {
        add_header Vary Accept;
        try_files $uri$webp_suffix $uri =404;
    }
}

Cache-Control Header Stratejisi

İçerik TürüCache-ControlAçıklama
HTMLno-cacheHer zaman güncel
CSS/JS (hash'li)public, immutable, max-age=315360001 yıl
Görsellerpublic, max-age=315360001 yıl
API yanıtlarıno-storeHiç cache'leme
Kullanıcı verisiprivate, no-cacheSadece tarayıcı
hljs nginx
# ETag etkinleştir (değişiklik kontrolü için)
etag on;

# Last-Modified header
add_header Last-Modified $date_gmt;

# Conditional request desteği
if_modified_since before;

Nginx FastCGI Cache (PHP için)

hljs nginx
# Cache zone tanımla
fastcgi_cache_path /var/cache/nginx/fastcgi levels=1:2 keys_zone=FCGI:100m inactive=60m max_size=1g;

server {
    set $skip_cache 0;
    if ($request_method = POST) { set $skip_cache 1; }
    if ($query_string != "") { set $skip_cache 1; }
    if ($request_uri ~* "/admin|/login|/api") { set $skip_cache 1; }

    location ~ \.php$ {
        fastcgi_cache FCGI;
        fastcgi_cache_valid 200 1h;
        fastcgi_cache_bypass $skip_cache;
        fastcgi_no_cache $skip_cache;
        add_header X-Cache-Status $upstream_cache_status;
    }
}

Cache header'larını test etmek için Chrome DevTools > Network sekmesini kullanın. Response headers'da Cache-Control, ETag ve Age değerlerini kontrol edin.

Sonuç

CDN entegrasyonu ve statik dosya optimizasyonu, web sitenizin performansını önemli ölçüde artırır. Cloudflare ücretsiz CDN ile küresel dağıtım, Nginx cache header'ları ile tarayıcı cache'i, gzip/brotli ile sıkıştırma ve WebP ile görsel optimizasyonu birlikte kullanıldığında sayfa yükleme sürelerini dramatik biçimde azaltabilirsiniz.

Sık Sorulan Sorular

Cloudflare kullanırken SSL sertifikam çalışmıyor.

Cloudflare SSL/TLS ayarlarında 'Full (strict)' modunu seçin. Sunucunuzda geçerli bir SSL sertifikası (Let's Encrypt) olduğundan emin olun. 'Flexible' mod güvensizdir; sunucu ile Cloudflare arasındaki bağlantı şifrelenmez. Cloudflare Origin Certificate de kullanabilirsiniz.

Cache'i temizlemek istiyorum, nasıl yapabilirim?

Cloudflare Dashboard > Caching > Purge Cache ile tüm cache'i veya belirli URL'leri temizleyebilirsiniz. Nginx FastCGI cache için 'sudo rm -rf /var/cache/nginx/fastcgi/*' komutunu kullanın. Tarayıcı cache'ini temizlemek için Ctrl+Shift+R (hard refresh) yapın.

Gzip sıkıştırma çalışıyor mu nasıl kontrol ederim?

'curl -H "Accept-Encoding: gzip" -I https://example.com' komutuyla kontrol edin. Response'da 'Content-Encoding: gzip' görünmeli. Alternatif olarak Chrome DevTools > Network > Response Headers'da Content-Encoding değerini kontrol edin. GTmetrix veya PageSpeed Insights araçları da sıkıştırma durumunu gösterir.

CDN kullanırken gerçek kullanıcı IP'sini nasıl alırım?

Cloudflare, gerçek IP'yi CF-Connecting-IP header'ında gönderir. Nginx'te 'set_real_ip_from' direktifi ile Cloudflare IP aralıklarını tanımlayın ve 'real_ip_header CF-Connecting-IP;' ekleyin. Bu sayede log dosyalarında ve uygulamanızda gerçek kullanıcı IP'sini görebilirsiniz.

İlgili Makaleler

Node.js Uygulaması Deploy Etme: PM2 ve Nginx

Node.js uygulamasını VPS'e deploy etme rehberi. nvm ile Node.js kurulumu, PM2 process manager, Nginx reverse proxy, SSL sertifikası ve environment variables yönetimi.

15 dk
nodejspm2nginx

PHP Uygulaması Deploy Etme: LAMP ve LEMP Stack

PHP uygulamasını VPS'e deploy etme rehberi. LAMP ve LEMP stack karşılaştırması, Apache/Nginx + PHP-FPM + MySQL kurulumu, sanal host yapılandırması ve PHP sürüm yönetimi.

18 dk
phplamplemp
Ağ TrafiğiGelen GbpsGiden Gbps