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

আদ্দি ওসমানী

<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) এর সুবিধা প্রদান করতে পারে৷ LCP প্রার্থী , যেমন ছবি বা পাঠ্য রেন্ডার করার জন্য ওয়েব ফন্টের উপর নির্ভরশীল। যেহেতু iframes তাদের সমস্ত সাবরিসোর্স লোড করার জন্য প্রায়শই উল্লেখযোগ্য পরিমাণে ব্যান্ডউইথের প্রয়োজন হতে পারে, অলস-লোডিং অফস্ক্রিন আইফ্রেমগুলি নেটওয়ার্ক-সীমাবদ্ধ ডিভাইসগুলিতে ব্যান্ডউইথের বিতর্ককে উল্লেখযোগ্যভাবে হ্রাস করতে পারে, যা একটি পৃষ্ঠার 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);

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

যদি ওয়েব পরিবর্তিত হয় যাতে অলস-লোডিং অফস্ক্রিন আইফ্রেমগুলি ডিফল্ট ছিল, এটি দেখতে কিছুটা এরকম হবে:

অলস-লোডিং ইউটিউব ভিডিও এম্বেড (প্রাথমিক পৃষ্ঠা লোডে প্রায় 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>

উপাখ্যান: যখন আমরা Chrome.com-এর জন্য অলস-লোডিং YouTube এম্বেডগুলিতে স্যুইচ করি, তখন আমরা মোবাইল ডিভাইসে আমাদের পৃষ্ঠাগুলি কত তাড়াতাড়ি ইন্টারেক্টিভ হতে পারে তার 10 সেকেন্ড বন্ধ করেছিলাম। আমি এর এমবেড কোডে loading=lazy যোগ করার বিষয়ে আলোচনা করতে YouTube এর সাথে একটি অভ্যন্তরীণ বাগ খুলেছি।

অলস-লোডিং ইনস্টাগ্রাম এম্বেডগুলি (প্রাথমিক লোডে জিজিপ করা প্রায় 100 KB সংরক্ষণ করে):

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

অলস-লোডিং স্পটিফাই এম্বেড (প্রাথমিক লোডে 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 সামগ্রী এম্বেড করার অনুমতি দেয়। এই প্লাগইনগুলির মধ্যে অনেকগুলি অফার করা হয়েছে, যেমন এমবেড করা পোস্ট, ফটো, ভিডিও, মন্তব্য... সবচেয়ে জনপ্রিয় হল লাইক প্লাগইন - একটি বোতাম যা পৃষ্ঠাটিকে কে "লাইক" করেছে তার একটি গণনা দেখায়৷ ডিফল্টরূপে, একটি ওয়েব পৃষ্ঠায় লাইক প্লাগইন এম্বেড করা (ফেসবুক JSSDK ব্যবহার করে) প্রায় 215 KB সম্পদ সংগ্রহ করে, যার মধ্যে 197 KB জাভাস্ক্রিপ্ট। অনেক ক্ষেত্রে, প্লাগইন একটি নিবন্ধের শেষে বা একটি পৃষ্ঠার শেষের কাছাকাছি প্রদর্শিত হতে পারে, তাই এটি যখন অফস্ক্রিন থাকে তখন এটিকে সাগ্রহে লোড করা সাবঅপ্টিমাল হতে পারে।

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

আমি কি আইফ্রেম ক্রস ব্রাউজারে অলস-লোড করতে পারি? হ্যাঁ

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

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

• প্রমিত অলস-লোডিং বর্তমানে যা অফার করে তার চেয়ে বেশি কাস্টম অলস-লোডিং থ্রেশহোল্ডের প্রয়োজন
• ব্যবহারকারীদের ব্রাউজার জুড়ে একটি সামঞ্জস্যপূর্ণ 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>

এমন কোন উদাহরণ আছে যখন loading=lazy সহ অফস্ক্রিন আইফ্রেমগুলি এখনও লোড হয়?

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

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

উপসংহার

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

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