تصاویر به یکی از پرکاربردترین انواع محتوا در برنامه های کاربردی وب مدرن تبدیل شده اند. اگرچه استفاده از تصاویر پس‌زمینه ظاهر و احساس برنامه را بهبود می‌بخشد، افزایش اندازه تصاویر می‌تواند به طور قابل توجهی بر عملکرد برنامه تأثیر بگذارد.

حتی زمانی که تصاویر به درستی بهینه سازی شوند، می توانند وزن کمی داشته باشند و کاربران را در انتظار دسترسی به محتوای وب سایت شما نگه دارند. اغلب آنها بی حوصله می شوند و به جای دیگری پیمایش می کنند مگر اینکه راه حلی برای بارگذاری تصویر بیابید که با درک سرعت تداخل نداشته باشد.

در این مقاله، با پنج روش برای بارگذاری تنبل تصاویر آشنا می شوید که می توانید برای بهبود تجربه کاربری در وب سایت خود، به جعبه ابزار بهینه سازی وب خود اضافه کنید. می‌توانید از این روش‌ها برای بارگذاری تنبل انواع تصاویر مختلف از جمله تصاویر پس‌زمینه، تصاویر درون خطی و تصاویر بنر استفاده کنید.

خوراکی های کلیدی

بارگذاری سریعتر صفحه: بارگذاری تنبل تصاویر با بارگذاری تنها تصاویری که در نمای کاربر قابل مشاهده هستند به بهبود سرعت وب سایت شما کمک می کند.

تجربه کاربری بهتر: بارگذاری تنبل تجربه مرور را افزایش می دهد، به ویژه برای کاربرانی که در اتصالات کندتر یا دستگاه های تلفن همراه با کاهش زمان بارگذاری، استفاده می کنند.

صرفه جویی در پهنای باند: تصاویر فقط در صورت نیاز بارگذاری می شوند، پهنای باند صرفه جویی می شود و مصرف داده هم برای کاربران و هم برای سرورها کاهش می یابد.

پیاده سازی ساده: شما می توانید به راحتی بارگذاری تنبل را با استفاده از ویژگی HTML "loading" یا روش های پیشرفته تر مانند Intersection Observer API پیاده سازی کنید.

مزایای سئو : زمان بارگذاری سریع‌تر از بارگذاری تنبل می‌تواند به رتبه‌بندی بهتر موتورهای جستجو کمک کند و به عملکرد بهتر سایت شما در نتایج جستجو کمک کند.

Lazy Loading چیست؟

بارگذاری تنبل تصاویر به معنای بارگذاری تصاویر در وب سایت ها به صورت ناهمزمان است. می‌توانید پس از بارگیری کامل محتوای بالای صفحه یا زمانی که فقط باید در نمای مرورگر ظاهر شود، محتوا را در اسکرول بارگذاری کنید. این بدان معناست که اگر کاربران تا آخر اسکرول نکنند، تصاویری که در پایین صفحه قرار می‌گیرند حتی بارگذاری نمی‌شوند و در نهایت عملکرد اپلیکیشن را بهبود می‌بخشند.

درک نحوه فعال کردن بارگذاری تنبل در HTML برای توسعه دهندگان وب ضروری است زیرا اکثر وب سایت ها به این رویکرد نیاز دارند. به عنوان مثال، سعی کنید در شکار آنلاین مورد علاقه خود برای عکس های با وضوح بالا جستجو کنید، و به زودی متوجه خواهید شد که وب سایت تنها تعداد محدودی از تصاویر را بارگیری می کند. همانطور که صفحه را به پایین اسکرول می کنید، تصویر مکان نگهدار به سرعت با تصویر واقعی برای پیش نمایش پر می شود.

به عنوان مثال، به لودر در Unsplash.com توجه کنید: پیمایش آن بخش از صفحه در نمای، باعث جایگزینی یک مکان نگهدار با یک عکس با وضوح کامل می شود:

