Lazy load: rasmlarni kechiktirib yuklash indekslashga zarar bermasligi uchun

Lazy load — sahifadagi rasm va boshqa resurslarni foydalanuvchi ularga yaqinlashganda yuklash usuli. Uzun sahifada pastdagi o‘nlab rasm darhol yuklanmaydi, bu esa birinchi yuklanishni tezlashtiradi va trafikni tejaydi. Lekin noto‘g‘ri amalga oshirilsa, foydadan ko‘ra zarar ko‘proq.

Brauzerning o‘z imkoniyati

Zamonaviy brauzerlar img va iframe elementlari uchun loading atributini qo‘llab-quvvatlaydi. Uning lazy qiymati brauzerga rasmni kerak bo‘lganda yuklashni aytadi. Bu eng oddiy va xavfsiz usul:

• Qo‘shimcha skript kerak emas
• Rasm manzili HTML’da oddiy ko‘rinishda qoladi
• Qidiruv roboti rasmni ko‘radi

Skriptli kutubxonalar

Eski usul — rasm manzilini maxsus atributda saqlash va skript orqali ko‘rinish zonasiga kirganda haqiqiy atributga ko‘chirish. Xavflari:

• Skript ishlamasa, rasm umuman ko‘rinmaydi
• Agar to‘g‘ri amalga oshirilmasa, robot rasm manzilini topmasligi mumkin
• Qo‘shimcha kod sahifani og‘irlashtiradi

Agar skriptli yechim ishlatilsa, rasm manzili kod ichida mavjud bo‘lishi va robot uni ko‘rishi kerak.

Birinchi ekranni kechiktirmang

Eng ko‘p uchraydigan xato — barcha rasmlarga, shu jumladan birinchi ekrandagi banner yoki mahsulot fotosuratiga lazy load qo‘yish. Natijada asosiy rasm kechroq yuklanadi va LCP yomonlashadi. Qoida:

• Birinchi ekrandagi muhim rasmlar — darhol, kerak bo‘lsa yuqori ustuvorlik bilan
• Pastdagi rasmlar — kechiktirilgan
• Logotip — darhol

Qidiruv roboti nuqtai nazaridan

Google roboti sahifani ko‘rsatganda foydalanuvchi kabi pastga aylantirmaydi. U o‘ziga xos yo‘l bilan sahifani ochadi, shuning uchun aylantirishga bog‘liq yuklash hodisalari ishlamasligi mumkin. Brauzerning o‘z atributi va ko‘rinish zonasini aniqlovchi zamonaviy usullar bilan muammo bo‘lmaydi. Faqat aylantirish hodisasiga bog‘langan eski skriptlar xavfli.

Joy ajratish

Kechiktirilgan rasm yuklanganda sahifa sakramasligi uchun rasm kengligi va balandligini oldindan ko‘rsating. Aks holda lazy load CLS muammosini keltirib chiqaradi.

Cheksiz aylantirish

Kontent — mahsulotlar yoki maqolalar — aylantirilganda yuklansa, bu rasm lazy load’idan boshqa narsa. Bunday holda har bir qism alohida manzilga ega bo‘lishi va oddiy havolalar orqali ham topilishi kerak.

Tekshirish

1. Sahifa kodida rasm manzillari bor-yo‘qligini ko‘ring
2. Search Console’dagi URL tekshiruvida sahifaning ko‘rsatilgan versiyasini va skrinshotni ko‘ring
3. Lighthouse’da LCP elementi kechiktirilmaganini tekshiring
4. Sekin internetda sahifani aylantirib, rasmlar o‘z vaqtida chiqishini ko‘ring

Ko‘p uchraydigan xatolar

• Barcha rasmlarga, shu jumladan asosiy rasmga lazy load
• Rasm o‘lchamlari ko‘rsatilmagan
• Faqat skript bilan ishlaydigan va zaxirasiz yechim
• Rasmlar ostida bo‘sh joy qoladi va kech to‘ladi

Iframe’lar uchun ham

Video pleyerlar, xaritalar va boshqa joylashtirilgan bloklar sahifani rasmlardan ham ko‘proq og‘irlashtirishi mumkin. Ularga ham kechiktirilgan yuklashni qo‘llang. Video uchun yana bir usul — avval faqat muqova rasmini ko‘rsatish va pleyerni foydalanuvchi bosgandagina yuklash.