Web sitesi yükleme süresini optimize et: siten şimşek gibi olsun

Her saniye önemli. Web sitenin yüklenmesi çok uzun sürerse, ziyaretçilerinin birçoğunu kaybedersin. Geri tıklarlar, başka bir sonucu seçerler ve bir daha gelmezler. Aynı zamanda yüklenme hızı resmi bir Google sıralama faktörüdür. Yavaş siteler arama sonuçlarında aşağı itilir.

Bu rehberde siteni nasıl hızlandıracağını adım adım gösteriyorum: Görsel optimizasyonu gibi temellerden Critical CSS ve lazy loading gibi ileri tekniklere kadar.

Core Web Vitals: Google'ın ölçtüğü 3 metrik

Google sitenin performansını üç somut metrikle değerlendirir, Core Web Vitals:

1. Largest Contentful Paint (LCP)

Sayfanın görünen en büyük öğesinin ne kadar hızlı yüklendiğini ölçer: genelde bir başlık görseli, bir video ya da büyük bir metin bloğu.

• İyi: 2,5 saniyenin altında
• İyileştirilmeli: 2,5–4,0 saniye
• Kötü: 4,0 saniyenin üzerinde

2. Interaction to Next Paint (INP)

Sayfanın kullanıcı etkileşimlerine ne kadar hızlı tepki verdiğini ölçer: tıklamalar, dokunmalar, klavye girişleri. 2024'ten beri eski First Input Delay (FID) metriğinin yerini alıyor.

• İyi: 200 milisaniyenin altında
• İyileştirilmeli: 200–500 milisaniye
• Kötü: 500 milisaniyenin üzerinde

3. Cumulative Layout Shift (CLS)

Sayfa yüklenirken öğelerin ne kadar kaydığını ölçer. Bilir misin? Bir butona tıklamak istersin, ama birden bir görsel kayar ve başka bir şeye tıklarsın. İşte bu yüksek CLS'dir.

• İyi: 0,1'in altında
• İyileştirilmeli: 0,1–0,25
• Kötü: 0,25'in üzerinde

Görsel optimizasyonu: En büyük kaldıraç

Görseller çoğu sitede veri hacminin en büyük kısmını oluşturur. En büyük optimizasyon potansiyeli burada.

Doğru görsel formatını seç

• WebP: 2026 için en iyi çok yönlü format. Aynı kalitede JPEG'den %30'a kadar daha küçük. Tüm modern tarayıcılar destekler
• AVIF: WebP'den bile daha iyi (%50'ye kadar daha küçük) ve tüm güncel tarayıcılar tarafından destekleniyor. İlk tercih olarak ideal, yedek olarak WebP
• JPEG: WebP/AVIF seçenek değilse fotoğraflar için. %75–85 kalite genelde yeterli
• PNG: yalnızca saydamlık içeren görseller ya da keskin grafikler/ikonlar için. Fotoğraflar için çok büyük
• SVG: logolar, ikonlar ve basit grafikler için. Sonsuz ölçeklenebilir, çok küçük dosya boyutu

Görselleri doğru boyutlandır

En yaygın sorunlardan biri: Bir görsel 4000 piksel genişliğinde, ama sadece 800 piksel genişlikte gösteriliyor. Tarayıcı yine de görselin tamamını indirip sonra ölçeklendirmek zorunda. Çözüm:

• Görselleri gerçek gösterim boyutunda oluştur (Retina ekranlar için en fazla 2 katı)
• Responsive görseller için srcset özelliğini kullan: farklı ekranlar için farklı boyutlar sun
• HTML'de her zaman width ve height belirt: Bu, düzen kaymalarını (CLS) önler

Görsel sıkıştırma

Doğru formatı ve boyutu seçtikten sonra da görselleri daha fazla sıkıştırabilirsin:

• Squoosh (squoosh.app): Google'ın ücretsiz aracı, doğrudan tarayıcıda
• TinyPNG (tinypng.com): PNG ve JPEG dosyalarını minimum kalite kaybıyla sıkıştırır
• ShortPixel: yüklemede otomatik sıkıştırma yapan WordPress eklentisi

Temel kural: Sitendeki hiçbir görsel 200 KB'tan büyük olmamalı. Hero görselleri en fazla 300 KB. Küçük resimler 50 KB'ın altında.

Lazy loading: Sadece görüneni yükle

Lazy loading, görsellerin ve diğer kaynakların ancak kullanıcı onlara kaydırdığında yüklenmesi demektir. Görünür alanın (viewport) dışındaki her şey ihtiyaç olduğunda sonradan yüklenir.

En basit uygulama:

<img src="gorsel.webp" loading="lazy" alt="Açıklama" width="800" height="600">

loading="lazy" özelliği tüm modern tarayıcılar tarafından desteklenir ve JavaScript gerektirmez. Önemli: İlk görünen görsel (hero görseli, logo) lazy yüklenmemeli, aksi halde LCP kötüleşir.

Önbellekleme: Tekrar ziyaretleri hızlandır

Tarayıcı önbelleği statik dosyaları (CSS, JavaScript, görseller, yazı tipleri) ziyaretçinin cihazında yerel olarak saklar. Bir sonraki ziyarette bu dosyaların yeniden indirilmesi gerekmez.

Cache-Control başlıklarını ayarla

Web sunucusu üzerinden (örn. nginx, Apache, Caddy) dosyaların ne kadar süre önbellekte tutulacağını belirleyebilirsin:

• Görseller, yazı tipleri: 1 yıl (nadiren değişirler)
• CSS ve JavaScript: 1 ay ile 1 yıl arası (dosya adında sürüm numarasıyla)
• HTML dosyaları: kısa süre önbelleğe al ya da hiç alma (hep güncel olmalılar)

CDN (Content Delivery Network)

CDN, dosyalarını dünya genelindeki sunuculara dağıtır. Ziyaretçiye en yakın sunucu dosyaları teslim eder, bu da gecikmeyi ciddi ölçüde azaltır. Alman kitleye hitap eden Alman siteleri için Frankfurt ya da Amsterdam'da sunucuları olan bir CDN idealdir.

• Cloudflare: CDN, DDoS koruması ve otomatik optimizasyon içeren ücretsiz temel paket
• Bunny CDN: uygun fiyatlı, güçlü, sunucular Avrupa'da

CSS ve JavaScript'i optimize et

CSS optimizasyonu

• Küçültme (minification): boşlukları, yorumları ve gereksiz karakterleri kaldır. Araçlar: cssnano, clean-css
• Critical CSS: Görünür alan için gereken CSS'i ayıkla ve satır içi yükle. Geri kalanı asenkron olarak sonradan yüklenir
• Kullanılmayan CSS'i kaldır: Birçok site, o sayfada kullanılmayan bol miktarda CSS yükler. Araçlar: PurgeCSS, UnCSS

JavaScript optimizasyonu

