இன்டர்செக்ஷன் அப்சர்வர்: லேசி லோடிங் மற்றும் இன்ஃபினைட் ஸ்க்ரோல் மூலம் இணைய செயல்திறனை மேம்படுத்துதல்

இன்றைய இணைய மேம்பாட்டுச் சூழலில், செயல்திறன் மிக முக்கியமானது. பயனர்கள், அவர்களின் இருப்பிடம் அல்லது சாதனத்தைப் பொருட்படுத்தாமல், வேகமான மற்றும் பதிலளிக்கக்கூடிய இணையதளங்களை எதிர்பார்க்கிறார்கள். இன்டர்செக்ஷன் அப்சர்வர் API, லேசி லோடிங் மற்றும் இன்ஃபினைட் ஸ்க்ரோல் போன்ற நுட்பங்களைச் செயல்படுத்துவதன் மூலம் இணைய செயல்திறனை கணிசமாக மேம்படுத்த ஒரு சக்திவாய்ந்த வழியை வழங்குகிறது. இந்தக் கட்டுரை, உலகளாவிய பார்வையாளர்களுக்கு சிறந்த பயனர் அனுபவத்தை உருவாக்க இன்டர்செக்ஷன் அப்சர்வர் API-ஐப் புரிந்துகொள்வதற்கும் பயன்படுத்துவதற்கும் ஒரு விரிவான வழிகாட்டியை வழங்குகிறது.

இன்டர்செக்ஷன் அப்சர்வர் API என்றால் என்ன?

இன்டர்செக்ஷன் அப்சர்வர் API, ஒரு இலக்கு உறுப்பு (target element) அதன் மூதாதை உறுப்பு (ancestor element) அல்லது ஆவணத்தின் பார்வைப்புலத்துடன் (viewport) குறுக்கிடுவதில் ஏற்படும் மாற்றங்களை ஒத்திசைவற்ற முறையில் (asynchronously) கண்காணிக்க ஒரு வழியை வழங்குகிறது. எளிமையாகச் சொன்னால், தொடர்ந்து சரிபார்ப்பது (polling) அல்லது வளங்களை அதிகம் பயன்படுத்தும் நிகழ்வு கேட்பான்களைப் (event listeners) பயன்படுத்தாமல், ஒரு உறுப்பு திரையில் தெரியும் போது (அல்லது மற்றொரு உறுப்புடன் தொடர்புடையதாக இருக்கும்போது) கண்டறிய இது உங்களை அனுமதிக்கிறது. செயல்திறனை மேம்படுத்துவதற்கு இது மிகவும் முக்கியமானது, ஏனெனில் நீங்கள் சில செயல்களை ஏற்றுவதை அல்லது செயல்படுத்துவதை அவை உண்மையில் தேவைப்படும் வரை ஒத்திவைக்க முடியும்.

முக்கிய கருத்துக்கள்:

• இலக்கு உறுப்பு (Target Element): நீங்கள் குறுக்கீட்டிற்காகக் கண்காணிக்க விரும்பும் உறுப்பு.
• மூல உறுப்பு (Root Element): குறுக்கீட்டிற்கான பார்வைப்புலமாக (அல்லது எல்லைப் பெட்டியாக) செயல்படும் மூதாதை உறுப்பு. இது null என அமைக்கப்பட்டால், ஆவணத்தின் பார்வைப்புலம் பயன்படுத்தப்படும்.
• வரம்பு (Threshold): இலக்கு உறுப்பின் பார்வைத்திறனின் எந்த சதவீதத்தில் கால்பேக் செயல்பாடு செயல்படுத்தப்பட வேண்டும் என்பதைக் குறிக்கும் ஒரு எண் அல்லது எண்களின் வரிசை. 0 என்ற வரம்பு, இலக்கின் ஒரு பிக்சல் தெரிந்தவுடன் கால்பேக் செயல்படுத்தப்படும் என்பதைக் குறிக்கிறது. 1.0 என்ற வரம்பு, இலக்கு உறுப்பின் 100% தெரிய வேண்டும் என்பதைக் குறிக்கிறது.
• கால்பேக் செயல்பாடு (Callback Function): குறுக்கீடு மாறி, குறிப்பிட்ட வரம்பை அடையும்போது செயல்படுத்தப்படும் செயல்பாடு.
• குறுக்கீட்டு விகிதம் (Intersection Ratio): மூல உறுப்புக்குள் தெரியும் இலக்கு உறுப்பின் அளவைக் குறிக்கும் 0 மற்றும் 1 க்கு இடையிலான மதிப்பு.

