نحوه defer کردن تصاویر سایت بدون جی‌کوئری و لیزی لودینگ

نحوه defer کردن تصاویر سایت بدون جی‌کوئری و لیزی لودینگ

دیفر کردن تصاویر سایت بدون استفاده از جی‌کوئری

Defer images without lazy load or jquery

دیفر کردن تصاویر در وب سایت بدون استفاده از جی کوئری

استفاده از تکنیک دیفر برای تصاویر وب سایت

ویژگی تصاویر دیفر شده (Deferred Images):

  • تصاویر دیفر شده (Deferred Images) پس از لود اولیه صفحه (Initial page load)، لود خواهند شد.
  • تصاویر در لود اولیه سایت، مشاهده نمی شوند.

نمایش تصاویر بصورت دیفر (Defer) به منظور افزایش سرعت لود سایت:

در این مقاله روشی ساده برای دیفر کردن نمایش تصاویر وب بدون استفاده از جی کوئری و یا Lazy Loading را آموزش خواهیم داد.

یکی از دلایل اصلی کاهش سرعت لود وب سایت ها، تصاویر آنها می باشند. حتما تابحال بدلیل کندی سرعت اینترنت لود تصاویر را از بالا به پایین مشاهده کرده اید. هنگامیکه این تصاویر در حال نمایش از بالا به پایین می باشند، احتمالا تصاویر زیادی در پایین وب سایت قرار دارند که در حال لود شدن هستند و شما نمی بینید.

تمام این تصاویر بهمراه سایر منابع مانند css و js در حال رقابت بر سر پهنای باند می باشند و همه آنها بطور همزمان در حال لود می باشند. اما حالت بهینه اینست که تصاویری که در دید کاربر است به محض اسکرول کاربر لود شوند و سایر تصاویری که هنوز کاربر به آن اسکرول نکرده لود نشوند.

راه حل مشکل :

روش حل مسئله لود شدن تمام تصاویر بهنگام لود اولیه صفحه برای طراحان وب و وبمستران استفاده از تکنیک Lazy Loading می باشد.

استفاده از متد لیزی لودینگ (Lazy Loading) برای تصاویر وب سایت این امکان را می دهد که تمام تصاویر یک صفحه وب بهنگام لود اولیه آن صفحه لود نشوند و در نتیجه باعث افت سرعت لود آن سایت نخواهد شد. بلکه تصاویر موردنیاز کاربر با توجه به اسکرول او در صفحه نمایش خواهند یافت. تکنیک Lazy loading مزیت های زیادی دارد و توسط بسیاری از طراحان وب در حال استفاده می باشد اما این متد مشکلاتی نیز دارد:

  • Lazy Loading ممکن است باعث افت کارایی (Performance) وب سایت شود.
  • متد Lazy loading برای تمام وب سایت ها قابل اجرا و قابل اتکا نمی باشد.
  • تکنیک Lazy Loading برای کارایی بهینه موبایل مناسب نمی باشد.

دیفر کردن تصاویر بدون استفاده از جی کوئری و متد Lazy Loading:

حقیقت اینست که متد لیزی لودینگ راه پیچیده تر دیفر کردن تصاویر (Deferring images) می باشد. به منظور آموزش اساسی این مفهوم، در این مقاله به آموزش دیفر کردن تصاویر بدون استفاده از تکنیک Lazy Loading خواهیم پرداخت اما ابتدا نگاهی خواهیم انداخت به کارهایی که متد لیزی لودینگ انجام می دهد:

  • مشاهده و تشخیص موقعیت اسکرول
  • نظارت بر موقعیت اسکرول
  • واکنش نشان دادن به موقعیت اسکرول
  • دیفرکردن تصاویر

همانطور که مشاهده می شود، از 4 مرحله فوق فقط یکی از آنها دیفر شدن تصاویر (Deferring Images) می باشد.

شرح مرحله دیفر کردن تصاویر (Deferring Images):

 

مراحل لود تصاویر توسط مرورگر:

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

این رفتار پیش فرض تمام مرورگرها می باشد (بطور پیش فرض سعی دارند تمام تصاویر موجود در یک صفحه وب را دانلود نمایند).

تنها روش قابل اعتماد و مطمئن برای حل این مشکل اینست که به مرورگر بفهمانیم تصاویری که در دید کاربر نمی باشند را لود نکند.

متد لود تنبل تصاویر (Lazy Loading):

در متد Lazy Loading روش کار بدین صورت است که ابتدا یک تصویر بسیار کوچک و کم حجم بصورت پیش فرض بجای تصاویر واقعی نمایش داده خواهد شد. و بعدا تصاویر واقی با توجه به شرایطی توسط جاوا اسکریپت نمایش می یابند و جایگزین تصاویر پیش فرض می شوند.

بنابراین کد تصویر در html بصورت زیر خواهد بود:

<img src=”fake.png” data-src=”real-image.png”

بهنگام لود اولیه صفحه وب (initial load)، مرورگر تصویر قلابی (fake) را مشاهده می کند و در نتیجه فقط آنرا لود می کند. بنابراین چه شما در صفحه وب سایت خود یک عکس داشته باشید و چه 100 تا عکس، مرورگر فقط یک تصویر fake کم حجم و بسیار کوچک را دانلود می کند. سپس توسط جاوا اسکریپت، این تصویر را تصاویر واقعی جایگزین می کنیم.

وقتیکه مرورگر متوجه می شود که یک عکس جدید به صفحه اضافه شده است، آنرا دانلود خواهد کرد و به کاربر نمایش می دهد.

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

مفهوم لود صفحه (Page Load):

