تصور کنید وارد یک فروشگاه بزرگ می‌شوید. آیا فروشنده تمام اجناس انبار را همان لحظه اول جلوی پای شما پهن می‌کند؟ قطعا نه. شما ابتدا ویترین را می‌بینید و هر چه جلوتر می‌روید، قفسه‌های بعدی برایتان نمایان می‌شود. در دنیای وب هم دقیقاً همین اتفاق می‌افتد. واقعیت این است که بین ۷۰ تا ۸۰ درصد حجم یک صفحه وب را تصاویر و ویدیوها تشکیل می‌دهند. اگر قرار باشد وقتی کاربر روی لینک سایت شما کلیک می‌کند، مرورگر تمام تصاویر از بالا تا پایینِ پایین (حتی آن‌هایی که در انتهای صفحه هستند و شاید کاربر هیچ‌وقت به آن‌ها نرسد) را دانلود کند، سرعت سایت به شدت افت می‌کند.

اینجاست که مفهومی به نام لیزی لودینگ (Lazy Loading) یا همان «بارگذاری تنبل» به کمک ما می‌آید تا تجربه کاربری و سئو سایت را نجات دهد.

لیزی لودینگ دقیقاً چیست و چه می‌کند؟

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

به محض اینکه کاربر شروع به اسکرول کردن می‌کند و به تصاویر پایین‌تر نزدیک می‌شود، مرورگر تازه دست به کار شده و آن تصاویر را بارگذاری می‌کند. این کار چند مزیت حیاتی دارد:

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

تنظیمات طلایی در افزونه WP Rocket

اگر از وردپرس استفاده می‌کنید، یکی از بهترین ابزارها برای مدیریت این موضوع، افزونه WP Rocket است. در بخش رسانه (Media) این افزونه، گزینه‌ای برای فعال‌سازی لیزی لودینگ تصاویر وجود دارد. توصیه جدی این است که حتماً این گزینه را فعال کنید. شاید برای ویدیوها و آیفریم‌ها (اگر تعدادشان کم است) حیاتی نباشد، اما برای تصاویر یک «باید» است.

با این حال، یک نکته ظریف وجود دارد: لیزی لودینگ مثل یک چاقوی دو لبه است. اگر درست از آن استفاده نکنید، ممکن است به جای بهبود سئو، به آن ضربه بزنید.

استثنائات حیاتی؛ هر چیزی را نباید «تنبلی» کرد!

بزرگترین اشتباه در استفاده از لیزی لودینگ، اعمال آن روی تصاویری است که در نگاه اول (Above the Fold) دیده می‌شوند. تصویر شاخص یک مقاله، بنر اصلی صفحه لندینگ یا حتی لوگوی سایت، نباید لیزی لود شوند.

چرا؟ چون این تصاویر معمولاً تشکیل‌دهنده شاخص LCP (Largest Contentful Paint) هستند. اگر تصویر اصلی سایت شما لیزی لود شود، مرورگر منتظر می‌ماند تا تمام کدهای جاوا اسکریپت اجرا شوند و بعد تازه می‌فهمد که باید این عکس را لود کند. این یعنی یک تأخیر بزرگ در نمایش مهم‌ترین بخش صفحه به کاربر!

ما می‌خواهیم تصاویر بالا با بالاترین اولویت (Priority) لود شوند و تصاویر پایین صفحه با لیزی لودینگ.

چگونه تصاویر خاص را مستثنی کنیم؟

برای اینکه به افزونه‌هایی مثل WP Rocket بفهمانیم که فلان تصویر را لیزی لود نکند، چند راه کاربردی داریم:

  1. استفاده از آدرس مستقیم تصویر: می‌توانید آدرس دقیق عکس (مثلاً عکس محصول اول) را در لیست سفید افزونه قرار دهید.
  2. استفاده از کلاس CSS: هر المانی در سایت یک کلاس دارد. اگر تمام تصاویر شاخص شما کلاس wp-post-image دارند، می‌توانید این کلاس را مستثنی کنید. اما مراقب باشید! اگر این کلاس خیلی عمومی باشد، ممکن است لیزی لودینگ را در کل سایت از کار بیندازید.
  3. اضافه کردن ویژگی دستی به کد: بهترین و تمیزترین راه این است که به تیم فنی بگویید به تصاویر بخش بالایی سایت، کلاس خاصی مثل skip-lazy اضافه کنند یا ویژگی loading=”eager” را در کد HTML قرار دهند. این کار به مرورگر می‌گوید این یک دانه عکس را با تمام سرعت و بدون معطلی لود کن.

چالش ابعاد تصاویر و پرش صفحه (Layout Shift)

تابه‌حال برایتان پیش آمده که در حال مطالعه یک سایت باشید و ناگهان با لود شدن یک عکس، کل متن پایین برود و خط را گم کنید؟ به این اتفاق Layout Shift می‌گویند که برای گوگل و امتیاز CLS بسیار مهم است.

راه‌حل ساده است: تصاویر باید ابعاد مشخص (عرض و ارتفاع) داشته باشند. وقتی ابعاد یک عکس (مثلاً ۶۰۰ در ۶۰۰ پیکسل) در کد مشخص باشد، مرورگر حتی قبل از اینکه عکس لود شود، یک فضای خالی مربعی برای آن رزرو می‌کند. در تنظیمات WP Rocket گزینه‌ای وجود دارد که اگر تصویری ابعاد نداشت، خودش آن را اضافه کند. این کار باعث می‌شود چیدمان صفحه شما موقع لود شدن تصاویر، مثل زلزله تکان نخورد!

جمع‌بندی: از ۳۷ به ۹۰ با یک حرکت درست

سئو تکنیکال یعنی همین جزئیات هوشمندانه. در تست‌های واقعی، سایتی که امتیاز لایت‌هاوس آن حدود ۳۷ بود، تنها با تنظیم درست کش و مدیریت صحیح لیزی لودینگ (یعنی فعال کردن برای پایین صفحه و غیرفعال کردن برای المان‌های اصلی مثل لوگو و بنر)، به امتیازی بالای ۹۰ رسید.

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