லேசி லோடிங்: தேவைக்கேற்ப வளங்களை ஏற்றுதல்

லேசி லோடிங் என்பது வளங்களை (படங்கள், வீடியோக்கள், ஸ்கிரிப்ட்கள் போன்றவை) தேவைப்படும் வரை, குறிப்பாக அவை பார்வைக்கு வரவிருக்கும்போது, ஏற்றுவதை ஒத்திவைக்கும் ஒரு நுட்பமாகும். இது ஆரம்பப் பக்க ஏற்றுதல் நேரத்தைக் கணிசமாகக் குறைத்து செயல்திறனை மேம்படுத்துகிறது, குறிப்பாக பல வளங்களைக் கொண்ட பக்கங்களில். அனைத்துப் படங்களையும் ஒரே நேரத்தில் ஏற்றுவதற்குப் பதிலாக, பயனர் உடனடியாகப் பார்க்க வாய்ப்புள்ளவற்றை மட்டுமே நீங்கள் ஏற்றுகிறீர்கள். பயனர் ஸ்க்ரோல் செய்யும்போது, மேலும் படங்கள் ஏற்றப்படுகின்றன. மெதுவான இணைய இணைப்புகள் அல்லது வரையறுக்கப்பட்ட டேட்டா திட்டங்களைக் கொண்ட பயனர்களுக்கு இது மிகவும் பயனுள்ளதாக இருக்கும்.

இன்டர்செக்ஷன் அப்சர்வர் மூலம் லேசி லோடிங்கைச் செயல்படுத்துதல்

இன்டர்செக்ஷன் அப்சர்வர் API-ஐப் பயன்படுத்தி லேசி லோடிங்கை எவ்வாறு செயல்படுத்துவது என்பது இங்கே:

1. HTML-ஐ அமைக்கவும்: உண்மையான பட URL-ஐக் கொண்ட data-src பண்புடன் கூடிய ஒதுக்கிடம் (placeholder) படங்கள் அல்லது வெற்று <img> குறிச்சொற்களுடன் தொடங்கவும்.
2. ஒரு இன்டர்செக்ஷன் அப்சர்வரை உருவாக்கவும்: ஒரு கால்பேக் செயல்பாடு மற்றும் ஒரு விருப்பத்தேர்வு ஆப்ஜெக்டை உள்ளீடாகக் கொடுத்து, ஒரு புதிய IntersectionObserver ஆப்ஜெக்டை உருவாக்கவும்.
3. இலக்கு உறுப்புகளைக் கவனிக்கவும்: ஒவ்வொரு இலக்கு உறுப்பையும் (இந்த விஷயத்தில் படம்) கண்காணிக்கத் தொடங்க observe() முறையைப் பயன்படுத்தவும்.
4. கால்பேக் செயல்பாட்டில்: இலக்கு உறுப்பு பார்வைப்புலத்துடன் (குறிப்பிட்ட வரம்பின் அடிப்படையில்) குறுக்கிடும்போது, ஒதுக்கிடத்தை உண்மையான பட URL உடன் மாற்றவும்.
5. இலக்கு உறுப்பைக் கவனிப்பதை நிறுத்தவும்: படம் ஏற்றப்பட்டதும், மேலும் தேவையற்ற கால்பேக்குகளைத் தடுக்க இலக்கு உறுப்பைக் கவனிப்பதை நிறுத்தவும்.

குறியீடு உதாரணம்: படங்களை லேசி லோடிங் செய்தல்

இந்த உதாரணம் இன்டர்செக்ஷன் அப்சர்வர் API-ஐப் பயன்படுத்தி படங்களை லேசி லோடிங் செய்வதை விளக்குகிறது.

