اگر می خواهید یک صفحه وب کارآمد داشته باشید، تغییر اندازه و فشرده سازی صحیح تصاویر قبل از آپلود، ضروری است. اما بعد از آپلود تصاویر چه اتفاقی می افتد؟ آیا راهی برای بهینه سازی آنها و بهبود زمان بارگذاری صفحه وجود دارد؟
لیزی لود (Lazy Loading) چیست و چرا باید از آن استفاده کرد را تا انتها مطالعه نمایید تا یک سایت با سرعت بالا داشته باشید. در این مقاله، ما قصد داریم به اصل بارگذاری تنبل نگاهی بیندازیم. نام دیگر و بیان دیگر لیزی لود (Lazy Loading) را بارگذاری تنبل نامیده اند.
تکنیکی مفیدی است که بارگذاری تصاویر را به تعویق می‌اندازد و آنها را تا زمانی که به آنها نیاز ندارید، «خارج از صفحه» می‌گذارد. به بیان دیگر لود شدن تصاویر در سایت را با تاخیر و بعد از مشاهده تصویر انجام می دهد که سرعت لود سایت گرفته نشود.
ما همچنین به سوالات اصلی در مورد بارگذاری تنبل پاسخ خواهیم داد، مانند اینکه چرا بارگذاری تنبل یک تمرین خوب SEO است و چه زمانی باید از آن استفاده کنید.
بارگذاری تنبل برای تصاویر چیست و چگونه کار می کند؟
ایده اصلی بارگذاری تنبل این است که تصاویر یا آیفریم‌ها را فقط زمانی بارگیری کنید که کاربران نیاز به نمایش آنها داشته باشند. آنها مجبور نخواهند بود منتظر بارگذاری همه عناصر صفحه باشند و بنابراین، می‌توانند زودتر از صفحه وب استفاده کنند.
برای درک بهتر، فرض کنید که یک صفحه وب دارید که دارای تصاویر زیادی است. اگر از لیزی لود استفاده کنید، تصاویر فقط در زمانی بارگیری می‌شوند که کاربر به پایین صفحه حرکت کند و به آن تصاویر نزدیک شود. به این ترتیب، بارگیری تصاویر کندتر است و ممکن است صفحه از ابتدا سریعتر بارگیری شود.
به عبارت دیگر، لیزی لود از تاخیر بارگیری غیرضروری جلوگیری می‌کند تا به بهبود عملکرد و سرعت برنامه یا وبسایت کمک کند. این بدان معنی است که صفحات شما فقط تصاویر را در بالای صفحه نمایش می دهند. بقیه به محض اینکه کاربر صفحه را اسکرول کند می آید.
از نظر فنی، بارگذاری تنبل یک جاوا اسکریپت است که نمای فعلی بازدیدکنندگان شما را بررسی می‌کند و فقط تصاویر بالای صفحه، یعنی تصاویر (تقریباً) قابل مشاهده برای آنها را بارگذاری می‌کند.
این اسکریپت را می توان از طریق یک افزونه یا به صورت برنامه نویسی بر روی تصاویر شما اعمال کرد. یک صفحه وب معمولا چگونه بارگیری می شود؟
هر زمان که از مرورگر خود بخواهید یک URL را باز کند، این اتفاق می افتد:
کلیک بر روی پیوند یک درخواست را راه اندازی می کند
صفحه با تمام منابع (فایل) آن دانلود می شود
مرورگر وب صفحه را با استفاده از منابع موجود در آن می سازد
اکنون صفحه به کاربر نمایش داده می شود (رندر می شود)
بیایید روی مرحله دوم فرآیند تمرکز کنیم: معمولاً چه منابعی در یک صفحه گنجانده شده است؟
HTML (از حدود 15 تا 120 کیلوبایت کد)
فایل های جاوا اسکریپت و CSS (از 5 تا 200 کیلوبایت کد)
تصاویر و آی فریم ها (از 200 کیلوبایت به بالا)
همانطور که می بینید، تصاویر و آی فریم ها معمولا آخرین بیت های منابعی هستند که در صفحه دانلود می شوند و گاهی اوقات مهم ترین قسمت ها هستند.
این بدان معناست که صفحه شما تا زمانی که دانلود تمام تصاویر به پایان نرسد، کاملاً فعال نخواهد بود.چه اتفاقی می افتد که به جای آن بارگذاری تنبل اعمال شود؟
لیزی لود (Lazy Loading) برای غلبه بر این رفتار و “تقلب” فرآیند ایجاد شده است و به کاربران امکان می دهد از یک صفحه استفاده کنند حتی اگر همه تصاویر و iframe های آن دانلود نشده باشند.
هنگامی که یک اسکریپت بارگذاری تنبل روی تصاویر شما اعمال می شود، این چیزی است که هنگام فرود در یک صفحه اتفاق می افتد:
با خواندن محتوای صفحه شروع به پیمایش می کنید
زمانی که قرار است تصویری در ویوپورت ظاهر شود، به جای آن یک عکس نگهدارنده قابل مشاهده خواهد بود
تصویر اصلی به سرعت جایگزین تصویر مکان‌دار می‌شود
بنابراین، هنگامی که تصاویر با تنبلی بارگذاری می شوند، در یک صفحه ذخیره می شوند، اما با یک مکان نگهدار شفاف به همان اندازه تصویر اصلی پوشانده می شوند.
تصاویر تا زمانی که کاربر تصمیم بگیرد صفحه را به پایین اسکرول کند و آنها را “پرده” کند، در زیر “جایگاه شفاف” در زیر تاشو باقی خواهند ماند.
چرا باید از لیزی لود (Lazy Loading) استفاده کنید تا تصاویر سریعتر بارگذاری شوند؟
ممکن است تعجب کنید که آیا لیزی لود (Lazy Loading) واقعاً مهم است؟ حقیقت این است که دلایل متعددی وجود دارد که چرا باید تصاویر خود را به جای اینکه اجازه دهید به یکباره بارگذاری شوند، تنبل بارگیری کنید. البته، مزایای بارگذاری تنبل به سرعت بخشیدن به سایت و بهینه سازی سایت شما مربوط می شود.
6 مزیت بارگذاری تنبل یا لیزی لود (Lazy Loading) برای عملکرد بهتر سایت را بررسی می کنیم.
1. بهبود در زمان بارگذاری واقعی و درک شده برای صفحات شما
صفحات طولانی پر از تصاویر، زمان بیشتری برای بارگذاری دارند. همانطور که دیدیم، قبل از اینکه صفحه 100٪ قابل استفاده شود، باید مقدار داده های تصویر به طور کامل دانلود شود.
اگر به جای آن تصاویر خود را با تنبلی بارگذاری کنیم، مشکل حل خواهد شد زیرا در مرحله اول فقط آنهایی که در بالای صفحه قرار می گیرند بارگذاری می شوند. این منجر به کاهش واقعی زمان بارگذاری صفحه اول نیز می شود.
2. کاهش کار برای مرورگر
اگر تصاویر با تنبلی بارگذاری می شوند، مرورگر شما نیازی به تجزیه یا رمزگشایی منابع ندارد تا زمانی که با پیمایش صفحه درخواست شوند.
3. کاهش تعداد درخواست های HTTP در طول بارگذاری صفحه اول
به عنوان یک نتیجه مستقیم از نکته قبلی، شما همچنین تعداد درخواست های HTTP را کاهش می دهید و بزرگترین درجه رنگ محتوای محتوایی را بهبود می بخشید.
4. بهبود در حسابرسی‌های PageSpeed Insights
هنگامی که تصاویر خود را با تنبلی بارگذاری می‌کنید، به بازرسی PageSpeed Insights در Defer تصاویر خارج از صفحه می‌پردازید.
5. داده های کمتری که توسط سرور یا CDN ارائه می شود
در همان خط نقاط قبلی، سرور یا CDN باید داده های کمتری را دانلود کند و در نتیجه صورتحساب های ارزان تری برای شما به همراه خواهد داشت!
6. ذخیره داده و پهنای باند (مخصوصاً از طریق تلفن همراه)
اگر مهم‌ترین بخش از داده‌های صفحات شما – معمولاً توسط تصاویر گرفته می‌شود – فقط در اسکرول دانلود می‌شوند، کاربرانی که از دستگاه‌های تلفن همراه از سایت شما بازدید می‌کنند بسیاراستقبال خواهند کرد! تصاویر لود شده تنبل داده‌ها و پهنای باند کاربران شما را ذخیره می‌کنند، برای افرادی که از شبکه‌های اینترنتی سریع بهره مند نیستند بسیار مناسب است.
آیا بارگذاری تنبل (Lazy Loading) تصویر برای سئو خوب است؟
ممکن است به طور تصادفی با نظراتی برخورد کرده باشید که می‌گویند بار تنبل می‌تواند برای سئو بسیار مهم باشد، زیرا گوگل می‌تواند تصاویر بارگذاری شده را از فهرست کردن حذف کند.
حقیقت این است: بستگی دارد. دو عامل را باید در نظر داشت:
چگونه بار تنبل اجرا می شود
قابلیت های خزنده موتور جستجو
در مورد اجرای بار تنبل: بار تنبل بومی یک فرمت سازگار با SEO است زیرا ویژگی src را برای بررسی موتورهای جستجو قابل مشاهده نگه می دارد. در واقع، ویژگی src برای اینکه به موتورهای جستجو اجازه بررسی و فهرست بندی تصاویر را بدهد، ضروری است.
ویژگی تصویر دیگری که باید در نظر گرفت ویژگی srcset است که توسط همه موتورهای جستجو قابل خواندن نیست. به همین دلیل است که افزودن یک «src» به عنوان یک بک گراند بهترین روش است. با انجام این کار، مطمئن خواهید شد که بارگذاری تنبل بر نمایه سازی تصویر تأثیر نمی گذارد.
برای اطمینان از اینکه موتورهای جستجو به درستی تصاویر شما را ایندکس می کنند (صرف نظر از اینکه آنها بارگذاری شده اند یا نه)، باید از نقشه سایت تصویر نیز استفاده کنید.
در مورد قابلیت‌های خزنده موتور جستجو: برخی از موتورهای جستجو مانند Google می‌توانند جاوا اسکریپت را هنگام بررسی صفحه فعال کنند. این موارد با بار تنبل مبتنی بر جاوا اسکریپت و بارگذاری تنبل بومی به خوبی کار خواهند کرد. با ویژگی بار تنبل WP Rocket به خوبی کار می کند.
از سوی دیگر، برخی از موتورهای جستجو هنگام بررسی صفحات، جاوا اسکریپت را فعال نمی کنند. برای پوشش این موارد، باید تصویر معمولی را با تگ src پر شده در داخل یک تگ <noscript> اضافه کنید (این تگ زمانی که مرورگرها جاوا اسکریپت را غیرفعال می کنند قابل خواندن است).
به طور کلی، بارگذاری تنبل یک تمرین خوب برای سئو است و اگر به درستی اجرا شود، هیچ تاثیر منفی در سئو وجود ندارد. گوگل استفاده از بارگذاری تنبل را در راهنمای توسعه دهندگان خود تبلیغ می کند.
بارگذاری تنبل به طور منطقی بحث برانگیز وجز مهم ترین تکنیک های بهبود عملکرداست. اگر تصاویر درونی زیادی در سایت خود دارید، این یک راه عالی برای کاهش دانلودهای غیر ضروری است.
چه زمانی باید از بارگذاری تنبل تصویر استفاده کرد؟
همیشه باید از بارگذاری تنبل برای تصاویر زیر تاشو استفاده کنید. همانطور که توضیح دادیم، بارگذاری تنبل زمان بارگذاری واقعی و درک شده را کاهش می دهد.شما نباید از بارگذاری تنبل برای تصاویر بالای تاشو استفاده کنید.
تصاویری که باید با بیشترین سرعت ممکن بارگذاری شوند. برعکس، بارگذاری تنبل بارگذاری این تصاویر را کند می کند و بر معیار عملکرد رنگ محتوایی تأثیر می گذارد. بزرگترین عنصر رنگ محتوای محتوایی یک تصویر در بالای صفحه است به همین دلیل است که همه تصاویر بالای صفحه باید به سرعت بارگیری شوند.
چگونه تصاویر را با تنبلی بارگذاری کنیم
شما می توانید تصاویر را هم به صورت دستی و هم با افزونه ها با تنبلی بارگیری کنید. اگر پیشینه فنی دارید و می خواهید خودتان آن را پیاده سازی کنید، می توانید به راهنمای دستی مانند ترفندهای CSS این کار را انجام دهید.
از طرف دیگر، اگر می خواهید در وقت خود صرفه جویی کنید و راه حلی آسان برای سایت وردپرس خود پیدا کنید، می توانید یکی از بهترین افزونه های بار تنبل را انتخاب کنید.
همچنین می‌توانید از افزونه‌های ذخیره‌سازی مانند WP Rocket استفاده کنید تا به لطف سایر ویژگی‌های قدرتمند، تصاویر خود را به آرامی بارگذاری کنید و در عین حال سرعت سایت خود را با چند کلیک افزایش دهید.
برای مشاهده آموزش فعال سازی بارگزاری تنبل با LazyLoad (لیزی‌لود) در افزونه WP Rocket، مقاله زیر را بررسی نمایید.
چگونه بررسی کنیم که آیا لیزی لودینگ کار می کند یا خیر؟
اگر مطمئن نیستید که لیزی لود (Lazy Loading) به درستی کار می‌کند، می‌توانید ابزارهای توسعه‌دهنده Chrome را باز کنید و بررسی کنید که تصاویر تا زمان اسکرول بارگیری نشده باشند. در اینجا مراحلی وجود دارد که باید انجام دهید:
Chrome DevTools را باز کنید، به تب Network و فیلتر Img بروید. در این مرحله، صفحه را دوباره بارگیری کنید. شما فقط باید تصاویر بالای تای موجود در لیست تصاویر را ببینید.
همانطور که شروع به پیمایش صفحه می کنید، باید تصاویر زیر را ببینید که یکی پس از دیگری در لیست ظاهر می شوند. همچنین داده‌های lazyload را در زیر ستون Initiator پیدا خواهید کرد.
این بدان معناست که تصاویر تنها پس از اسکرول کاربر بارگذاری شده اند. بارگذاری تنبل به درستی کار می کند!
در این مقاله، پایه و اساس بارگذاری تنبل را یاد گرفتید، از اینکه چرا و چه زمانی باید آن را اجرا کنید.
فعال کردن و غیرفعال کردن بارگذاری تنبل می تواند دشوار و وقت گیر باشد. WP Rocket می تواند به شما کمک کند در زمان و انرژی صرفه جویی کنید و در عین حال عملکرد سایت خود را با چند کلیک افزایش دهید!
جمع بندی و راهکار نهایی برای افزایش سرعت سایت؟
فرض کنید یک اپلیکیشن وب دارید که دارای یک صفحه محصولات است و هر محصول شامل یک تصویر بزرگ است. اگر از لیزی لود استفاده نکنید، همه تصاویر محصولات به صورت همزمان و همراه با بارگیری صفحه اصلی بارگذاری می‌شوند. این موجب می‌شود که زمان بارگیری صفحه زیاد شود، حتی اگر کاربر از همه تصاویر استفاده نکند.
اما استفاده از لیزی لود (Lazy Loading) تنها راه افزایش سرعت سایت نیست. راهکار های مختلفی برای افزایش سرعت سایت است که در وبلاگ به آن پرداخته ایم. برخی از مقاله های ما در زمینه سرعت سایت :
در این خدمات پس از بررسی بخش های مختلف سایت شما، اقدام به افزایش سرعت لود سایت می کنیم، بصورت کلی سرعت اکثر سایت ها بالای 5 ثانیه است که پس از استفاده از خدمات افزایش سرعت سایت در امنیت من ، سرعت لود سایت به حدود 2 ثانیه می رسد.
