PageSpeed Insights’ta karşımıza çıkan “Ekran dışındaki resimleri ertele” uyarısı, sayfa yüklenme hızını iyileştirmeye yönelik önemli bir optimizasyon önerisidir. Bu işlem, ziyaretçinin ekranında görünmeyen (sayfanın alt kısımlarında yer alan) görsellerin hemen yüklenmek yerine, kullanıcı o bölgeye geldiğinde yüklenmesini sağlar. Böylece tarayıcı, ilk etapta yalnızca gerekli içerikleri indirir, bu da hem LCP (Largest Contentful Paint) hem de FCP (First Contentful Paint) metriklerinin iyileşmesine katkıda bulunur.
Ekran Dışındaki Resimleri Erteleme Mantığı
Bir web sayfası yüklenirken tarayıcı, varsayılan olarak tüm görselleri anında yüklemeye çalışır. Bu durum, özellikle sayfanın alt kısımlarında bulunan ve kullanıcının ilk etapta görmeyeceği görseller için gereksiz bir kaynak tüketimine yol açar. Ekran dışındaki resimleri erteleme yöntemi, bu gereksiz yüklemeyi önleyerek yalnızca kullanıcı ekranında görünen görsellerin hemen yüklenmesini sağlar. Kullanıcı sayfayı aşağı kaydırdığında, görünür hale gelen görseller anlık olarak yüklenir. Bu teknik, genellikle lazy-load adı verilen yöntemle uygulanır ve sayfanın ilk yükleme süresini ciddi şekilde hızlandırır.
Hangi Durumlarda Lazy-Load Kullanılmamalıdır?
Lazy-load, sayfa yükleme süresini hızlandırsa da her görselde kullanılmamalıdır. Özellikle LCP (Largest Contentful Paint) metriğine dahil olan görsellerin lazy-load ile ertelenmesi, performansı iyileştirmek yerine düşürebilir. Çünkü bu görseller, sayfanın en büyük ve en önemli görsel içerikleridir; kullanıcı bu görselleri ne kadar hızlı görürse deneyimi o kadar iyi olur.
Ayrıca sayfanın ilk ekranda görünen bölümünde (above the fold) yer alan logolar, banner görselleri veya hero görseller gibi kritik ögeler de lazy-load’a dahil edilmemelidir. Bu görsellerin yüklenmesi geciktiğinde, sayfa eksik veya bozuk görünebilir. Bu nedenle lazy-load ayarları yapılırken bu tür görsellerin hariç tutulması gerekir.
WordPress’te Ekran Dışındaki Resimleri Erteleme (LiteSpeed Cache)
WordPress web sitelerinde ekran dışındaki resimleri erteleme işlemi, LiteSpeed Cache eklentisi ile kolayca yapılabilir. Bu ayar, lazy-load teknolojisini aktif ederek yalnızca ekranın görünen kısmındaki görsellerin anında yüklenmesini sağlar.
- LiteSpeed Cache paneline giriş yapın.
- Sayfa Optimizasyonu > Ortam Ayarları bölümüne gidin.
- “Görselleri Geç Yükle” seçeneğini Açık konuma getirin.
Bu ayar ile sayfa yüklenirken yalnızca gerekli görseller yüklenecek, geri kalanlar ise kullanıcı sayfayı aşağı kaydırdığında yüklenmeye başlayacaktır.
LCP görsellerini hariç tutmak için:
- Sayfa Optimizasyonu > Hariç Tutulan Medya sekmesine gidin.
- “Geç yüklemeden hariç tutulan görseller” alanına, lazy-load uygulanmamasını istediğiniz görsellerin URL’lerini her satıra bir tane olacak şekilde ekleyin.
- Kaydedip değişiklikleri uygulayın.
Bu sayede kritik görseller ertelenmeden yüklenir, sayfa bütünlüğü korunurken performans artışı sağlanır.
Shopify’da Ekran Dışındaki Resimleri Erteleme (Avada SEO Suite)
Shopify sitelerinde ekran dışındaki resimleri ertelemek için Avada SEO Suite uygulaması kullanılabilir. Bu uygulama, lazy-load özelliğini aktif ederek yalnızca kullanıcının o anda gördüğü görsellerin yüklenmesini sağlar ve sayfa hızını artırır.
- Shopify yönetim panelinizde Avada SEO Suite uygulamasını açın.
- Speed Up > Settings > Lazy Loading Images yolunu izleyin.
- Lazy Loading Images seçeneğini On konumuna getirin.
LCP görsellerini hariç tutmak için:
- Aynı ayarlar sayfasındaki Ignore Files alanına gidin.
- Lazy-load uygulanmamasını istediğiniz görsellerin URL’lerini ekleyin (her satıra bir URL).
Bu sayede sayfanın üst kısmındaki kritik görseller anında yüklenirken, diğer görseller kullanıcı sayfayı kaydırdığında yüklenir. Böylece hem LCP hem de FCP metrikleri iyileşir.
Kritik CSS ile Lazy-Load Optimizasyonunu Destekleme
Lazy-load, görsellerin yüklenme zamanını optimize ederken, kritik CSS ise sayfanın üst kısmının (above the fold) mümkün olan en hızlı şekilde görüntülenmesini sağlar. Kritik CSS, HTML dosyasının bölümüne eklenen ve yalnızca ilk ekranda görünen alanın stilini tanımlayan CSS kodlarıdır. Bu sayede tarayıcı, tüm CSS dosyalarını indirmeyi beklemeden sayfanın üst kısmını anında işler.
Bu yöntem, lazy-load ile birlikte kullanıldığında kullanıcıya çok daha hızlı bir ilk etkileşim deneyimi sunar. Ancak kritik CSS uygulaması yanlış yapılırsa sitenin görünümünde bozulmalar olabilir. Örneğin, Shopify web sitemde Avada SEO Suite ile kritik CSS oluşturduğumda bazı tasarım bozulmalarıyla karşılaştım. Bu nedenle bu adımı uygulayacaksanız işlemden sonra mutlaka sitenizi farklı cihaz ve tarayıcılarda kontrol edin. Ayrıca kritik CSS oluşturmadan önce sitenizin yedeğini almak olası sorunlara karşı güvenli bir adım olacaktır.
Shopify’da Kritik CSS Oluşturma (Avada SEO Suite):
- Shopify panelinizden Avada SEO Suite uygulamasını açın.
- Speed Up > Settings > Style Optimization yolunu izleyin.
- Critical CSS Generator seçeneğini On konumuna getirin.
- Değişiklikleri kaydedin ve sitenizi kontrol edin.
WordPress’te Kritik CSS Oluşturma (LiteSpeed Cache):
- LiteSpeed Cache eklentisini açın.
- Sayfa Optimizasyonu > CSS Ayarları bölümüne gidin.
- CSS’i Eşzamansız Yükle seçeneğini Açık konuma getirin.
- Kaydedip sitenizde herhangi bir bozulma olup olmadığını kontrol edin.
Önemli: Kritik CSS uygulamadan önce mutlaka sitenizin yedeğini alın. Böylece görünümde bozulma yaşanırsa kolayca geri dönüş yapabilirsiniz.
Kaynakça
Google. (t.y.). Ekran dışındaki resimleri ertele. Chrome for Developers. https://developer.chrome.com/docs/lighthouse/performance/offscreen-images
GTmetrix. (t.y.). Lighthouse: Defer offscreen images. GTmetrix. https://gtmetrix.com/defer-offscreen-images.html
