Cloudflare Polish ile Görsel Sıkıştırma ve Web Sitenizi Hızlandırma

Tarafındankomut
0 Comments

Web sitelerinin yüklenme hızı, kullanıcı deneyimini doğrudan etkileyen en kritik faktörlerden biri. Bir e-ticaret sitesi yönetiyorsun, portfolyo sitenizi optimize etmeye çalışıyorsun ya da kurumsal bir web uygulaması işletiyorsun; görseller her zaman sayfanın en ağır yükünü taşıyan bileşenler arasında yer alıyor. Cloudflare Polish tam da bu noktada devreye giren, görselleri otomatik olarak sıkıştırıp optimize eden güçlü bir özellik. Bu yazıda Polish’in ne olduğunu, nasıl çalıştığını ve gerçek dünya senaryolarında nasıl yapılandırılacağını detaylıca ele alacağız.

Cloudflare Polish Nedir?

Cloudflare Polish, Cloudflare’in Pro ve üzeri planlarda sunduğu, görselleri CDN edge node’larında sıkıştıran ve optimize eden bir özelliktir. Geleneksel yaklaşımda görselleri optimize etmek için ya sunucu tarafında bir işlem yapman ya da görsel optimizasyon araçlarını build pipeline’ına dahil etmen gerekir. Polish bu süreci tamamen Cloudflare altyapısına devreder.

Polish, kaynak sunucundan gelen görselleri Cloudflare’in edge cache’inde işleyerek istemcilere optimize edilmiş versiyonlarını sunar. Bu işlem sırasında orijinal dosyaya dokunulmaz, yani kaynak sunucundaki görseliniz değişmez. Tüm optimizasyon Cloudflare tarafında gerçekleşir.

Polish’in Çalışma Mantığı

Polish etkinleştirildiğinde bir ziyaretçi sayfanızı ilk kez ziyaret ettiğinde şu süreç işler:

  • İstemci Cloudflare edge node’una istek gönderir
  • Edge node, görseli cache’de bulamazsa kaynak sunucudan çeker
  • Polish görseli işler ve sıkıştırır
  • Sıkıştırılmış görsel hem cache’e yazılır hem istemciye gönderilir
  • Sonraki isteklerde görsel doğrudan cache’den servis edilir

Bu akış sayesinde hem bant genişliği tasarrufu sağlanır hem de sayfa yükleme süreleri ciddi ölçüde kısalır.

Polish Modları

Polish iki farklı modda çalışır:

Lossless (Kayıpsız): Görsel kalitesinden ödün vermeden gereksiz metadata, EXIF verisi ve sıkıştırılabilir boşlukları temizler. PNG ve JPEG dosyaları için ideal. Ortalama %21 boyut küçültme sağlar.

Lossy (Kayıplı): JPEG görsellerde daha agresif sıkıştırma yapar. Görsel kalitesinde minimal düşüş karşılığında %48’e varan boyut küçültmesi elde edersin. Çoğu kullanım senaryosu için fark gözle görülür değildir.

WebP Dönüşümü: Polish ile birlikte etkinleştirilen WebP seçeneği, tarayıcı destekliyorsa JPEG ve PNG görsellerini WebP formatına çevirerek servise eder. WebP, aynı kalitede JPEG’e kıyasla ortalama %25-34 daha küçük dosya boyutu sunar.

Cloudflare Polish’i Etkinleştirme

Cloudflare dashboard üzerinden Polish’i etkinleştirmek oldukça basit. Önce hangi planda olduğunu kontrol et; Polish Pro plan ve üzerinde kullanılabilir.

Dashboard Üzerinden Yapılandırma

  1. Cloudflare dashboard’a giriş yap
  2. İlgili alan adını seç
  3. Speed sekmesine tıkla
  4. Optimization bölümünü aç
  5. Polish seçeneğini bul ve istediğin modu seç
  6. WebP dönüşümünü de etkinleştirmek istiyorsan WebP toggle’ını açık konuma getir

API ile Polish Yapılandırması

Cloudflare API’sini kullanarak Polish’i programatik olarak yönetebilirsin. Bu özellikle birden fazla domain’i yönetirken veya CI/CD pipeline’larında konfigürasyonu otomatize etmek istediğinde işe yarar.

