Native Lazy Loading چیست و چطور در وردپرس کار می‌کند؟

شاید شما هم موقع خوندن یک صفحه‌ی وب متوجه شده باشید که تصاویر یک‌جا نمایش داده نمی‌شن؛ هرچی پایین‌تر اسکرول می‌کنید، تصویر بعدی ظاهر می‌شه. اسم این تکنیک «لود تنبل» یا Lazy Loading است و کارش ساده‌ست: تصویری که کاربر هنوز ندیده، دانلود نمی‌شه.

این قابلیت دیگه چیزی نیست که شما باید فعالش کنید — احتمال زیاد همین حالا روی سایت وردپرسی شما فعاله.وردپرس از سال ۲۰۲۰ خودش این کار رو انجام می‌ده و برای بیشتر سایت‌ها، نصب افزونه‌ی lazy load در سال ۱۴۰۵ یعنی انجام دوباره‌ی کاری که هسته انجام داده. پس سؤال درست، «چطور فعالش کنم» نیست؛ «درست تنظیم شده یا نه» است.

در این مقاله اول می‌بینید Lazy Loading و نسخه‌ی بومی مرورگری‌ش (Native Lazy Loading) چطور کار می‌کنه، بعد چک می‌کنیم روی سایت شما فعاله یا نه، و بعد به مهم‌ترین بخش می‌رسیم: تله‌ای که خیلی از سایت‌ها توش می‌افتن و باعث می‌شه lazy load به‌جای بهتر کردن سرعت، امتیاز Core Web Vitals رو خراب کنه.

لود تنبل (Lazy Loading) چیست؟

Lazy Loading یعنی به تأخیر انداختن دانلود منابع سنگین تا لحظه‌ای که کاربر واقعاً بهشون نیاز داره. در عمل بیشتر برای تصاویر و آیفریم‌ها (مثل ویدئوی امبدشده) استفاده می‌شه.

یک مثال ملموس

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

حالا همون صفحه با lazy load: فقط تصاویر بالای صفحه — همون بخشی که کاربر می‌بینه — دانلود می‌شن. بقیه هرکدوم درست وقتی به محدوده‌ی دید نزدیک می‌شن لود می‌شن. این کار انقدر نرم انجام می‌شه که کاربر معمولاً متوجهش نمی‌شه، ولی تفاوت سرعت رو حس می‌کنه.

خود گوگل هم سال‌هاست در نتایج جستجوی تصاویر همین کار رو می‌کنه؛ اگر در بخش تصاویر گوگل اسکرول کنید، می‌بینید تصاویر دسته‌دسته لود می‌شن. پس این یک ایده‌ی تازه نیست، یک استاندارد تثبیت‌شده‌ست.

Native Lazy Loading چیست و چه فرقی با روش جاوااسکریپتی دارد؟

روش قدیمی و مشکلاتش

قبل از ۲۰۱۹، برای پیاده‌سازی lazy load باید یک کتابخانه‌ی جاوااسکریپت به سایت اضافه می‌کردید. اون فایل وظیفه داشت موقعیت اسکرول کاربر رو تشخیص بده و تصاویر رو در لحظه‌ی مناسب لود کنه.

این روش سه ایراد داشت. اول اینکه خودِ فایل جاوااسکریپت هزینه داشت؛ کاربر باید اول چند صد کیلوبایت اسکریپت دانلود می‌کرد تا بعد بتونه تصاویر رو کم‌تر دانلود کنه. در خیلی از موارد این معامله به ضرر سرعت تموم می‌شد. دوم ناسازگاری بین مرورگرها بود؛ کدی که روی کروم بی‌نقص کار می‌کرد، ممکن بود روی سافاری تصویر خالی نشون بده. سوم هم خطاهای عجیب در ابزارهای تست سرعت مثل PageSpeed Insights و GTmetrix بود: افزونه نصب بود، ولی ابزار همچنان می‌گفت تصاویر شما lazy نمی‌شن.

راه‌حل: انتقال کار به خود مرورگر

