சிஎஸ்எஸ் சோம்பல் விதி: மேம்படுத்தப்பட்ட செயல்திறனுக்காக சோம்பல் ஏற்றுதல் அமலாக்கம்

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

சோம்பல் ஏற்றுதல் என்றால் என்ன, அது ஏன் முக்கியமானது?

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

• மேம்படுத்தப்பட்ட ஆரம்ப பக்க ஏற்றுதல் நேரம்: ஆரம்ப ஏற்றத்தின் போது மாற்றப்படும் தரவின் அளவைக் குறைப்பதன் மூலம், பக்கம் விரைவாக செயல்படத் தொடங்குகிறது.
• குறைக்கப்பட்ட அலைவரிசை நுகர்வு: பயனர்கள் தாங்கள் பார்க்கும் வளங்களை மட்டுமே பதிவிறக்குவதால், அலைவரிசை சேமிக்கப்படுகிறது, குறிப்பாக மொபைல் சாதனங்களில்.
• குறைந்த சேவையக செலவுகள்: குறைக்கப்பட்ட அலைவரிசை பயன்பாடு குறைந்த சேவையக செலவுகளுக்கு வழிவகுக்கிறது.
• மேம்பட்ட பயனர் அனுபவம்: வேகமான ஏற்றுதல் நேரங்கள் மேலும் பதிலளிக்கக்கூடிய மற்றும் சுவாரஸ்யமான உலாவல் அனுபவத்தை உருவாக்குகின்றன.

ஜாவாஸ்கிரிப்ட் உடன் பாரம்பரிய சோம்பல் ஏற்றுதல்

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

சிஎஸ்எஸ் அடிப்படையிலான சோம்பல் ஏற்றுதல்: ஒரு நவீன அணுகுமுறை

நவீன சிஎஸ்எஸ், குறைந்தபட்ச அல்லது ஜாவாஸ்கிரிப்ட் இல்லாமல் சோம்பல் ஏற்றுதலை செயல்படுத்துவதற்கு அற்புதமான வாய்ப்புகளை வழங்குகிறது. இந்த அணுகுமுறை content பண்பு, :before/:after போலி-கூறுகள் மற்றும் கன்டெய்னர் வினவல்கள் போன்ற சிஎஸ்எஸ் அம்சங்களைப் பயன்படுத்துகிறது, இது திறமையான மற்றும் நேர்த்தியான சோம்பல் ஏற்றுதல் தீர்வுகளுக்கு வழிவகுக்கிறது.

சிஎஸ்எஸ் content பண்பு மற்றும் :before/:after போலி-கூறுகள்

ஒரு நுட்பம், ஒரு ப்ளேஸ்ஹோல்டர் படம் அல்லது ஏற்றுதல் குறிகாட்டியை காட்ட :before அல்லது :after போலி-கூறுகளுடன் content பண்பைப் பயன்படுத்துவதை உள்ளடக்கியது. உண்மையான படம் பின்னர் ஜாவாஸ்கிரிப்ட் அல்லது கூறு பார்வையில் இருக்கும்போது தூண்டப்படும் ஒரு தனி சிஎஸ்எஸ் விதியைப் பயன்படுத்தி ஏற்றப்படுகிறது. இந்த முறை சோம்பல் ஏற்றுதலின் ஒரு அடிப்படை வடிவத்தை வழங்குகிறது, ஆனால் மற்ற அணுகுமுறைகளை விட செயல்திறன் குறைவாக இருக்கலாம்.

எடுத்துக்காட்டு:

.lazy-image {
    position: relative;
    display: block;
    width: 300px;
    height: 200px;
    background-color: #eee;
    overflow: hidden;
}

