Avada 7.15 Güncellemesi Sonrası Resimlerin Görünmeme (SVG) Hatası ve Kesin Çözümü
Web sitelerimizi güncel tutmak, güvenlik ve performans için olmazsa olmazlardan biridir. Ancak WordPress ekosisteminde yıllardır edindiğim tecrübeler bana şunu çok iyi öğretti: Bazen büyük güncellemeler, yanında küçük ama can sıkıcı sürprizler getirebilir.
Geçtiğimiz günlerde yönettiğim web sitelerinde Avada temasını 7.15 sürümüne güncellediğimde tam da böyle bir sorunla karşılaştım. Sitedeki bazı resimler ekranda yüklenmiyor, adeta gizleniyordu. Tarayıcıdan “Öğeyi İncele” diyerek kod yapısına (DOM) baktığımda, asıl görsel dosyalarımın yerini data:image/svg+xml şeklinde uzun bir SVG kodunun aldığını gördüm.
Eğer siz de benim gibi Avada kullanıcısıysanız ve “Eyvah, resim dosyalarım SVG’ye mi dönüştü veya bozuldu mu?” diye paniğe kapıldıysanız, derin bir nefes alın. Görselleriniz sapasağlam yerinde duruyor. Sadece ufak bir çakışma yaşıyorsunuz. Bu makalede, tuncersen.com.tr okurları için bu sorunun neden kaynaklandığını ve nasıl adım adım çözüleceğini anlatacağım.
Sorunun Asıl Nedeni: Resimler Neden SVG Olarak Görünüyor?
Öncelikle rahat bir nefes alalım; resimlerinizin formatı değişmedi. Gördüğünüz o data:image/svg+xml kodu, sayfa yüklenirken tasarımın kaymaması ve düzenin bozulmaması için tarayıcıya sunulan geçici ve şeffaf bir yer tutucudur (placeholder).
Peki asıl resim neden bu yer tutucunun yerine gelmiyor? Cevap basit: Tembel Yükleme (Lazy Load) Çakışması.
Avada 7.15 sürümüyle birlikte DOM yapısında ve performans kurgularında önemli yenilikler yapıldı. Eğer sitenizde LiteSpeed Cache, WP Rocket veya Smush gibi harici bir optimizasyon eklentisi kullanıyorsanız, Avada’nın kendi “tembel yükleme” sistemi ile eklentinizin sistemi aynı anda devreye girmeye çalışıyor. JavaScript bu çift komut karşısında kilitleniyor ve SVG yer tutucusunu asıl .jpg veya .png görselinizle değiştiremeden işlemi yarıda bırakıyor.
Avada Resim Görünmeme (SVG) Sorunu Nasıl Çözülür?
Bu sorunu aşmak için kodlarla boğuşmanıza gerek yok. Aşağıdaki 3 adımı sırasıyla uygulayarak görsellerinizi saniyeler içinde geri getirebilirsiniz.
1. Çifte Lazy Load Çakışmasını Engelleyin
Aynı sitede iki farklı “tembel yükleme” kuralı çalışamaz. Ya Avada’nın ya da kullandığınız performans eklentisinin bu görevini kapatmalısınız.
- WordPress admin panelinden Avada > Options > Performance sekmesine gidin.
- Sayfayı aşağı kaydırarak Image Lazy Loading ayarını bulun ve None (Hiçbiri) olarak işaretleyip kaydedin.
- Böylece görsel yükleme yönetimini sadece kullandığınız optimizasyon eklentisine bırakmış olursunuz.
2. Önbellekleri (Cache) Derinlemesine Temizleyin
Avada 7.15 güncellemesi sonrası eski JavaScript dosyalarınız tarayıcıda veya sunucunuzda asılı kalmış olabilir. Eski JS dosyaları, yeni HTML yapısındaki SVG yer tutucularını doğru okuyamadığı için görselleriniz gelmez.
- Tekrar Avada > Options > Performance sekmesine gelin ve en alttaki “Reset Fusion Caches” butonuna tıklayın.
- Ardından kullandığınız cache eklentinizin (LiteSpeed, WP Rocket vb.) önbelleğini tamamen temizleyin (Purge All).
- Eğer sunucu tarafında Memcached veya Redis kullanıyorsanız, onları da sıfırlamayı unutmayın.
3. Kritik Görselleri (Above-the-Fold) Hariç Tutun
Sayfanız ilk açıldığında hemen ekranda belirmesi gereken görseller (örneğin en üstteki slider, logo veya hero image) tembel yüklemeye sokulmamalıdır. Ekranda hemen görünmesi gereken bir görsele fetchpriority="high" (bunu hemen yükle) komutu verip, aynı zamanda “tembel yükle” derseniz sistem yine çakışır.
- Avada Builder (veya Live Editor) üzerinden, sayfa açılışında direkt görünen görsellerin eleman ayarlarına girin.
- Ayarlar içindeki “Skip Lazy Loading” (Tembel Yüklemeyi Atla) seçeneğini aktif hale getirin.
Sonuç
Yıllar boyunca hem kurumsal projelerde hem de kişisel çalışmalarımda karşılaştığım bu tarz teknik krizler, aslında sistemlerin nasıl çalıştığını anlamamız için en güzel fırsatlardır. Bilgi paylaştıkça çoğalır. Avada 7.15 sonrası yaşadığınız bu can sıkıcı problemi yukarıdaki adımlarla çözebildiyseniz veya farklı bir cache eklentisinde takıldığınız bir yer olursa, aşağıya yorum bırakabilirsiniz.
Sorunsuz ve hızlı web siteleri dilerim!
