لیزی لودینگ چیست و گوگل در مورد آن چه می‌گوید

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

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

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

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

انگیزه اصلی برای استفاده از این تکنیک، بهینه‌سازی عملکرد سایته، اونم از جنبه‌های مختلف. مارتین اسپلیت توضیح میده که صرفه‌جویی توی منابع فقط به معنی کم کردن زمان لود صفحه نیست و خیلی گسترده‌تره. اون میگه: «شما میخواید از انجام کاری که هیچ نتیجه‌ای نداره جلوگیری کنید. همچنین، اگه کلی منابع غیرضروری داشته باشید، مثلا عکس‌هایی که اگه نباشن هم مقاله مشکلی پیدا نمیکنه، لود کردنشون از همون اول منطقی نیست. چون مرورگر رو درگیر چیزهایی میکنه که شاید آخرش اصلا به کار نیان».

این حرف یعنی چی؟ یعنی فرض کنید یه مقاله خیلی طولانی با ۲۰ تا عکس دارید. کاربری که وارد صفحه میشه، شاید فقط دو سه پاراگراف اول رو بخونه و از صفحه بره بیرون. اگه شما همه ۲۰ تا عکس رو همون اول لود کنید، پهنای باند و باتری اون کاربر رو برای ۱۷ تا عکسی که هیچوقت ندیده هدر دادید. ولی با لیزی لودینگ، فقط همون عکس‌های اولیه لود میشن و بقیه منتظر میمونن.

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

تکامل تکنولوژی لیزی لودینگ هم نشون میده که شیوه‌های توسعه وب چقدر پخته‌تر شدن. به گفته اسپلیت: «چند سال پیش، دقیق یادم نیست کی، ولی مرورگرها یه ویژگی بومی یا نیتیو برای تگ‌های عکس و آی‌فریم معرفی کردن به اسم loading. با این ویژگی شما میتونید مشخص کنید که منبع به صورت lazy لود بشه و خود مرورگر زحمت کار رو بکشه، به جای اینکه مجبور باشید از یه سری کدهای جاوا اسکریپت برای این کار استفاده کنید».

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

اشتباهات مرگبار در پیاده‌سازی که سئو رو خراب میکنه

اون پادکست گوگل به چندتا اشتباه خیلی مشخص اشاره کرد که میتونه تاثیر منفی روی سئوی سایت بذاره. بزرگترین اشتباه اینه که لیزی لودینگ رو برای محتوای بالای صفحه یا «above-the-fold» به کار ببرید. مخصوصا برای عکس‌های اصلی یا «هیرو ایمیج‌ها» که کاربر به محض ورود به صفحه میبینتشون.

اسپلیت دلیل فنی این مشکل رو اینطور توضیح میده: «اگه همه عکس‌ها لیزی لود بشن، یعنی عکس‌هایی که باید فورا دیده بشن هم با تاخیر لود میشن. یه نکته‌ای در مورد لیزی لودینگ وجود داره. مرورگرها چیزی به اسم اسکنر منابع (resource scanner) دارن. کار این اسکنر اینه که دنبال عکس‌ها میگرده و چون میدونه عکس‌ها خیلی مهمن و نبودشون تو چشم میزنه، سعی میکنه هرچه زودتر شروع به لود کردنشون کنه».

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

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

لیزی لودینگ و تاثیر مستقیم روی سیگنال‌های رتبه‌بندی گوگل

پیاده‌سازی لیزی لودینگ به طور مستقیم روی معیارهایی به اسم «Core Web Vitals» تاثیر میذاره که این معیارها خودشون سیگنال‌های رتبه‌بندی توی الگوریتم گوگل هستن. یعنی اگه این معیارها رو رعایت نکنید، ممکنه رتبه سایت شما توی نتایج جستجو پایین بیاد. مهم‌ترین ارتباط بین لیزی لودینگ و این معیارها، با معیاری به اسم «Largest Contentful Paint» یا به اختصار LCP هست.

