CDN Entegrasyonu ve Statik Dosya Optimizasyonu

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

cloudflare.com adresine gidin
Ücretsiz hesap oluşturun
"Add a Site" butonuna tıklayın
Domain adınızı girin
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-Control	Açıklama
HTML	no-cache	Her zaman güncel
CSS/JS (hash'li)	public, immutable, max-age=31536000	1 yıl
Görseller	public, max-age=31536000	1 yıl
API yanıtları	no-store	Hiç cache'leme
Kullanıcı verisi	private, no-cache	Sadece 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.

CDN Entegrasyonu ve Statik Dosya Optimizasyonu

İçindekiler