<!-- HTML -->
<img data-src="image1.jpg" alt="படம் 1" class="lazy-load">
<img data-src="image2.jpg" alt="படம் 2" class="lazy-load">
<img data-src="image3.jpg" alt="படம் 3" class="lazy-load">

<script>
  const lazyLoadImages = document.querySelectorAll('.lazy-load');

  const options = {
    root: null, // பார்வைப்புலத்தை ரூட்டாகப் பயன்படுத்தவும்
    rootMargin: '0px',
    threshold: 0.2 // படத்தின் 20% தெரியும் போது ஏற்றவும்
  };

  const lazyLoad = (image, observer) => {
    image.src = image.dataset.src;
    image.onload = () => {
      image.classList.remove('lazy-load');
      observer.unobserve(image);
    };
  };

  const observer = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        lazyLoad(entry.target, observer);
      }
    });
  }, options);

  lazyLoadImages.forEach(image => {
    observer.observe(image);
  });
</script>

லேசி லோடிங்கின் நன்மைகள்:

• குறைக்கப்பட்ட ஆரம்ப ஏற்றுதல் நேரம்: தேவையான வளங்களை மட்டும் முன்கூட்டியே ஏற்றுவதன் மூலம், ஆரம்பப் பக்க ஏற்றுதல் நேரம் கணிசமாகக் குறைக்கப்படுகிறது, இது வேகமான மற்றும் பதிலளிக்கக்கூடிய பயனர் அனுபவத்திற்கு வழிவகுக்கிறது.
• அலைக்கற்றை சேமிப்பு: பயனர்கள் தங்களுக்குத் தேவையான வளங்களை மட்டுமே பதிவிறக்குகிறார்கள், இது அலைக்கற்றையைச் சேமிக்கிறது, குறிப்பாக மொபைல் சாதனங்கள் அல்லது வரையறுக்கப்பட்ட டேட்டா திட்டங்களைக் கொண்ட பயனர்களுக்கு.
• மேம்படுத்தப்பட்ட செயல்திறன்: வளங்களை ஏற்றுவதை ஒத்திவைப்பது உலாவியின் வளங்களை விடுவிக்கிறது, இது ஒட்டுமொத்த செயல்திறனை மேம்படுத்தி, மென்மையான ஸ்க்ரோலிங்கிற்கு வழிவகுக்கிறது.
• எஸ்சிஓ நன்மைகள் (SEO Benefits): வேகமான ஏற்றுதல் நேரங்கள் தேடுபொறிகளுக்கு ஒரு சாதகமான தரவரிசைக் காரணியாகும்.

இன்ஃபினைட் ஸ்க்ரோல்: தடையற்ற உள்ளடக்க ஏற்றுதல்

இன்ஃபினைட் ஸ்க்ரோல் என்பது பயனர் பக்கத்தில் கீழே ஸ்க்ரோல் செய்யும்போது மேலும் உள்ளடக்கத்தை ஏற்றி, தடையற்ற மற்றும் தொடர்ச்சியான உலாவல் அனுபவத்தை உருவாக்கும் ஒரு நுட்பமாகும். இது பொதுவாக சமூக ஊடக ஊட்டங்கள், இ-காமர்ஸ் தயாரிப்புப் பட்டியல்கள் மற்றும் செய்தி இணையதளங்களில் பயன்படுத்தப்படுகிறது. உள்ளடக்கத்தைப் பக்கங்களாகப் பிரிப்பதற்குப் பதிலாக, பயனர் தற்போதைய உள்ளடக்கத்தின் முடிவை அடையும்போது புதிய உள்ளடக்கம் தானாகவே ஏற்றப்பட்டு ஏற்கனவே உள்ள உள்ளடக்கத்துடன் இணைக்கப்படுகிறது.

இன்டர்செக்ஷன் அப்சர்வர் மூலம் இன்ஃபினைட் ஸ்க்ரோல் செயல்படுத்துதல்