منطق پیشنهاد گوگل ساده بود: اگر همه دارن برای این کار جاوااسکریپت می‌نویسن، بهتره خود مرورگر این قابلیت رو داشته باشه. در سال ۲۰۱۹ و با کروم ۷۶، صفت loading به مرورگر اضافه شد؛ توسعه‌دهنده فقط کافیه با یک صفت به مرورگر بگه این تصویر رو تنبل بارگذاری کن و بقیه‌ش کار مرورگره.

کد قبل:

<img src="image.jpg" alt="توضیح تصویر">

کد بعد:

<img src="image.jpg" loading="lazy" alt="توضیح تصویر">

همین. نه فایل جاوااسکریپت، نه کتابخانه، نه عیب‌یابی. صفت loading دو مقدار اصلی داره: lazy (تأخیر تا نزدیک شدن به دید کاربر) و eager (لود فوری، که حالت پیش‌فرض همه‌ی تصاویره).

پشتیبانی مرورگرها در سال ۱۴۰۵

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

صفت loading روی تصاویر از مارس ۲۰۲۲ در تمام مرورگرهای اصلی کار می‌کنه و وضعیتش «به‌طور گسترده در دسترس» است و برای آیفریم هم از دسامبر ۲۰۲۳ در نسخه‌های جدید همه‌ی مرورگرها و دستگاه‌ها پشتیبانی می‌شه. پس کروم، فایرفاکس، اج، بریو و سافاری (روی مک و iOS) همه پشتیبانی می‌کنن و دیگه نیازی به fallback جاوااسکریپتی نیست.

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

خبر مهم: وردپرس این کار را خودش انجام می‌دهد

وردپرس از نسخه‌ی ۵.۵ قابلیت lazy loading رو به تمام تصاویر اضافه کرد. یعنی از تابستان ۲۰۲۰ (مرداد ۱۳۹۹)، هر تصویری که در نوشته‌ها و صفحات وردپرس منتشر می‌کنید، به‌صورت خودکار صفت loading="lazy" می‌گیره. در نسخه‌های بعدی هم صفت decoding="async" اضافه شد که به مرورگر اجازه می‌ده رمزگشایی تصویر رو خارج از مسیر اصلی رندر انجام بده.

خروجی نهایی روی یک سایت وردپرسی به‌روز، معمولاً چیزی شبیه این است:

<img src="image.jpg" alt="توضیح تصویر"
     width="800" height="600"
     loading="lazy" decoding="async">

پس اگر سایت شما وردپرسیه و نسخه‌ی وردپرس به‌روزه، شما از قبل Native Lazy Loading دارید.

پس آن افزونه‌ها چه شدند؟

افزونه‌ای که در مقاله‌های قدیمی پیشنهاد می‌شد، Native Lazyload بود. این افزونه رو فلیکس آرنتز، مهندس گوگل، همراه تیم پشت افزونه‌های رسمی AMP و PWA در سال ۲۰۱۹ منتشر کرد و برای مرورگرهایی که اون موقع از صفت loading پشتیبانی نمی‌کردن، یک fallback جاوااسکریپتی مبتنی بر IntersectionObserver داشت.

افزونه‌ی بدی نبود؛ فقط دلیل وجودش از بین رفت. آخرین به‌روزرسانی این افزونه دسامبر ۲۰۱۹ با نسخه‌ی ۱.۰.۲ بوده و امروز حدود ۶ هزار نصب فعال داره — یعنی بیش از شش سال به‌روزرسانی نشده، درست همون‌طور که انتظار می‌ره: کارش به هسته‌ی وردپرس منتقل شده.

نتیجه‌ی عملیش برای شما اینه که برای فعال کردن Native Lazy Loading نیازی به نصب هیچ افزونه‌ای ندارید. اگر همچنان افزونه‌ی lazy load روی سایت‌تون فعاله، لازمه بررسی کنید که با هسته تداخل نداشته باشه (در بخش بعدی مقاله مفصل بهش می‌پردازیم).

چطور مطمئن بشم روی سایتم فعاله؟

سی ثانیه کار داره:

1. یکی از نوشته‌های سایت‌تون رو در مرورگر باز کنید.
2. کلید Ctrl+U (روی مک: Cmd+Option+U) رو بزنید تا سورس صفحه باز بشه.
3. با Ctrl+F عبارت loading="lazy" رو جست‌وجو کنید.

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