# Mevcut Polish ayarlarını sorgula
curl -X GET "https://api.cloudflare.com/client/v4/zones/ZONE_ID/settings/polish" 
     -H "X-Auth-Email: [email protected]" 
     -H "X-Auth-Key: API_ANAHTARIN" 
     -H "Content-Type: application/json"
# Polish'i Lossy modda etkinleştir
curl -X PATCH "https://api.cloudflare.com/client/v4/zones/ZONE_ID/settings/polish" 
     -H "X-Auth-Email: [email protected]" 
     -H "X-Auth-Key: API_ANAHTARIN" 
     -H "Content-Type: application/json" 
     --data '{"value":"lossy"}'
# WebP dönüşümünü etkinleştir
curl -X PATCH "https://api.cloudflare.com/client/v4/zones/ZONE_ID/settings/webp" 
     -H "X-Auth-Email: [email protected]" 
     -H "X-Auth-Key: API_ANAHTARIN" 
     -H "Content-Type: application/json" 
     --data '{"value":"on"}'

API token kullanıyorsan X-Auth-Key ve X-Auth-Email header’ları yerine Authorization: Bearer TOKEN formatını kullanman gerekir:

# API Token ile Polish durumunu kontrol et
curl -X GET "https://api.cloudflare.com/client/v4/zones/ZONE_ID/settings/polish" 
     -H "Authorization: Bearer API_TOKEN_BURAYA" 
     -H "Content-Type: application/json" | python3 -m json.tool

Terraform ile Altyapı Kodu Olarak Polish

Eğer Cloudflare altyapını Terraform ile yönetiyorsan, Polish yapılandırmasını da kod olarak tutabilirsin. Bu yaklaşım özellikle birden fazla ortam (staging, production) yönetirken konfigürasyon tutarlılığını sağlar.

# cloudflare_zone_settings.tf
resource "cloudflare_zone_settings_override" "production_site" {
  zone_id = var.zone_id

  settings {
    polish  = "lossy"
    webp    = "on"
    
    # Diğer performans ayarları
    minify {
      css  = "on"
      js   = "on"
      html = "on"
    }
    
    brotli            = "on"
    early_hints       = "on"
    http3             = "on"
  }
}
# Terraform ile değişiklikleri uygula
terraform init
terraform plan -out=tfplan
terraform apply tfplan

Polish Performansını İzleme ve Doğrulama

Polish’i etkinleştirdikten sonra gerçekten çalışıp çalışmadığını doğrulamak önemli. Bunu birkaç farklı yöntemle yapabilirsin.

HTTP Header Kontrolü

Cloudflare, Polish tarafından işlenen görsellerde cf-polished response header’ı ekler. Bu header’ı inceleyerek görselin optimize edilip edilmediğini anlayabilirsin.

# Görsel header'larını kontrol et
curl -sI "https://siteadresi.com/images/banner.jpg" | grep -i "cf-polished|content-type|content-length"

Eğer görsel Polish tarafından işlendiyse şuna benzer bir çıktı görürsün:

cf-polished: origFmt=jpeg, origSize=245678
content-type: image/webp
content-length: 89432

Bu çıktı görselin orijinalinin JPEG formatında 245 KB olduğunu, ancak WebP olarak 87 KB boyutunda sunulduğunu gösteriyor. Yaklaşık %64 küçülme demek bu.

Toplu Görsel Kontrolü

Birden fazla görseli aynı anda kontrol etmek için küçük bir Bash scripti yazabilirsin:

#!/bin/bash
# polish_check.sh - Cloudflare Polish optimizasyon kontrolü

DOMAIN="https://siteadresi.com"
IMAGES=(
  "/images/hero-banner.jpg"
  "/images/product-1.jpg"
  "/images/team-photo.png"
  "/images/logo.png"
  "/uploads/gallery/photo1.jpg"
)

echo "Polish Optimizasyon Raporu"
echo "=========================="
echo ""

