Lazy Loading এবং Asynchronous Loading দুটি গুরুত্বপূর্ণ কৌশল যা ওয়েব ডেভেলপমেন্টে পেজ লোডের পারফরম্যান্স উন্নত করতে ব্যবহৃত হয়। এই দুটি কৌশল ওয়েব পেজের লোড টাইম কমাতে এবং ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে সহায়ক। Pure.CSS, যা একটি লাইটওয়েট CSS ফ্রেমওয়ার্ক, সরাসরি Lazy Loading বা Asynchronous Loading ফিচার প্রদান না করলেও, আপনি এগুলিকে সহজেই আপনার ওয়েব অ্যাপ্লিকেশন বা সাইটে ব্যবহার করতে পারেন।
Lazy Loading:
Lazy Loading হল একটি কৌশল যার মাধ্যমে শুধুমাত্র ভিউপোর্টে দৃশ্যমান (visible) এলিমেন্টগুলো লোড হয়। অর্থাৎ, যখন ইউজার স্ক্রল করে নিচে আসে, তখন প্রয়োজনীয় উপাদান (যেমন ছবি বা ভিডিও) লোড করা হয়। এতে পেজের লোড টাইম কমে এবং প্রথমে ওয়েব পেজের কন্টেন্ট দ্রুত প্রদর্শিত হয়।
Asynchronous Loading:
Asynchronous Loading হল একটি কৌশল যার মাধ্যমে স্ক্রিপ্ট বা ডেটা লোড হওয়া শুরু হলেও ওয়েব পেজের অন্য অংশগুলির লোডিং চলতে থাকে। এতে পেজের কন্টেন্ট দ্রুত রেন্ডার হয় এবং ব্যবহারকারীরা ওয়েব পেজের সঙ্গে ইন্টারঅ্যাক্ট করতে পারে যতক্ষণ না অন্য অংশগুলো লোড হচ্ছে।
Lazy Loading এবং Asynchronous Loading in Pure.CSS (for Images and Content)
1. Lazy Loading for Images:
Lazy loading সাধারণত ছবির ক্ষেত্রে ব্যবহৃত হয়, যেখানে বড় সাইজের ইমেজগুলো স্ক্রল করা না হওয়া পর্যন্ত লোড করা হয় না।
Example: Lazy Loading for Images
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy Loading Images with Pure.CSS</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
<style>
/* Custom Styling */
.lazy-load-image {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>Lazy Loading Images Example</h1>
<p>Scroll down to see images loading lazily.</p>
<!-- Image 1 -->
<img class="lazy-load-image" data-src="image1.jpg" alt="Image 1" width="600" height="400">
<!-- Image 2 -->
<img class="lazy-load-image" data-src="image2.jpg" alt="Image 2" width="600" height="400">
<!-- Image 3 -->
<img class="lazy-load-image" data-src="image3.jpg" alt="Image 3" width="600" height="400">
<script>
// Lazy Loading Script
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll('.lazy-load-image');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy-load-image");
observer.unobserve(image);
}
});
});
lazyImages.forEach(image => {
imageObserver.observe(image);
});
});
</script>
</body>
</html>
ব্যাখ্যা:
data-src: সাধারণত src অ্যাট্রিবিউট ব্যবহার করা হয়, কিন্তু এখানেdata-srcব্যবহার করা হয়েছে। ছবি স্ক্রিনে আসা না পর্যন্ত এটি লোড হবে না।IntersectionObserver: এই JavaScript API ব্যবহার করে ছবি স্ক্রিনে আসা পর্যন্ত লোড করা হয়নি। যখন ছবিটি স্ক্রিনে আসবে তখন src অ্যাট্রিবিউট পরিবর্তন হবে এবং ছবি লোড হবে।lazy-load-imageক্লাস: এটির মাধ্যমে আমরা ছবির জন্য Lazy Loading কার্যকর করেছি।
এটি একটি সাধারণ Lazy Loading কৌশল, যা কেবল তখনই ইমেজ লোড করে যখন ব্যবহারকারী স্ক্রল করে ঐ ইমেজের কাছাকাছি পৌঁছায়।
2. Asynchronous Script Loading:
যখন আপনি পেজে স্ক্রিপ্ট লোড করেন, তা যদি সিঙ্ক্রোনাস (synchronous) হয়, তবে পেজের অন্যান্য উপাদানগুলি লোড হওয়ার আগে স্ক্রিপ্টটি সম্পূর্ণ লোড হতে হবে। তবে, Asynchronous Loading এর মাধ্যমে স্ক্রিপ্টগুলি পেজের লোডিং প্রক্রিয়াকে ব্লক না করে চলে।
Example: Asynchronous Script Loading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Asynchronous Script Loading</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<h1>Asynchronous Script Loading Example</h1>
<p>This page will load JavaScript asynchronously.</p>
<button onclick="alert('Hello!')">Click Me</button>
<script async src="https://example.com/script.js"></script>
</body>
</html>
ব্যাখ্যা:
asyncঅ্যাট্রিবিউট: এই অ্যাট্রিবিউটটি JavaScript ফাইলের জন্য ব্যবহৃত হয়, যা ফাইলটি সিঙ্ক্রোনাস লোড না হয়ে, অন্যান্য পেজের উপাদানগুলো লোড হওয়ার সাথে সাথে লোড হতে দেয়। এটি পেজের লোডিং প্রক্রিয়াকে ব্লক করে না।- Script Execution: স্ক্রিপ্টটি পেজের লোডিং শেষ না হওয়া পর্যন্ত অপেক্ষা না করে অ্যাসিনক্রোনাসভাবে চালু হয়।
এটি পেজের অন্যান্য উপাদানগুলোর লোডিং প্রক্রিয়া ব্লক না করে স্ক্রিপ্ট লোড করার একটি ভালো পদ্ধতি।
3. Combining Lazy Loading and Asynchronous Loading for Better Performance
যত বেশি lazy loading এবং asynchronous loading ব্যবহার করা হয়, ওয়েব পেজের লোডিং সময় তত কমে যায়, এবং ব্যবহারকারীরা দ্রুত কন্টেন্ট দেখতে পায়। একত্রে ব্যবহৃত হলে, আপনিও ইমেজ, স্ক্রিপ্ট, এবং অন্যান্য মিডিয়া কন্টেন্টকে দ্রুত লোড করতে সক্ষম হবেন।
Example: Combining Lazy and Asynchronous Loading
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Lazy and Asynchronous Loading Combined</title>
<link rel="stylesheet" href="https://unpkg.com/purecss@2.0.6/build/pure-min.css">
</head>
<body>
<h1>Combining Lazy and Asynchronous Loading</h1>
<!-- Lazy Loading Image -->
<img class="lazy-load-image" data-src="image1.jpg" alt="Lazy Loaded Image" width="600" height="400">
<script async src="https://example.com/script.js"></script>
<script>
// Lazy Loading Script for Images
document.addEventListener("DOMContentLoaded", function() {
const lazyImages = document.querySelectorAll('.lazy-load-image');
const imageObserver = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy-load-image");
observer.unobserve(image);
}
});
});
lazyImages.forEach(image => {
imageObserver.observe(image);
});
});
</script>
</body>
</html>
ব্যাখ্যা:
- এখানে ইমেজের জন্য lazy loading ব্যবহার করা হয়েছে এবং স্ক্রিপ্টের জন্য asynchronous loading। এটি পেজের লোড টাইম দ্রুত করতে সাহায্য করবে কারণ ইমেজ এবং স্ক্রিপ্ট আলাদাভাবে লোড হবে এবং একে অপরকে ব্লক করবে না।
Lazy Loading এবং Asynchronous Loading হল দুইটি অত্যন্ত কার্যকরী কৌশল, যা ওয়েব পেজের লোডিং পারফরম্যান্স উন্নত করতে সাহায্য করে। Lazy Loading ইমেজ এবং কন্টেন্টগুলোকে কেবল তখনই লোড করে যখন তা ব্যবহারকারীর স্ক্রীনে আসে, এবং Asynchronous Loading স্ক্রিপ্টগুলিকে পেজের লোডিং প্রক্রিয়ায় বাধা না দিয়ে লোড করতে সহায়তা করে। Pure.CSS-এ যদিও এই দুটি কৌশল সরাসরি অন্তর্ভুক্ত করা হয়নি, তবুও আপনি সহজে এগুলিকে JavaScript এবং CSS এর মাধ্যমে কার্যকরভাবে ইন্টিগ্রেট করতে পারেন।
Read more