جان مولر توی اون پادکست مستقیما در مورد تاثیر لیزی لودینگ روی Core Web Vitals پرسید و اسپلیت تایید کرد: «اگه از لیزی لودینگ جایی که باید استفاده نکنید، احتمالا روی بعضی از جنبه‌های Core Web Vitals تاثیر میذاره. به احتمال زیاد روی LCP. جالبه که اگه برای عکس‌هایی که نباید هم ازش استفاده کنید، باز هم LCP تحت تاثیر قرار میگیره. چون باعث میشه نقاشی یا رندر شدن محتوا دیرتر از زمانی که میتونست اتفاق بیفته، انجام بشه».

معیار LCP زمان لازم برای رندر شدن بزرگترین عنصر محتوایی (مثلا بزرگترین عکس یا بلوک متنی) که در دید کاربر قرار داره رو اندازه میگیره. طبق گزارش‌ها، گوگل برای LCP یه آستانه ۲.۵ ثانیه‌ای رو به عنوان عملکرد «خوب» در نظر میگیره.

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

البته اسپلیت اشاره میکنه که این تاثیر روی رتبه‌بندی در اکثر موارد خیلی کمه: «این کار یه سری پیامدهای رندرینگ و Core Web Vitals داره که روی رتبه‌بندی تاثیر میذاره، ولی توی اکثر موارد یه فاکتور خیلی خیلی کوچیکه. البته استثنا هم وجود داره، ولی معمولا اونقدرها هم مهم نیست».

وقتی پیاده‌سازی‌های سفارشی دردسرساز میشن

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

اسپلیت ریسک ایندکس نشدن رو اینطور توضیح میده: «از طرف دیگه، ایندکس شدن، مخصوصا اگه از یه تکنولوژی سفارشی برای لیزی لودینگ استفاده میکنید، مثل یه کتابخونه یا کدی که خودتون نوشتید، اگه درست انجام نشه خیلی محتمله که روی ایندکس تاثیر بذاره. ما کتابخونه‌های لیزی لودینگ زیادی دیدیم که مثلا از یه چیزی مثل اتریبیوت data.source به جای اتریبیوت source استفاده میکنن».

مشکل اصلی اینه که سیستم‌های خزنده گوگل این اتریبیوت‌های سفارشی رو نمیشناسن. تگ‌های استاندارد عکس توی HTML از اتریبیوت «src» برای مشخص کردن آدرس عکس استفاده میکنن. بعضی از کتابخونه‌های لیزی لودینگ میان و در زمان بارگذاری اولیه صفحه، از یه اتریبیوت سفارشی مثل «data-src» یا «data-source» استفاده میکنن. بعدا با استفاده از جاوا اسکریپت، وقتی زمان نمایش عکس رسید، محتوای این اتریبیوت رو به اتریبیوت اصلی «src» منتقل میکنن.

حالا اگه این کتابخونه جاوا اسکریپت به هر دلیلی درست کار نکنه، این جابجایی اتفاق نمیفته. به گفته اسپلیت: «اگه کتابخونه مشکل داشته باشه، ممکنه در نهایت اصلا عکس رو لود نکنه. منظور از لود کردن در اینجا، قرار دادن آدرس واقعی عکس توی اتریبیوت source هست. اگه آدرس توی این اتریبیوت نباشه و توی یه اتریبیوت سفارشی دیگه باشه، ما اون رو پیدا نمیکنیم».

با وجود این ریسک‌ها، چرا هنوز خیلیا از این کتابخونه‌های سفارشی استفاده میکنن؟ دلیلش اینه که گاهی اوقات این کتابخونه‌ها امکانات پیشرفته‌تری ارائه میدن که لیزی لودینگ بومی مرورگر اون‌ها رو نداره. اسپلیت به چندتا از این کاربردها اشاره میکنه: «شما ممکنه بخواید یه پیش‌نمایش با رزولوشن پایین از عکس رو لود کنید، یا از یه آدرس دیگه یا از یه دیتا یو‌آر‌ال که توی سورس گذاشتید، و بعدا وقتی کاربر به اونجا رسید، اون رو با نسخه باکیفیت اصلی جایگزین کنید».

چطور بفهمیم لیزی لودینگ درست کار میکنه؟

متخصص‌های سئو میتونن با استفاده از ابزارهای گوگل سرچ کنسول، کارایی پیاده‌سازی لیزی لودینگ رو بررسی کنن. ابزار «URL Inspection Tool» اصلی‌ترین روش برای تایید پیاده‌سازی صحیح برای انواع محتواست.