பயனர் உள்ளடக்கத்தின் முடிவை அடைந்துவிட்டார் என்பதைக் கண்டறிந்து மேலும் உள்ளடக்கத்தை ஏற்றுவதைத் தூண்டுவதற்கு இன்டர்செக்ஷன் அப்சர்வர் API-ஐப் பயன்படுத்தலாம்.

1. ஒரு சென்டினல் உறுப்பை உருவாக்கவும்: உள்ளடக்கத்தின் முடிவில் ஒரு சென்டினல் உறுப்பை (எ.கா., ஒரு <div>) சேர்க்கவும். பயனர் பக்கத்தின் அடிப்பகுதியை அடைந்துவிட்டார் என்பதைக் கண்டறிய இந்த உறுப்பு பயன்படுத்தப்படும்.
2. ஒரு இன்டர்செக்ஷன் அப்சர்வரை உருவாக்கவும்: சென்டினல் உறுப்பைக் கவனிக்கும் ஒரு புதிய IntersectionObserver ஆப்ஜெக்டை உருவாக்கவும்.
3. கால்பேக் செயல்பாட்டில்: சென்டினல் உறுப்பு பார்வைப்புலத்துடன் குறுக்கிடும்போது, மேலும் உள்ளடக்கத்தை ஏற்றுவதைத் தூண்டவும். இது பொதுவாக அடுத்த தரவுக் குழுவைப் பெற ஒரு API கோரிக்கையை வைப்பதை உள்ளடக்கியது.
4. புதிய உள்ளடக்கத்தைச் சேர்க்கவும்: புதிய உள்ளடக்கம் பெறப்பட்டதும், அதை பக்கத்தில் உள்ள தற்போதைய உள்ளடக்கத்துடன் இணைக்கவும்.
5. சென்டினல் உறுப்பை நகர்த்தவும்: புதிய உள்ளடக்கத்தைச் சேர்த்த பிறகு, மேலும் ஸ்க்ரோலிங்கைக் கண்காணிக்க, சென்டினல் உறுப்பை புதிதாகச் சேர்க்கப்பட்ட உள்ளடக்கத்தின் முடிவிற்கு நகர்த்தவும்.

குறியீடு உதாரணம்: இன்ஃபினைட் ஸ்க்ரோல்

இந்த உதாரணம் இன்டர்செக்ஷன் அப்சர்வர் API-ஐப் பயன்படுத்தி இன்ஃபினைட் ஸ்க்ரோலை விளக்குகிறது.

<!-- HTML -->
<div id="content">
  <p>ஆரம்ப உள்ளடக்கம்</p>
</div>
<div id="sentinel"></div>

<script>
  const content = document.getElementById('content');
  const sentinel = document.getElementById('sentinel');
  let page = 1; // ஆரம்பப் பக்க எண்
  let loading = false; // பலமுறை ஏற்றுவதைத் தடுக்கும் கொடி

  const options = {
    root: null, // பார்வைப்புலத்தை ரூட்டாகப் பயன்படுத்தவும்
    rootMargin: '0px',
    threshold: 0.1 // சென்டினலின் 10% தெரியும் போது ஏற்றவும்
  };

  const loadMoreContent = async () => {
    if (loading) return;
    loading = true;

    // ஒரு ஏபிஐயிலிருந்து தரவைப் பெறுவதைப் போல உருவகப்படுத்தவும் (உங்கள் உண்மையான ஏபிஐ அழைப்புடன் மாற்றவும்)
    setTimeout(() => {
      const newContent = Array.from({ length: 10 }, (_, i) => `<p>பக்கம் ${page + 1} இலிருந்து உள்ளடக்கம், உருப்படி ${i + 1}</p>`).join('');
      content.innerHTML += newContent;
      page++;
      loading = false;
    }, 1000);
  };

  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting && !loading) {
        loadMoreContent();
      }
    });
  }, options);

  observer.observe(sentinel);
</script>

இன்ஃபினைட் ஸ்க்ரோலுக்கான கருத்தாய்வுகள்:

• அணுகல்தன்மை (Accessibility): இன்ஃபினைட் ஸ்க்ரோல் மாற்றுத்திறனாளிகளுக்கும் அணுகக்கூடியதாக இருப்பதை உறுதி செய்யவும். மவுஸ் அல்லது ஸ்க்ரோல் வீலைப் பயன்படுத்த முடியாத பயனர்களுக்கு "மேலும் ஏற்றவும்" (Load More) பொத்தான் போன்ற மாற்று வழிசெலுத்தல் விருப்பங்களை வழங்கவும். மேலும், புதிய உள்ளடக்கம் ஏற்றப்பட்ட பிறகு ஃபோகஸ் சரியாக நிர்வகிக்கப்படுவதை உறுதிசெய்யவும், இதனால் ஸ்கிரீன் ரீடர் பயனர்கள் மாற்றங்களை அறிந்து கொள்வார்கள்.
• செயல்திறன்: செயல்திறன் சிக்கல்களைத் தவிர்க்க புதிய உள்ளடக்கத்தை ஏற்றுவதை மேம்படுத்துங்கள். ஏபிஐ கோரிக்கைகளின் அதிர்வெண்ணைக் கட்டுப்படுத்த டிபவுன்சிங் (debouncing) அல்லது த்ராட்லிங் (throttling) போன்ற நுட்பங்களைப் பயன்படுத்தவும்.
• பயனர் அனுபவம்: மேலும் உள்ளடக்கம் ஏற்றப்படுகிறது என்பதைக் குறிக்க காட்சிப் பின்னூட்டத்தை வழங்கவும். ஒரே நேரத்தில் அதிக உள்ளடக்கத்துடன் பயனர்களைச் சோர்வடையச் செய்வதைத் தவிர்க்கவும். ஒரு கோரிக்கைக்கு ஏற்றப்படும் பொருட்களின் எண்ணிக்கையைக் கட்டுப்படுத்துவதைக் கருத்தில் கொள்ளவும்.
• எஸ்சிஓ (SEO): சரியாகச் செயல்படுத்தப்படாவிட்டால், இன்ஃபினைட் ஸ்க்ரோல் எஸ்சிஓ-வை எதிர்மறையாகப் பாதிக்கலாம். தேடுபொறிகள் உங்கள் எல்லா உள்ளடக்கத்தையும் கிரால் (crawl) செய்து அட்டவணைப்படுத்த முடியும் என்பதை உறுதிப்படுத்தவும். சரியான HTML கட்டமைப்பைப் பயன்படுத்தவும், தேடுபொறி கிராலர்களுக்காக பக்க எண்ணிடுதலைச் (pagination) செயல்படுத்துவதைக் கருத்தில் கொள்ளவும்.
• ஹிஸ்டரி ஏபிஐ (History API): பயனர் ஸ்க்ரோல் செய்யும்போது URL-ஐப் புதுப்பிக்க ஹிஸ்டரி ஏபிஐ-ஐப் பயன்படுத்தவும், இது பக்கத்தின் குறிப்பிட்ட பகுதிகளைப் பகிர அல்லது புக்மார்க் செய்ய அனுமதிக்கிறது.

உலாவி இணக்கத்தன்மை மற்றும் பாலிஃபில்கள்

இன்டர்செக்ஷன் அப்சர்வர் API நவீன உலாவிகளால் பரவலாக ஆதரிக்கப்படுகிறது. இருப்பினும், பழைய உலாவிகள் அதை இயல்பாக ஆதரிக்காமல் இருக்கலாம். அனைத்து உலாவிகளிலும் இணக்கத்தன்மையை உறுதிசெய்ய, நீங்கள் ஒரு பாலிஃபில்லைப் (polyfill) பயன்படுத்தலாம். பாலிஃபில் என்பது பழைய உலாவிகளில் ஒரு புதிய ஏபிஐயின் செயல்பாட்டை வழங்கும் ஒரு குறியீட்டுத் துண்டாகும்.