یک بررسی دوم هم انجام بدید که مهم‌تره، در همون سورس ببینید اولین تصویر بزرگ صفحه هم loading="lazy" داره یا نه. اگر داشت، شما دقیقاً وسط تله‌ای هستید که در بخش بعد توضیح می‌دم.

تله‌ای که خیلی‌ها در آن می‌افتند: lazy load شدن تصویر LCP

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

LCP چیست و چرا این موضوع مهم است؟

LCP یا Largest Contentful Paint یکی از سه شاخص Core Web Vitals گوگله و زمانی رو اندازه می‌گیره که بزرگ‌ترین عنصر محتوایی صفحه (معمولاً همون تصویر شاخص یا بنر بالای صفحه) برای کاربر نمایش داده می‌شه.

حالا ببینید تناقض کجاست: loading="lazy" به مرورگر می‌گه «این تصویر رو الان دانلود نکن، فعلاً ردش کن». اما تصویر LCP همون تصویریه که کاربر بلافاصله می‌بینه و باید اولین چیزی باشه که دانلود می‌شه. وقتی مرورگر صفت lazy رو روی تصویر هیرو می‌بینه، از کنارش رد می‌شه، اول CSS و جاوااسکریپت و بقیه منابع رو دانلود می‌کنه و بعد برمی‌گرده سراغش — نتیجه‌اش نیم ثانیه یا بیشتر تأخیر در LCP است. لایت‌هاوس هم دقیقاً برای این حالت هشدار «تصویر LCP به‌صورت تنبل بارگذاری شده» می‌ده.

وردپرس ۵.۹ و ۶.۳ چه چیزی را حل کردند؟

خوشبختانه وردپرس این مشکل رو خودش تشخیص داد و در دو مرحله اصلاح کرد. اضافه شدن lazy load به همه‌ی تصاویر در نسخه ۵.۵، در صنعت به‌شدت نقد شد؛ چون تصاویر بالای صفحه — که ممکن بود عنصر LCP باشن — هم lazy می‌شدن و این در دنیای عملکرد وب یک ضدالگو (antipattern) محسوب می‌شه. وردپرس در نسخه ۵.۹ این را با استثنا کردن چند تصویر اول هر صفحه اصلاح کرد.

قدم دوم در نسخه ۶.۳ برداشته شد: وردپرس به تصویری که تشخیص می‌ده احتمالاً عنصر LCP است، صفت fetchpriority="high" اضافه می‌کنه. این صفت به مرورگر می‌گه این تصویر رو در اولویت قرار بده، حتی قبل از اینکه چیدمان صفحه رو محاسبه کنه. طبق بنچمارک‌های تیم عملکرد وردپرس، همین یک صفت معمولاً ۵ تا ۱۰ درصد LCP رو بهتر می‌کنه.

پس خروجی درست برای تصویر اول صفحه، این شکلیه — دقت کنید که loading اصلاً وجود نداره:

<img src="hero.jpg" alt="توضیح تصویر"
     width="1200" height="675"
     fetchpriority="high" decoding="async">

وردپرس این صفت رو به اولین تصویری اضافه می‌کنه که سه شرط رو داشته باشه: lazy load نشده باشه، از قبل صفت fetchpriority نداشته باشه، و ابعادش بیشتر از ۵۰ هزار پیکسل مربع باشه. این مکانیزم خیلی کمک‌کننده‌ست، ولی همیشه درست کار نمی‌کنه و به قالب، صفحه‌ساز و عوامل دیگه بستگی داره — به‌خصوص اگر از صفحه‌سازهایی مثل المنتور یا اسلایدر استفاده می‌کنید، وردپرس ممکنه تصویر LCP رو اشتباه تشخیص بده.

چطور تست کنم؟

آدرس صفحه‌تون رو در PageSpeed Insights بزنید و دنبال دو چیز بگردید:

• هشدار «Largest Contentful Paint image was lazily loaded» — اگر این پیام رو دیدید، یعنی تصویر اول صفحه‌تون lazy شده و باید اصلاحش کنید.
• بخش LCP element در نتایج — تا وقتی ندونید مرورگر کدوم عنصر رو LCP در نظر گرفته، نمی‌تونید بهینه‌ش کنید.

بعد سورس همون صفحه رو باز کنید و ببینید تصویری که PageSpeed به‌عنوان LCP معرفی کرده، loading="lazy" داره یا fetchpriority="high". حالت درست، دومیه.

تداخل با افزونه‌های کش و بهینه‌سازی

اگر بخش قبلی رو خونده باشید، یک سؤال طبیعی براتون پیش می‌آد: «پس تکلیف افزونه‌ی کش من چی می‌شه که خودش گزینه‌ی Lazy Load داره؟»

چرا دو لایه lazy load دردسر می‌سازه

وردپرس صفت loading="lazy" را در سمت سرور به تگ تصویر اضافه می‌کنه. افزونه‌های بهینه‌سازی معمولاً روش دیگه‌ای دارن: آدرس تصویر را از src برمی‌دارن و در data-src می‌ذارن، بعد با جاوااسکریپت در لحظه‌ی مناسب برش می‌گردونن.

وقتی این دو با هم روی یک تصویر اعمال بشن، نتیجه‌اش تصویر خالی، تصویری که هیچ‌وقت لود نمی‌شه، یا پرش چیدمان صفحه‌ست. به همین دلیل خود افزونه‌ها این را در نظر گرفتن؛ مثلاً WP Rocket وقتی lazy load خودش فعاله، نسخه‌ی هسته را با فیلتر wp_lazy_loading_enabled خاموش می‌کنه. پس قاعده‌ی طلایی ساده‌ست: در هر لحظه فقط یک سیستم lazy load باید فعال باشه.

چه تنظیمی درست است؟

مهم‌ترین ردیف این جدول، ردیف دوم است. قابلیت Optimize critical images در WP Rocket دقیقاً همان چیزی است که در بخش قبل درباره‌اش حرف زدیم: تصویر LCP را پیش‌بارگذاری می‌کنه، صفت fetchpriority="high" را روش می‌ذاره، خودش را و بقیه‌ی تصاویر بالای صفحه را از LazyLoad خارج می‌کنه، و نسخه‌ی موبایل و دسکتاپ صفحه را جداگانه پردازش می‌کنه. در Perfmatters و FlyingPress هم منطق مشابهی وجود داره؛ کافیه تعداد تصاویری که معمولاً بالای صفحه‌ی شما لود می‌شن را وارد کنید (لوگو، تصویر شاخص و…) و بقیه‌اش خودکار انجام می‌شه.

اگر افزونه‌ی شما این قابلیت را نداره، دستی انجامش بدید: در کادر exclusions افزونه، نام فایل یا کلاس CSS تصاویر بالای صفحه (مثل لوگو و تصویر هیرو) را وارد کنید تا از lazy load مستثنا بشن.

غیرفعال کردن lazy load هسته با کد

اگر به دلیلی می‌خواید lazy load هسته‌ی وردپرس را کامل خاموش کنید، این تک‌خطی کافیه. باید در فایل functions.php قالب فرزند یا در یک افزونه‌ی Code Snippets قرارش بدید:

add_filter( 'wp_lazy_loading_enabled', '__return_false' );

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

اگر تصویری lazy نشد، پنج دلیل احتمالی

پیش می‌آد که در سورس صفحه می‌بینید بعضی تصاویر صفت loading ندارن. دلایل رایجش این‌هاست:

• بعضی انواع تصاویر عمداً استثنا شدن (مثل گالری محصولات ووکامرس)
• تصویر یکی از صفت‌های استثناشده مثل data-src یا data-no-lazy را داره
• تصویر به‌صورت داینامیک با جاوااسکریپت اضافه شده
• افزونه‌ی دیگه‌ای در حال اضافه کردن lazy load است و تداخل ایجاد شده
• قالب شما مکانیزم lazy load مخصوص خودش را داره

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

فراتر از تصویر: آیفریم، ویدئو و ابعاد

آیفریم یوتیوب و آپارات

