অফস্ক্রিন আইফ্রেমগুলি অলস-লোড করার সময় এসেছে!

Addy Osmani

<iframe> উপাদানগুলির অলস-লোডিং অফস্ক্রিন আইফ্রেমগুলিকে লোড করা থেকে বিরত রাখে যতক্ষণ না ব্যবহারকারী তাদের কাছাকাছি স্ক্রোল করে। এটি ডেটা সংরক্ষণ করে, পৃষ্ঠার অন্যান্য অংশ লোড করার গতি বাড়ায় এবং মেমরির ব্যবহার হ্রাস করে।

ছবির জন্য অলস-লোডিং এর মতো, ব্রাউজারকে জানাতে loading বৈশিষ্ট্য ব্যবহার করুন আপনি একটি আইফ্রেমকে অলস-লোড করতে চান।

<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<iframe loading=lazy> এর এই ডেমো অলস-লোডিং ভিডিও এম্বেড দেখায়:

কেন অলস-লোড iframes?

থার্ড-পার্টি এম্বেডগুলি ভিডিও প্লেয়ার থেকে সোশ্যাল মিডিয়া পোস্ট থেকে বিজ্ঞাপন পর্যন্ত বিস্তৃত ব্যবহারের ক্ষেত্রে কভার করে। এই বিষয়বস্তুটি প্রায়শই ব্যবহারকারীর ভিউপোর্টে অবিলম্বে দৃশ্যমান হয় না, তবে ব্যবহারকারীরা এখনও প্রতিটি ফ্রেমের জন্য ডেটা ডাউনলোড করার খরচ এবং ব্যয়বহুল জাভাস্ক্রিপ্ট প্রদান করে, এমনকি তারা এটিতে স্ক্রোল না করলেও৷

ডেটা সেভার ব্যবহারকারীদের জন্য স্বয়ংক্রিয়ভাবে অলস-লোডিং অফস্ক্রিন আইফ্রেমগুলিতে Chrome-এর গবেষণার উপর ভিত্তি করে, অলস-লোডিং আইফ্রেমগুলি 2-3% মাঝারি ডেটা সঞ্চয়, 1-2% মধ্যমায় প্রথম সামগ্রীপূর্ণ পেইন্ট হ্রাস এবং 2% প্রথম ইনপুট বিলম্বের দিকে পরিচালিত করতে পারে FID) 95 তম শতাংশে উন্নতি।

অলস-লোডিং অফ-স্ক্রিন আইফ্রেমগুলি আপনার পৃষ্ঠার বৃহত্তম সামগ্রীপূর্ণ পেইন্ট (LCP) উন্নত করতে পারে। যেহেতু আইফ্রেমগুলির প্রায়শই তাদের সমস্ত সাব-রিসোর্স লোড করার জন্য উল্লেখযোগ্য পরিমাণে ব্যান্ডউইথের প্রয়োজন হয়, অলস-লোডিং অফস্ক্রিন আইফ্রেমগুলি নেটওয়ার্ক-সীমাবদ্ধ ডিভাইসগুলিতে ব্যান্ডউইথের বিরোধ কমাতে পারে, একটি পৃষ্ঠার এলসিপিতে অবদান রাখে এমন সংস্থানগুলি লোড করতে আরও ব্যান্ডউইথ রেখে যায়৷

আইফ্রেমের জন্য বিল্ট-ইন অলস-লোডিং কীভাবে কাজ করে?

loading অ্যাট্রিবিউট একটি ব্রাউজারকে অফস্ক্রিন আইফ্রেম এবং ছবি লোড করা স্থগিত করতে দেয় যতক্ষণ না ব্যবহারকারীরা তাদের কাছাকাছি স্ক্রোল করে। loading দুটি মান সমর্থন করে:

• lazy : অলস-লোডিংয়ের জন্য একটি ভাল প্রার্থী।
• eager : অলস-লোডিংয়ের জন্য ভাল প্রার্থী নয়। এখুনি লোড করুন।

iframes এ loading অ্যাট্রিবিউট ব্যবহার করা নিম্নরূপ কাজ করে:

<!-- Lazy-load the iframe -->
<iframe src="https://example.com"
        loading="lazy"
        width="600"
        height="400"></iframe>

<!-- Eagerly load the iframe -->
<iframe src="https://example.com"
        width="600"
        height="400"></iframe>

অ্যাট্রিবিউট উল্লেখ না করার ফলে রিসোর্স লোড করার মতোই একই প্রভাব পড়ে।