اسپلیت یه فرایند مشخص برای این کار پیشنهاد میکنه: «برید توی سرچ کنسول، از URL Inspection Tool استفاده کنید و به HTML رندر شده نگاه کنید. کاری به اسکرین‌شات نداشته باشید. اگه HTML رندر شده شامل همه آدرس‌های عکس توی اتریبیوت source تگ‌های عکس بود، اگه همه محتوایی که لیزی لود کردید توش بود، مثلا یه ویجت سفارشی یا محتوای دیگه‌ای مثل کامنت‌های زیر مقاله، اگه همه اینها وجود داشتن، پس مشکلی ندارید».

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

برای بررسی عملی، جان مولر پیشنهاد میکنه که خروجی HTML رندر شده رو کپی کنید و توش دنبال تگ‌های عکس بگردید تا مطمئن بشید که اتریبیوت «src» اونها به درستی پر شده.

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

ایندکس شدن عکس‌ها هم یه راه دیگه برای تایید این موضوعه. به گفته اسپلیت: «اگه عکس‌ها به صورت انبوه توسط گوگل شناسایی نمیشن، این میتونه به این معنی باشه که لیزی لودینگ عکس‌های شما به درستی پیاده‌سازی نشده».

لیزی لودینگ ویدیو؛ یه داستان متفاوت

لیزی لود کردن ویدیوها در مقایسه با عکس‌ها پیچیدگی‌های بیشتری داره. ویدیوها منابع خیلی سنگینی هستن و به همین دلیل لیزی لودینگ براشون خیلی ارزشمنده، ولی پیاده‌سازیش نیاز به برنامه‌ریزی دقیق داره.

اسپلیت رویکرد فنی این کار رو اینطور توضیح میده: «ویدیوها منابع خیلی سنگینی هستن. خیلی وقتا منطقیه که اول یه عکس پوستر (تصویر پیش‌نمایش) لود بشه و فقط وقتی ویدیو وارد دید کاربر شد، خود ویدیو لود بشه. من معتقدم راه‌هایی توی HTML برای این کار با استفاده از اتریبیوت poster وجود داره، ولی میدونم که خیلیا هم از پیاده‌سازی‌های سفارشی برای این کار استفاده میکنن».

اتریبیوت «poster» به مرورگرها اجازه میده که یه عکس جایگزین برای ویدیو نشون بدن. این رویکرد اول یه عکس ثابت رو لود میکنه و بعد که کاربر به ویدیو رسید، شروع به بارگذاری فایل ویدیویی میکنه.

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

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

کی و کجا از لیزی لودینگ استفاده کنیم؟

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

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

نکته کلیدی اینه که بین منابع «ضروری» و «غیرضروری» تفاوت قائل بشیم. منابع ضروری شامل هر محتوایی میشه که کاربر به محض ورود به صفحه میبینه. منابع غیرضروری هم شامل محتوایی میشه که شاید کاربر هیچوقت در طول بازدیدش از صفحه باهاشون روبرو نشه.

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

در مورد عکس‌های تزئینی، داستان کلا فرق میکنه. به گفته اسپلیت، عکس‌های تزئینی رو «به احتمال زیاد اصلا نباید به عنوان یه تگ IMG توی HTML قرار داد. به احتمال زیاد باید از CSS برای نمایششون استفاده کرد و مشخص کرد که این عکس‌ها هیچ معنی و مفهوم خاصی ندارن».

این رویکرد مبتنی بر CSS، عکس‌های تزئینی رو از ملاحظات سئو خارج میکنه و در عین حال ظاهر طراحی سایت رو حفظ میکنه. بهینه‌سازی فنی باید در خدمت تجربه کاربری باشه، نه مستقیما برای موتورهای جستجو.

راهنمای فنی برای بهترین پیاده‌سازی

ساده‌ترین راه برای پیاده‌سازی لیزی لودینگ برای اکثر سایت‌ها، استفاده از اتریبیوت بومی loading هست. کافیه روی تگ‌های عکس و آی‌فریم، loading=”lazy” رو اضافه کنید تا خود مرورگر به صورت هوشمند و بدون نیاز به جاوا اسکریپت، لیزی لودینگ رو کنترل کنه.

