کاربران سایت‌های کند را تحقیر می‌کنند و ترجیح می‌دهند به سایت‌های سریعتر بروند تا اینکه منتظر بارگذاری صفحهات سایت شما بمانند.
به همین دلیل است که وب سایت‌های سریع در جلب توجه کاربران کارآمدتر هستند. بنابراین باید تصاویر و ویدیوهای سایت خود را به درستی بهینه‌سازی کنید تا پاسخگویی را بهبود ببخشید و زمان بارگذاری را کاهش دهید.
و Lazy Load به شما امکان می‌دهد دقیقاً این کار را انجام دهید!
در این پست اصول اولیه بارگذاری تنبل و چگونگی افزایش عملکرد وب سایت شما را توضیح می‌دهیم. و همچنین نحوه اضافه کردن بار تنبل به سایت وردپرس را نشان خواهیم داد.
Lazy Load چیست؟
ویژگی HTML بارگذاری تنبل تکنیکی است که صفحات وب برای بهینه‌سازی زمان بارگذاری از آن استفاده می‌کنند. بنابراین وقتی بار تنبل فعال می‌شود، صفحه وب فقط محتوایی را که کاربر در آن زمان مصرف می‌کند بارگیری می‌کند. این امر بارگذاری رسانه‌ای را که کاربر هنوز نمی‌بیند به تأخیر می‌اندازد و عملکرد کلی را بهبود می‌بخشد و زمان بارگذاری را کاهش می‌دهد.
Lazy Load چگونه کار می‌کند؟
در مرحله اول، بارگذاری تنبل (Lazy Load) یک ویژگی مرجع src را به منابع صفحه وب که با تنبلی بارگذاری شده‌اند (تصویر، ویدیو و غیره) قرار می‌دهد.
سپس، ویژگی دیگری را به محتوای اصلی اضافه می‌کند.
پس از این، موقعیت اسکرول بازدیدکنندگان یک صفحه را با استفاده از جاوا اسکریپت شناسایی می‌کند.
وقتی کاربر به شی مرجع می‌رسد، بار تنبل ویژگی مرجع src را با src واقعی جایگزین می‌کند و محتوا را بارگذاری می‌کند.
این بدان معناست که اگر یک بازدیدکننده یک صفحه وب را باز کند و فوراً آن را ترک کند، چیزی فراتر از قسمت بالای صفحه وب بارگذاری نمی‌شود.
چرا باید Lazy Load را اضافه کنیم؟
هر بازدیدکننده‌ای انتظار دارد یک صفحه وب در یک چشم به هم زدن بارگذاری شود. بنابراین باید راه‌هایی برای بهبود زمان بارگذاری صفحه وب خود پیدا کنید و Lazy Load یکی از بهترین راه‌ها برای این کار است.
به طور کلی، هنگامی که یک کاربر یک صفحه وب را باز می‌کند، کل محتویات صفحه شروع به دانلود و رندر می‌کند و کاربران را برای پرش از صفحه آزار می‌دهد. با این حال، با فعال کردن Lazy Load، می‌توانید با دادن دقیقا همان چیزی که به کاربران نیاز دارند – محتوای بارگذاری شده – از این امر جلوگیری کنید!
همچنین، بارگذاری دارایی‌ها در زمان اجرا، تعداد درخواست‌هایی را که یک صفحه برای بارگذاری اولیه به سرور ارسال می‌کند، کاهش می‌دهد و در نتیجه ارتباط سریعتر و حداقلی بین سرور وردپرس و بازدیدکننده در یک حرکت ایجاد می‌شود.
برای دیدن نتایج عملی، تاثیر بار تنبلی را بر عملکرد یک سایت آزمایش می‌کنیم. و برای آن، از GTMetrix برای آزمایش معیارهای عملکرد قبل و بعد از فعال‌سازی پلاگین بار تنبل استفاده می‌کنیم. همچنین می‌توانید از هر ابزار تست سرعت دیگری برای ارزیابی عملکرد وب سایت استفاده کنید.
عملکرد وب سایت قبل از فعال‌سازی پلاگین Lazy Load
درجه GTMetrix
تصویر زیر نمره GTMetrix وب سایت را قبل و بعد از بار تنبلی نشان می‌دهد.
ما متوجه نتایج زیر شدیم:
- درجه از C به B منتقل شد، که نشان دهنده ارتقاء در رتبه‌بندی و Core Web Vitals است.
- همچنین عملکرد از 70% به 90% افزایش یافته است.
- ساختار از 91% به 90% کاهش یافته است.
توجه: عملکرد و ساختار فقط تحت تأثیر سرعت وب سایت نیست. بسیاری از عوامل دیگر مانند پلاگین‌های بهینه‌سازی تصویر و تم‌های سبک نیز نقش خود را ایفا می‌کنند.
نحوه بهبود امتیازات Google PageSpeed Insight را بررسی کنید تا در مورد افزایش عملکرد وب سایت بیشتر بدانید!
سرعت عناصر صفحه
زمان بارگذاری یک وب سایت یک پارامتر مهم برای قضاوت در مورد تأثیر افزونه lazy load است.
در اینجا آمار قبل و بعد از استفاده از افزونه lazy load آمده است:
- مدت زمان بارگیری First Contentful Paint از 3 ثانیه به 2. 0 ثانیه کاهش یافت
- زمان تعامل از 6 ثانیه به 2. 4 ثانیه کاهش یافت
- زمان بارگذاری بزرگترین رنگ محتوایی از 7 ثانیه به 2. 3 ثانیه کاهش یافت
- زمان بارگذاری از 1 ثانیه به 2. 8 ثانیه کاهش یافت
- زمان بارگذاری کامل از 9 ثانیه به 3. 1 ثانیه کاهش یافت
این نشان می دهد که استفاده از افزونه بار تنبل سرعت سایت شما را افزایش می دهد و تجربه کاربری یکپارچه و بدون وقفه ایجاد می کند.
چگونه lazy load را به وبسایت وردپرس اضافه کنیم
lazy load زمان پاسخ سرور را کاهش می دهد و در نتیجه تجربه بارگذاری سریعتر صفحه را به همراه دارد. پیاده سازی بار تنبل در محتوای وردپرس چندان فنی نیست، به لطف انجمن وردپرس برای مشارکت هایشان.
برای اضافه کردن بار تنبل به وب سایت وردپرس مراحل زیر را دنبال کنید:
- به داشبورد وردپرس خود بروید > افزونه‌ها > افزودن جدید بروید
- افزونه A3 Lazy Load را جستجو کنید
- افزونه را نصب و فعال کنید
- بعد از اینکه افزونه را فعال کردید، روی تنظیمات کلیک کنید
- اکنون به صفحه تنظیمات هدایت خواهید شد. هر مجموعه را باز کنید تا آن را مطابق با نیاز خود سفارشی کنید.
معمولاً وردپرس به طور خودکار ویژگی بارگذاری را به تمام تصاویر، متون، URIها، ویدیوها، iframeها و سایر عناصر موجود در وب سایت به عنوان بخشی از تنظیمات پیش فرض خود وارد می‌کند. با این حال، برای سفارشی‌سازی بیشتر می‌توانید با دکمه‌های جابجایی بازی کنید.
به عنوان مثال، می‌توانید از افکت بار تنبل برای افزایش سرعت هسته وب سایت استفاده کنید.
Lazy Load تصاویر وردپرس
با استفاده از افزونه a3 Lazy Load می‌توانید تصاویر را با تنبلی بارگذاری کنید.
منابع تصاویر فشرده هستند و پهنای باند و فضای ذخیره‌سازی زیادی را مصرف می‌کنند. نه تنها این، بلکه ویژگی بارگذاری تنبل برای تصاویر نیز به شما امکان می‌دهد مکان‌هایی که باید کار کند را کنترل کنید، از جمله:
- پست، صفحات و انواع پست سفارشی (همه حوزه‌های محتوا)
- ابزارک‌ها (نوار کناری، سرصفحه و پاورقی)
- برای پست‌های کوچک اعمال کنید
- برای Gravatars اعمال کنید
بارگذاری تنبل وردپرس ویدیوها و iFrames
a3 Lazy Load به تصاویر محدود نمی‌شود، بلکه به شما امکان بارگذاری تنبل محتوای ویدیویی را نیز می‌دهد. از همه جاسازی‌های ویدیوی وردپرس که از iFrames برای بارگذاری ویدیوها در بارگذاری اولیه استفاده می‌کنند، پشتیبانی می‌کند. این شامل کلیدهای روشن/خاموش است. وقتی روشن است، می‌توانید مناطق زیر را کنترل کنید:
- ویدئوهای جاسازی شده توسط URL در پست‌ها و صفحات (تمام قسمت‌های محتوا)
- ویدئوها در انواع ویجت، ویجت‌های متنی و ویجت‌های HTML
- کاملاً با افزونه محبوب YouTube Embed سازگار است
بارگذاری تنبل نظرات وردپرس
بسیاری از کاربران وردپرس از افزونه‌های نظر وردپرس استفاده می‌کنند. و اکثر آن‌ها از بارگذاری تنبل از طریق افزونه‌های بار تنبل وردپرس پشتیبانی می‌کنند.
شما می‌توانید استفاده کنید:
- Lazy Load for Comments برای نظرات پیش فرض وردپرس
- Disqus Conditional Load برای نظرات Disqus
- Lazy Facebook Comments برای نظرات فیسبوک
- هنگامی که تنظیمات lazy load را انجام دادید، روی ذخیره تغییرات کلیک کنید.
در نهایت وب سایت خود را مجدداً بارگذاری کنید تا نتایج را مشاهده کنید.
دیگر افزونه‌های بارگذاری تنبل برای وردپرس
علاوه بر A3 Lazy Load، تعدادی افزونه مفید برای بارگذاری تنبل در مخزن افزونه وردپرس وجود دارد که ممکن است در نظر بگیرید:
- BJ Lazy Load
- WordPress Infinite Scroll – Ajax Load More
- Lazy Load by WP Rocket
- Load More Products for WooCommerce
- Lazy Load for Comments
- Disqus Conditional Load
- Lazy Load for Videos
3 مورد از استفاده Lazy Load
بهینه‌سازی تصاویر در وب سایت وردپرس بسیار مهم است زیرا می‌تواند بر زمان بارگذاری وب سایت تأثیر بگذارد. به همین دلیل است که بار تنبل عمدتاً برای تصاویر و سایر عناصر رسانه استفاده می‌شود. می‌توانید از آن برای ادغام با فیلم‌ها، نظرات، اسکریپت‌ها و غیره استفاده کنید.
همه سایت‌های محبوب به هر طریقی از Lazy Load تصاویر استفاده می‌کنند. در اینجا تعداد کمی از آن‌ها هستند:
۱. Medium
اگر از Medium بازدید کرده‌اید، حتماً مشاهده کرده‌اید که تا زمانی که تصویر واقعی با وضوح بالا به طور کامل بارگیری شود، یک مکان‌نمای تار برای تصاویر بارگذاری تنبل نمایش می‌دهد، بنابراین بازدیدکنندگان می‌دانند که یک تصویر در حال بارگیری است.
این کار تجربه کاربر را با نمایش برخی از محتوای بارگذاری شده اولیه برای حفظ توجه آن‌ها بهبود می‌بخشد.
۲. یوتیوب
به طور پیش‌فرض، اولین چیزی که YouTube نشان می‌دهد ویدیویی است که قصد تماشای آن را دارید و در ابتدا نظرات و تصاویر کوچک سایر ویدیوهای پیشنهادی را بارگیری نمی‌کند. وقتی شروع به پیمایش می‌کنید، مواردی که با تنبلی بارگذاری شده‌اند مانند تصاویر کوچک و نظرات شروع به بارگیری می‌کنند.
به این ترتیب، بازدیدکننده منتظر نمی‌ماند تا یک صفحه کامل بارگذاری شود و می‌تواند بلافاصله شروع به تماشای ویدیو کند.
۳. تصاویر گوگل
وقتی تصویری را در گوگل جستجو می‌کنید، تصاویر مکان‌نما را با تصاویر کوچک جایگزین می‌کند و بعداً تصاویر بیشتری بارگیری می‌کند.
گوگل از یک رویکرد منحصر به فرد با ترکیب پیمایش بی‌نهایت و بارگذاری تنبل برای بهبود نتایج جستجوی خود استفاده می‌کند.
آیا Lazy Load روی سئو تاثیر می‌گذارد؟
Lazy Load سئو دوستانه نیست. از آنجایی که محتوا (تصاویر، ویدیوها، نظرات، و غیره) در ابتدا برای بازدیدکنندگان بارگذاری نمی‌شود، همین جریان برای خزنده‌های موتورهای جستجو است. این احتمال وجود دارد که محتوای بارگذاری شده تنبل (تصویر، ویدیوها) در بخش تصاویر/ویدئو گوگل ایندکس نشود که از نظر سئو خوب نیست.
راه‌حل‌هایی مانند افزودن پیوند به محتوای Lazy Loaded شما وجود دارد. به این ترتیب، گوگل آن را به عنوان یک صفحه وب استاندارد در نظر می‌گیرد و محتوا را بر اساس آن فهرست می‌کند.
با این حال، بازدیدکنندگان همچنان یک صفحه وب را به عنوان Lazy Loaded مشاهده خواهند کرد.
Google در حال کار و آماده کردن اسناد کمکی در مورد نحوه استفاده از مزیت Lazy Loading و دریافت محتوای Lazy Loaded قابل کشف توسط GoogleBot است.
نتیجه
دامنه توجه انسان به طرز باورنکردنی کوتاه است. بنابراین، اگر می‌خواهید کاربران بیشتری در صفحه وب خود داشته باشید، باید اطمینان حاصل کنید که یک تجربه کاربری یکپارچه به آن‌ها بدهید و آن‌ها را منتظر نگذارید.
و شما می‌توانید این کار را با فعال کردن Lazy Load در وب سایت وردپرس خود انجام دهید. عملکرد وب سایت شما را بهینه می‌کند، سرعت بارگذاری محتوا را افزایش می‌دهد و تجربه کاربری را بهبود می‌بخشد.
سوالات متداول
بارگذاری تنبل در وردپرس چیست؟
بارگذاری تنبل در وردپرس به بارگذاری سریعتر صفحه وب کمک می‌کند. فقط زمانی که کاربر به آن بخش برسد، تصاویر و سایر عناصر رسانه را بارگیری می‌کند.
آیا بارگذاری تنبل خوب است؟
بله، بارگذاری تنبل می‌تواند عملکرد وب سایت را با کاهش زمان بارگذاری، بهینه‌سازی استفاده از داده‌ها و افزایش تجربه کاربر بهبود بخشد. با این حال، استفاده بیش از حد از بارگذاری تنبل می‌تواند تأثیر منفی بر عملکرد یک وب سایت داشته باشد.
بارگذاری تنبل چگونه کار می‌کند؟
بارگذاری تنبل تصویر را در صفحه وب بار نمی‌کند مگر اینکه برای کاربر قابل مشاهده نباشد. برای بهبود زمان بارگذاری، بارگذاری تصویر را به تعویق می‌اندازد.
چگونه بارگذاری تنبل را آزمایش می‌کنید؟
برای تست عملکرد بارگذاری تنبل، صفحه وب را مرور کنید و رفتار تصاویر را مشاهده کنید. اگر تصویر با دیدن آن شروع به بارگیری کرد و نه قبل از آن، بارگذاری تنبل کار می‌کند.
چگونه بار تنبل را در وردپرس غیرفعال کنیم؟
می توانید با افزودن فیلتر مربوطه به فایل functions. php، بار تنبل را در وردپرس غیرفعال کنید. با این حال، این می‌تواند مخاطره آمیز باشد.
بنابراین، ما با دنبال کردن این مراحل ساده، بار تنبل را غیرفعال خواهیم کرد.
مرحله ۱: افزونه Code Snippet را نصب کنید
مرحله ۲: کد زیر را پیاده‌سازی کنید:
“ add_filter (‘wp_lazy_loading_enabled’ , ‘__return_false’) ;
مرحله ۳: قطعه کد را فعال کنید.