আপনি যদি জাভাস্ক্রিপ্ট ব্যবহার করে গতিশীলভাবে iframes তৈরি করতে চান, তাহলে উপাদানটিতে iframe.loading = 'lazy' সেট করাও সমর্থিত :

var iframe = document.createElement('iframe');
iframe.src = 'https://example.com';
iframe.loading = 'lazy';
document.body.appendChild(iframe);

অলস-লোডিং জনপ্রিয় আইফ্রেম এম্বেডগুলি কীভাবে ব্যবহারকারীর অভিজ্ঞতাকে প্রভাবিত করে?

অলস-লোডিং আইফ্রেমগুলিকে ডিফল্ট হিসাবে তৈরি করা ওয়েবসাইটগুলিকে আরও বেশি প্রতিক্রিয়াশীল করে তুলবে৷ নিম্নলিখিত উদাহরণগুলি টাইম টু ইন্টারঅ্যাকটিভ (টিটিআই) উন্নতি এবং মিডিয়া এম্বেডগুলির জন্য ডেটা সঞ্চয় দেখায়, তবে অলস-লোডিং বিজ্ঞাপন আইফ্রেমগুলি একই সুবিধা দিতে পারে।

YouTube

অলস-লোডিং ইউটিউব ভিডিও এম্বেড প্রাথমিক পৃষ্ঠা লোডে প্রায় 500KB সঞ্চয় করে:

<iframe src="https://www.youtube.com/embed/YJGCZCaIZkQ"
        loading="lazy"
        width="560"
        height="315"
        frameborder="0"
        allow="accelerometer; autoplay;
        encrypted-media; gyroscope;
        picture-in-picture"
        allowfullscreen></iframe>

ইনস্টাগ্রাম

Instagram এম্বেডগুলি মার্কআপের একটি ব্লক এবং একটি স্ক্রিপ্ট প্রদান করে যা আপনার পৃষ্ঠায় একটি iframe ইনজেক্ট করে। এই আইফ্রেমটি অলস-লোড করার ফলে এম্বেডের প্রয়োজনীয় সমস্ত স্ক্রিপ্ট লোড করা এড়িয়ে যায় এবং প্রাথমিক লোডে প্রায় 100 kB সঞ্চয় করতে পারে। যেহেতু এই এম্বেডগুলি প্রায়শই বেশিরভাগ নিবন্ধে ভিউপোর্টের নীচে প্রদর্শিত হয়, এটি iframe অলস-লোডিংয়ের জন্য একটি যুক্তিসঙ্গত প্রার্থী।

Spotify

অলস-লোডিং Spotify এম্বেড প্রাথমিক লোডে 514 KB বাঁচাতে পারে।

<iframe src="https://open.spotify.com/embed/album/1DFixLWuPkv3KT3TnV35m3"
        loading="lazy"
        width="300"
        height="380"
        frameborder="0"
        allowtransparency="true"
        allow="encrypted-media"></iframe>

ফেসবুকের সামাজিক প্লাগইন

Facebook সামাজিক প্লাগইনগুলি ডেভেলপারদের তাদের ওয়েব পৃষ্ঠাগুলিতে Facebook সামগ্রী এম্বেড করতে দেয়৷ এর মধ্যে সবচেয়ে জনপ্রিয় হল লাইক প্লাগইন , একটি বোতাম যা দেখায় কতজন ব্যবহারকারী পেজটিকে "লাইক" করেছেন। ডিফল্টরূপে, Facebook JSSDK ব্যবহার করে একটি ওয়েব পেজে লাইক প্লাগইন এম্বেড করলে প্রায় 215 KB সম্পদ আসে, যার মধ্যে 197 KB হল জাভাস্ক্রিপ্ট। প্লাগইনটি প্রায়শই একটি নিবন্ধের শেষে বা একটি পৃষ্ঠার শেষের কাছাকাছি প্রদর্শিত হয়, তাই এটি যখন অফস্ক্রিন থাকে তখন এটিকে সাগ্রহে লোড করা সাবঅপ্টিমাল হতে পারে।