பல இன்டர்செக்ஷன் அப்சர்வர் பாலிஃபில்கள் கிடைக்கின்றன. ஒரு பிரபலமான விருப்பம் அதிகாரப்பூர்வ W3C பாலிஃபில் ஆகும். பாலிஃபில்லைப் பயன்படுத்த, இன்டர்செக்ஷன் அப்சர்வர் ஏபிஐயைப் பயன்படுத்தும் உங்கள் ஜாவாஸ்கிரிப்ட் குறியீட்டிற்கு முன் அதை உங்கள் HTML இல் சேர்க்கவும்.

<script src="intersection-observer.js"></script>
<script src="your-script.js"></script>

சிறந்த நடைமுறைகள் மற்றும் மேம்படுத்தும் நுட்பங்கள்

• சரியான வரம்பைத் தேர்ந்தெடுக்கவும்: செயல்திறனுக்கும் பயனர் அனுபவத்திற்கும் இடையிலான உகந்த சமநிலையைக் கண்டறிய வெவ்வேறு வரம்பு மதிப்புகளுடன் பரிசோதனை செய்யுங்கள். ஒரு குறைந்த வரம்பு கால்பேக் செயல்பாட்டை முன்கூட்டியே தூண்டும், அதே நேரத்தில் ஒரு உயர் வரம்பு அதைத் தாமதப்படுத்தும்.
• ஏபிஐ கோரிக்கைகளை டிபவுன்ஸ் அல்லது த்ராட்டில் செய்யவும்: சேவையகத்தை அதிகச் சுமைக்கு உள்ளாக்குவதைத் தவிர்க்கவும், செயல்திறனை மேம்படுத்தவும் இன்ஃபினைட் ஸ்க்ரோலுக்கான ஏபிஐ கோரிக்கைகளின் அதிர்வெண்ணைக் கட்டுப்படுத்தவும். டிபவுன்சிங், கடைசி அழைப்பிலிருந்து ஒரு குறிப்பிட்ட நேரம் கடந்த பின்னரே செயல்பாடு அழைக்கப்படுவதை உறுதி செய்கிறது. த்ராட்லிங், ஒரு குறிப்பிட்ட காலத்திற்குள் செயல்பாடு அதிகபட்சம் ஒரு முறை மட்டுமே அழைக்கப்படுவதை உறுதி செய்கிறது.
• படங்கள் ஏற்றுவதை மேம்படுத்துங்கள்: மேம்படுத்தப்பட்ட பட வடிவங்களைப் (எ.கா., WebP) பயன்படுத்தவும் மற்றும் கோப்பு அளவைக் குறைக்க படங்களைச் சுருக்கவும். பயனரின் இருப்பிடத்திற்கு அருகிலுள்ள சேவையகங்களிலிருந்து படங்களை வழங்க உள்ளடக்க விநியோக நெட்வொர்க்கை (CDN) பயன்படுத்துவதைக் கருத்தில் கொள்ளுங்கள்.
• ஏற்றுதல் காட்டி (Loading Indicator) பயன்படுத்தவும்: வளங்கள் ஏற்றப்படுகின்றன என்பதைக் குறிக்க காட்சிப் பின்னூட்டத்தை வழங்கவும். இது ஒரு எளிய ஸ்பின்னர் அல்லது ஒரு முன்னேற்றப் பட்டியாக இருக்கலாம்.
• பிழைகளை நேர்த்தியாகக் கையாளவும்: வளங்கள் ஏற்றத் தவறும்போது அந்த நிலைகளை நேர்த்தியாகக் கையாள பிழை கையாளுதலைச் செயல்படுத்தவும். பயனருக்கு ஒரு பிழைச் செய்தியைக் காட்டி, வளத்தை மீண்டும் ஏற்ற முயற்சிப்பதற்கான விருப்பத்தை வழங்கவும்.
• தேவைப்படாதபோது உறுப்புகளைக் கவனிப்பதை நிறுத்தவும்: உறுப்புகள் இனி தேவைப்படாதபோது அவற்றைக் கவனிப்பதை நிறுத்த unobserve() முறையைப் பயன்படுத்தவும். இது உலாவி வளங்களை விடுவித்து செயல்திறனை மேம்படுத்துகிறது. எடுத்துக்காட்டாக, ஒரு படம் வெற்றிகரமாக ஏற்றப்பட்டதும், நீங்கள் அதைக் கவனிப்பதை நிறுத்த வேண்டும்.

