WordPress sitenizdeki yavaş yüklenen görseller, sayfa hızını düşürerek SEO ve kullanıcı deneyimini olumsuz etkileyebilir. İşte görsellerinizi optimize etmek için adım adım çözümler:
1. Görselleri Doğru Formatta ve Boyutta Kaydedin
Görselleri WebP’ye dönüştürün + sıkıştırın, lazy load ekleyin, CDN entegre edin ve önbellek kuralları oluşturun. Bu adımlar, WordPress sitenizin görsel yüklenme hızını belirgin şekilde artıracaktır.
1. Görselleri Doğru Formatta ve Boyutta Kaydedin
- Format Seçimi:
- JPEG: Yüksek kaliteli fotoğraflar için (düşük sıkıştırma).
- PNG: Şeffaf arka plan veya keskin çizgiler gerektiren görseller (logo, grafik).
- WebP: Hem JPEG hem PNG'den %25-35 daha küçük boyutlu, modern format.
- Boyutlandırma:
- Görseli, WordPress'te görüntüleneceği maksimum genişliğe göre önceden kırpın (örneğin, içerik genişliği 1200px ise 1200px’den büyük yüklemeyin).
- Photoshop, Canva veya bulut tabanlı araçlar (TinyPNG, Squoosh.app) ile sıkıştırma yapın.
- Eklentilerle Otomatik Optimizasyon:
- ShortPixel veya Imagify: Yüklenen görselleri otomatik sıkıştırır ve WebP’ye dönüştürür.
- Smush: Ücretsiz sürümüyle temel optimizasyon yapar (boyut sınırı: 5MB/görsel).
- WebP Desteği:
- Eklentilerle WebP formatında alternatifler oluşturun ve tarayıcı uyumluluğu sağlayın.
- Nedir?: Görseller, kullanıcı sayfada aşağı kaydırdıkça yüklenir.
- Nasıl Yapılır?:
- WordPress 5.5+’da varsayılan olarak etkin.
- Eklentiyle kontrol etmek için WP Rocket veya a3 Lazy Load kullanın.
- Manuel eklemek için <img> etiketine loading="lazy" ekleyin.
- CDN Avantajı: Görseller, kullanıcıya en yakın sunucudan hızlı teslim edilir.
- Popüler CDN’ler:
- Bunny.net (ucuz ve hızlı), Cloudflare, KeyCDN.
- Jetpack Site Accelerator (ücretsiz, görselleri WordPress.com sunucularından servis eder).
- Tarayıcı Önbelleği: .htaccess dosyanıza bu kodu ekleyerek görsellerin tarayıcıda önbelleklenmesini sağlayın:
apache
Copy
Download
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/webp "access 1 year"
</IfModule> - Eklenti Çözümü: WP Rocket gibi eklentiler otomatik yapar.
- SVG Kullanımı: Logo, ikon gibi basit çizimler için SVG formatını tercih edin (boyutları çok küçüktür).
- CSS/Sprite: Küçük ikonlar için CSS efektleri veya sprite sheet kullanın.
- Yer Tutucu (Placeholder): Lazy load ile birlikte düşük çözünürlüklü placeholder görseller ekleyin (örneğin, Low-Quality Image Placeholders - LQIP).
- Test Araçları:
- Google PageSpeed Insights: "Görselleri verimli bir şekilde kodlayın" uyarısını kontrol edin.
- GTmetrix: "Optimize images" raporunu inceleyin.
- WordPress Eklentileri: Query Monitor veya Debug Bar ile yavaş sorguları tespit edin.
- Next-Gen Formatlar: AVIF formatını deneyin (WebP’den daha verimli, ancak tarayıcı desteği sınırlı).
- Adaptif Görseller: srcset özelliği ile farklı ekran boyutlarına uygun görseller sunun (WordPress otomatik ekler).
Görselleri WebP’ye dönüştürün + sıkıştırın, lazy load ekleyin, CDN entegre edin ve önbellek kuralları oluşturun. Bu adımlar, WordPress sitenizin görsel yüklenme hızını belirgin şekilde artıracaktır.