.lazy-image::before {
    content: 'Loading...';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.lazy-image img {
    display: none; /* Initially hide the image */
}

/* JavaScript to add a class when in viewport */
.lazy-image.loaded img {
    display: block; /* Show the image when loaded */
}

.lazy-image.loaded::before {
    content: none; /* Remove the loading indicator */
}

இந்த எடுத்துக்காட்டு, ஜாவாஸ்கிரிப்ட் `loaded` வகுப்பைச் சேர்க்கும் வரை "ஏற்றப்படுகிறது..." (Loading...) என்ற உரையுடன் ஒரு ப்ளேஸ்ஹோல்டரைக் காட்டுகிறது, பின்னர் படம் வெளிப்படுத்தப்படுகிறது.

குறுக்குவெட்டு நோக்குபவர் API மற்றும் சிஎஸ்எஸ் வகுப்புகள்

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

எடுத்துக்காட்டு:

<img class="lazy" data-src="image.jpg" alt="Image description">

const lazyImages = document.querySelectorAll('.lazy');

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const img = entry.target;
            img.src = img.dataset.src;
            img.classList.add('loaded');
            observer.unobserve(img);
        }
    });
});

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

.lazy {
    opacity: 0; /* Initially hide the image */
    transition: opacity 0.3s ease-in-out;
}

.lazy.loaded {
    opacity: 1; /* Fade in the image when loaded */
}

இந்த எடுத்துக்காட்டு ஜாவாஸ்கிரிப்ட் மற்றும் சிஎஸ்எஸ் பயன்படுத்தி ஒரு எளிய செயலாக்கத்தைக் காட்டுகிறது. ஜாவாஸ்கிரிப்ட் குறியீடு `.lazy` வகுப்பு பார்வைக்கு வருவதைக் கவனித்து, பின்னர் படத்தை ஏற்றுகிறது.

கன்டெய்னர் வினவல்களைப் பயன்படுத்தி தூய சிஎஸ்எஸ் சோம்பல் ஏற்றுதல் (மேம்பட்டது)

மிகவும் மேம்பட்ட அணுகுமுறை சிஎஸ்எஸ் கன்டெய்னர் வினவல்களைப் பயன்படுத்துகிறது, இது உண்மையிலேயே ஜாவாஸ்கிரிப்ட் இல்லாத சோம்பல் ஏற்றுதலுக்கான திறனை வழங்குகிறது. கன்டெய்னர் வினவல்கள், வியூபோர்ட்டை விட, ஒரு பெற்றோர் உறுப்பின் அளவு அல்லது நிலையின் அடிப்படையில் பாணிகளைப் பயன்படுத்த உங்களை அனுமதிக்கின்றன. படத்தை ஒரு கன்டெய்னருக்குள் வைத்து, அந்த கன்டெய்னர் எப்போது தெரியும் என்பதைக் கண்டறிய ஒரு கன்டெய்னர் வினவலைப் பயன்படுத்துவதன் மூலம் (எ.கா., அதன் `display` பண்பை `block` அல்லது `inline-block` என ஜாவாஸ்கிரிப்ட் அல்லது பிற வழிமுறைகள் மூலம் அமைப்பதன் மூலம்), நீங்கள் படத்தை ஏற்றுவதை முற்றிலும் சிஎஸ்எஸ்-இல் தூண்டலாம்.

கருத்தியல் எடுத்துக்காட்டு:

<div class="image-container">
    <img src="placeholder.jpg" data-src="actual-image.jpg" alt="Image Description">
</div>

/* Define the container */
.image-container {
  container-type: inline-size;
  display: none; /* Initially hidden */
}

/* Show the image container using javascript based on some criteria */
.image-container.visible {
   display: inline-block;
}

/* Define the image with the initial placeholder */
.image-container img {
  content: url(placeholder.jpg); /* Placeholder image */
  width: 100%;
  height: auto;
}

/* Container Query to load the actual image */
@container image-container (inline-size > 0px) {
  .image-container img {
    content: url(attr(data-src)); /* Load the actual image */
  }
}

விளக்கம்:

1. .image-container ஆரம்பத்தில் மறைக்கப்பட்டுள்ளது.
2. ஜாவாஸ்கிரிப்ட் (அல்லது மற்றொரு பொறிமுறை) கன்டெய்னரை பார்வைக்கு கொண்டு வருகிறது (எ.கா., அது பார்வைக்கு அருகில் இருக்கும்போது .visible வகுப்பைச் சேர்ப்பதன் மூலம்).
3. கன்டெய்னரின் அளவு 0 ஐ விட அதிகமாக இருக்கும்போது (அதாவது, அது தெரியும் போது) @container விதி தூண்டப்படுகிறது.
4. பின்னர், படத்தின் content பண்பு, data-src பண்பிலிருந்து உண்மையான பட URL உடன் புதுப்பிக்கப்படுகிறது.