அணுகல்தன்மை கருத்தாய்வுகள்

லேசி லோடிங் மற்றும் இன்ஃபினைட் ஸ்க்ரோல் ஆகியவற்றைச் செயல்படுத்தும்போது, உங்கள் இணையதளம் மாற்றுத்திறனாளிகள் உட்பட அனைவராலும் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிசெய்ய அணுகல்தன்மையைக் கருத்தில் கொள்வது மிகவும் முக்கியம்.

• மாற்று வழிசெலுத்தலை வழங்கவும்: இன்ஃபினைட் ஸ்க்ரோலுக்கு, மவுஸ் அல்லது ஸ்க்ரோல் வீலைப் பயன்படுத்த முடியாத பயனர்களுக்கு "மேலும் ஏற்றவும்" (Load More) பொத்தான் அல்லது பக்க எண்ணிடுதல் போன்ற மாற்று வழிசெலுத்தல் விருப்பங்களை வழங்கவும்.
• ஃபோகஸை நிர்வகிக்கவும்: இன்ஃபினைட் ஸ்க்ரோல் மூலம் புதிய உள்ளடக்கத்தை ஏற்றும்போது, ஃபோகஸ் சரியாக நிர்வகிக்கப்படுவதை உறுதி செய்யவும். புதிதாக ஏற்றப்பட்ட உள்ளடக்கத்திற்கு ஃபோகஸை நகர்த்தவும், இதனால் ஸ்கிரீன் ரீடர் பயனர்கள் மாற்றங்களை அறிந்து கொள்வார்கள். புதிய உள்ளடக்கத்தின் கண்டெய்னர் உறுப்பில் tabindex பண்பை -1 என அமைத்து, பின்னர் அந்த உறுப்பில் focus() முறையை அழைப்பதன் மூலம் இதை அடையலாம்.
• செமாண்டிக் HTML-ஐப் பயன்படுத்தவும்: உங்கள் உள்ளடக்கத்திற்கு கட்டமைப்பையும் அர்த்தத்தையும் வழங்க செமாண்டிக் HTML உறுப்புகளைப் பயன்படுத்தவும். இது ஸ்கிரீன் ரீடர்கள் உள்ளடக்கத்தைப் புரிந்துகொள்ளவும் சிறந்த பயனர் அனுபவத்தை வழங்கவும் உதவுகிறது. எடுத்துக்காட்டாக, தொடர்புடைய உள்ளடக்கத்தை குழுவாக்க <article> உறுப்புகளைப் பயன்படுத்தவும்.
• ARIA பண்புகளை வழங்கவும்: உதவித் தொழில்நுட்பங்களுக்கு கூடுதல் தகவல்களை வழங்க ARIA (Accessible Rich Internet Applications) பண்புகளைப் பயன்படுத்தவும். எடுத்துக்காட்டாக, பக்கத்தின் ஒரு பகுதி மாறும் வகையில் புதுப்பிக்கப்படுகிறது என்பதைக் குறிக்க aria-live பண்பைப் பயன்படுத்தவும்.
• உதவித் தொழில்நுட்பங்களுடன் சோதிக்கவும்: உங்கள் இணையதளம் மாற்றுத்திறனாளிகளுக்கு அணுகக்கூடியதாக இருப்பதை உறுதிசெய்ய ஸ்கிரீன் ரீடர்கள் போன்ற உதவித் தொழில்நுட்பங்களுடன் சோதிக்கவும்.

நிஜ உலக உதாரணங்கள்

பல பிரபலமான இணையதளங்கள் மற்றும் பயன்பாடுகள் செயல்திறன் மற்றும் பயனர் அனுபவத்தை மேம்படுத்த லேசி லோடிங் மற்றும் இன்ஃபினைட் ஸ்க்ரோலைப் பயன்படுத்துகின்றன. இதோ சில உதாரணங்கள்:

• சமூக ஊடகத் தளங்கள் (எ.கா., Facebook, Twitter, Instagram): இந்தத் தளங்கள் பயனர் தங்கள் ஃபீடில் கீழே ஸ்க்ரோல் செய்யும்போது மேலும் உள்ளடக்கத்தை ஏற்ற இன்ஃபினைட் ஸ்க்ரோலைப் பயன்படுத்துகின்றன. படங்கள் மற்றும் வீடியோக்கள் பார்வைக்கு வரவிருக்கும்போது மட்டுமே அவற்றை ஏற்றுவதற்கு லேசி லோடிங்கையும் பயன்படுத்துகின்றன.
• இ-காமர்ஸ் இணையதளங்கள் (எ.கா., Amazon, Alibaba, eBay): இந்த இணையதளங்கள் தயாரிப்புப் படங்களை ஏற்றுவதற்கு லேசி லோடிங்கையும், பயனர் பக்கத்தில் கீழே ஸ்க்ரோல் செய்யும்போது மேலும் தயாரிப்புப் பட்டியல்களை ஏற்ற இன்ஃபினைட் ஸ்க்ரோலையும் பயன்படுத்துகின்றன. அதிக எண்ணிக்கையிலான தயாரிப்புகளைக் கொண்ட இ-காமர்ஸ் தளங்களுக்கு இது மிகவும் முக்கியமானது.
• செய்தி இணையதளங்கள் (எ.கா., The New York Times, BBC News): இந்த இணையதளங்கள் படங்கள் மற்றும் வீடியோக்களை ஏற்றுவதற்கு லேசி லோடிங்கையும், பயனர் பக்கத்தில் கீழே ஸ்க்ரோல் செய்யும்போது மேலும் கட்டுரைகளை ஏற்ற இன்ஃபினைட் ஸ்க்ரோலையும் பயன்படுத்துகின்றன.
• பட ஹோஸ்டிங் தளங்கள் (எ.கா., Unsplash, Pexels): இந்தத் தளங்கள் பயனர் பக்கத்தில் கீழே ஸ்க்ரோல் செய்யும்போது படங்களை ஏற்றுவதற்கு லேசி லோடிங்கைப் பயன்படுத்துகின்றன, இது செயல்திறனை கணிசமாக மேம்படுத்தி அலைக்கற்றை நுகர்வைக் குறைக்கிறது.

முடிவுரை

இன்டர்செக்ஷன் அப்சர்வர் API என்பது லேசி லோடிங் மற்றும் இன்ஃபினைட் ஸ்க்ரோல் போன்ற நுட்பங்களைச் செயல்படுத்துவதன் மூலம் இணைய செயல்திறனை மேம்படுத்துவதற்கான ஒரு சக்திவாய்ந்த கருவியாகும். இந்த ஏபிஐயைப் பயன்படுத்துவதன் மூலம், நீங்கள் ஆரம்பப் பக்க ஏற்றுதல் நேரத்தைக் கணிசமாகக் குறைக்கலாம், அலைக்கற்றையைச் சேமிக்கலாம், ஒட்டுமொத்த செயல்திறனை மேம்படுத்தலாம், மேலும் உலகளாவிய பார்வையாளர்களுக்கு சிறந்த பயனர் அனுபவத்தை உருவாக்கலாம். இந்த நுட்பங்களைச் செயல்படுத்தும்போது உங்கள் இணையதளம் அனைவராலும் பயன்படுத்தக்கூடியதாக இருப்பதை உறுதிசெய்ய அணுகல்தன்மையைக் கருத்தில் கொள்ள நினைவில் கொள்ளுங்கள். இந்தக் கட்டுரையில் கோடிட்டுக் காட்டப்பட்டுள்ள கருத்துக்கள் மற்றும் சிறந்த நடைமுறைகளைப் புரிந்துகொள்வதன் மூலம், வேகமான, பதிலளிக்கக்கூடிய, மற்றும் அணுகக்கூடிய இணையதளங்களை உருவாக்க இன்டர்செக்ஷன் அப்சர்வர் ஏபிஐயைப் பயன்படுத்தலாம்.