آموزش گام‌به‌گام lazy load وردپرس؛ لود تنبل تصاویر بدون آسیب

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

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

lazy load وردپرس چگونه کار می‌کند؟

مکانیزم، یک نشانهٔ ساده روی تگ تصویر است: با این نشانه، مرورگر دانلود تصویر را تا نزدیک‌شدن به دید کاربر عقب می‌اندازد. طبق مستندات وردپرس، از نسخهٔ ۵٫۵ به بعد این رفتار برای تصاویر به‌صورت پیش‌فرض روشن است (تاریخ گردآوری: آبان ۱۴۰۵)؛ یعنی در اکثر سایت‌ها، لود تنبل تصاویر وردپرس از قبل فعال است و مسئله، تنظیم درست مرز و رفتار آن است، نه نصب اجباری افزونهٔ تازه.

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

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

چه چیزی باید تنبل شود و چه چیزی نه؟

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

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

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

آموزش گام‌به‌گام پیاده‌سازی در شش قدم

قدم اول، نقشهٔ صفحهٔ پربازدیدتان را دربیاورید: چند تصویر، چند ویدیو، چند iframe در هر صفحهٔ اصلی و مقالهٔ نمونه؟ قدم دوم، نقطهٔ کنترل را انتخاب کنید — تنظیم قالب یا افزونهٔ بهینه‌ساز — و بقیهٔ مسیرها را خاموش کنید تا تناقض پیش نیاید.

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

قدم پنجم، ویدیو و iframe را وارد صف تنبل کنید؛ بهترین الگو در بازار، جای‌نگهدار سبک با دکمهٔ پخش است که فایل اصلی فقط با کلیک بار می‌شود — هم سرعت و هم دادهٔ کاربر را نجات می‌دهد. قدم ششم، تست قبل/بعد انجام دهید و نتیجه را ثبت کنید؛ روش تست در بخش پنجم آمده است.

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

پرش چیدمان و تجربهٔ کاربر؛ دو دام پنهان

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

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

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

تست قبل و بعد؛ چطور بفهمید بهتر شد؟

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

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

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

پنج خطای رایج و اصلاح آن‌ها

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

خطای سوم، فراموش‌کردن iframe و ویدیو است؛ نقشه‌ها و پلیرهای جاسازی‌شده سنگین‌ترین عناصر بیرونی صفحات فارسی‌اند و جای‌نگهدار کلیک‌محور بهترین راه‌حل آن‌هاست. خطای چهارم، تصاویر بدون ابعاد است که پرش چیدمان می‌سازد؛ ابعاد و نسبت‌ها را تک‌تک تعیین کنید. خطای پنجم، انتظارِ معجزه از تنبل‌سازی است؛ اگر تصاویر خودشان فشرده و درست‌اندازه نباشند، فقط دانلود عقب‌افتادهٔ همان فایل‌های سنگین را دارید — اول بهینه‌سازی تصاویر، بعد تنبل‌سازی.

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

جمع‌بندی؛ تنبلِ درست، سریعِ قابل لمس

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

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

رصد ما، رشد شما.