آیفریم‌ها معمولاً از تصاویر هم سنگین‌ترن، چون هرکدوم یک صفحه‌ی کامل با CSS و جاوااسکریپت خودشون رو می‌آرن. وردپرس صفت lazy را به آیفریم‌ها هم اضافه می‌کنه:

<iframe src="https://www.aparat.com/video/..." loading="lazy"></iframe>

اما یک نکته‌ی مهم: lazy کردن آیفریم فقط دانلود را به تأخیر می‌اندازه، حذفش نمی‌کنه. لحظه‌ای که کاربر به ویدئو نزدیک شد، همان چند صد کیلوبایت پلیر یوتیوب دانلود می‌شه.

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

تگ video

برای ویدئوهایی که خودتون میزبانی می‌کنید، صفت loading کاربرد نداره. معادلش این است:

<video preload="none" poster="cover.jpg" controls>
  <source src="video.mp4" type="video/mp4">
</video>

preload="none" به مرورگر می‌گه هیچ بخشی از فایل ویدئو را از قبل دانلود نکن، و poster تصویر جلدی است که تا قبل از پلی نمایش داده می‌شه. توجه کنید که تگ video از صفت fetchpriority پشتیبانی نمی‌کنه و تصویر poster هم چون یک عنصر تصویر مستقل نیست، اصلاً lazy نمی‌شه.

width و height؛ ماجرای CLS

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

وقتی تصویری lazy می‌شه، تا لحظه‌ی لود شدن جای خالی‌شون در صفحه صفر است. اگر مرورگر ندونه آن تصویر چه ابعادی داره، در لحظه‌ی لود شدن، محتوای صفحه به پایین پرت می‌شه. همین موضوع باعث می‌شه lazy load روی تصاویری که ابعادشون مشخص نشده، به جابه‌جایی چیدمان صفحه و افت شاخص Cumulative Layout Shift منجر بشه.

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

decoding=”async”

این هم صفتی است که وردپرس در نسخه‌های جدید به تصاویر اضافه می‌کنه:

<img src="image.jpg" loading="lazy" decoding="async"
     width="800" height="600" alt="...">

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

چه زمانی نباید lazy load کنیم؟

جمع‌بندی موارد استثنا:

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

چک‌لیست نهایی

۷ مرحله، از بالا به پایین:

1. سورس یک نوشته را باز کنید و مطمئن شید loading="lazy" در صفحه وجود داره.
2. مطمئن شید تصویر اول و بزرگ صفحه این صفت را نداره.
3. چک کنید همان تصویر، fetchpriority="high" داشته باشه.
4. مطمئن شید فقط یک سیستم lazy load فعاله (هسته یا افزونه، نه هر دو).
5. در افزونه‌ی بهینه‌سازی، گزینه‌ی استثنای تصاویر بالای صفحه را فعال یا تنظیم کنید.
6. مطمئن شید همه‌ی تگ‌های تصویر width و height دارن.
7. صفحه را در PageSpeed Insights تست کنید و ببینید هشدار مربوط به lazy شدن تصویر LCP وجود نداره.

اگر هر هفت مورد سبز بود، این بخش از بهینه‌سازی سایت شما تمومه.

سؤالات متداول

جمع‌بندی

خلاصه‌ی این مقاله در سه جمله: Native Lazy Loading یک استاندارد مرورگری تثبیت‌شده‌ست که همه‌ی مرورگرها پشتیبانی می‌کنن؛ وردپرس از سال ۲۰۲۰ خودش فعالش کرده، پس کار شما نصب افزونه نیست؛ و مهم‌ترین ریسک باقی‌مانده این است که تصویر اول صفحه‌تون به‌اشتباه lazy بشه و LCP را خراب کنه.

اگر امروز فقط یک کار می‌خواید انجام بدید، همین: سورس صفحه‌ی اصلی سایت‌تون را باز کنید و ببینید بزرگ‌ترین تصویر بالای صفحه، loading="lazy" داره یا fetchpriority="high". جواب این سؤال، به شما می‌گه lazy load روی سایت شما در حال کمک کردنه یا در حال ضرر زدن.

تیم تولید محتوا

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