چرا باید بارگذاری تنبل را برای تصاویر اجرا کنید؟

درک نحوه بارگذاری تنبل تصاویر برای بهینه سازی عملکرد وب، به ویژه در صفحاتی با محتوای بصری سنگین بسیار مهم است. در اینجا چند دلیل عالی وجود دارد که چرا باید بارگذاری تصاویر را برای وب سایت خود در نظر بگیرید:

1. زمان بارگذاری DOM را بهبود می بخشد

اگر وب سایت شما از جاوا اسکریپت برای نمایش محتوا یا ارائه نوعی عملکرد به کاربران استفاده می کند، بارگیری DOM به سرعت بسیار مهم می شود. معمول است که اسکریپت ها قبل از شروع اجرا منتظر بمانند تا DOM به طور کامل بارگیری شود. در سایتی با تعداد قابل توجهی از تصاویر، بارگذاری تنبل - یا بارگیری تصاویر به صورت ناهمزمان - می تواند بین کاربرانی که از وب سایت شما می مانند یا خارج می شوند تفاوت ایجاد کند.

2. استفاده از پهنای باند محدود

از آنجایی که اکثر راه‌حل‌های بارگذاری تنبل تنها در صورتی کار می‌کنند که کاربر به مکانی که تصاویر در داخل پنجره قابل مشاهده هستند پیمایش کند، اگر کاربران هرگز به آن نقطه نرسند، آن تصاویر هرگز بارگذاری نمی‌شوند. این به معنای صرفه جویی قابل توجهی در پهنای باند است، که اکثر کاربران، به ویژه آنهایی که از طریق دستگاه های تلفن همراه و اتصالات کند به وب دسترسی دارند، از شما تشکر خواهند کرد.

خوب، بارگذاری تنبل تصاویر به عملکرد وب سایت کمک می کند، اما بهترین راه برای انجام آن چیست؟

هیچ راه کاملی وجود ندارد

اگر جاوا اسکریپت زندگی می‌کنید و نفس می‌کشید، پیاده‌سازی راه‌حل بارگذاری تنبل خودتان نباید مشکلی باشد. هیچ چیز بیشتر از اینکه خودتان چیزی را کدنویسی کنید به شما کنترل نمی دهد.

از طرف دیگر، می‌توانید برای یافتن رویکردهای قابل اجرا در وب مرور کنید یا به یک تالار گفتگو بپیوندید و ایده‌های خود را به اشتراک بگذارید. من این کار را انجام دادم و با این پنج تکنیک جالب آشنا شدم.

1. بارگذاری تنبل بومی

بارگذاری تنبل بومی تصاویر و iframe ها روشی ساده برای بارگذاری تنبل محتوا هنگامی است که کاربر صفحه وب را پیمایش می کند. فقط باید ویژگی loading=”lazy” را به تصاویر و iframe های خود اضافه کنید.

 <img src="myimage.jpg" loading="lazy" alt="..." /> <iframe src="content.html" loading="lazy"></iframe>

همانطور که می بینید، بدون جاوا اسکریپت، بدون جابجایی دینامیک مقدار ویژگی src، فقط HTML ساده قدیمی. این روش یک مثال کامل از نحوه اضافه کردن بارگذاری تنبل در HTML بدون هیچ سربار اضافی است.

ویژگی "بارگیری" به ما این امکان را می دهد که تصاویر و آی فریم های خارج از صفحه را تا زمانی که کاربران به مکان خود در صفحه اسکرول کنند به تاخیر بیاندازیم. بارگذاری می تواند هر یک از این سه مقدار را داشته باشد:

lazy : برای بارگذاری تنبل عالی عمل می کند

eager : به مرورگر دستور می دهد تا محتوای مشخص شده را فوراً بارگیری کند

auto : گزینه Lazy load یا Lazy load را به مرورگر واگذار می کند.

