سئو

اگر در صفحات سایت وردپرس خود تعداد زیادی تصویر دارد، احتمال اینکه دیر بارگذاری شوند و زمان لود صفحه بالا رود، بسیار زیاد است. این امر نه تنها تجربه کاربری بدی ایجاد کرده و کاربران به سرعت سایت شما را ترک می کنند بلکه برای سئو سایت وردپرس شما هم امتیاز منفی محسوب می شود. مطالعات نشان می دهد که اگر زمان بارگذاری سایت بیش از 3 ثانیه طول بکشد، 40% افراد سایت شما را ترک می کنند. خوشبختانه برای رفع این مشکل راه های زیادی وجود دارد. یکی از بهترین راه ها استفاده از تکنیک Lazy Load یا بارگذاری تنبل تصاویر و ویدئوها است. در این مقاله بهترین افزونه های Lazy Load وردپرس را معرفی می کنیم. همچنین در مورد اینکه چرا استفاده از ویژگی Lazy Load برای وب سایت دارای اهمیت است و استفاده از آن چه فایده هایی دارد توضیح می دهیم.

برای بهتر فهمیدن این مطلب به دوره جی تی متریکس سایت ما سر بزنید.

بارگذاری تنبل تصاویر (Images Lazy Loading) یک تکنیک بهینه سازی صفحات و بهبود تجربه کاربری است. این تکنیک، تصاویر رو تنها زمانی نشون میده که به اونها نیاز داشته باشیم. به طور میانگین، بیشتر از 60% حجم خروجی وبسایت ها رو تصاویر تشکیل دادند (منبع) و این موضوع -وقتی تعداد و حجم تصاویر زیاد و سنگین باشند- در سرعت لود، پهنای باند و رضایت کاربران شما تأثیر منفی خواهد گذاشت. اینجاست که بازهم قدرت تنبلی اثبات میشه و این سبک بارگذاری با یک منطق ساده  “نمایش تصاویر -> در صورتی که برای کاربر قابل مشاهده باشد” یا به عبارت دیگه “نمایش تصاویر -> تنها زمانی که در اسکرول صفحه قرار بگیرد” اون شعر برو کار میکن سعدی رو له میکنه. خخخخ 

* نکته: بارگذاری تنبل چند عیب کوچیک هم داره! به عنوان مثال: در بیشتر افزونه های Lazy Loading ویژگی src تصویر پشتیبانی نمیشه (یا اینکه با تصاویر و انیمیشن Sample مقدار دهی میشه) و تصویر اصلی شما در ویژگی جدیدی به نام data-src قرار میگیره و این موضوع با سینتکس استاندارد HTML5 همخونی نداره. (البته این هم بدون راه حل نیست…)

اگر تصاویر باعث کند شدن بارگذاری صفحات شود تاثیر منفی در تعداد بازدیدکنندکان خواهد گذاشت و ممکن است بازدیدکنندگان از مشاهده وب سایت شما خسته شوند و از ادامه مطالعه صفحات شما منصرف شوند پس مدیریت بارگذاری تصاویر امری مهم است

lazy loading چیست؟

lazy loading به این معنی است که بارگذاری تصاویر بعد از نمایش دیگر اجزا مثل متون بارگذاری و نمایش داده شود و یا حتی تا اسکرول به آنها نرسیده است بارگذاری نشوند. 5 روش را برای lazy loading به شما نشان میدهیم.

چرا باید به بارگذاری lazy load توجه کنید؟

حداقل چند دلیل عالی وجود دارد که چرا باید بارگذاری lazy load را برای وبسایت خود در نظر بگیرید:

- اگر وبسایت شما از جاوااسکریپت برای نمایش محتوا یا ارائه‌ی برخی از قابلیت‌ها برای کاربران استفاده می‌کند، بارگذاری DOM تبدیل به یک مساله‌ی بسیار مهم می‌شود. معمولا قبل از شروع کار، اسکریپت‌ها صبر می‌کنند تا زمانی که DOM کاملا بارگذاری شود. در سایتی با تعداد قابل توجهی از تصاویر، lazy loading یا بارگذاری تصاویر به صورت آسنکرون می‌تواند تفاوت در ماندن یا ترک وبسایت شما را در بین کاربران ایجاد کند.

- از آنجا که اکثر راه‌حل‌های lazy loading فقط با بارگذاری تصاویر کار می‌کنند، اگر کاربر به محلی که تصاویر در داخل viewport قابل مشاهده است اسکرول کند، در صورت عدم دسترسی کاربران به آن نقطه، تصاویر هرگز بارگذاری نخواهند شد. این به معنای صرفه‌جویی قابل توجهی در پهنای باند است که بیشتر کاربران به ویژه کسانی که با دستگاه‌های تلفن همراه و اتصالات کند به وبسایت‌تان دسترسی پیدا می‌کنند، از شما سپاسگزار خواهند شد.

خب، بارگذاری lazy load به عملکرد وبسایت کمک می‌کند، اما بهترین راه برای حل آن چیست؟ هیچ راه کاملی وجود ندارد.

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

چرا باید از تکنیک لود تنبل یا Lazy Loading استفاده کنیم؟

مزایای تکنیک لود تنبل یا Lazy Loading عبارت اند از:

1- کاهش زمان بارگذاری

با استفاده از این تکنیک کاهش چشم‌گیری در زمان لازم برای بارگذاری و نمایش محتوای اولیه در صفحات وب‌سایت شما رخ می‌دهد. به‌خصوص وب‌سایت‌هایی که تصاویر زیادی در محتوای خود دارند.

2- کاهش استفاده از پهنای باند

بسیاری از کاربرانی که وارد صفحه وب‌سایت شما می‌شوند تا آخر صفحه اسکرول نمی‌کنندو این حرکت باعث می‌شود، تصاویر و محتوای کل صفحه بدون دیده شدن، برای آن‌ها بارگذاری شود.

با استفاده از تکنیک lazy loading باعث کاهش استفاده از پهنای باند و در نتیجه کاهش هزینه‌های پرداخت و نگهداری سرور می‌شوید. بنابراین هزینه کمتری می‌کنید و کمتر اشغال شدن سرور شما باعث افزایش سرعت وب‌سایت می‌شود.

3- بارگذاری DOM

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