مهدی رحیمی
مهدی رحیمی
خواندن ۵ دقیقه·۳ سال پیش

افزیش دو برابری سرعت لود سایت با image lazy loading

سلام دوستان عزیز برنامه نویس و توسعه دهنده‌ی فرانت اند. امیدوارم حالتون خوب باشه و الان دارم از پشت لبتابم می‌خونمتون که امکانش هست چقدر هیجان زده باشید در مورد تیتر این نوشته. وقتی تصمیم گرفتم این رو بنویسم که شنیدم مرورگرهای جدید دارن یه قابلیت جدید برای image lazy loading به خودشون اضافه میکنند که در ادامه نحوه استفاده از اون رو میخوانید.

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

شما میتونید به وفور این رو توی سایت های مختلف و بزرگ و سنگین مشاهده کنید.

و اما عکس ها هم از این موضوع جدا نیستند و سال های گذشته، افرادی بسته‌های نرم افزاری مختلفی رو برای این امر نوشتن و استفاده کردند اما، یه مدت کوتاهی هست که مرورگر ها دارن از lazy loading به صورت اتوماتیک پشتیبانی میکنند و مشکل این روش‌هم همینه که مدت زیادی نیست ارایٔه شده و همه‌ی مرورگر ها اون رو پشتیبانی نمیکنند اما به زودی شاهد این خواهیم بود که توی هر مرورگری میتونیم این ویژگی دلچسب رو ببینیم.



ویژگی جدید سمت مرورگر - Loading attribute

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

همه‌ی چیزی که شما باید نحوه‌ی استفاده از این attribute (نتونستم معنی فارسی درستی پیدا کنم) رو بدونید اینکه که شما باید به تگ img یک attribute به اسم loading با یکی از مقادی زیر اضافه کنید و همینطور که میدونید استفاده از اون خیلی راحته و البته بگم این که چه جوری این attribute رو به تگ‌های img اضافه میکنید مهمه و به خودتون بر می‌گرده.

سه تا مقدار داره این attribute که به قرار زیر هست:

  • مقدار "auto": مرورگر شما به صورت اتوماتیک و بسته به شرایط از دو حالت دیگه استفاده میکنه - بهتره از این مقدار استفاده نکنید چون فعلا در برخی از مرورگر ها به صورت کامل پیاده سازی نشده و احتمالا کاملا ایگنور بشه.
  • مقدار "eager": عکس رو همزمان و موقع لود سایت برای شما بالا میاره و پیشنهاد میشه عکس هایی که کاربر از بدو ورودش به سایت مشاهده میکنه (در قسمت‌های بالایی سایت )، روی این مود باشه یا از این attribute استفاده نکنید براشون.
  • مقدار "lazy": که عکس های شمارو بعد از این که سایت بالا اومد و هنگامی که دارین اسکرول میکنین برای شما لود میکنه.
نکته : بهتره همیشه مقادیر height و width رو برای عکستون تعریف کنید تا مرورگر بتونه بر اساس اون درست زمان لود شدن عکس رو هنگام اسکرول کاربر تعریف کنه.

نحوه استفاده این attribute با عکس هاتون:

<img src=&quotimage.png&quot loading=&quotlazy&quot alt=&quot…&quot width=&quot200&quot height=&quot200&quot>

اگر از تگ picture برای عکس‌هاتون استفاده می‌کنید نیازی نیست برای تگ های سورس از این attribute استفاده کنید و فقط اون رو برای تگ img بکار ببرین و اینطور مرورگر میتونه خودش مقدار مناسب رو انتخاب کنه و اون رو به صورت lazy لود کنه.

<picture> <source media=&quot(min-width: 800px)&quot srcset=&quotlarge.jpg 1x, larger.jpg 2x&quot> <img src=&quotphoto.jpg&quot loading=&quotlazy&quot> </picture>

پشتیبانی مرورگرهای مختلف

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

چرا باید از این ویژگی استفاده کنید ؟

شاید شما این سوال براتون پیش بیاد که من چرا باید از این ویژگی استفاده کنم؟ خوب جوابش خیلی راحته !
با استفاده از این ویژگی که توی خود مرورگر استفاده شده، شما زمان زیادی هم برای خودتون و هم برای کاربرتون ذخیره و بهینه کردین بدون انجان دادن کار زیاد در ضمن اگر کاربر شما Javascript رو غیر فعال کرده باشه هم این قابلیت براشون کار میکنه.

برای مرورگرایی که این قابلیت رو پشتیبانی نمیکنن چی ؟

به راحتی چک میکنیم میبینیم مرورگر این قابلیت رو پشتیبانی میکنه یا نه و اگر پشتیبانی نمیکرد سریع از ( polyfill ) های آماده استفاده میکنیم که حتما در آخر همین مقاله قرارشون میدم.

برای چک کردن این قابلیت از این کد استفاده کنید ( یا هر کدی دیگه ای ... ) :

if ('loading' in HTMLImageElement.prototype) { // اتریبیوت لودینگ رو به تگ عکس هاتون اضافه کنید. } else { // اینجا هم بهتره برای کاربرانی که از مرورگر های قدیمی استفاده میکنن راه حلی داشته باشید. }


اگر دوست داشتید بخوانید - قسمت پایانی

توی این قسمت تمام کتابخونه ها و یک سری لینک که میتونه کمک کننده باشه براتون قرار میدم و امیدوارم که از این مطلب لذت برده باشین و همینطور مشتریاتون هم از سرعت لود شدن سایتتون لذت ببرن.

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



javascrioptافزایش سرعت سایتافزایش سرعت لود شدن سایتبهینه کردن عکس‌های سایت
انسان دوست و انسان نا آشنا. سعی در تولید محتوای حرفه‌ای.
شاید از این پست‌ها خوشتان بیاید