پشتیبانی مرورگرها از این اتریبیوت به طور گسترده‌ای در همه پلتفرم‌های اصلی فراگیر شده. این پیاده‌سازی بومی نگرانی‌های مربوط به سازگاری رو از بین میبره و پیچیدگی فنی رو در مقایسه با راه‌حل‌های مبتنی بر جاوا اسکریپت کم میکنه.

یه نکته خیلی مهم اینه که حتما برای عکس‌ها اتریبیوت‌های عرض و ارتفاع (width و height) رو مشخص کنید. این کار از جابجایی طرح‌بندی (layout shift) در حین لیزی لودینگ جلوگیری میکنه. این اتریبیوت‌ها به مرورگر اجازه میدن که قبل از لود شدن عکس، فضای مناسب رو براش رزرو کنه و پایداری بصری صفحه رو در طول فرایند بارگذاری حفظ کنه.

رابطه بین لیزی لودینگ و «اسکرول بی‌نهایت» (infinite scroll) هم ملاحظات فنی بیشتری رو مطرح میکنه. در حالی که هر دو تکنیک شامل بارگذاری تدریجی محتوا هستن، اسکرول بی‌نهایت معمولا بخش‌های کاملا جدیدی از محتوا رو بارگذاری میکنه، نه اینکه فقط بارگذاری منابع داخل محتوای موجود رو بهینه‌سازی کنه.

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

---

لیزی لودینگ از نگاهی دیگر: چرا یک تغییردهنده بازی است؟

خب، تا اینجا دیدیم که متخصص‌های گوگل چه نگاهی به این قضیه دارن. حالا بیایید از یه زاویه دیگه به ماجرا نگاه کنیم و ببینیم چرا لیزی لودینگ رو به عنوان یه «تغییردهنده بازی» برای عملکرد وب‌سایت‌ها میشناسن.

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

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

لیزی لودینگ دقیقا چیست و چطور کار میکند؟

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

این تکنیک معمولا برای موارد زیر استفاده میشه:

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

روند کار لیزی لودینگ به این صورته:

1. صفحه فقط محتوای ضروری رو بارگذاری میکنه (مثلا عکس‌های بالای صفحه، اسکریپت‌های اصلی و استایل‌ها).
2. عناصر غیرضروری در حالت جایگزین باقی میمونن (مثلا یه عکس تار یا با کیفیت پایین).
3. وقتی کاربر به پایین اسکرول میکنه یا با بخش خاصی از صفحه تعامل میکنه، عناصر لیزی لود شده برای بارگذاری فعال میشن.
4. مرورگر این عناصر رو فقط در صورت نیاز دریافت و نمایش میده و اینجوری زمان بارگذاری اولیه صفحه رو کم میکنه.

تفاوت لیزی لودینگ و ایگر لودینگ (Eager Loading)

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

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

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

مزایای کلیدی استفاده از لیزی لودینگ

استفاده از این تکنیک چندین مزیت مهم داره:

• سرعت بارگذاری سریع‌تر صفحه: با کم کردن حجم اولیه صفحه، باعث بارگذاری سریع‌تر در اولین بازدید و کسب نمرات عملکرد بالاتر در گزارش‌هایی مثل Google PageSpeed Insights میشه.
• مصرف پهنای باند کمتر: فقط دارایی‌ها رو در صورت لزوم بارگذاری میکنه و اینجوری هم منابع سرور رو ذخیره میکنه و هم به کاربرای موبایل با دستگاه‌های قدیمی‌تر و اینترنت کندتر کمک میکنه.
• تجربه کاربری بهتر: با اولویت‌بندی محتوای قابل مشاهده، از تعاملات کند و با تاخیر جلوگیری میکنه و فورا همه معیارهای Core Web Vitals رو بهبود میبخشه.
• مزایای سئو: به بهبود Core Web Vitals کمک میکنه که منجر به رتبه‌های بالاتر در نتایج جستجو و بهینه‌سازی بودجه تبلیغات در گوگل به خاطر امتیاز کیفیت بالاتر صفحه میشه.

چگونه لیزی لودینگ را برای بخش‌های مختلف سایت پیاده کنیم؟