கன்டெய்னர் வினவல் அடிப்படையிலான சோம்பல் ஏற்றுதலுக்கான முக்கியக் குறிப்புகள்:

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

சிஎஸ்எஸ் சோம்பல் ஏற்றுதலுக்கான சிறந்த நடைமுறைகள்

நீங்கள் எந்த குறிப்பிட்ட நுட்பத்தைத் தேர்வு செய்தாலும், சிஎஸ்எஸ் சோம்பல் ஏற்றுதலை செயல்படுத்தும்போது நினைவில் கொள்ள வேண்டிய சில சிறந்த நடைமுறைகள் இங்கே:

• ப்ளேஸ்ஹோல்டர்களைப் பயன்படுத்தவும்: படங்கள் மற்றும் பிற வளங்கள் ஏற்றப்படும் போது எப்போதும் ப்ளேஸ்ஹோல்டர்களை வழங்கவும். இது உள்ளடக்கம் நகர்வதைத் தடுக்கிறது மற்றும் சிறந்த பயனர் அனுபவத்தை வழங்குகிறது. உண்மையான படங்களின் மங்கலான பதிப்புகளை ப்ளேஸ்ஹோல்டர்களாகப் பயன்படுத்தலாம்.
• படங்களை மேம்படுத்தவும்: தரத்தை இழக்காமல் கோப்பு அளவுகளைக் குறைக்க உங்கள் படங்கள் வலைக்காக சரியாக மேம்படுத்தப்பட்டுள்ளன என்பதை உறுதிப்படுத்தவும். TinyPNG அல்லது ImageOptim போன்ற கருவிகளைப் பயன்படுத்தவும்.
• அளவுகளை அமைக்கவும்: ஏற்றுதலின் போது தளவமைப்பு மாற்றங்களைத் தடுக்க, படங்கள் மற்றும் ஐபிரேம்களுக்கு எப்போதும் அகலம் மற்றும் உயரம் பண்புகளைக் குறிப்பிடவும்.
• பிழைகளைக் கையாளவும்: வளங்கள் ஏற்றத் தவறும்போது ஏற்படும் சூழ்நிலைகளை நேர்த்தியாக நிர்வகிக்க பிழை கையாளுதலைச் செயல்படுத்தவும்.
• முழுமையாக சோதிக்கவும்: உங்கள் சோம்பல் ஏற்றுதல் செயலாக்கம் எதிர்பார்த்தபடி செயல்படுகிறதா என்பதை உறுதிப்படுத்த, வெவ்வேறு சாதனங்கள், உலாவிகள் மற்றும் நெட்வொர்க் நிலைமைகளில் அதை சோதிக்கவும். செயல்திறன் மேம்பாடுகளை அளவிட Google PageSpeed Insights போன்ற கருவிகளைப் பயன்படுத்தவும்.
• முக்கிய வளங்களுக்கு முன்னுரிமை கொடுங்கள்: மடிப்புக்கு மேலே உள்ளவை போன்ற முக்கியமான வளங்கள், சிறந்த ஆரம்ப பயனர் அனுபவத்தை வழங்க ஆர்வத்துடன் ஏற்றப்படுவதை உறுதிசெய்யவும்.
• மாற்று வழிகளைக் கருத்தில் கொள்ளுங்கள்: நீங்கள் பயன்படுத்தும் குறிப்பிட்ட சிஎஸ்எஸ் அம்சங்களை ஆதரிக்காத உலாவிகளுக்கு மாற்று வழிமுறைகளை வழங்கவும்.

நிஜ உலக எடுத்துக்காட்டுகள் மற்றும் பயன்பாட்டு வழக்குகள்

சோம்பல் ஏற்றுதல் பரந்த அளவிலான வலைத்தளங்கள் மற்றும் பயன்பாடுகளுக்குப் பொருந்தும். இங்கே சில பொதுவான பயன்பாட்டு வழக்குகள் உள்ளன:

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

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

முடிவுரை

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

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