Geleneksel olarak, sayfanın üst kısmındaki (above the fold) görsellere, özellikle de En Büyük İçerikli Boyama (LCP) görseline lazy loading uygulanmaması önerilir. Ancak "above the fold" kavramı ekran boyutuna göre değiştiği için, bir görsel masaüstünde üst kısımda yer alırken mobilde alt kısımda kalabilir. Sunucu tarafında cihaz tespiti veya JavaScript kullanmadan, yerel lazy loading ve statik HTML ile bu durumu yönetmek genellikle zordur ve kullanıcıların bir kısmı için yanlış bir davranış sergilenir.
Bu soruna yönelik, tarayıcıların zaten yüklenmiş bir görselin gecikmeli yüklenmesini engellemesi prensibinden yararlanan basit bir çözüm bulunmaktadır. Çözüm, bir media sorgusu kullanarak görseli koşullu olarak preload etmek ve ardından görseli loading="lazy" olarak işaretlemektir. Örneğin, bir görseli (min-width: 1024px) medya sorgusuyla preload ederek masaüstü cihazlarda görselin hemen yüklenmesini (LCP için iyi) sağlarken, mobil cihazlarda preload göz ardı edilir ve görsel lazy loading ile yüklenir. Bu yöntem, HTTP link header veya <link rel="preload"> etiketi ile uygulanabilir.
Bu yaklaşım, HTML tabanlı, görüntü alanı bağımlı bir lazy loading imkanı sunar. Yazar, bu yöntemi kendi web sitesinde kitap sayfaları ve kenar çubuğu görselleri için başarıyla kullandığını belirtiyor. Ancak, bu yöntemin henüz tam olarak belgelenmediği, preload gerektirdiği ve Lighthouse gibi araçların bu davranışı tam olarak anlamadığı gibi bazı sınırlamaları da mevcuttur. Yine de, farklı ekran boyutlarına göre optimize edilmiş görsel yükleme stratejisi için pratik bir çözüm sunmaktadır.
Bu yöntem, farklı ekran boyutlarına göre görsel yükleme stratejilerini optimize ederek web performansını artırmak için yalnızca HTML tabanlı, pratik bir çözüm sunar.