Puan
18
Çözümler
0
- Katılım
- 3 Kas 2025
- Mesajlar
- 99
- Tepkime puanı
- 0
LiteSpeed Cache ile Görsel Optimizasyonu: WebP, AVIF ve Doğru Ayarlar
WordPress sitenizde sayfalar geç açılıyorsa kontrol etmeniz gereken yerlerden biri görsellerdir. Yüksek çözünürlüklü fotoğraflar, büyük kapak görselleri ve gereksiz dosya boyutları özellikle mobil bağlantılarda yüklemeyi zorlaştırabilir.LiteSpeed Cache’in Image Optimization, yani görsel optimizasyonu özelliği, medya kütüphanesindeki uygun görselleri sıkıştırmanıza ve yeni nesil formatlar oluşturmanıza yardımcı olur. Ancak iyi sonuç almak için yalnızca birkaç seçeneği açmak yeterli değildir. Görselin boyutu, kalitesi, sayfadaki konumu ve ziyaretçiye hangi dosyanın gönderildiği birlikte değerlendirilmelidir.
Bu rehberde kurulumu, otomatik optimizasyonu, ücretsiz kullanım sınırlarını ve performansı etkileyen önemli ayarları ele alacağız.
Görsel Optimizasyonu Neden Önemlidir?
Bir görselin ekranda küçük görünmesi, indirilen dosyanın da küçük olduğu anlamına gelmez. Sayfada dar bir alanda gösterilen fotoğraf, arka planda çok yüksek çözünürlüklü bir dosyadan yükleniyor olabilir.Görsel optimizasyonunda üç hedef bulunur:
- Görseli kullanım alanına uygun boyutlarda hazırlamak.
- Kabul edilebilir kaliteyle dosya boyutunu azaltmak.
- Dosyayı sayfada ihtiyaç duyulduğu zamanda yüklemek.
Bu yüzden “Görselleri sıkıştırdım, bütün hız sorunları çözülür” beklentisi yerine önce ölçüm yapıp darboğazı belirlemek daha sağlıklıdır.
LiteSpeed Cache Görselleri Nasıl Optimize Eder?
LiteSpeed Cache, görsel optimizasyonunda QUIC.cloud’un çevrimiçi hizmetini kullanır. Medya kütüphanesindeki uygun görseller gruplar hâlinde işleme gönderilir; sıkıştırma bulut tarafında yapılır ve hazırlanan dosyalar siteye geri alınır.Hizmet JPG ve PNG dosyalarını optimize edebilir. Yapılandırmaya göre WebP veya AVIF kopyaları da oluşturulabilir.
Ağır sıkıştırma işleminin dışarıda yapılması sunucunuzdaki işlem yükünü azaltır. Yine de dosyaların aktarılması, kaydedilmesi ve zamanlanmış görevlerin çalışması nedeniyle işlemi tamamen kaynaksız kabul etmeyin. Büyük bir medya arşivinde disk alanını ve işlemlerin ilerleyişini takip edin.
Ayrıca görsel optimizasyonu ile sayfa önbelleği farklı özelliklerdir. LiteSpeed Cache’in genel optimizasyon özellikleri Apache ve Nginx gibi sunucularda da kullanılabilir. Sunucu seviyesindeki özel sayfa önbelleği özellikleri ise uyumlu LiteSpeed altyapısı veya QUIC.cloud gerektirir.
Kurulumdan Önce Görselleri Hazırlayın
İlk işlem olarak sitenin dosyalarını ve veritabanını kapsayan bir yedek alın. Ardından medya kütüphanesinin ne kadar alan kapladığını kontrol edin.Başlangıçta bütün arşiv üzerinde çalışmak yerine birkaç farklı görsel seçmek yararlıdır:
- Fotoğraf
- Ürün görseli
- Yazı içeren ekran görüntüsü
- Şeffaf arka planlı grafik
Uygun Çözünürlüğü Seçin
Bir görselin genişliğini belirlerken sayfadaki kullanım alanını ve yüksek piksel yoğunluklu ekranları birlikte düşünün. Örneğin 800 piksel genişliğinde gösterilen bir görselin bazı ekranlarda daha yüksek çözünürlüklü kopyasına ihtiyaç duyulabilir.WordPress, uygun görseller için
srcset ve sizes bilgileri oluşturarak tarayıcının farklı boyutlar arasından seçim yapmasına yardımcı olur. Temanızın bu yapıyı doğru kullanması önemlidir.Gereksiz büyük dosyaları yüklememek iyi bir alışkanlıktır. Ancak bütün görselleri tek bir sabit genişliğe indirmek de doğru değildir.
Dosya Adlarını Anlaşılır Tutun
Yeni dosyalarda kısa, açıklayıcı ve tutarlı isimler kullanabilirsiniz:
Kod:
wordpress-hiz-testi.jpg
hosting-kontrol-paneli.png
urun-detay-fotografi.jpgGoogle, görsel dosya adlarının açıklayıcı olmasını önerir. Alternatif metni de görselin sayfadaki anlamına göre yazın; anahtar kelimeleri tekrar tekrar eklemeyin.
Adım Adım LiteSpeed Cache Görsel Optimizasyonu
Menü adları eklentinin sürümüne ve panel diline göre değişebilir. Aşağıdaki adımlarda İngilizce karşılıkları da kullanabilirsiniz.1. QUIC.cloud Hizmetlerini Etkinleştirin
WordPress panelinde:LiteSpeed Cache → General → Online Services
bölümüne girip Enable QUIC.cloud services düğmesini kullanın.
Yalnızca görsel optimizasyonu için QUIC.cloud CDN kurulumu veya nameserver değişikliği gerekmez. Çevrimiçi optimizasyon hizmetleriyle CDN ayrı hizmetlerdir. Hesap oluşturmak isteğe bağlı olabilir; kullanım ve hata ayrıntılarını takip etmek için hesap bağlantısı yararlıdır.
2. Kullanacağınız Formatı Belirleyin
Optimizasyon başlamadan önce yeni nesil format tercihinizi yapın. İlgili sürümlerde Next-Gen Image Format seçeneğinden WebP veya AVIF belirlenebilir.İlk denemede WebP kullanıp sonucu incelemek makul bir başlangıçtır. AVIF’e geçecekseniz kuyruk ve kota koşullarını da değerlendirin.
3. İlk İsteği Gönderin
LiteSpeed Cache → Image Optimization → Image Optimization Summary bölümünü açın.Send Optimization Request düğmesiyle işlemi başlatın. İlk gönderim küçük bir grupla yapılabilir. Durum ekranından ilerleyişi takip edin; dosyalar hazır olduğunda gerekirse Pull Images düğmesiyle geri alın.
4. Sonucu Gerçek Sayfada Kontrol Edin
Medya kütüphanesinde işlem tamamlanmış görünse bile ziyaretçiye hangi dosyanın gönderildiğini kontrol edin.Şunlara bakın:
- Görsel düzgün açılıyor mu?
- Yazılar ve ince çizgiler okunaklı mı?
- Ürün renkleri kabul edilebilir mi?
- Dosya boyutu gerçekten azalmış mı?
- Mobil görünümde uygun boyut kullanılıyor mu?
WebP mi AVIF mi Seçilmeli?
Her görsel için en iyi sonucu veren tek bir format yoktur.| Format | Öne çıkan kullanım |
|---|---|
| JPEG | Fotoğraflar ve geniş uyumluluk |
| PNG | Kayıpsız görüntü ve şeffaflık gereken içerikler |
| WebP | Fotoğraf ve grafiklerde kayıplı veya kayıpsız sıkıştırma |
| AVIF | Özellikle fotoğraflarda yüksek sıkıştırma verimliliği |
WebP ve AVIF güncel büyük tarayıcılarda desteklenir. Bununla birlikte eski istemciler için uygun alternatif sunumunu kontrol etmek gerekir.
“WebP kesin yüzde 30, AVIF kesin yüzde 50 küçültür” gibi sabit beklentiler oluşturmayın. Sonuç; görselin içeriğine, önceki sıkıştırmasına, çözünürlüğüne ve kalite ayarına göre değişir.
Bir ekran görüntüsünde yazıların net kalması, birkaç kilobayt daha kazanmak için bulanıklaştırılmasından daha değerli olabilir.
Kayıplı ve Kayıpsız Sıkıştırma Arasındaki Fark
Kayıplı sıkıştırma, dosya boyutunu azaltmak için görüntü bilgisinin bir bölümünden vazgeçer. Ayara göre kalite farkı hafif veya belirgin olabilir.Kayıpsız sıkıştırma, görüntü bilgisini korumayı hedefler; ancak dosya boyutu kayıplı yönteme göre daha yüksek kalabilir.
Fotoğraflarda kontrollü kayıplı sıkıştırmayı deneyebilirsiniz. Ekran görüntüsü, küçük yazılar, teknik çizimler ve hassas ürün detaylarında sonucu daha dikkatli karşılaştırın.
Kararı yalnızca optimizasyon ekranındaki tasarruf oranıyla vermeyin. Görseli sitede kullanılacağı boyutta inceleyin.
Otomatik Optimizasyon Nasıl Açılır?
Auto Request Cron etkinleştirildiğinde yeni medya yüklemeleri için istekler otomatik gönderilebilir.Önemli bir sürüm farkı vardır: LiteSpeed Cache 7 ile Auto Pull Cron ayrı bir ayar olmaktan çıkarılmıştır. Geri çekme işlemi varsayılan olarak etkindir. Bu nedenle eski rehberlerdeki düğmeyi panelinizde bulamamanız normal olabilir.
Otomasyonun çalışması zamanlanmış görevlerin düzgün yürütülmesine bağlıdır. WordPress’in WP-Cron sistemi normalde sayfa yüklemeleriyle tetiklenir; gerçek sistem cron’u ile aynı çalışma modeline sahip değildir. Düşük trafikte veya cron yapılandırması değiştirildiğinde görevler gecikebilir.
Yeni yüklediğiniz birkaç görsel üzerinden otomasyonun işlediğini doğrulayın.
Ücretsiz Kuyruk ve AVIF Kotası Nasıl Çalışır?
QUIC.cloud’da görsel optimizasyonu için iki kuyruk bulunur:- Standard Queue: Ücretsiz standart işlem kuyruğu.
- Advanced Queue: Aylık ücretsiz kota ve ek kullanım seçenekleri bulunan gelişmiş kuyruk.
Ücretsiz kota miktarı hizmet seviyesine göre değişebilir. Görsel optimizasyonu, LQIP ve diğer çevrimiçi hizmetlerin kullanım koşullarını aynı kabul etmeyin; panelde her hizmetin kotasını ayrıca kontrol edin.
Lazy Load ve LQIP Nasıl Kullanılmalı?
Lazy load, ekranın aşağısındaki görsellerin yüklenmesini ihtiyaç duyulana kadar ertelemeye yardımcı olur. Ancak ilk ekranda görünen ana görsele uygulandığında yüklemeyi geciktirebilir.Özellikle LCP görselini lazy load dışında tutun.
LQIP ise tam görsel yüklenmeden önce düşük kaliteli bir önizleme gösterir. Görsel algısını iyileştirebilir; tek başına bütün düzen kaymalarını çözmez.
CLS açısından asıl nokta, görsel yüklenmeden önce doğru alanın ayrılmasıdır. Genişlik, yükseklik veya uygun en boy oranı tanımlamak bu yüzden önemlidir.
LiteSpeed Cache’te Responsive Placeholder ve LQIP seçenekleri bu süreci destekler. LQIP kalitesini artırmak önizleme dosyasını büyütebilir. Arka planda üretim seçeneği, ilk ziyaretçinin üretim işlemini beklemesini önlemeye yardımcı olur.
Başlangıç İçin Nasıl Bir Yapılandırma Kullanılabilir?
Aşağıdaki tablo, ilk deneme için bir yaklaşım sunar:| Seçenek | Başlangıç yaklaşımı |
|---|---|
| Auto Request Cron | İşlem doğrulandıktan sonra etkinleştirin |
| Yeni nesil format | WebP ile başlayıp karşılaştırın |
| Remove Original Backups | İlk aşamada kapalı tutun |
| Lazy Load | Alt bölümdeki görsellerde değerlendirin |
| Ana kapak görseli | Lazy load dışında tutun |
| LQIP | İhtiyaca göre deneyin |
| Sıkıştırma kalitesi | Farklı görsel türlerinde kontrol edin |
Orijinal JPG ve PNG optimizasyonunda yedek dosyalar tutulabilir; örneğin
gorsel.bk.jpg. Yedekler duruyorsa Use Original Files ile geri dönüş yapılabilir. Orijinal yedeklerini silmek bu geri dönüş imkânını kaldırır; bunları bağımsız site yedeğinin yerine koymayın.Sık Karşılaşılan Sorunlar ve Çözümleri
İstekler ilerlemiyor: QUIC.cloud bağlantısını, görsel adreslerini, güvenlik duvarını ve REST API erişimini kontrol edin.WebP veya AVIF görünmüyor: Format seçimi optimizasyon sonrasında yapılmış olabilir. Ayrıca yeni dosya daha küçük değilse oluşturulan kopya kullanılmayabilir.
Dosya oluşmuş ama sayfada eski format açılıyor: Görselin HTML içindeki sunumunu inceleyin. CSS arka planı veya JavaScript ile yüklenen içerik, standart görsel değiştirme işleminden farklı davranabilir.
Kalite beklenenden düşük: Aynı görseli birden fazla optimizasyon eklentisinin işlemediğini kontrol edin. Gerekiyorsa orijinale dönüp daha uygun ayarla yeniden deneyin.
