M

MLOG

O'zbek

Tasvirlar va komponentlarni kechiktirib yuklash, veb-sayt ishlashini yaxshilash va global auditoriya uchun foydalanuvchi tajribasini oshirish bo'yicha to'liq qo'llanma.

Kechiktirilgan yuklash (Lazy Loading): Tasvirlar va Komponentlar yordamida veb-sayt samaradorligini optimallashtirish

Bugungi raqamli dunyoda veb-sayt samaradorligi juda muhim. Foydalanuvchilar tez va sezgir tajribalarni kutishadi, qidiruv tizimlari esa buni ta'minlaydigan veb-saytlarga ustunlik beradi. Samaradorlikni oshirishning muhim usullaridan biri bu kechiktirilgan yuklash (lazy loading). Ushbu maqola rasmlar va komponentlarni kechiktirib yuklash bo'yicha keng qamrovli qo'llanmani taqdim etadi, bu sizga veb-saytingizni global auditoriya uchun optimallashtirishga yordam beradi.

Kechiktirilgan yuklash (Lazy Loading) nima?

Kechiktirilgan yuklash (Lazy loading) - bu resurslarni (rasmlar, ifreymlar, komponentlar va boshqalar) ular haqiqatda kerak bo'lgunga qadar, odatda, ko'rish sohasiga (viewport) kirish arafasida bo'lganda yuklashni kechiktiradigan usul. Bu shuni anglatadiki, barcha aktivlarni oldindan yuklash o'rniga, brauzer faqat sahifaning dastlabki yuklanishida foydalanuvchiga ko'rinadigan resurslarni yuklaydi. Foydalanuvchi sahifani pastga aylantirgan sari, ko'proq resurslar ko'rinadigan bo'lganda yuklanadi.

Buni shunday tasavvur qiling: sayohatga tayyorgarlik ko'ryapsiz. Butun garderobingizni boshidan sudrab yurish o'rniga, faqat darhol kerak bo'lishini bilgan kiyimlaringizni joylaysiz. Sayohat davomida, zarurat tug'ilganda qo'shimcha narsalarni ochasiz. Kechiktirilgan yuklash veb-saytlar uchun aynan shunday ishlaydi.

Nima uchun kechiktirilgan yuklashdan foydalanish kerak?

Kechiktirilgan yuklash bir nechta muhim afzalliklarni taqdim etadi:

Tasvirlarni kechiktirib yuklash

Tasvirlar ko'pincha veb-saytdagi eng katta aktivlar bo'lib, ularni kechiktirib yuklash uchun asosiy nomzodlarga aylantiradi. Tasvirlar uchun kechiktirilgan yuklashni qanday amalga oshirish mumkinligi quyida keltirilgan:

Mahalliy (Native) kechiktirilgan yuklash

Zamonaviy brauzerlar (Chrome, Firefox, Safari va Edge) endi loading atributidan foydalangan holda mahalliy kechiktirilgan yuklashni qo'llab-quvvatlaydi. Bu tasvirlarni kechiktirib yuklashning eng oddiy va samarali usuli.

Mahalliy kechiktirilgan yuklashni yoqish uchun shunchaki <img> tegingizga loading="lazy" atributini qo'shing:

<img src="image.jpg" alt="My Image" loading="lazy">

loading atributi uchta qiymatga ega bo'lishi mumkin:

Misol:

<img src="london_bridge.jpg" alt="London Bridge" loading="lazy" width="600" height="400">
<img src="tokyo_skyline.jpg" alt="Tokyo Skyline" loading="lazy" width="600" height="400">
<img src="rio_de_janeiro.jpg" alt="Rio de Janeiro" loading="lazy" width="600" height="400">

Ushbu misolda London ko'prigi, Tokio silueti va Rio-de-Janeyro tasvirlari faqat foydalanuvchi ularga qadar aylantirganda yuklanadi. Bu, ayniqsa, agar foydalanuvchi sahifaning eng quyi qismiga aylantirmasa, juda foydalidir.

JavaScript yordamida kechiktirilgan yuklash

Mahalliy kechiktirilgan yuklashni qo'llab-quvvatlamaydigan eski brauzerlar uchun siz JavaScript kutubxonalaridan foydalanishingiz yoki o'zingizning maxsus skriptingizni yozishingiz mumkin. Quyida Intersection Observer API yordamida asosiy misol keltirilgan:

const images = document.querySelectorAll('img[data-src]');

const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      const img = entry.target;
      img.src = img.dataset.src;
      img.removeAttribute('data-src');
      observer.unobserve(img);
    }
  });
});

images.forEach(img => {
  observer.observe(img);
});

Tushuntirish:

  1. Biz data-src atributiga ega bo'lgan barcha <img> elementlarini tanlaymiz.
  2. Biz yangi IntersectionObserver nusxasini yaratamiz. Qayta chaqiruv funksiyasi (callback) kuzatilayotgan element ko'rish maydoniga kirganda yoki chiqqanda ishga tushadi.
  3. Qayta chaqiruv funksiyasi ichida biz entries (ko'rish maydoni bilan kesishgan elementlar) bo'ylab takrorlaymiz.
  4. Agar element kesishayotgan bo'lsa (entry.isIntersecting rost bo'lsa), biz tasvirning src atributini data-src atributining qiymatiga o'rnatamiz.
  5. So'ngra biz data-src atributini olib tashlaymiz va tasvirni kuzatishni to'xtatamiz, chunki u endi kerak emas.
  6. Nihoyat, biz har bir tasvirni observer.observe(img) yordamida kuzatamiz.