این روش هیچ رقیبی ندارد: سربار آن صفر است و راهی ساده و تمیز برای بارگذاری تنبل تصاویر در HTML است. با این حال، اگرچه اکثر مرورگرهای اصلی از ویژگی "بارگیری" پشتیبانی خوبی دارند، برخی از مرورگرها هنوز تا زمان نوشتن از پشتیبانی کامل برخوردار نیستند.

برای یک مقاله عمیق در مورد این ویژگی عالی برای تصاویر بارگذاری تنبل HTML، از جمله راه حل های پشتیبانی مرورگر، "بارگذاری تنبل تصویر بومی برای وب" Addy Osmani را از دست ندهید.

2. بارگذاری تنبل با استفاده از Intersection Observer API

Intersection Observer API یک رابط مدرن است که می توانید از آن برای بارگذاری تنبل تصاویر و سایر محتواها استفاده کنید.

در اینجا نحوه معرفی این API توسط MDN آمده است:

Intersection Observer API راهی برای مشاهده ناهمزمان تغییرات در تقاطع یک عنصر هدف با یک عنصر اجداد یا با نمای یک سند سطح بالا فراهم می کند.

به عبارت دیگر، Intersection Observer API تقاطع یک عنصر با عنصر دیگر را به صورت ناهمزمان تماشا می کند.

Denys Mishunov یک آموزش عالی هم در Intersection Observer و هم در مورد بارگذاری تنبل تصاویر با استفاده از آن دارد. در اینجا راه حل او به نظر می رسد.

فرض کنید می‌خواهید یک گالری تصاویر را با تنبلی بارگذاری کنید. نشانه گذاری برای هر تصویر به شکل زیر است:

 <img src="image.jpg" alt="test image">

در اینجا، مسیر تصویر در داخل یک ویژگی src قرار دارد، نه یک ویژگی src . دلیل آن این است که استفاده از src به این معنی است که تصویر بلافاصله بارگیری می شود، که آن چیزی نیست که شما می خواهید.

در CSS، می توانید به هر تصویر یک مقدار حداقل ارتفاع بدهید، مثلاً 100 پیکسل. این به هر مکان نگهدار تصویر (عنصر img بدون ویژگی src) یک بعد عمودی می دهد:

 img { } min-height: 100px; /* more styles here */

سپس، در سند جاوا اسکریپت، باید یک شی پیکربندی ایجاد کنید و آن را با یک نمونه intersectionObserver ثبت کنید:

 // create config object: rootMargin and threshold // are two properties exposed by the interface const config = { rootMargin: '0px 0px 50px 0px', threshold: 0 }; // register the config object with an instance // of intersectionObserver let observer = new intersectionObserver(function(entries, self) { // iterate over each entry entries.forEach(entry => { // process just the images that are intersecting. // isIntersecting is a property exposed by the interface if(entry.isIntersecting) { // custom function that copies the path to the img // from src to src preloadImage(entry.target); // the image is now in place, stop watching self.unobserve(entry.target); } }); }, config);

در نهایت، می توانید روی همه تصاویر خود تکرار کنید و آنها را به این نمونه iterationObserver اضافه کنید:

 const imgs = document.querySelectorAll('[src]'); imgs.forEach(img => { observer.observe(img); });

محاسن این راه حل این است که اجرای آن سخت است، موثر است و محل تلاقی آن است. آبزرور کارهای سنگین را از نظر محاسبات انجام می دهد.

وقتی صحبت از پشتیبانی مرورگر به میان می آید، همه مرورگرهای اصلی از Intersection Observer API در آخرین نسخه های خود پشتیبانی می کنند، به جز IE 11 و Opera Mini.

می توانید در مقاله دنیس با Intersection Observer API و جزئیات این پیاده سازی بیشتر آشنا شوید.

3. Lozad.js

یک جایگزین سریع و آسان برای اجرای بارگذاری تنبل تصاویر این است که به کتابخانه JS اجازه دهید بیشتر کار را برای شما انجام دهد.

