Kayıt ol

Tovala Akıllı Fırın Deneyimi: Paket Servisten Daha İyi mi?FortiMail'de Kritik Zero-Day Açığı Aktif Saldırılarda Kullanılıyor Meadow: Sosyal Medyasız Minimalist Telefon Deneyimi California'da Gizli Kayıt Yapan Akıllı Gözlük Yasasına Veto Hello Robot Stretch 4, TechCrunch Disrupt 2026'da Canlı Tanıtılacak

JavaScript devre dışı. Daha iyi bir deneyim için, önce lütfen tarayıcınızda JavaScript'i etkinleştirin.

LiteSpeed Cache ile Görsel Optimizasyonu: WebP, AVIF ve Doğru Ayarlar

Mesaj: <blockquote data-quote="Admin" data-source="post: 12827" data-attributes="member: 1"><p><h2>LiteSpeed Cache ile Görsel Optimizasyonu: WebP, AVIF ve Doğru Ayarlar</h2><p>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.</p><p>LiteSpeed Cache’in <strong>Image Optimization</strong>, 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.</p><p>Bu rehberde kurulumu, otomatik optimizasyonu, ücretsiz kullanım sınırlarını ve performansı etkileyen önemli ayarları ele alacağız.</p><h2>Görsel Optimizasyonu Neden Önemlidir?</h2><p>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.</p><p>Görsel optimizasyonunda üç hedef bulunur:</p><ul> <li data-xf-list-type="ul">Görseli kullanım alanına uygun boyutlarda hazırlamak.</li> <li data-xf-list-type="ul">Kabul edilebilir kaliteyle dosya boyutunu azaltmak.</li> <li data-xf-list-type="ul">Dosyayı sayfada ihtiyaç duyulduğu zamanda yüklemek.</li> </ul><p>Özellikle sayfanın üst kısmındaki büyük bir görsel, LCP öğesi olabilir. Bu görselin daha hızlı indirilmesi yüklemeye katkı sağlar; ancak LCP yalnızca dosya boyutuna bağlı değildir. Sunucu yanıtı, görselin ne zaman keşfedildiği ve ekrana çizilmesini geciktiren işlemler de sonucu etkiler.</p><p>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.</p><h2>LiteSpeed Cache Görselleri Nasıl Optimize Eder?</h2><p>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.</p><p>Hizmet JPG ve PNG dosyalarını optimize edebilir. Yapılandırmaya göre WebP veya AVIF kopyaları da oluşturulabilir.</p><p>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.</p><p>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.</p><h2>Kurulumdan Önce Görselleri Hazırlayın</h2><p>İ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.</p><p>Başlangıçta bütün arşiv üzerinde çalışmak yerine birkaç farklı görsel seçmek yararlıdır:</p><ul> <li data-xf-list-type="ul">Fotoğraf</li> <li data-xf-list-type="ul">Ürün görseli</li> <li data-xf-list-type="ul">Yazı içeren ekran görüntüsü</li> <li data-xf-list-type="ul">Şeffaf arka planlı grafik</li> </ul><p>Bu örnekler, sıkıştırmanın farklı içeriklerdeki etkisini görmenizi sağlar.</p><h3>Uygun Çözünürlüğü Seçin</h3><p>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.</p><p>WordPress, uygun görseller için <code class="bbCodeInline">srcset</code> ve <code class="bbCodeInline">sizes</code> 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.</p><p>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.</p><h3>Dosya Adlarını Anlaşılır Tutun</h3><p>Yeni dosyalarda kısa, açıklayıcı ve tutarlı isimler kullanabilirsiniz:</p><p>[CODE]wordpress-hiz-testi.jpg</p><p>hosting-kontrol-paneli.png</p><p>urun-detay-fotografi.jpg[/CODE]</p><p>Türkçe karakter kullanılmasını otomatik bir indeksleme hatası gibi değerlendirmeyin. Latin karakterler ve tire kullanmak, farklı araçlar arasında dosya yönetimini kolaylaştıran pratik bir tercihtir.</p><p>Google, 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.</p><h2>Adım Adım LiteSpeed Cache Görsel Optimizasyonu</h2><p>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.</p><h3>1. QUIC.cloud Hizmetlerini Etkinleştirin</h3><p>WordPress panelinde:</p><p><strong>LiteSpeed Cache → General → Online Services</strong></p><p>bölümüne girip <strong>Enable QUIC.cloud services</strong> düğmesini kullanın.</p><p>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.</p><h3>2. Kullanacağınız Formatı Belirleyin</h3><p>Optimizasyon başlamadan önce yeni nesil format tercihinizi yapın. İlgili sürümlerde <strong>Next-Gen Image Format</strong> seçeneğinden WebP veya AVIF belirlenebilir.</p><p>İ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.</p><h3>3. İlk İsteği Gönderin</h3><p><strong>LiteSpeed Cache → Image Optimization → Image Optimization Summary</strong> bölümünü açın.</p><p><strong>Send Optimization Request</strong> 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 <strong>Pull Images</strong> düğmesiyle geri alın.</p><h3>4. Sonucu Gerçek Sayfada Kontrol Edin</h3><p>Medya kütüphanesinde işlem tamamlanmış görünse bile ziyaretçiye hangi dosyanın gönderildiğini kontrol edin.</p><p>Şunlara bakın:</p><ul> <li data-xf-list-type="ul">Görsel düzgün açılıyor mu?</li> <li data-xf-list-type="ul">Yazılar ve ince çizgiler okunaklı mı?</li> <li data-xf-list-type="ul">Ürün renkleri kabul edilebilir mi?</li> <li data-xf-list-type="ul">Dosya boyutu gerçekten azalmış mı?</li> <li data-xf-list-type="ul">Mobil görünümde uygun boyut kullanılıyor mu?</li> </ul><p>Yeni formatın oluşturulması ile sayfada kullanılmasını ayrı ayrı doğrulayın.</p><h2>WebP mi AVIF mi Seçilmeli?</h2><p>Her görsel için en iyi sonucu veren tek bir format yoktur.</p><table style='width: 100%'><tr><th>Format</th><th>Öne çıkan kullanım</th></tr><tr><td>JPEG</td><td>Fotoğraflar ve geniş uyumluluk</td></tr><tr><td>PNG</td><td>Kayıpsız görüntü ve şeffaflık gereken içerikler</td></tr><tr><td>WebP</td><td>Fotoğraf ve grafiklerde kayıplı veya kayıpsız sıkıştırma</td></tr><tr><td>AVIF</td><td>Özellikle fotoğraflarda yüksek sıkıştırma verimliliği</td></tr></table><p></p><p>WebP ve AVIF güncel büyük tarayıcılarda desteklenir. Bununla birlikte eski istemciler için uygun alternatif sunumunu kontrol etmek gerekir.</p><p>“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.</p><p>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.</p><h2>Kayıplı ve Kayıpsız Sıkıştırma Arasındaki Fark</h2><p><strong>Kayıplı sıkıştırma</strong>, 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.</p><p><strong>Kayıpsız sıkıştırma</strong>, görüntü bilgisini korumayı hedefler; ancak dosya boyutu kayıplı yönteme göre daha yüksek kalabilir.</p><p>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.</p><p>Kararı yalnızca optimizasyon ekranındaki tasarruf oranıyla vermeyin. Görseli sitede kullanılacağı boyutta inceleyin.</p><h2>Otomatik Optimizasyon Nasıl Açılır?</h2><p><strong>Auto Request Cron</strong> etkinleştirildiğinde yeni medya yüklemeleri için istekler otomatik gönderilebilir.</p><p>Önemli bir sürüm farkı vardır: <strong>LiteSpeed Cache 7 ile Auto Pull Cron ayrı bir ayar olmaktan çıkarılmıştır.</strong> Geri çekme işlemi varsayılan olarak etkindir. Bu nedenle eski rehberlerdeki düğmeyi panelinizde bulamamanız normal olabilir.</p><p>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.</p><p>Yeni yüklediğiniz birkaç görsel üzerinden otomasyonun işlediğini doğrulayın.</p><h2>Ücretsiz Kuyruk ve AVIF Kotası Nasıl Çalışır?</h2><p>QUIC.cloud’da görsel optimizasyonu için iki kuyruk bulunur:</p><ul> <li data-xf-list-type="ul"><strong>Standard Queue:</strong> Ücretsiz standart işlem kuyruğu.</li> <li data-xf-list-type="ul"><strong>Advanced Queue:</strong> Aylık ücretsiz kota ve ek kullanım seçenekleri bulunan gelişmiş kuyruk.</li> </ul><p>WebP standart kuyrukta üretilebilir. AVIF işlemleri ise Advanced Queue üzerinden yürütülür. AVIF kotası bittiğinde bu istekler yeni kota veya ek kullanım hakkı bekleyebilir.</p><p>Ü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.</p><h2>Lazy Load ve LQIP Nasıl Kullanılmalı?</h2><p>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.</p><p>Özellikle LCP görselini lazy load dışında tutun.</p><p>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.</p><p>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.</p><p>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.</p><h2>Başlangıç İçin Nasıl Bir Yapılandırma Kullanılabilir?</h2><p>Aşağıdaki tablo, ilk deneme için bir yaklaşım sunar:</p><table style='width: 100%'><tr><th>Seçenek</th><th>Başlangıç yaklaşımı</th></tr><tr><td>Auto Request Cron</td><td>İşlem doğrulandıktan sonra etkinleştirin</td></tr><tr><td>Yeni nesil format</td><td>WebP ile başlayıp karşılaştırın</td></tr><tr><td>Remove Original Backups</td><td>İlk aşamada kapalı tutun</td></tr><tr><td>Lazy Load</td><td>Alt bölümdeki görsellerde değerlendirin</td></tr><tr><td>Ana kapak görseli</td><td>Lazy load dışında tutun</td></tr><tr><td>LQIP</td><td>İhtiyaca göre deneyin</td></tr><tr><td>Sıkıştırma kalitesi</td><td>Farklı görsel türlerinde kontrol edin</td></tr></table><p></p><p>Orijinal JPG ve PNG optimizasyonunda yedek dosyalar tutulabilir; örneğin <code class="bbCodeInline">gorsel.bk.jpg</code>. Yedekler duruyorsa <strong>Use Original Files</strong> 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.</p><h2>Sık Karşılaşılan Sorunlar ve Çözümleri</h2><p><strong>İstekler ilerlemiyor:</strong> QUIC.cloud bağlantısını, görsel adreslerini, güvenlik duvarını ve REST API erişimini kontrol edin.</p><p><strong>WebP veya AVIF görünmüyor:</strong> Format seçimi optimizasyon sonrasında yapılmış olabilir. Ayrıca yeni dosya daha küçük değilse oluşturulan kopya kullanılmayabilir.</p><p><strong>Dosya oluşmuş ama sayfada eski format açılıyor:</strong> 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.</p><p><strong>Kalite beklenenden düşük:</strong> Aynı görseli birden fazla optimizasyon eklentisinin işlemediğini kontrol edin. Gerekiyorsa orijinale dönüp daha uygun ayarla yeniden deneyin.</p><h2></h2><h2>Sıkça Sorulan Sorular</h2><h3>Görsel optimizasyonu için LiteSpeed sunucu zorunlu mu?</h3><p>Hayır. Görsel optimizasyonuyla sunucu seviyesindeki sayfa önbelleğini ayırmak gerekir. QUIC.cloud bağlantısıyla görsel optimizasyonu farklı web sunucularında kullanılabilir.</p><h3>Her görseli tek tek göndermem gerekir mi?</h3><p>Hayır. Toplu istek ve otomatik gönderim kullanılabilir. İlk kurulumda birkaç örnek üzerinden sonucu doğrulamak yararlıdır.</p><h3>Bütün görsellerde aynı küçülme oranını alır mıyım?</h3><p>Hayır. Bazı dosyalarda belirgin tasarruf sağlanırken önceden iyi sıkıştırılmış dosyalarda kazanım sınırlı kalabilir.</p><h3>PageSpeed puanım mutlaka yükselir mi?</h3><p>Görseller darboğaz oluşturuyorsa iyileşme görülebilir. Sonuç; sunucu yanıtına, sayfa yapısına ve diğer kaynaklara da bağlıdır.</p><h3>İşlemin başarılı olduğunu nasıl anlarım?</h3><p>Aynı sayfayı benzer test koşullarında karşılaştırın. İndirilen görsel boyutunu, kullanılan formatı, görüntü kalitesini ve yükleme süresini birlikte değerlendirin.</p></blockquote><p></p>