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

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

همچنان این نکته رو فراموش نکنید که اگر می خواهید در وب سایتتان از عکس استفاده کنید حتما آن عکس را optimize یا بهینه کرده باشید. حتی اگر از lazy loadding استفاده می کنید.

Lazy Loading چیست؟

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

چرا باید Lazy Laoding را جدی بگیریم؟

حداقل دو دلیل برای استفاده از lazy loading در تصاویر وجود دارد:

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

 

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

 

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

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

به مارک آپ زیر توجه کنید: تگ img بدون استفاده از لیزی لودینگ به شکل زیر است:

  
      <img src="image.jpg" alt="test image">
  

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

  
      <img data-src="image.jpg" alt="test image">
  

اگر دقت کنید قسمت src به شکل data-src تغییر کرده است. در صورت استفاده از src تنها، به این معنی است که تصویر بلافاصله لود می شود.

استایل زیر را به تصویر اضافه می کنیم:

  
      img {
        min-height: 100px;
        ...اسایل های دلخواه خودتون
      }
  

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

  
      // آبجکتی به شکل زیر تعریف می کنیم که دو ویژگی دارد
      const config = {
      rootMargin: '0px 0px 50px 0px',
      threshold: 0
      };
      
      let observer = new intersectionObserver(function(entries, self) {
      // گردش به دور هر ورودی
      entries.forEach(entry => {
        if(entry.isIntersecting) {
          preloadImage(entry.target);
          self.unobserve(entry.target);
        }
      });
      }, config);
      
      const imgs = document.querySelectorAll('[data-src]');
      imgs.forEach(img => {
      observer.observe(img);
      });
  

 

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

 

استفاده از Lozad.js

یک راه راحت تر و سریعتر به جای کد نوشتن استفاده از کتابخانه ی Lozad.js است. این یک کتابخانه سریع با کارایی بالا است که می توانید به راحتی از آن استفاده کنید. نکته ی خوب استفاده از این کتابخانه این است که تنظیمات زیادی را در اختیار کاربر قرار می دهد. از این کتابخانه می توان برای عکس ها ، ویدئو ها، iframeها و… استفاده کرد.
برای نصب lozad.js می توانید از NPM و یا Yarn استفاده کنید. و یا می توانید کل کتابخانه را دانلود کنید و به انتهای صفحه HTML خود در تگ script اضافه کنید.

  
    <script src="https://cdn.jsdelivr.net/npm/lozad/dist/lozad.min.js"></script>
  

مارک آپ تصاویر مانند زیر باید باشد:

  
    <img class="lozad" data-src="img.jpg">
  

در مارک آپ بالا برای تگ img کلاس lozad استفاده شده است که کلاس مورد استفاده از از کتابخانه ی lozad.js می باشد. در آخر کد زیر را فایل اسکریپت خود قرار دهید:

  
    const observer = lozad();
    observer.observe();
  

 
 

نویسنده: سعید پناهی

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

دیدگاهتان را بنویسید

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

احتمالا از اینها هم خوشتون بیاد

تفاوت let و var

در گذشته تنها روشی که برای تعریف متغیر در جاوا اسکریپت استفاده می شد استفاده از کلمه کلیدی var بود. این کلمه برای مدت های طولانی برای تعریف متغیر ها در جاوا اسکریپت به کار می رفت اما مشکلاتی هم به همراه داشت که باعث شد درنسخه های بعدی جاوا اسکریپت با اضافه کردن دو کلمه کلیدی دیگر const و let برای تعریف کردن متغیر، این مشکلات بر طرف شود. بعد از انتشار نسخه ۶ جاوا اسکریپ دو کلمه کلیدی دیگر let و const برای تعریف متغیر به این زبان اضافه شد. که در مجموع سه کلمه کلیدی برای تعریف متغیر در این زبان مورد استفاده قرار می گیرد. به طور کلی کلمه کلیدی const برای تعریف یک ثابت به کار می رود. منظور از ثابت متغیری است که مقدار آن ثابت است مثلا اگر یک ثابت رو معادل یک رشته قرار دادیم نمی توان آن را تغیر داد.

strict-mode

Strict Mode در جاوا اسکریپت

وقتی از ‘use strict’ در ابتدای کدهای خود در جاوا اسکریپت استفاده کنید، یعنی به جاوا اسکریپت گفته اید که به کدهایی که می نوسید سخت گیرانه تر نگاه کند. مثلا اگر یک متغیر را تعریف نکرده باشید و بخواهید از آن استفاده کنید با پیغام خطا مواجه می شوید این در صورتی است که اگر از strict mode استفاده نکرده باشید پیغام خطایی دریافت نمی کنید. همچنین ارورهایی که به شما نمایش داده می شود بهتر و مشخص تر مشکل را بیان کرده است. از این رو وقتی از stirct mode استفاه می کنید مجبورید که کدهای تر و تمیز تری بنوسید و این یعنی بالا رفتن کارایی برنامه تون.

arrow-functions

Arrow Function ها در جاوا اسکریپت

جاوااسکریپت ۶ (ES6) روش جدیدی را برای تعریف توابع معرفی کرده است که با استفاده از آن می توان به صورت کوتاه و خلاصه تر یک تابع را تعریف کرد. البته همچنان به روش قدیمی هم می توان یک تابع تعریف کنیم اما با استفاده از مدل جدید کدهای کمتری می نویسیم. با این روش دیگر نیازی به استفاده از کلمه ی کلیدی function برای تعریف تابع نیست. همچنین اگر قرار باشد تابع مقداری را برگرداند نیازی به استفاده از کلمه ی کلیدی return نیست. نظر سنجی ها نشان می دهد که Arrow Function ها جزء معروف ترین تغییرات در ES6 هستند.