آیا تا به حال به این فکر کردهاید که صفحات سایتتان با سرعت لود شدن، بازدیدکنندگان را از دست میدهند؟ در وردپرس، فعالسازی lazy load میتواند زمان بارگذاری را به طور چشمگیری کاهش دهد و تجربه کاربری را بهبود بخشد. در این مقاله، بهصورت گام به گام، روشهای پیادهسازی lazy load را با استفاده از افزونههای معتبر و بدون افزونه شرح میدهیم.
هر مرحله با نکات عملی و هشدارهای رایج همراه است تا از بروز خطاهای رایج در تنظیمات جلوگیری کنید. پس از پایان خواندن، قادر خواهید شد بهراحتی هر تصویر یا ویدئوی سایتتان را بهصورت هوشمندانه بارگذاری کنید و سرعت سایت را بهینه کنید.
فهرست مطالب
- مفهوم لیزی لود در وردپرس
- فعالسازی لیزی لود از طریق هسته
- نصب افزونه لیزی لود معتبر
- پیکربندی افزونه برای حداکثر سرعت
- تست عملکرد لیزی لود با ابزارهای وب
- رفع مشکلات رایج پس از فعالسازی
- سوالات متداول
مفهوم لیزی لود در وردپرس
درک صحیح مفهوم لیزی لود (بارگذاری تنبل) برای بهینهسازی سرعت سایت وردپرسی ضروری است. بهجای اینکه همهٔ تصاویر، ویدیوها و iframeها بهمحض بارگذاری صفحه دانلود شوند، لیزی لود تنها زمانی این منابع را میآورد که کاربر به آنها نزدیک میشود یا اسکرول میکند. این کار باعث کاهش زمان اولین نمایش (TTFB) و بهبود تجربه کاربری میشود؛ بهویژه در دستگاههای موبایل که پهنای باند محدودتر است.
مکانیسم اصلی لیزی لود بر پایهٔ مشاهدۀ viewport (قاب نمایش) مرورگر است. وقتی یک عنصر تصویری خارج از محدودهٔ قابل مشاهده قرار دارد، بهجای دریافت کامل فایل تصویری، فقط یک placeholder (مانند یک تصویر شفاف یا سایه خاکستری) ارسال میشود. سپس با استفاده از JavaScript، زمانی که این عنصر بهتدریج وارد viewport میشود، درخواست واقعی به سرور ارسال و تصویر واقعی بارگذاری میشود. این فرآیند بهصورت خودکار توسط مرورگرهای مدرن پشتیبانی میشود، ولی برای سازگاری بهتر میتوان از کتابخانههای کمحجم مثل lazysizes یا ویژگی بومی loading="lazy" استفاده کرد.
| قبل از لیزی لود | بعد از لیزی لود |
|---|---|
| تمام تصاویر بهصورت همزمان دانلود میشوند | تنها تصاویر در viewport بلافاصله دانلود میشوند |
| زمان بارگذاری صفحه بهطور قابل توجهی طولانی است | زمان رندر اولیه کاهش مییابد، کاربران سریعتر به محتوا دسترسی پیدا میکنند |
| مصرف باند بالاتر، بهویژه برای کاربران موبایل | صرفهجویی در باند، بهویژه در شبکههای کمسرعت |
بهعنوان مثال، یک وبلاگ خبری با ۲۵ تصویر در هر پست، اگر لیزی لود فعال نباشد، تمام این تصاویر همزمان درخواست میشوند؛ در حالی که با فعالسازی لیزی لود، در اولین بازدید فقط ۳‑۴ تصویر (که در بالای صفحه هستند) دانلود میشوند و بقیه تا زمانی که کاربر به انتهای مطلب اسکرول کند، بارگذاری میشوند. این تغییر میتواند سرعت بارگذاری اولیه را تا ۴۰۰ میلیثانیه کاهش دهد.
نکتهٔ عملی: اگر از Gutenberg یا بلوکهای کلاسیک استفاده میکنید، اطمینان حاصل کنید که ویژگی loading="lazy" بهصورت پیشفرض بر روی تگهای functions.php بهسرعت آن را فعال کنید. این کار بدون نیاز به نصب افزونه، بهرهوری لیزی لود را در تمام تمها و افزونههای سفارشی تضمین میکند.
فعالسازی لیزی لود از طریق هسته
قابلیت لیزی لود (بارگذاری تنبل) بهصورت بومی در هستهٔ وردپرس از نسخه 5.5 بهبعد فعال شد. این ویژگی بدون نیاز به افزونهٔ خارجی، بهصورت خودکار برای تمام