با اعمال استراتژیک لیزی لودینگ روی منابعی مثل جاوا اسکریپت، CSS، HTML، عکس‌ها و ویدیوها، وب‌سایت‌ها میتونن عملکرد بهتری داشته باشن. بیایید هر کدوم رو جداگانه بررسی کنیم.

لیزی لودینگ جاوا اسکریپت

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

• استفاده از defer و async: میتونید از اتریبیوت‌های defer یا async توی تگ اسکریپت استفاده کنید تا اجرای فایل‌های جاوا اسکریپت رو به تاخیر بندازید. اتریبیوت defer تضمین میکنه که اسکریپت بعد از اینکه کل سند HTML پردازش شد، اجرا میشه. async هم اسکریپت رو به صورت ناهمزمان لود و اجرا میکنه بدون اینکه جلوی پردازش HTML رو بگیره.
• تقسیم کد (Code Splitting): فریم‌ورک‌های مدرن جاوا اسکریپت مثل ری‌اکت، انگولار و ویو از تقسیم کد پشتیبانی میکنن. این قابلیت به شما اجازه میده که فقط بخش‌های ضروری جاوا اسکریپت رو در ابتدا لود کنید و بقیه رو بر اساس تقاضا (مثلا با تعامل کاربر یا اسکرول کردن) بارگذاری کنید.

لیزی لودینگ HTML

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

• بارگذاری محتوای پویا: میتونید از جاوا اسکریپت (مثلا با fetch() یا AJAX) استفاده کنید تا بخش‌هایی از محتوای HTML خودتون رو بعد از اینکه صفحه لود شد، بارگذاری کنید. این روش برای بخش‌هایی مثل نظرات کاربران، نقد و بررسی‌ها یا جزئیات محصول که برای نمایش اولیه صفحه ضروری نیستن، خیلی مفیده.
• استفاده از جایگزین (Placeholder): وقتی محتوا در حال بارگذاریه، از جایگزین‌هایی مثل اسکلت لودر (skeleton loaders) یا اسپینرهای بارگذاری استفاده کنید تا تجربه کاربری رو بهتر کنید و از پریدن محتوا موقع لود شدن جلوگیری کنید.

لیزی لودینگ CSS

فایل‌های CSS هم میتونن لیزی لود بشن، مخصوصا وقتی استایل مربوط به محتواییه که فورا قابل مشاهده نیست (مثلا محتوایی که با اسکرول کردن کاربر ظاهر میشه).

• استایل‌های حیاتی (Critical CSS): یه راه حل خوب اینه که CSS مورد نیاز برای رندر محتوای بالای صفحه (above-the-fold) رو به صورت درون‌خطی (inline) یا در بخش head سند قرار بدید. این کار باعث میشه صفحه فورا با استایل‌های اصلی ظاهر بشه.
• بارگذاری دینامیک بقیه استایل‌ها: بقیه استایل‌های غیرضروری رو میتونید با جاوا اسکریپت و به صورت دینامیک بارگذاری کنید. مثلا استایل‌های مربوط به انیمیشن‌ها رو فقط زمانی لود کنید که کاربر با عنصری که انیمیشن داره تعامل میکنه.

لیزی لودینگ عکس و ویدیو

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

• برای عکس‌ها: ساده‌ترین راه استفاده از اتریبیوت loading=”lazy” در تگ <img> هست. این کار به مرورگر میگه که بارگذاری عکس رو تا زمانی که به دید کاربر نزدیک نشده، به تاخیر بندازه.
• برای ویدیوها: میتونید همین اتریبیوت loading=”lazy” رو برای تگ‌های iframe (مثلا برای ویدیوهای یوتیوب) هم استفاده کنید. یه راه دیگه اینه که یه «نما» (facade) یا همون تصویر بندانگشتی از ویدیو رو نشون بدید و فقط وقتی کاربر روش کلیک کرد، خود ویدیو رو لود کنید.
• استفاده از جایگزین یا LQIP: برای جلوگیری از جابجایی طرح‌بندی (CLS)، یه نسخه کوچیک و تار از عکس (Low-Quality Image Placeholder) رو نشون بدید تا زمانی که عکس باکیفیت کامل لود بشه.

پنج اشتباه رایج در لیزی لودینگ که باید از آنها دوری کنید

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