for img in "${IMAGES[@]}"; do
  URL="${DOMAIN}${img}"
  
  # Header bilgilerini çek
  HEADERS=$(curl -sI "$URL" -H "Accept: image/webp,image/*,*/*")
  
  CF_POLISHED=$(echo "$HEADERS" | grep -i "cf-polished" | tr -d 'r')
  CONTENT_TYPE=$(echo "$HEADERS" | grep -i "content-type" | tr -d 'r')
  CONTENT_LENGTH=$(echo "$HEADERS" | grep -i "content-length" | tr -d 'r')
  
  echo "Görsel: $img"
  
  if [ -n "$CF_POLISHED" ]; then
    echo "  Durum: OPTIMIZE EDILDI"
    echo "  $CF_POLISHED"
  else
    echo "  Durum: Polish uygulanmadi"
  fi
  
  echo "  $CONTENT_TYPE"
  echo "  $CONTENT_LENGTH"
  echo ""
done
chmod +x polish_check.sh
./polish_check.sh

Gerçek Dünya Senaryoları

Senaryo 1: E-Ticaret Sitesi

Bir e-ticaret sitesi yönettiğini düşün. Ürün sayfaları yüzlerce JPEG görsel içeriyor, ortalama görsel boyutu 300-500 KB arasında. Günlük 10.000 ziyaretçi ile bant genişliği maliyetleri hızla artıyor.

Polish Lossy + WebP kombinasyonu ile:

  • Ortalama JPEG boyutu 380 KB’dan 120 KB’a düştü
  • Mobil kullanıcılar için sayfa yükleme süresi 4.2 saniyeden 1.8 saniyeye geriledi
  • Aylık bant genişliği tüketimi yaklaşık %65 azaldı

Bu senaryoda dikkat etmen gereken nokta, ürün görsellerinin kalitesinin satış dönüşümünü etkileyebileceği. Lossy modu kullanıyorsan görselleri mutlaka gözle kontrol et. Bazı takı veya tekstil siteleri Lossless modunu tercih ediyor çünkü renk ve doku detayları kritik önem taşıyor.

Senaryo 2: WordPress Blog

WordPress sitelerde görseller genellikle optimize edilmeden yükleniyor. Yazarlar 5-10 MB’lık fotoğrafları direkt upload ediyor ve tema bunları küçülterek gösterse de gerçek dosya boyutu değişmiyor.

Polish bu durumda mükemmel bir çözüm sunuyor. Ancak burada dikkat edilmesi gereken bir nokta var: WordPress’in kendi görsel işleme sistemi ve Polish arasındaki etkileşim.

WordPress görselleri /wp-content/uploads/ dizininde saklıyor. Polish bu yolu cache layer’da işlerken şu yapılandırmayı öneriyorum:

# WordPress Upload dizini için Cache Rule kontrolü
# Cloudflare dashboard > Rules > Cache Rules

# Örnek: Upload dizini için TTL ayarı
# Bu işlemi API ile de yapabilirsin:

curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/rules/cache_rules" 
     -H "Authorization: Bearer API_TOKEN" 
     -H "Content-Type: application/json" 
     --data '{
       "action": {
         "type": "set_cache_settings",
         "value": {
           "cache": true,
           "edge_ttl": {
             "mode": "override_origin",
             "default": 2592000
           },
           "browser_ttl": {
             "mode": "override_origin",
             "default": 86400
           }
         }
       },
       "expression": "(http.host eq "siteadresi.com" and http.request.uri.path contains "/wp-content/uploads/")",
       "description": "WordPress Upload Cache Rule",
       "enabled": true
     }'

Senaryo 3: Medya ve Haber Sitesi

Haber sitelerinde görseller sürekli değişiyor. Yeni haberler her saat yüzlerce görsel getiriyor. Polish’in cache ile entegrasyonu burada kritik rol oynuyor.

Yeni bir görsel yüklendiğinde cache’i temizlemen ve Polish’in yeni görseli işlemesini sağlaman gerekiyor. Bu işlemi Cloudflare API ile otomatize edebilirsin:

#!/bin/bash
# purge_and_revalidate.sh
# Yeni görsel yüklemesi sonrası cache temizleme scripti

API_TOKEN="API_TOKEN_BURAYA"
ZONE_ID="ZONE_ID_BURAYA"
IMAGE_URL="$1"