برای اینکه متوجه شوید که چگونه، چه زمان و چه متدی از defer را برای سایت خود استفاده کنید، باید بفهمیم که یک صفحه وب چگونه لود می شود؟ اطلاعات خوبی در این بخش مطرح می شود که مطالعه آن تنها دو تا سه دقیقه از وقت شما را می گیرد.

مفهوم لود صفحه (Page Load)

در تصویر فوق نحوه لود یک صفحه را بصورت ساده بیان کردیم. این صفحه وب، یک تصویر اصلی دارد، چندین تصویر جانبی، یک فایل css و یک فایل js دارد. در این سناریو، تمام منابع (عکس، css و js) برای دانلود شدن باهم رقابت می کنند.

اما حقیقت اینست که تنها چیزی که باید در لود اولیه این صفحه دانلود شود المان های واقع در بالای خط چین تصویر فوق می باشد. در اینصورت در لود اولیه سایت، فقط المان هایی که در دید کاربر می باشند دانلود خواهند شد.

بنابراین برای کاربری که بتازگی وارد سایت شده است، لود فایل html، فایل css، فایل js و تصویر اصلی این صفحه کافیست. ما می خواهیم سرعت لود اولیه این صفحه را تقریبا دو برابر کنیم! بدین منظور باید:

  • فقط تصویر اصلی این صفحه لود شود.
  • سایر تصاویر باید دیفر (defer) شوند.

اکنون ما مطابق تصویر فوق، فقط لازم است 4 المان قبل از page load دانلود شوند در حالیکه در تصویر قبل، 12 آیتم باید قبل از اجرای رویداد page load دانلود می شدند.

این بدین معنیست که تبلیغات Adsense می توانند چند برابر سریع تر از حالت قبل به نمایش در بیایند، کاربران سایت می توانند سریع تر از سایت ما خرید کنند و گوگل هم با سرعت بیشتری سایت ما را پیمایش و ایندکس می کند.

در این صفحه ده ها تصویر وجود دارد که استفاده از دیفر کردن تصاویر (Deferred Images) می تواند سرعت لود این صفحه وب را چندین برابر کند. هر اندازه تعداد تصاویر یک صفحه وب بیشتر باشد، زمان بیشتری در لود سایت صرفه جویی می شود.

آیا متد Lazy Loading اینکار را انجام نمی دهد؟

بله، انجام می دهد! اما متد لیزی لودینگ در بسیاری از موقعیت ها و وب سایت ها بدرستی کار نمی کند. یکی از جاهایی که تکنیک lazy loading جواب نمی دهد، قالب ها و وب سایت های تک صفحه ای می باشد.

تمپلیت های تک صفحه ای (One Page Templates):

اگر قالب وب سایت شما بصورت تک صفحه ای است (بدین معنی که لینک های منوی اصلی شما را به صفحات دیگر هدایت نمی کنند بلکه بخش های مختلف همان صفحه منتقل می شوید)، و می خواهید از متد LazyLoading استفاده کنید، به مشکل برمی خورید.

مشکل اینجاست که هنگامیکه کاربر وارد سایت تان شود و روی یکی از لینک های منوی اصلی کلیک کند به بخشی می رود که تصاویر آن بخش هنوز لود نشده اند!

تمپلیت های تک صفحه ای (One Page Templates)

استفاده از متد دیفر کردن تصاویر بدون Lazy Loading:

در یک وب سایت تک صفحه ای، نیازی نیست تمام مراحل متد Lazy Loading را طی کنیم (مشاهده:observe، نظارت:monitor و واکنش نشان دادن نسبت به اسکرول کاربر). پس فقط کافیست تصاویر موجود در قالب های تک صفحه ای را دیفر (defer) کنید.

نحوه دیفرکردن تصاویر (How to defer images):

برای دیفر کردن عکس های یک صفحه وب، فقط کافیست تگ تصویر را نشانه گذاری (markup) کنید. در این تگ باید کد جاوا اسکریپت ساده و کوچک را اضافه کنید. فرمتی که ما برای تگ تصاویر در وب استفاده می کنیم بصورت زیر خواهد بود. در آن از تصاویر base 64 استفاده می کنیم.

کد html:

<img src=”data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=” data-src=”your-image-here”>

کد جاوا اسکریپت:

<script>

function init() {

var imgDefer = document.getElementsByTagName(‘img’);

for (var i=0; i<imgDefer.length; i++) {

if(imgDefer[i].getAttribute(‘data-src’)) {

imgDefer[i].setAttribute(‘src’,imgDefer[i].getAttribute(‘data-src’));

} } }

window.onload = init;

</script>

نحوه استفاده از کدهای فوق:

برای اکثر صفحات شما می توانید براحتی اسکرپت فوق را قبل از تگ بسته بادی (</body>) فایل html درج کنید. فرمت تگ تصاویر را نیز بدین صورت مورد استفاده قرار دهید که فقط کافیست بجای عبارت “your-image-here” آدرس تصویر اصلی (Actual image path) را بنویسید.

منبع: https://varvy.com

0/5 ( 0 نظر )

این مقاله را در شبکه‌های اجتماعی به اشتراک بگذارید!

Share on facebook
Share on google
Share on linkedin
Share on telegram
Share on email

پاسخی بگذارید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

آخرین کتاب‌های الکترونیکی

مقالات اخیر

مقالات تصادفی

فهرست کلی مقالات

کتاب آموزش گوگل آنالیتیکس

دانلود رایگان کتاب الکترونیکی

آموزش تصویری گوگل آنالیتیکس

آموزش کامل فعال‌سازی HTTPS در وردپرس

دانلود کتاب "فعال‌سازی HTTPS در وردپرس"

دانلود رایگان کتاب الکترونیکی

معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019

دانلود رایگان کتاب الکترونیکی "معرفی بهترین ابزارهای بازاریابی محتوا در سال 2019"