1. لیزی لود کردن محتوای بالای صفحه (Above-the-Fold)
   • اشتباه: اعمال لیزی لودینگ روی محتوای حیاتی که در بالای صفحه ظاهر میشه (مثل عکس هیرو، لوگو، دکمه‌های فراخوان اصلی).
   • تاثیر: این کار باعث تاخیر در نمایش این عناصر کلیدی میشه و زمان LCP رو افزایش میده. در نتیجه، کاربر ممکنه برای دیدن محتوای اصلی با تاخیر مواجه بشه که باعث نارضایتی و تجربه کاربری بد میشه.
   • راه‌حل: به جای لیزی لودینگ، از پیش‌بارگذاری (Preloading) برای عکس‌ها، فونت‌ها و منابع دیگه‌ای که جزو محتوای قابل مشاهده اولیه هستن، استفاده کنید. با استفاده از <link rel=”preload”> میتونید به مرورگر بگید که این منابع رو زودتر از بقیه دریافت کنه.
2. رزرو نکردن فضا برای عناصر لیزی لود شده
   • اشتباه: مشخص نکردن اتریبیوت‌های width و height برای عکس‌ها، آی‌فریم‌ها و ویدیوها وقتی لیزی لودینگ اعمال میشه.
   • تاثیر: وقتی یه عکس یا ویدیو بدون ابعاد مشخص لیزی لود میشه، طرح‌بندی صفحه ممکنه به طور غیرمنتظره‌ای با لود شدن منبع جابجا بشه. این اتفاق باعث Cumulative Layout Shift یا CLS میشه که یکی دیگه از معیارهای مهم Core Web Vitals هست.
   • راه‌حل: همیشه اتریبیوت‌های عرض و ارتفاع رو برای همه عکس‌ها، ویدیوها و آی‌فریم‌ها تنظیم کنید. این کار فضای لازم رو در طرح‌بندی رزرو میکنه، حتی قبل از اینکه رسانه لود بشه.
3. لیزی لود کردن بیش از حد فایل‌های جاوا اسکریپت و CSS
   • اشتباه: به تاخیر انداختن اسکریپت‌ها و استایل‌شیت‌های حیاتی (مثلا اون‌هایی که برای طرح‌بندی صفحه، تعاملات یا انیمیشن‌های اصلی لازمن).
   • تاثیر: این کار میتونه باعث مشکلات مسدودکننده رندر بشه. یعنی مرورگر نمیتونه صفحه رو درست نمایش بده چون منتظر لود شدن این منابع میمونه. این مشکل میتونه منجر به پدیده‌ای به اسم FOUC (Flash of Unstyled Content) بشه که در اون صفحه برای لحظه‌ای بدون استایل ظاهر میشه.
   • راه‌حل: CSS حیاتی رو به صورت درون‌خطی (inline) بارگذاری کنید و فقط اسکریپت‌های غیرضروری که روی رندر اولیه تاثیری ندارن رو به تاخیر بندازید.
4. لیزی لود کردن منابع خارجی بدون بهینه‌سازی
   • اشتباه: اعمال لیزی لودینگ روی منابع شخص ثالث مثل تبلیغات، فیدهای شبکه‌های اجتماعی یا اسکریپت‌های ردیابی که از سرورهای خارجی لود میشن.
   • تاثیر: منابع شخص ثالث میتونن به شدت سرعت بارگذاری صفحه رو کم کنن چون به سرورهای خارجی متکی هستن که ممکنه سریع یا قابل اعتماد نباشن. لیزی لود کردن این منابع بدون مدیریت صحیح میتونه باعث تاخیر در بارگذاری بقیه محتوا بشه.
   • راه‌حل: اگه این منابع واقعا ضروری هستن، بارگذاریشون رو به تاخیر بندازید و مطمئن بشید که از یه شبکه تحویل محتوا (CDN) برای عملکرد بهتر دریافت میشن.