প্রকৌশলী স্টোয়ান স্টেফানোভকে ধন্যবাদ, Facebook-এর সমস্ত সোশ্যাল প্লাগইন এখন মানসম্মত iframe lazy-loading সমর্থন করে ৷ বিকাশকারীরা যারা প্লাগইনগুলির data-lazy কনফিগারেশনের মাধ্যমে অলস-লোডিং বেছে নেয় তারা এখন এই প্লাগইনগুলি লোড হওয়া আটকাতে পারে যতক্ষণ না ব্যবহারকারী কাছাকাছি স্ক্রোল করে। এটি এম্বেডটিকে এমন ব্যবহারকারীদের জন্য কাজ করতে দেয় যাদের এটি প্রয়োজন, এমন ব্যবহারকারীদের জন্য ডেটা সংরক্ষণ করার সময় যারা একটি পৃষ্ঠার নিচে স্ক্রোল করেন না। আমরা আশাবাদী যে এটি উৎপাদনে মানসম্মত আইফ্রেম অলস-লোডিং অন্বেষণ করার জন্য অনেক এম্বেডের মধ্যে প্রথম।

ক্রস-ব্রাউজার আইফ্রেম অলস-লোডিং

আপনি একটি প্রগতিশীল বর্ধন হিসাবে আপনার সাইটে iframe অলস-লোডিং প্রয়োগ করতে পারেন। যে ব্রাউজারগুলি loading=lazy সমর্থন করে আইফ্রেমে অলস-লোড করে, এবং যে ব্রাউজারগুলি loading বৈশিষ্ট্য সমর্থন করে না তারা নিরাপদে উপেক্ষা করে।

আপনি lazysizes JavaScript লাইব্রেরি ব্যবহার করে অফস্ক্রিন আইফ্রেমগুলি অলস-লোড করতে পারেন। আপনি এটি করতে চাইতে পারেন যদি আপনি:

• প্রমিত অলস-লোডিং অফারগুলির চেয়ে বেশি কাস্টম অলস-লোডিং থ্রেশহোল্ডের প্রয়োজন৷
• ব্যবহারকারীদের ব্রাউজার জুড়ে একটি সামঞ্জস্যপূর্ণ iframe অলস-লোডিং অভিজ্ঞতা দিতে চান।

<script src="lazysizes.min.js" async></script>

<iframe frameborder="0"
      class="lazyload"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

অলস-লোডিং শনাক্ত করতে এবং যখন এটি উপলব্ধ না থাকে তখন অলসাইজগুলি আনতে নিম্নলিখিত প্যাটার্ন ব্যবহার করুন:

<iframe frameborder="0"
      class="lazyload"
    loading="lazy"
    allowfullscreen=""
    width="600"
    height="400"
    data-src="//www.youtube.com/embed/ZfV-aYdU4uE">
</iframe>

<script>
  if ('loading' in HTMLIFrameElement.prototype) {
    const iframes = document.querySelectorAll('iframe[loading="lazy"]');

    iframes.forEach(iframe => {
      iframe.src = iframe.dataset.src;
    });

  } else {
    // Dynamically import the LazySizes library
    const script = document.createElement('script');
    script.src =
      'https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js';
    document.body.appendChild(script);
  }

</script>

অফস্ক্রিন আইফ্রেম অলস লোডিং এর ব্যতিক্রম আছে কি?

Chrome-এ ডেটা সেভার ব্যবহারকারীদের জন্য স্বয়ংক্রিয়ভাবে অলস-লোডিং আইফ্রেমগুলির সাথে একটি প্রাথমিক পরীক্ষায় লুকানো আইফ্রেমগুলির জন্য একটি ব্যতিক্রম ছিল, যা প্রায়শই যোগাযোগ বা বিশ্লেষণের জন্য ব্যবহৃত হয়। এগুলিকে অলসভাবে লোড করা থেকে বাধা দেওয়া হয়েছিল এবং সেই বৈশিষ্ট্যগুলি ভাঙা প্রতিরোধ করার জন্য সর্বদা লোড করা হয়েছিল৷

loading অ্যাট্রিবিউট এই হিউরিস্টিকস প্রয়োগ করে না, তাই ডেভেলপার সর্বদা অলস-লোড হওয়া বেছে নিতে পারে। দূরত্ব সীমা এবং অন্যান্য ব্রাউজার পছন্দ (যেমন মুদ্রণ) সাপেক্ষে loading বৈশিষ্ট্যটি সর্বদা সম্মানিত হওয়া উচিত।

সম্পদ

আরও অলস-লোডিং ধারণার জন্য, web.dev-এর ছবি এবং ভিডিও অলস-লোডিং সংগ্রহ দেখুন।

ডম ফারোলিনো, স্কট লিটল, হোসেইন ডিজিরদেহ, সাইমন পিটার্স, কায়স বাস্কস, জো মেডলি এবং স্টোয়ান স্টেফানোভকে তাদের পর্যালোচনার জন্য ধন্যবাদ।