وقتی صفحهای با ۵۰ تا عکس باز میکنید، بدون Lazy Loading همه عکسها باید لود شوند، حتی آنهایی که در پایین صفحه هستند و کاربر هنوز نمیبیندشان. این یعنی مرورگر باید دهها درخواست شبکه بزند، مگابایتها داده دانلود کند و منابع پردازشی مصرف کند، همه اینها برای محتوایی که شاید کاربر هرگز نبیند. Lazy Loading این مشکل را حل میکند.
در این مقاله به صورت کامل بررسی میکنیم که Lazy Loading چیست، چطور کار میکند، چطور پیادهسازی میشود، و در چه مواردی باید و نباید از آن استفاده کرد. این تکنیک یکی از سادهترین راههای بهبود Core Web Vitals و سرعت اولیه لود صفحه است.
Lazy Loading چیست؟
Lazy Loading (بارگذاری تنبل) یک استراتژی بهینهسازی است که بر اساس آن، منابع صفحه فقط در زمانی که واقعاً مورد نیاز هستند بارگذاری میشوند. به جای اینکه همه تصاویر، ویدیوها و محتوا را به یکباره هنگام بارگذاری صفحه دانلود کنیم، هر بخش را دقیقاً وقتی که کاربر به آن نزدیک میشود لود میکنیم.
این رویکرد کاملاً منطقی است: چرا باید برای محتوایی که کاربر هنوز نمیبیند پهنای باند و زمان صرف کرد؟ Lazy Loading جواب این سوال است.
مزایای Lazy Loading
لود سریعتر اولیه صفحه
با Lazy Loading، صفحه با تعداد کمتری درخواست HTTP شروع میشود. مرورگر فقط تصاویر و محتوای visible area (قسمتی که کاربر میبیند) را دانلود میکند. این باعث میشود صفحه خیلی سریعتر interactive شود و کاربر زودتر بتواند با آن تعامل داشته باشد. این مستقیماً بر FID (First Input Delay) و LCP (Largest Contentful Paint) تأثیر مثبت میگذارد.
مصرف کمتر دیتا
خیلی از کاربران به پایین صفحه نمیرسند. بدون Lazy Loading، این کاربران مجبور هستند همه تصاویر پایین صفحه را دانلود کنند، حتی اگر هرگز آنها را نبینند. با Lazy Loading، فقط برای آنچه که کاربر واقعاً میبیند دیتا مصرف میشود. این برای کاربران موبایل که اغلب اینترنت محدود یا پرهزینه دارند بسیار ارزشمند است.
کاهش مصرف منابع
سرور درخواستهای کمتری میگیرد، مرورگر منابع کمتری صرف رندر کردن تصاویر نادیده میکند، و باتری دستگاههای موبایل کمتر مصرف میشود. این در مجموع تجربه کاربری بهتری ایجاد میکند.
بهبود Core Web Vitals
Google سرعت لود صفحه را از طریق Core Web Vitals ارزیابی میکند. Lazy Loading مستقیماً بر LCP (کوچک شدن حجم اولیه لود) و CLS (Cumulative Layout Shift که با placeholderهای مناسب کنترل میشود) تأثیر میگذارد.
روشهای پیادهسازی Lazy Loading
روش Native با attribute loading
سادهترین و مدرنترین روش است. فقط attribute loading="lazy" را به تگ img اضافه کنید:
<img src="image.jpg" loading="lazy" alt="توضیح تصویر">
همین کافی است! مرورگرهای مدرن (Chrome 76+، Firefox 75+، Edge 79+، Safari 15.4+) به طور خودکار این کار را انجام میدهند. مرورگر خودش تشخیص میدهد کِی تصویر باید لود شود. هیچ JavaScript نیاز نیست. این امروز best practice توصیهشده است.
همین attribute برای iframeها هم کار میکند:
<iframe src="https://www.youtube.com/embed/..." loading="lazy"></iframe>
روش Intersection Observer API
برای کنترل بیشتر یا پشتیبانی از مرورگرهای قدیمیتر میتوان از Intersection Observer API استفاده کرد. این API تشخیص میدهد کِی یک المان وارد viewport شده است:
- ابتدا src تصویر را در یک data-src attribute ذخیره کنید
- یک IntersectionObserver بسازید
- وقتی المان وارد viewport شد، data-src را به src منتقل کنید
- بعد از لود، observer را از آن المان جدا کنید
این روش انعطاف بیشتری دارد و میتوان threshold (فاصله از viewport) را سفارشی کرد.
کتابخانههای JavaScript
اگر نیاز به قابلیتهای پیشرفتهتر دارید یا میخواهید از مرورگرهای قدیمی پشتیبانی کنید:
- lazysizes: محبوبترین کتابخانه، سبک و قدرتمند با پشتیبانی از responsive images
- lozad.js: بسیار سبک (۱KB)، مبتنی بر Intersection Observer
- vanilla-lazyload: بدون وابستگی، پشتیبانی از تصاویر، ویدیو و iframe
Lazy Loading در وردپرس
از وردپرس ۵.۵ به بعد، lazy loading به صورت خودکار برای تمام تصاویر در محتوا فعال است. وردپرس به طور خودکار loading="lazy" را به تگهای img اضافه میکند. نیازی به افزونه نیست.
اما تصاویر avatar کامنتها و تصاویر template (خارج از محتوا) را ممکن است باید خودتان تنظیم کنید. همچنین اولین تصویر محتوا (که معمولاً featured image است) از lazy loading مستثنا میشود تا LCP بهتر باشد.
افزونههایی مثل WP Rocket و Perfmatters قابلیتهای پیشرفتهتری ارائه میدهند، از جمله lazy loading برای ویدیوهای YouTube (که تا قبل از کلیک کاربر فقط یک تصویر نمایش میدهند و iframe را لود نمیکنند).
چه چیزهایی را Lazy Load کنیم؟
تصاویر
رایجترین و مؤثرترین مورد. تصاویر پایین صفحه، تصاویر گالری، تصاویر محصولات در صفحات فهرست.
آیفریمها و ویدیوها
ویدیوهای YouTube، نقشه گوگل، و سایر embedها معمولاً بسیار سنگین هستند. یک iframe یوتیوب به تنهایی میتواند چندین درخواست HTTP و صدها کیلوبایت اضافه کند. Lazy loading این موارد تأثیر بسیار چشمگیری دارد.
بخش نظرات
بخش کامنتها اغلب در پایین صفحه است و بسیاری از کاربران به آن نمیرسند. میتوان بخش نظرات را با JavaScript به صورت lazy load کرد.
محتوای accordion و tab
تصاویر داخل tabها یا accordionهایی که بسته هستند نیازی به لود فوری ندارند.
نکات مهم و اشتباهات رایج
مهمترین قانون: Above the Fold را Lazy Load نکنید
تصاویری که بالای صفحه هستند و کاربر بلافاصله میبیند باید فوری لود شوند. اضافه کردن loading="lazy" به hero image یا لوگو یک اشتباه بزرگ است که LCP را خراب میکند. برای این تصاویر میتوانید حتی از loading="eager" یا fetchpriority="high" استفاده کنید تا اولویت لود را بالا ببرید.
Placeholder مناسب استفاده کنید
وقتی تصویر هنوز لود نشده، جای خالی داشتن ظاهر خوبی ندارد و ممکن است Layout Shift ایجاد کند. چند راهحل:
- یک رنگ پسزمینه ساده با ابعاد مشخص
- نسخه بسیار کمکیفیت (LQIP - Low Quality Image Placeholder) که بلافاصله لود میشود
- یک placeholder SVG با نسبت ابعاد درست
width و height را مشخص کنید
همیشه ابعاد تصاویر را در HTML مشخص کنید. این باعث میشود مرورگر از ابتدا فضای لازم را رزرو کند و وقتی تصویر لود شد Layout Shift اتفاق نیفتد.
Threshold مناسب تنظیم کنید
تصاویر را یکم قبل از رسیدن کاربر به آنها لود کنید، نه دقیقاً وقتی که وارد viewport شدند. اگر تصویر را خیلی دیر لود کنید، کاربر چند ثانیه صبر میکند تا تصویر ظاهر شود. یک margin معقول (مثلاً ۲۰۰ تا ۵۰۰ پیکسل) قبل از viewport مناسب است.
سئو و Lazy Loading
Googlebot از Lazy Loading پشتیبانی میکند و تصاویر lazy-loaded را ایندکس میکند. اما چند نکته مهم است: از JavaScript محور صرف برای lazy loading اجتناب کنید چون Googlebot جاوااسکریپت را با تاخیر render میکند. روش native (loading="lazy") از نظر سئو کاملاً امن است.
Lazy Loading پیشرفته: فراتر از تصاویر
Code Splitting در JavaScript
Lazy Loading فقط برای تصاویر نیست. در برنامههای JavaScript مدرن، میتوانید ماژولها و componentها را فقط وقتی نیاز است import کنید. این کار حجم اولیه JavaScript بارگذاریشده را کاهش میدهد.
Lazy Loading فونتها
فونتهای وب سنگین هستند. با font-display: swap میتوانید اطمینان حاصل کنید که متن بلافاصله با فونت سیستم نمایش داده شود و بعد از لود فونت اصلی، جایگزین شود.
سوالات متداول
آیا Lazy Loading بر سئو تأثیر منفی دارد؟
خیر، به شرطی که درست پیادهسازی شود. Googlebot از lazy loading پشتیبانی میکند. استفاده از attribute native یعنی loading="lazy" کاملاً امن است. مطمئن شوید که alt text تصاویر مناسب است تا گوگل بتواند محتوای آنها را درک کند حتی پیش از رندر.
آیا باید از کتابخانه JavaScript استفاده کنم یا attribute native کافی است؟
برای اکثر سایتها، attribute loading="lazy" کاملاً کافی است و هیچ کد اضافهای نیاز ندارد. فقط اگر نیاز به قابلیتهای خاص مثل callback پس از لود، threshold سفارشی دقیق، یا پشتیبانی از مرورگرهای قدیمی دارید، از کتابخانه استفاده کنید.
چطور بفهمم Lazy Loading کار میکند؟
در Chrome DevTools، تب Network را باز کنید و صفحه را scroll کنید. باید ببینید که درخواستهای HTTP برای تصاویر دور از viewport تنها وقتی نزدیک میشوند ارسال میشوند. همچنین در تب Elements، تصاویر lazy-loaded قبل از لود یک URL placeholder موقت دارند.
آیا Lazy Loading برای همه نوع سایت مناسب است؟
بله، اما با درجات مختلف تأثیر. سایتهایی که محتوای زیاد مثل بلاگ، فروشگاه یا گالری دارند بیشترین فایده را میبرند. صفحاتی که فقط چند تصویر دارند فایده کمتری میبرند. در هر صورت، اضافه کردن loading="lazy" به تصاویر non-critical هیچ ضرری ندارد.
جمعبندی
Lazy Loading یک تکنیک ساده ولی بسیار مؤثر است که میتواند سرعت لود اولیه صفحه را به طور محسوسی بهبود دهد. با استفاده از loading="lazy" روی تصاویر و iframeها میتوانید فوری شروع کنید. به یاد داشته باشید که تصاویر بالای صفحه را lazy load نکنید، placeholder مناسب اضافه کنید، و ابعاد تصاویر را مشخص کنید تا Layout Shift جلوگیری شود.
Lazy Loading در کنار بهینهسازی تصاویر، یکی از قدرتمندترین ابزارها برای بهبود Core Web Vitals و تجربه کاربری است. اگر سایت روی هاستی با منابع کافی و پاسخدهی سریع باشد، ترکیب این دو تکنیک نتایج بسیار خوبی میدهد.