Lozad.js یک لودر تنبل بسیار کارآمد، سبک و قابل تنظیم است که از جاوا اسکریپت خالص و بدون وابستگی استفاده می کند. این یک ابزار عالی برای بارگیری تنبل جاوا اسکریپت است که کاربر تصاویر، ویدیوها و iframe ها را اسکرول می کند.

می‌توانید Lozad را با npm/Yarn نصب کنید و با استفاده از بسته‌کننده ماژول انتخابی خود آن را وارد کنید:

 npm install --save lozad yarn add lozad

 import lozad from 'lozad';

از طرف دیگر، می‌توانید به سادگی کتابخانه را با استفاده از یک CDN دانلود کنید و آن را در یک تگ <script> به انتهای صفحه HTML اضافه کنید:

 <script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>

در مرحله بعد، برای پیاده سازی اولیه، کلاس lozad را به دارایی در نشانه گذاری خود اضافه کنید:

 <img class="lozad" src="img.jpg">

در نهایت Lozad را در سند JS خود مثال بزنید:

 const observer = lozad(); observer.observe();

تمام جزئیات استفاده از کتابخانه را در مخزن Lozad GitHub خواهید یافت.

اگر نمی‌خواهید در مورد Intersection Observer API بیاموزید یا به‌دنبال اجرای سریعی هستید که برای انواع محتوا اعمال شود، Lozad یک انتخاب عالی است.

4. بارگذاری تنبل با جلوه تصویر تار

اگر خواننده متوسط ​​هستید، مطمئناً متوجه شده اید که سایت چگونه تصویر اصلی را در یک پست بارگذاری می کند. اولین چیزی که می بینید یک کپی تار و با وضوح پایین از تصویر است، در حالی که نسخه با وضوح بالا آن در حال بارگذاری تنبل است:

وقتی با استفاده از CSS و جاوا اسکریپت با هم، تصاویر را در HTML بارگذاری می کنید، می توانید به یک اثر مشابه دست پیدا کنید.

شما می توانید با استفاده از این جلوه تاری جالب به روش های مختلفی بار تنبل را به تصاویر اضافه کنید.

تکنیک مورد علاقه من توسط کریگ باکلر است. در اینجا تمام خوبی های این راه حل وجود دارد:

عملکرد: فقط 463 بایت CSS و 1007 بایت کد جاوا اسکریپت کوچک شده.

پشتیبانی از صفحه نمایش شبکیه چشم

بدون وابستگی: به jQuery یا دیگر کتابخانه ها و فریم ورک ها نیاز نیست.

به طور تدریجی برای مقابله با مرورگرهای قدیمی و جاوا اسکریپت ناموفق بهبود یافته است.

شما می توانید همه چیز را در مورد آن در How to Build Your Own Progressive Image Loader بخوانید و کد را در مخزن GitHub پروژه دانلود کنید.

5. Yall.js

Yall.js یک کتابخانه جاوا اسکریپت پر از ویژگی است که از Intersection Observer API برای بارگیری تنبل جاوا اسکریپت هنگام اسکرول کردن کاربر استفاده می کند. این برنامه از تصاویر، ویدئوها، iframe ها پشتیبانی می کند و در صورت لزوم به طور هوشمندانه از تکنیک های مدیریت رویدادهای سنتی استفاده می کند.

هنگامی که Yall را در سند خود قرار می دهید، باید آن را به صورت زیر مقداردهی اولیه کنید:

 <script src="yall.min.js"></script> <script> document.addEventListener("DOMContentLoaded", yall); </script>

در مرحله بعد، برای بارگذاری تنبل یک عنصر img ساده، تنها کاری که باید در نشانه گذاری خود انجام دهید این است:

 <img class="lazy" src="placeholder.jpg" src="image-to-lazy-load.jpg" alt="Alternative text to describe image." >

به موارد زیر توجه کنید:

