این تکنیک عملکرد صفحه وب را با بارگذاری تصاویر تنها زمانی که قابل مشاهده یا نزدیک صفحه کاربر هستند، بهبود می بخشد.
در دنیای دیجیتال پر سرعت امروز، داشتن یک وب سایت با کارایی بالا ضروری است. یکی از جنبه های مهم این اطمینان از بارگیری موثر تصاویر شماست. کاربران انتظار دارند یک تجربه مروری روان و سریع داشته باشند و این مقاله به شما نشان می دهد که چگونه به آن دست یابید.
شما مفهوم بارگذاری تنبل تصاویر را بررسی خواهید کرد و یاد خواهید گرفت که چگونه آن را با استفاده از HTML و جاوا اسکریپت با Intersection Observer API پیاده سازی کنید.
Lazy Loading چیست؟
بارگذاری تنبل بارگذاری عناصر مانند تصاویر را تا زمانی که لازم باشد به تاخیر می اندازد. به جای بارگیری همه تصاویر هنگام بارگیری یک صفحه، بارگذاری تنبل فقط تصاویری را بارگیری می کند که در حال حاضر قابل مشاهده هستند یا در نزدیکی منطقه مشاهده کاربر هستند. این بهبود در عملکرد وب سایت باعث کاهش زمان بارگذاری اولیه و حفظ پهنای باند می شود.
چرا از بارگذاری تنبل استفاده کنیم؟
چندین دلیل قانع کننده برای استفاده از بارگذاری تنبل تصاویر در وب سایت شما وجود دارد، مانند:
- بارگذاری صفحه اولیه سریعتر: بارگذاری تنبل مانع از بارگذاری یکباره همه تصاویر می شود و زمان بارگذاری اولیه صفحه را کاهش می دهد. کاربران می توانند زودتر با سایت شما تعامل داشته باشند که منجر به تجربه کاربری بهتری می شود.
- بهبود پاسخگویی صفحه: با بارگیری تصاویر در حین پیمایش کاربران، وب سایت واکنشگرا و روان باقی می ماند و از پیمایش و پیمایش روان و بدون نیاز به منتظر ماندن برای بارگیری تمام محتوا اطمینان حاصل می کند.
- صرفه جویی در پهنای باند: بارگذاری تنبل باعث صرفه جویی در پهنای باند می شود و آن را برای کاربران تلفن همراه و کسانی که اتصال اینترنت آهسته دارند ایده آل می کند. این می تواند مصرف داده های وب سایت شما را کاهش دهد و به نفع کاربران باشد.
- مزایای سئو: موتورهای جستجو مانند گوگل سرعت صفحه را به عنوان یک فاکتور رتبه بندی در نظر می گیرند. بارگذاری تنبل می تواند با بهبود زمان بارگذاری بر عملکرد سئو سایت شما تأثیر مثبت بگذارد.
اکنون که فهمیدید چرا بارگذاری تنبل مفید است، بیایید نحوه اجرای آن را بررسی کنیم.
پیاده سازی Lazy Loading: نشانه گذاری HTML
برای شروع، باید کد HTML خود را تغییر دهید تا ویژگی loading=”lazy” را در تگ‌های خود قرار دهید.
<body>
<main>
<section>
<img src="./image-one-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-two-high.jpg" alt="" loading="lazy" />
</section>
<section>
<img src="./image-three-high.jpg" alt="" loading="lazy" />
</section>
</main>
</body>
ویژگی loading در HTML برای کنترل رفتار بارگذاری عناصر در یک صفحه وب استفاده می شود. وقتی loading=”lazy” را روی تگ تنظیم می‌کنید، به مرورگر می‌گوید بارگیری منبع را تا زمانی که نیاز است به تعویق بیندازد.
در حال حاضر صفحه به شکل زیر است:
پیاده سازی Lazy Loading: پیاده سازی جاوا اسکریپت
برای اینکه بارگذاری تنبل خود را به سطح بعدی ببرید، از Intersection Observer API استفاده کنید. این API به شما امکان می دهد زمانی که یک عنصر وارد یا خارج می شود مشاهده کنید.
دلیل استفاده از Intersection Observer برای بارگذاری تنبل تصاویر ساده است: وقتی صفحه بارگیری می شود، تصویری با کیفیت پایین تر دریافت می کند.
سپس، هنگامی که این تصویر در نمای مشاهده می شود، جاوا اسکریپت آن را با نسخه با کیفیت بالاتر تعویض می کند. برای عملی کردن این موضوع، HTML خود را تغییر دهید.
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-one-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-one-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-two-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-two-high.jpg"
/>
</section>
<section>
<img
<!-- Low-quality image as a placeholder -->
src="./image-three-low.webp"
alt=""
loading="lazy"
<!-- High-quality image stored in the data attribute -->
data-src="./image-three-high.jpg"
/>
</section>
در اینجا منبع تصویر اولیه نسخه با کیفیت پایین و تصویر با کیفیت بالا منبع ثانویه است. سپس صفحه به شکل زیر است:
در مرحله بعد، تمام تصاویری را که می خواهید لود شوند انتخاب کنید:
"use strict";
const lazyImages = document.querySelectorAll('img[loading="lazy"]');
پس از آن، یک شی IntersectionObserver ایجاد کنید.
const observer = new IntersectionObserver();
سپس ورودی ها (آرایه ای از اشیاء IntersectionObserverEntry که نشان دهنده عناصر در حال مشاهده و تقاطع آنها با viewport است) و مشاهدهگر (خود نمونه IntersectionObserver) را ارسال کنید.
const observer = new IntersectionObserver((lazyImages, observer) => { });
در مرحله بعد، تقاطع ها را بررسی کنید و هر زمان که آن عنصر قطع شد، تصویر با کیفیت پایین را با تصویر با کیفیت بالا تعویض کنید.
const observer = new IntersectionObserver((lazyImages, observer) => {
lazyImages.forEach((image) => {
if (image.isIntersecting) {
const lazyImage = image.target;
lazyImage.src = lazyImage.dataset.src; // Swap the image source
observer.unobserve(lazyImage); // Stop observing this image
}
});
});
در نهایت، مشاهده را برای هر عنصر مقداردهی اولیه کنید.
// Start observing each lazy image
lazyImages.forEach((lazyImage) => { observer.observe(lazyImage); });
و با آن، بارگذاری تنبل را با جاوا اسکریپت پیاده سازی کرده اید.
ملاحظات بارگذاری تنبل
هنگام ادغام بارگذاری تنبل، توجه به جنبه های زیر ضروری است:
- دسترسی: برای اطمینان از دسترسی، متن جایگزین برای تصاویر با ویژگی alt ارائه کنید. این اطلاعات به عنوان یک نقطه اتکا برای صفحه خوان ها عمل می کند.
- سازگاری مرورگر: قبل از اجرای بارگذاری تنبل، سازگاری آن را با مرورگرهای مختلف تأیید کنید. همه مرورگرها از این ویژگی پشتیبانی نمی کنند. در موارد خاص، گنجاندن پلی‌فیل ممکن است ضروری باشد، به‌ویژه برای مرورگرهای قدیمی‌تر. ابزاری مانند CanIUse منبع ارزشمندی برای ارزیابی سازگاری مرورگر است.
- آزمایش: آزمایش جامع اجرای بارگذاری تنبل در طیفی از دستگاه‌ها و ابعاد صفحه‌نمایش از اهمیت بالایی برخوردار است.
افزایش سرعت وب سایت و تجربه کاربری
وقتی بارگذاری تنبل را برای تصاویر در وب سایت خود وارد می کنید، می توانید سرعت سایت خود را افزایش دهید و تجربه کاربری را بهبود ببخشید. زمان بارگذاری سریعتر و تجربه‌های مرور روان‌تر چیزی است که کاربران می‌خواهند، و این تکنیک همان را ارائه می‌کند.
به علاوه، از سئوی بهتر لذت خواهید برد و در مصرف پهنای باند صرفه جویی خواهید کرد. بنابراین، چرا صبر کنید؟ امروز با این روش ساده و در عین حال قدرتمند بهینه سازی وب سایت خود را شروع کنید.