5. استفاده از لیزی لودینگ روی محتوای غیرقابل اسکرول
   • اشتباه: اعمال لیزی لودینگ روی محتوایی که همیشه روی صفحه قابل مشاهده است، مثل عناصری که داخل کانتینرهای با موقعیت ثابت (fixed-position) هستن، نوارهای ناوبری یا کروسل‌ها. این عناصر ممکنه هیچوقت لود نشن چون رویداد ورود به دید کاربر براشون فعال نمیشه.
   • راه‌حل: محتوای با موقعیت ثابت مثل نوارهای ناوبری یا کروسل‌ها رو از لیزی لودینگ مستثنی کنید. این عناصر همیشه قابل مشاهده هستن و باید به عنوان بخشی از بارگذاری اولیه صفحه لود بشن.

ابزارها و روش‌های پیاده‌سازی لیزی لودینگ

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

پیاده‌سازی با جاوا اسکریپت و Intersection Observer API

یکی از مدرن‌ترین و کارآمدترین روش‌ها برای پیاده‌سازی لیزی لودینگ با جاوا اسکریپت، استفاده از Intersection Observer API هست. این API به شما اجازه میده به صورت ناهمزمان تغییرات در تقاطع یه عنصر با یه عنصر والد یا با دید اصلی سند (viewport) رو مشاهده کنید. به زبان ساده‌تر، این API مثل یه نگهبانه که به شما خبر میده یه عنصر وارد صفحه نمایش کاربر شده یا نه.

روند کار با این API به این صورته:

1. شما یه «مشاهده‌گر» (Observer) ایجاد میکنید.
2. به این مشاهده‌گر میگید که کدوم عناصر رو زیر نظر بگیره.
3. وقتی یکی از اون عناصر وارد دید کاربر شد، مشاهده‌گر یه تابع (callback) رو اجرا میکنه.
4. داخل اون تابع، شما کاری که میخواید رو انجام میدید، مثلا آدرس عکس واقعی رو جایگزین آدرس جایگزین میکنید.

این روش خیلی بهینه‌تر از روش‌های قدیمی‌تره که از رویدادهای scroll یا resize استفاده میکردن، چون پردازش کمتری از مرورگر میگیره.

پیاده‌سازی‌های پیشرفته‌تر (الگوهای طراحی)

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

• مقداردهی اولیه تنبل (Lazy Initialization): ساده‌ترین روش. اول شی رو برابر با null قرار میدید. هر وقت بهش نیاز شد، چک میکنید اگه null بود، همون لحظه ایجادش میکنید و برمیگردونید.
• پراکسی مجازی (Virtual Proxy): یه شی با همون رابط کاربری شی واقعی ایجاد میکنید. اولین باری که یکی از متدهای این شی مجازی فراخوانی میشه، اون تازه میره شی واقعی رو بارگذاری میکنه و بعد کار رو بهش میسپره.
• شبح (Ghost): شی در یه حالت ناقص بارگذاری میشه. ممکنه اولش فقط شناسه شی رو داشته باشه، ولی اولین باری که به یکی از ویژگی‌هاش دسترسی پیدا کنید، میره و بقیه اطلاعاتش رو بارگذاری میکنه.
• نگهدارنده مقدار (Value Holder): یه شی عمومی که رفتار لیزی لودینگ رو مدیریت میکنه و به جای فیلدهای داده‌ای شی اصلی قرار میگیره.

چطور لیزی لودینگ رو تست کنیم؟

بعد از اینکه لیزی لودینگ رو پیاده کردید، خیلی مهمه که تستش کنید تا مطمئن بشید درست کار میکنه و تجربه کاربری رو خراب نمیکنه.

• ابزارهای توسعه‌دهنده مرورگر (DevTools): این ابزارها بهترین دوست شما هستن. میتونید برید به تب «Network»، شرایط شبکه رو روی اینترنت کند (مثلا Slow 3G) شبیه‌سازی کنید و بعد صفحه رو رفرش کنید. در حالت عادی، نباید عکس‌ها و منابعی که پایین صفحه هستن لود بشن. وقتی اسکرول میکنید، باید ببینید که درخواست‌های جدید برای این منابع در تب Network ظاهر میشن.
• استفاده از شبیه‌سازها و دستگاه‌های واقعی: حتما سایتتون رو روی دستگاه‌های موبایل واقعی یا شبیه‌سازها تست کنید. پلتفرم‌هایی مثل BrowserStack به شما اجازه میدن سایتتون رو روی هزاران دستگاه و مرورگر واقعی تست کنید. این کار بهتون کمک میکنه بفهمید لیزی لودینگ در شرایط مختلف چطور عمل میکنه.
• بررسی مشکلات CLS: همونطور که گفتیم، لیزی لودینگ میتونه باعث جابجایی طرح‌بندی بشه. ابزارهایی مثل Lighthouse در DevTools یا Google PageSpeed Insights میتونن امتیاز CLS صفحه شما رو اندازه‌گیری کنن و بهتون بگن آیا مشکلی وجود داره یا نه.