شما کلاس تنبل را به عنصر اضافه می کنید.

مقدار src یک تصویر نگهدارنده مکان است.

مسیر تصویری که می‌خواهید لود شود در داخل ویژگی src است.

در اینجا مزایای Yall.js آمده است:

عملکرد عالی با Intersection Observer API.

پشتیبانی فوق العاده از مرورگر (به IE11 برمی گردد).

هیچ وابستگی دیگری لازم نیست.

برای کسب اطلاعات بیشتر در مورد آنچه Yall.js می تواند ارائه دهد و برای پیاده سازی های پیچیده تر، به راحتی می توانید صفحه پروژه را در GitHub تحلیل کنید.

نتیجه گیری

و شما آن را دارید - پنج راه برای بارگذاری تنبل تصاویر که می توانید شروع به آزمایش و آزمایش در پروژه های خود کنید. درک نحوه بارگذاری تنبل تصاویر یک مهارت ارزشمند برای هر توسعه دهنده وب است. شما می توانید با پیوستن به این انجمن SitePoint در زمینه بهینه سازی تصویر، تکنیک های بیشتری بیاموزید یا تخصص خود را با دیگران به اشتراک بگذارید.

سوالات متداول درباره بارگذاری تنبل تصاویر

Lazy Loading تصاویر چیست؟

بارگذاری تنبل یک تکنیک توسعه وب است که برای بهبود عملکرد صفحات وب با به تعویق انداختن بارگذاری برخی عناصر مانند تصاویر تا زمانی که نیاز باشد استفاده می شود. بارگذاری تنبل تصاویر به این معنی است که تصاویر تنها زمانی بارگذاری می شوند که وارد نمای کاربر یا قابل مشاهده در صفحه وب شوند، نه اینکه همه تصاویر به محض رندر اولیه صفحه بارگیری شوند.

مزایای بارگذاری تنبل تصاویر چیست؟

بهبود عملکرد وب سایت

ارائه سریعتر صفحه اولیه و کاهش استفاده از پهنای باند.

تجربه کاربری را افزایش دهید.

بار سرور را کاهش دهید و کارایی کلی برنامه وب خود را بهبود بخشید.

چگونه تصاویر را در HTML بارگذاری کنیم؟

برای اضافه کردن بار تنبل به تصاویر در HTML، می‌توانید از ویژگی “loading” استفاده کنید. ویژگی "loading" یک ویژگی استاندارد HTML است که به شما امکان می دهد زمان بارگذاری یک تصویر را کنترل کنید. برای فعال کردن تصاویر HTML lazy load، ویژگی “loading” را با مقدار “lazy” به عنصر img اضافه کنید. این به مرورگر او میگوید که تصویر را فقط زمانی بارگذاری کند که می‌خواهد وارد viewport شود. در اینجا یک مثال است:

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

آیا بارگذاری تصاویر تنبل خوب است؟

بله، استفاده از تصاویر بارگذاری تنبل HTML به دلایل متعددی یک عمل مفید در توسعه وب در نظر گرفته می شود. سرعت بارگذاری صفحه را با به تعویق انداختن بارگذاری غیر ضروری تصویر افزایش می دهد و در نتیجه رندر اولیه صفحه سریعتر و تجربه کاربر بهبود می یابد. این رویکرد پهنای باند را حفظ می‌کند و برای کاربرانی که برنامه‌های داده محدود یا اتصالات اینترنتی کندتر دارند، مفید است. علاوه بر این، با افزایش سرعت بارگذاری صفحه، تأثیر مثبتی بر بهینه سازی موتورهای جستجو (SEO) می گذارد و با اصول بهبود تدریجی همسو می شود. با کاهش زمان انتظار درک شده و ارائه نشانه های بصری در حین بارگیری، بارگیری تنبل به تجربه مرور روان تر و کارآمدتر، به ویژه در دستگاه های تلفن همراه کمک می کند.

