Websitenizin performansı konusunda değerlendirdiğimiz Pagespeed analizinde en sık karşılaşılan hataların başında görsel kaynaklı hatalar gelir. Bunlar sıkıştırma, görsel ölçüsü, dosya uzantısı gibi konulardır. Bunun dışında en çok gelen Pagespeed hatalarının başında Ekran Dışındaki Resimleri Ertele hatası gelmekte. Bu hatanın çözümü ile sadece bir Pagespeed hatasından kurtulmakla kalmaz ayrıca sitenizin daha hızlı yüklenmesini ve performansının artmasını sağlarsınız. Peki Ekran Dışındaki Resimleri Ertele hatası nasıl ortadan kalkar?
Ekran Dışındaki Resimleri Ertele Hatası Nedir?
Bir internet sitesi yüklendiğinde; ilgili kod dosyasındaki tüm dosyalar da yüklenmeye başlar. .js , .css gibi kod dosyalarının yanı sıra görsel materyalleriniz de sayfa açılışında yüklenir. Fakat bir internet sitesinin ilk açılışındaki ekran dışında aşağıda kalan görsellerin direkt yüklenmesi, kullanıcı için zaruri değildir. Ekran Dışındaki Resimleri Ertele hatasının sebebi, sitenin ilk açılış ekranı dışında kalan görsellerin ilk açılışta yüklenmesidir.
Örneğin; ilk açılış ekranındaki görseller toplamda 4MB boyuttayken; sayfanın geri kalan kısmındaki dosyalar 20MB ise; optimizasyon yapılmadığında kullanıcı ilk açılışta 24MB yüklemek mecburiyetindedir. Bu da sayfa açılış süresini ciddi oranda olumsuz etkilemektedir. Ekran Dışındaki Resimleri Ertele hatası da bu sorun temelli olarak karşınıza çıkacaktır.
Ekran Dışındaki Resimleri Ertele Hatasının Çözümü
Pagespeed Ekran Dışındaki Resimleri Ertele Hatasının Çözümü ise hem WordPress hem de özel yazılımlarda oldukça basittir. Genel bir kodlama yapısı olan “Lazy-Load” ı görsellerinizde aktif etmeniz dahilinde bu hata ortadan kalkacak, ziyaretçileriniz de çok hızlı bir şekilde görselleri yükleyebilecekler. Peki lazy-load nasıl aktif edilir?
WordPress Ekran Dışındaki Resimleri Ertele Hatasının Çözümü
Eğer Litespeed Cache gibi cache eklentileri kullanıyorsanız, bu eklentilerin alt özelliklerinde kesinlikle “Lazy-Load” özelliği bulunmaktadır. İlgili özelliği aktif etmeniz dahilinde tüm sitenizde Lazy Load aktif olacak ve problem ortadan kalkacaktır. Fakat herhangi bir Cache eklentisi kullanmıyorsanız ve kullanmak istemiyorsanız; Smush – Optimize, Compress and Lazy Load Images eklentisini kullanabilirsiniz.
Smush WordPress Eklentisi ile hem resimlerinize lazy load özelliği ekleyebilir hem de compress gibi özellikleri ile resimlerinizi optimize edebilirsiniz. İlgili eklentiyi ücretsiz olarak Yönetim Paneli -> Eklentiler -> Yeni Ekle alanından sitenize ekleyebilir ve direkt kullanmaya başlayabilirsiniz.
Diğer Yazılımlar için Ekran Dışındaki Resimleri Ertele Hatasının Çözümü
WordPress, Shopify gibi sistemlerde hazır olarak eklentilerin olması nedeniyle çok basit bir şekilde lazy load aktif edebilir ve ekran dışındaki resimleri ertele hatasını ortadan kaldırabilirsiniz. Fakat özel bir yazılım kullanıyorsanız burada kodsal müdahalede bulunmanız gerekecektir.
<img src="test.png" loading="lazy">Yukarıdaki kod örneğindeki gibi —> loading=”lazy” <— şeklinde görsellerinize kod eklemesi yaparak ilgili görselin geç yüklenmesini sağlayabilirsiniz. Bu işlemi yaparken özellikle ilk açılış ekranındaki görsellere bu işlemi yapmamanızı öneririm. Javascript ve CSS kaynaklı çakışmalar ve hatalar oluşabilir ve ilk açılışta bozuk bir görüntü ile karşılaşabilirsiniz.