سلام رفقای فنی سایتآموز! امروز اومدیم سراغ یه ترفند "تنبلانه" اما حرفهای!
توی اولین مقاله سایتآموز یادتون دادم که چطوری حجم عکسها رو کم کنید. اما رفقا، حتی اگه عکساتون خیلی هم سبک باشن، وقتی تعدادشون توی یه صفحه زیاد بشه، مرورگر کاربر بیچاره باید همهشون رو همزمان لود کنه! اینجاست که تکنیک Lazy Load یا بارگذاری تنبل مثل یه فرشته نجات وارد میشه.
من آقا کوچولو هستم و امروز میخوام یادتون بدم چطوری به وردپرس بگید: "عجله نکن! فقط عکسایی رو لود کن که کاربر داره میبینه."
اصلاً این Lazy Load که میگن چی هست؟
خیلی ساده بگم؛ بارگذاری تنبل یعنی مرورگر لود کردن عکسهایی که پایین صفحه هستن (و کاربر هنوز بهشون نرسیده) رو عقب میندازه. فقط وقتی کاربر اسکرول میکنه و به نزدیکی اون عکس میرسه، عکس لود میشه.
این کار ۳ تا فایده خفن داره:
- سرعت لود اولیه موشکی: چون مرورگر لازم نیست ۱۰۰ تا عکس رو همزمان لود کنه، محتوای اصلی رو سریعتر نشون میده.
- صرفهجویی در اینترنت کاربر: اگه کاربر کلاً پایین صفحه نره، اون عکسها اصلاً لود نمیشن و حجم اینترنتش مصرف نمیشه.
- بهبود امتیاز LCP: این همون فاکتور مهم گویله که سرعت باز شدن بزرگترین بخش سایتتون رو اندازه میگیره.
خبر خوب: وردپرس خودش این کارهست!
بچهها، از نسخه ۵.۵ به بعد، وردپرس دیگه نیازی به افزونه برای این کار نداره. خودش به صورت خودکار تگ loading="lazy" رو به عکسهای شما اضافه میکنه.
چطوری تستش کنیم؟ کافیه روی یکی از عکسهای سایتتون راستکلیک کنید، گزینه Inspect رو بزنید و توی کدهای HTML دنبال عبارت loading="lazy" بگردید. اگه بود، یعنی وردپرس داره کارش رو درست انجام میده.
یه نکته کنکوری: تصاویر بالای صفحه (Above the Fold)
آقا کوچولو همیشه میگه: "تنبلی هم جا و مکان داره!" نباید برای عکسهای بالای صفحه (مثل هدر یا بنر اصلی) از Lazy Load استفاده کنید. چرا؟ چون کاربر به محض ورود باید اونها رو ببینه. اگه اونها رو هم تنبل کنید، سرعت لود سایت از نظر کاربر (و گوگل) میاد پایین.
وردپرس معمولاً خودش این رو میفهمه، اما اگه از افزونههایی مثل WP Rocket استفاده میکنید، حتماً تنظیم کنید که مثلاً ۲ تا عکس اولِ صفحه از Lazy Load مستثنی باشن.
تجربه فنی آقا کوچولو: اگه عکسی توی سایتتون دارید که ابعادش (Width و Height) مشخص نیست، وردپرس ممکنه نتونه روش Lazy Load اجرا کنه. پس همیشه موقع آپلود یا توی کدها، ابعاد عکس رو دقیق وارد کنید.
محدودیتهای Lazy Load بومی وردپرس
با اینکه وردپرس عالی عمل میکنه، اما بعضی جاها کم میاره:
- عکسهای پسزمینه (Background Images): اگه عکسی رو با CSS به عنوان پسزمینه گذاشتید، وردپرس نمیتونه تنبلش کنه!
- کنترل دقیق: شما نمیتونید به راحتی تعیین کنید کدوم عکس لود بشه و کدوم نشه.
برای حل این مشکلات، پیشنهاد میکنم از بخش افزونههای ضروری، یکی از پلاگینهای بهینهسازی سرعت مثل LiteSpeed Cache رو نصب کنید تا کنترل کامل روی این موضوع داشته باشید.
جمعبندی ترفند امروز
Lazy Load یکی از اون کارهای "کمزحمت اما پرسود" هست. اگه هنوز سایتتون رو چک نکردید، همین الان برید و مطمئن بشید که این قابلیت فعاله. این کار نه تنها سرعت سایت رو بالا میبره، بلکه باعث میشه کاربر حس بهتری از چرخیدن توی سایت شما داشته باشه.
حالا شما بگید: آیا تا حالا از افزونه خاصی برای Lazy Load استفاده کردید؟ یا ترجیح میدید از همون قابلیت خود وردپرس استفاده کنید؟ اگه سوالی دارید، آقا کوچولو همین پایین منتظرتونه!