---

مفاهیم کلیدی که باید بلد باشید:

• Core Web Vitals: معیارهای استاندارد گوگل برای اندازه‌گیری کیفیت تجربه کاربری در سه بعد اصلی: عملکرد بارگذاری، تعامل‌پذیری و پایداری بصری. این معیارها مستقیما روی رتبه‌بندی جستجو تاثیر میذارن.
• Largest Contentful Paint (LCP): یکی از معیارهای Core Web Vitals که زمان لازم برای رندر شدن بزرگترین عنصر محتوایی قابل مشاهده در دید کاربر رو اندازه میگیره. گوگل زمان ۲.۵ ثانیه یا کمتر رو خوب میدونه.
• ایندکسینگ (Indexing): فرایند سیستماتیک گوگل برای کشف، تحلیل و ذخیره محتوای صفحات وب در پایگاه داده جستجوی خودش. پیاده‌سازی نادرست لیزی لودینگ میتونه روی ایندکس شدن تاثیر منفی بذاره.
• کتابخانه‌های جاوا اسکریپت: بسته‌های کد شخص ثالث که قابلیت‌های لیزی لودینگ فراتر از توانایی‌های بومی مرورگر رو ارائه میدن، مثل پیش‌نمایش عکس با کیفیت پایین.
• سرچ کنسول (Search Console): ابزار اصلی وبمسترهای گوگل که اطلاعاتی در مورد عملکرد جستجوی وب‌سایت، وضعیت ایندکس و مشکلات فنی ارائه میده.

پرسش و پاسخ (سوالات متداول)

حالا که با کلیات ماجرا آشنا شدیم، بیایید به چندتا از سوالات پرتکراری که ممکنه براتون پیش اومده باشه جواب بدیم.

سوال: جایگزین لیزی لودینگ چیه؟
جواب: به جای لیزی لودینگ، میتونید عملکرد رو با استفاده از شبکه‌های تحویل محتوا (CDN)، پیش‌بارگذاری (preloading) منابع حیاتی و کم کردن حجم دارایی‌ها (مثلا فشرده‌سازی عکس‌ها) بهینه کنید. البته بهترین راه، ترکیب این تکنیک‌ها با لیزی لودینگه. یعنی هم لیزی لودینگ رو پیاده کنید و هم منابعتون رو از طریق CDN تحویل بدید.

سوال: آیا لیزی لودینگ برای سئو بده؟
جواب: نه. گوگل از لیزی لودینگ بومی پشتیبانی میکنه و حتی اون رو تشویق میکنه. اما پیاده‌سازی نادرست (مثل لیزی لود کردن محتوای مهم بالای صفحه) میتونه به صورت منفی روی ایندکس شدن و رتبه‌بندی تاثیر بذاره. پس مشکل از خود تکنیک نیست، از نحوه استفاده از اونه.

سوال: از کجا بفهمم لیزی لودینگ داره درست کار میکنه؟
جواب: میتونید از ابزار Lighthouse در Chrome DevTools استفاده کنید، گزارش Google PageSpeed Insights رو چک کنید، یا درخواست‌های شبکه رو در تب Network همون DevTools زیر نظر بگیرید تا ببینید آیا دارایی‌های به تاخیر افتاده فقط در صورت نیاز بارگذاری میشن یا نه.

سوال: چطور میتونم لیزی لودینگ رو برای یه عنصر خاص غیرفعال کنم؟
جواب: برای غیرفعال کردن لیزی لودینگ برای یه عنصر خاص، میتونید اتریبیوت loading=”lazy” رو ازش حذف کنید. بعضی از اسکریپت‌ها هم ممکنه از اتریبیوتی مثل data-no-lazy=”true” برای این کار پشتیبانی کنن.

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

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