چگونه متوجه می شوید که یک تصویر تنبل بارگذاری شده است؟

برای تأیید اینکه آیا نحوه بارگیری تنبل تصاویر HTML را به درستی اجرا کرده اید، می توانید کد منبع HTML را تحلیل کنید یا از ابزارهای توسعه دهنده مرورگر استفاده کنید. با کلیک راست روی تصویر و انتخاب "Inspect" یا "Inspect Element"، می توانید عنصر img را که تصویر را در پنل ابزارهای توسعه دهنده نشان می دهد، تحلیل کنید. به دنبال وجود ویژگی "loading" در عنصر img باشید. اگر ویژگی "loading" روی "lazy" تنظیم شود، نشان می دهد که تصویر برای بارگذاری تنبل پیکربندی شده است. با استفاده از ابزارهای توسعه دهنده مرورگر، می توانید به سرعت از وضعیت بارگذاری تنبل تصاویر با تحلیل ویژگی های آنها مطلع شوید.

چگونه می توانم بارگذاری تنبل را برای تصاویر با استفاده از جاوا اسکریپت اجرا کنم؟

برای پیاده سازی بارگذاری تنبل برای تصاویر با استفاده از جاوا اسکریپت، می توانید از کتابخانه هایی مانند Lozad.js یا Yall.js استفاده کنید، یا می توانید راه حل سفارشی خود را با استفاده از Intersection Observer API بنویسید. این کتابخانه‌ها به شما اجازه می‌دهند تا با نظارت بر زمان ورود عناصر به viewport و بارگیری آن‌ها فقط در آن لحظه، محتوا را در اسکرول بارگذاری کنید.

آیا بارگذاری تنبل تصاویر بر سئو تاثیر می گذارد؟

بله، بارگذاری تنبل تصاویر می تواند تأثیر مثبتی بر سئو داشته باشد. با بهبود زمان بارگذاری صفحه و کاهش حجم داده هایی که در ابتدا باید بارگذاری شوند، بارگذاری تنبل می تواند به رتبه بهتر وب سایت شما در نتایج موتورهای جستجو کمک کند. سرعت بالای صفحه یک عامل رتبه بندی شناخته شده برای موتورهای جستجو مانند گوگل است و بارگذاری تنبل می تواند با اطمینان از اینکه تصاویر وب سایت شما عملکرد کلی را کاهش نمی دهد به این امر کمک کند.

تفاوت بین بارگذاری تنبل بومی و بارگذاری تنبل مبتنی بر جاوا اسکریپت چیست؟

بارگیری تنبل بومی به پشتیبانی داخلی مرورگر برای ویژگی "loading" در تگ‌های <img> و <iframe> متکی است. این روش ساده است و نیازی به جاوا اسکریپت اضافی ندارد. از سوی دیگر، بارگذاری تنبل مبتنی بر جاوا اسکریپت که اغلب با استفاده از کتابخانه هایی مانند Lozad.js یا Intersection Observer API اجرا می شود، انعطاف پذیری و سفارشی سازی بیشتری را ارائه می دهد.

آیا بارگذاری تنبل تصاویر دارای معایبی است؟

نقطه ضعف اصلی این است که تصاویر ممکن است با اندکی تاخیر بارگذاری شوند، زیرا کاربر صفحه را به سمت پایین حرکت می کند. همچنین، برخی از مرورگرهای قدیمی ممکن است از بارگذاری تنبل پشتیبانی نکنند.

آیا می توانم تصاویر را با تنبلی در وردپرس بارگیری کنم؟

بله، شما می توانید به راحتی تصاویر را در وردپرس بارگذاری کنید. اکنون بسیاری از تم ها به طور پیش فرض از بارگذاری تنبل بومی پشتیبانی می کنند، اما می توانید از افزونه هایی مانند «Lazy Load by WP Rocket» یا «Smush» برای اجرای بارگذاری تنبل بدون هیچ کدنویسی استفاده کنید.

خبرکاو