if [ -z "$IMAGE_URL" ]; then
  echo "Kullanim: $0 https://siteadresi.com/images/yeni-gorsel.jpg"
  exit 1
fi

echo "Cache temizleniyor: $IMAGE_URL"

RESPONSE=$(curl -s -X POST 
  "https://api.cloudflare.com/client/v4/zones/${ZONE_ID}/purge_cache" 
  -H "Authorization: Bearer ${API_TOKEN}" 
  -H "Content-Type: application/json" 
  --data "{"files":["${IMAGE_URL}"]}")

SUCCESS=$(echo $RESPONSE | python3 -c "import sys,json; print(json.load(sys.stdin)['success'])")

if [ "$SUCCESS" = "True" ]; then
  echo "Cache basariyla temizlendi"
  echo "Polish bir sonraki istekte gorsel isleyecek"
else
  echo "Hata olustu:"
  echo $RESPONSE | python3 -m json.tool
fi

Polish ile İlgili Sık Yapılan Hatalar

SVG ve Animasyonlu GIF Sorunları

Polish, SVG dosyalarını işlemez. Bu zaten vektör tabanlı bir format olduğu için mantıklı. Ancak animasyonlu GIF’ler farklı bir durum. Polish, animasyonlu GIF’lerin animasyon bilgisini bozabilir. Eğer animasyonlu GIF kullanıyorsan ve animasyonun korunması önemliyse, ilgili dizin için Polish’i Page Rule veya Cache Rule ile devre dışı bırakabilirsin.

# Belirli bir dizin için Polish'i devre dışı bırakma
# Cloudflare API ile Cache Rule oluşturma

curl -X POST "https://api.cloudflare.com/client/v4/zones/ZONE_ID/rules/cache_rules" 
     -H "Authorization: Bearer API_TOKEN" 
     -H "Content-Type: application/json" 
     --data '{
       "action": {
         "type": "set_cache_settings",
         "value": {
           "cache": true,
           "polish": "off"
         }
       },
       "expression": "(http.request.uri.path contains "/animations/")",
       "description": "Animasyon dizini Polish devre disi",
       "enabled": true
     }'

Already Cached Görseller

Polish sadece Cloudflare’in işleyebileceği görsellere uygulanır. Eğer bir görsel zaten Cache-Control: no-store veya Cache-Control: private header’ı ile geliyorsa, Polish bu görseli işleyemez. Bu tür headerlar genellikle CDN’lerin görseli cache’e almamasına neden olur. Kaynak sunucundaki header yapılandırmanı kontrol et:

# Kaynak sunucudan gelen header'ları kontrol et
# -H "Cache-Control" headerlarini incele
curl -sI "https://siteadresi.com/images/banner.jpg" | 
  grep -iE "cache-control|cf-cache-status|cf-polished|age"

Eğer cf-cache-status: BYPASS görüyorsan, görsel cache’e alınmıyor ve dolayısıyla Polish da çalışmıyor demektir.

Origin Server EXIF Koruma Ayarları

Bazı kamera yazılımları ve içerik yönetim sistemleri EXIF verilerini korumak için görsel sıkıştırmayı reddeden özel header’lar ekler. Polish bu durumda görseli işlemeyecektir. Gereksiz EXIF verilerini kaynak sunucuda temizlemek hem Polish’in daha iyi çalışmasını sağlar hem de GDPR açısından önemli olabilir (konum verisi gibi hassas bilgiler EXIF’te bulunabilir).

Polish Performans Metrikleri Nasıl Ölçülür?

Polish etkisini somut olarak görmek için birkaç farklı metrik takip edebilirsin.

Cloudflare Analytics ile İzleme

Cloudflare dashboard’un Analytics bölümünde bandwidth tasarrufunu görebilirsin. Polish aktif olduğunda “Bandwidth Saved” metriği seni mutlu edecek.

Google PageSpeed Insights Entegrasyonu

Polish’i etkinleştirdikten sonra Google PageSpeed Insights veya web.dev üzerinden testler yaparak skorların nasıl değiştiğini gözlemle. Özellikle “Serve images in next-gen formats” ve “Efficiently encode images” önerilerinin kaybolduğunu göreceksin.