• Defer ve async: JavaScript dosyalarını sayfanın çizilmesini engellemeden yükle: <script defer src="..">
• Tree shaking: Bundler'larda (Webpack, Vite) yalnızca gerçekten kullanılan kodu dahil et
• Üçüncü taraf scriptleri azalt: Her harici script (analiz, sohbet widget'ları, sosyal medya butonları) sayfayı yavaşlatır. Her scriptin gerçekten gerekli olup olmadığını kontrol et

Yazı tiplerini optimize et

Web yazı tipleri (Google Fonts, Adobe Fonts) yüklenme süresini ciddi şekilde etkileyebilir. Her yazı tipi ve her kalınlık ek bir dosyadır.

• En fazla 2 yazı tipi ailesi ve 3–4 kalınlık kullan
• font-display: swap ayarla: Sistem yazı tipini hemen gösterir ve web yazı tipi yüklenince değiştirir
• Yazı tiplerini yerelde barındır, Google Fonts'tan yükleme: Bir DNS sorgusu tasarruf edilir ve GDPR'a daha uygundur
• WOFF2 formatını kullan: en kompakt web yazı tipi formatı
• Subsetting: yalnızca ihtiyacın olan karakterleri yükle (Latin harfleri, Kiril vb. değil)

Sunucu performansını iyileştir

Hosting kalitesi

Aynı sunucuda düzinelerce başka siteyle paylaşılan ucuz hosting, sunucu tarafındaki en yaygın performans katilidir. Hızlı bir site için gerekenler:

• Hızlı Time to First Byte (TTFB): ideal olarak 200 ms'nin altında
• SSD depolama: klasik sabit disklerden çok daha hızlı
• Sunucu Almanya'da: Alman ziyaretçiler için en kısa hat
• HTTP/2 ya da HTTP/3: HTTP/1.1'den daha hızlı veri aktarımı

Sıkıştırmayı etkinleştir

Gzip ya da Brotli sıkıştırma HTML, CSS ve JavaScript dosyalarının boyutunu %60–80 küçültür. Brotli daha yeni ve Gzip'ten de verimli. İkisi de sunucuda etkin olmalı.

Hız analizi için en iyi araçlar

• Google PageSpeed Insights (pagespeed.web.dev): Lighthouse tabanlı standart test. 0–100 arası puan ve somut iyileştirme önerileri verir
• GTmetrix (gtmetrix.com): şelale grafiğiyle ayrıntılı rapor. Hangi dosyanın ne kadar sürede yüklendiğini tam olarak gösterir
• WebPageTest (webpagetest.org): profesyonel test. Farklı sunucu konumları, bağlantı hızları ve tarayıcılar seçilebilir
• Chrome DevTools: Network sekmesi yüklenme sürelerini gerçek zamanlı gösterir, Performance sekmesi Core Web Vitals'ı ölçer
• Google Search Console: gerçek kullanıcı verilerine dayanarak tüm sitenin Core Web Vitals değerlerini gösterir

Hızlı kazanım kontrol listesi: Daha hızlı bir site için 10 adım

• Görselleri WebP'ye dönüştür ve sıkıştır
• Viewport'un altındaki tüm görseller için lazy loading'i etkinleştir
• CSS ve JavaScript'i küçült
• JavaScript'i defer ya da async ile yükle
• Tarayıcı önbelleğini yapılandır
• Yazı tiplerini yerelde barındır ve 2 aileyle sınırla
• Sunucuda Gzip/Brotli sıkıştırmayı etkinleştir
• Gereksiz eklentileri ve üçüncü taraf scriptleri kaldır
• Görsel boyutlarını (width/height) HTML'de belirt
• Hosting sağlayıcını kontrol et: TTFB 200 ms'nin altında mı?

Sonuç: Hız bir lüks değil

Hızlı bir site “olsa iyi olur” değil: İyi sıralamaların, memnun ziyaretçilerin ve daha yüksek dönüşüm oranlarının temelidir. Çoğu optimizasyon para gerektirmez, sadece biraz zaman ve bilgi. Görsellerle başla: Çoğu durumda en büyük anlık etkiyi o sağlar.

Web sitenin performansını profesyonelce analiz ettirip optimize ettirmek mi istiyorsun? Sayfanı tüm önemli hız faktörleri açısından kontrol ediyorum ve optimizasyonları senin için uyguluyorum, ölçülebilir ve anlaşılır şekilde.

Stefanos Svarnas, Ludwigsburg'da Knusperholz. Web siteleri yapıyorum ve işletmelerin Google'da bulunmasını sağlıyorum. Bizzat, ajans dolambaçları olmadan.

İlk görüşmeyi ayarlaBenim hakkımda daha fazlası