HTML Tuzilmasi:

<img data-src="image.jpg" alt="My Image">

E'tibor bering, haqiqiy rasm URL manzili src atributi o'rniga data-src atributiga joylashtirilgan. Bu brauzerning rasmni darhol yuklashini oldini oladi.

Kechiktirilgan yuklash kutubxonalaridan foydalanish

Bir nechta JavaScript kutubxonalari tasvirlarni kechiktirib yuklash jarayonini soddalashtirishi mumkin. Ba'zi mashhur variantlar quyidagilarni o'z ichiga oladi:

Ushbu kutubxonalar odatda kechiktirilgan yuklashni ishga tushirish uchun oddiy API-ni taqdim etadi va o'rinbosar tasvirlar (placeholder) va o'tish effektlari kabi qo'shimcha xususiyatlarni taklif qiladi.

Komponentlarni kechiktirib yuklash

Kechiktirilgan yuklash faqat tasvirlar uchun emas; u, ayniqsa, React, Angular va Vue kabi zamonaviy JavaScript freymvorklarida komponentlarga ham qo'llanilishi mumkin. Bu ko'plab komponentlarga ega bo'lgan katta yagona sahifali ilovalar (SPAs) uchun ayniqsa foydalidir.

React-da kechiktirilgan yuklash

React komponentlarni kechiktirib yuklash uchun o'rnatilgan React.lazy() funksiyasini taqdim etadi. Bu funksiya komponentlarni dinamik ravishda import qilish imkonini beradi, ular faqat render qilinganda yuklanadi.

import React, { Suspense } from 'react';

const MyComponent = React.lazy(() => import('./MyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Yuklanmoqda...</div>}>
      <MyComponent />
    </Suspense>
  );
}

export default App;

Tushuntirish:

  1. Biz MyComponent-ni dinamik ravishda import qilish uchun React.lazy()-dan foydalanamiz. import() funksiyasi komponent moduliga hal qilinadigan promis (promise) qaytaradi.
  2. Biz MyComponent-ni <Suspense> komponentiga o'rab qo'yamiz. Suspense komponenti komponent yuklanayotganda zaxira interfeysni (bu holatda, "Yuklanmoqda...") ko'rsatishga imkon beradi.

Angular-da kechiktirilgan yuklash

Angular marshrutlash konfiguratsiyasidagi loadChildren xususiyatidan foydalangan holda modullarni kechiktirib yuklashni qo'llab-quvvatlaydi.

const routes: Routes = [
  {
    path: 'my-module',
    loadChildren: () => import('./my-module/my-module.module').then(m => m.MyModuleModule)
  }
];

Tushuntirish:

  1. Biz my-module yo'li uchun marshrutni aniqlaymiz.
  2. Biz MyModuleModule kechiktirib yuklanishi kerakligini belgilash uchun loadChildren xususiyatidan foydalanamiz. import() funksiyasi modulni dinamik ravishda import qiladi.
  3. then() usuli modulga kirish va MyModuleModule klassini qaytarish uchun ishlatiladi.

Vue.js-da kechiktirilgan yuklash

Vue.js dinamik importlar va component tegi yordamida komponentlarni kechiktirib yuklashni qo'llab-quvvatlaydi.

<template>
  <component :is="dynamicComponent"></component>
</template>

<script>
export default {
  data() {
    return {
      dynamicComponent: null
    }
  },
  mounted() {
    import('./MyComponent.vue')
      .then(module => {
        this.dynamicComponent = module.default
      })
  }
}
</script>

Tushuntirish:

  1. Biz komponentni dinamik ravishda render qilish uchun <component> tegi bilan :is atributidan foydalanamiz.
  2. mounted hayotiy sikl ilgagida biz MyComponent.vue-ni dinamik ravishda import qilish uchun import() funksiyasidan foydalanamiz.
  3. Keyin biz dynamicComponent ma'lumotlar xususiyatini modulning standart eksportiga o'rnatamiz.

Kechiktirilgan yuklash uchun eng yaxshi amaliyotlar

Kechiktirilgan yuklash samarali amalga oshirilganligiga ishonch hosil qilish uchun ushbu eng yaxshi amaliyotlarni ko'rib chiqing:

Xalqarolashtirish masalalari

Global auditoriya uchun kechiktirilgan yuklashni amalga oshirayotganda, ushbu xalqarolashtirish omillarini hisobga oling:

Xulosa

Kechiktirilgan yuklash veb-sayt samaradorligini optimallashtirish va foydalanuvchi tajribasini yaxshilash uchun kuchli usuldir. Ekrandan tashqaridagi resurslarni yuklashni kechiktirish orqali siz sahifaning dastlabki yuklanish vaqtini qisqartirishingiz, tarmoq o'tkazuvchanligi sarfini kamaytirishingiz va server yuklamasini pasaytirishingiz mumkin. Kichik shaxsiy veb-sayt yoki yirik korporativ dastur yaratayotganingizdan qat'i nazar, kechiktirilgan yuklash samaradorlikni optimallashtirish strategiyangizning asosiy qismi bo'lishi kerak. Ushbu maqolada keltirilgan eng yaxshi amaliyotlarga rioya qilish va xalqarolashtirish omillarini hisobga olish orqali siz kechiktirilgan yuklashni amalga oshirishingiz samarali bo'lishini va global auditoriya uchun ijobiy foydalanuvchi tajribasini ta'minlashini kafolatlaysiz.

Kechiktirilgan yuklashni qabul qiling va hamma uchun tezroq, samaraliroq va foydalanuvchiga qulay veb-tajribani oching.