# PageSpeed API ile performans kontrolü (API key gerektirir)
PAGE_URL="https://siteadresi.com"
API_KEY="PAGESPEED_API_KEY"

curl -s "https://www.googleapis.com/pagespeedonline/v5/runPagespeed?url=${PAGE_URL}&strategy=mobile&key=${API_KEY}" | 
  python3 -c "
import sys, json
data = json.load(sys.stdin)
score = data['lighthouseResult']['categories']['performance']['score']
fcp = data['lighthouseResult']['audits']['first-contentful-paint']['displayValue']
lcp = data['lighthouseResult']['audits']['largest-contentful-paint']['displayValue']
print(f'Performans Skoru: {score * 100}')
print(f'First Contentful Paint: {fcp}')
print(f'Largest Contentful Paint: {lcp}')
"

Polish ve Diğer Cloudflare Özellikleriyle Birlikte Kullanım

Polish tek başına güçlü olsa da diğer Cloudflare özellikleriyle birleşince etkisi katlanır.

Polish + Mirage: Mirage, mobil kullanıcılar için görsel yüklemeyi optimize eder. Düşük bant genişliğine sahip bağlantılarda görsellerin düşük çözünürlüklü versiyonlarını yükler, bağlantı iyileşince tam versiyona geçer. Polish ile birlikte kullanıldığında mobil deneyim dramatik biçimde iyileşir.

Polish + Rocket Loader: Rocket Loader, JavaScript yüklemesini asenkron hale getirir. Polish görselleri optimize ederken Rocket Loader JS’yi optimize eder. İkisi birlikte sayfanın hem görsel hem de script tarafını hızlandırır.

Polish + Argo Smart Routing: Argo, Cloudflare ağındaki en hızlı yolu seçerek kaynak sunucuya bağlanır. Polish optimize edilmiş görseli hazırlarken Argo bu görselin mümkün olan en hızlı yoldan edge’e ulaşmasını sağlar.

Sık Sorulan Sorular

Polish Pro plan gerektiriyor, buna değer mi?

E-ticaret siteleri, medya siteleri veya görsel ağırlıklı herhangi bir site için kesinlikle değer. Hem sunucu yükü azalıyor hem de kullanıcı deneyimi iyileşiyor. Pro plan aylık 25 dolar civarında, bant genişliği tasarrufu ve dönüşüm oranı iyileştirmesiyle bu maliyet kolayca çıkar.

Polish aktif olduğunda orijinal görsellerim değişir mi?

Hayır, kesinlikle değişmez. Tüm işlem Cloudflare edge’inde gerçekleşir. Kaynak sunucundaki görselleriniz tamamen korunur.

Lossy mod görsel kalitesini ne kadar etkiliyor?

Cloudflare’in uyguladığı sıkıştırma seviyesi ortalama kullanıcının fark edemeyeceği bir noktada kalibre edilmiş. Ancak baskıya gidecek veya son derece yüksek kalite gerektiren görseller için Lossless modunu tercih et.

Sonuç

Cloudflare Polish, minimum yapılandırmayla maksimum performans kazanımı sağlayan nadir özelliklerden biri. Dashboard üzerinden iki tıklamayla etkinleştirip onlarca dakikalık görsel optimizasyon çalışmasının etkisini elde edebiliyorsun. Özellikle büyük görsel kütüphaneleri olan siteler için bu özellik hem bant genişliği maliyetlerini hem de sayfa yükleme sürelerini ciddi ölçüde iyileştiriyor.

Pratik önerim şu: Önce test ortamında Lossy modu açıp görselleri gözle kontrol et. Her şey yolundaysa production’a al. WebP dönüşümünü de mutlaka etkinleştir çünkü modern tarayıcıların büyük çoğunluğu WebP destekliyor ve dosya boyutu farkı çok belirgin. Polish’i etkinleştirdikten sonra birkaç gün bekleyip Cloudflare Analytics’ten bandwidth tasarrufuna bak; rakamlar seni şaşırtacak.

Son olarak, Polish’i tek başına düşünme. Mirage, Argo ve diğer Cloudflare performans özellikleriyle birlikte kullandığında elde edeceğin sonuç, ayrı ayrı kullanımın toplamından çok daha fazlası olacak.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir