এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

তৃতীয় পক্ষের এম্বেড ব্যবহার করার জন্য সর্বোত্তম অনুশীলন

জনপ্রিয় তৃতীয় পক্ষের এম্বেডগুলি দক্ষতার সাথে লোড করার কৌশলগুলির একটি ওভারভিউ৷

Addy Osmani

Katie Hempenius

Leena Sohoni

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

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

একটি এম্বেড কি

থার্ড-পার্টি এম্বেড হল আপনার সাইটে প্রদর্শিত যেকোনো বিষয়বস্তু যা হল:

আপনার দ্বারা রচিত না
তৃতীয় পক্ষের সার্ভার থেকে পরিবেশিত

একাধিক অফস্ক্রিন এম্বেড দেখানো হয়েছে, যা অলস-লোড হতে পারে

এম্বেডগুলি প্রায়শই নিম্নলিখিতগুলিতে ব্যবহৃত হয়:

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

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

তৃতীয় পক্ষের এম্বেডের কর্মক্ষমতা প্রভাব

অনেক জনপ্রিয় এম্বেডের মধ্যে রয়েছে 100 KB এর বেশি জাভাস্ক্রিপ্ট, কখনও কখনও এটি 2 MB পর্যন্ত যায়। তারা লোড হতে বেশি সময় নেয় এবং কার্যকর করার সময় প্রধান থ্রেডকে ব্যস্ত রাখে। পারফরম্যান্স মনিটরিং টুল যেমন লাইটহাউস এবং ক্রোম ডেভটুলগুলি পারফরম্যান্সের উপর তৃতীয় পক্ষের এম্বেডের প্রভাব পরিমাপ করতে সাহায্য করে।

তৃতীয় পক্ষের কোডের প্রভাব হ্রাস করুন লাইটহাউস অডিট আকার এবং প্রধান-থ্রেড ব্লক করার সময় সহ একটি পৃষ্ঠা ব্যবহার করে তৃতীয়-পক্ষ সরবরাহকারীদের তালিকা দেখায়। Lighthouse ট্যাবের অধীনে Chrome DevTools-এর মাধ্যমে অডিট উপলব্ধ।

আপনার এম্বেড এবং থার্ড-পার্টি কোডের কার্যক্ষমতার প্রভাব পর্যায়ক্রমে অডিট করা একটি ভাল অভ্যাস কারণ এম্বেড সোর্স কোড পরিবর্তন হতে পারে। আপনি যেকোনো অপ্রয়োজনীয় কোড সরাতে এই সুযোগটি ব্যবহার করতে পারেন।

তৃতীয় পক্ষের কোডের প্রভাব হ্রাস করুন

সেরা অনুশীলন লোড হচ্ছে

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

স্ক্রিপ্ট অর্ডারিং

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

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

তৃতীয় পক্ষের এম্বেডগুলির জন্য অনুরোধগুলি প্রথম-পক্ষের সামগ্রী লোড করার পথে পেতে পারে, তাই তৃতীয় পক্ষের স্ক্রিপ্ট ট্যাগের অবস্থান গুরুত্বপূর্ণ৷ স্ক্রিপ্টগুলি লোডিং ক্রমকে প্রভাবিত করতে পারে কারণ স্ক্রিপ্টগুলি চালানোর সময় DOM নির্মাণ বিরতি দেয়৷ কী প্রথম-পক্ষের ট্যাগের পরে তৃতীয়-পক্ষের স্ক্রিপ্ট ট্যাগগুলি রাখুন এবং অ্যাসিঙ্ক্রোনাসভাবে লোড করতে async বা defer অ্যাট্রিবিউটগুলি ব্যবহার করুন ৷

<head>
   <title>Order of Things</title>
   <link rel="stylesheet" media="screen" href="/assets/application.css">
   <script src="index.js"></script>
   <script src="https://example.com/3p-library.js" async></script>
</head>

অলস-লোডিং

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

বিষয়বস্তু লোড হতে দেরি করা যতক্ষণ না এটি প্রকৃতপক্ষে প্রয়োজন হয় তাকে অলস-লোডিং বলে। প্রয়োজনীয়তা এবং এম্বেডের ধরনের উপর নির্ভর করে, আপনি বিভিন্ন অলস-লোডিং কৌশল ব্যবহার করতে পারেন।

`<iframe>` এর জন্য ব্রাউজার অলস-লোড হচ্ছে

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

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

লোডিং বৈশিষ্ট্য নিম্নলিখিত মান সমর্থন করে:

lazy : ইঙ্গিত করে যে ব্রাউজার আইফ্রেম লোড করা পিছিয়ে দেবে। ভিউপোর্টের কাছাকাছি হলে ব্রাউজার আইফ্রেম লোড করবে। যদি আইফ্রেম অলস-লোডিংয়ের জন্য একটি ভাল প্রার্থী হয় তবে ব্যবহার করুন।
eager : অবিলম্বে iframe লোড করুন। যদি আইফ্রেম অলস-লোডিংয়ের জন্য ভাল প্রার্থী না হয় তবে ব্যবহার করুন। যদি loading অ্যাট্রিবিউট নির্দিষ্ট করা না থাকে, তবে এটি হল ডিফল্ট আচরণ — লাইট মোড ব্যতীত।
auto : ব্রাউজার এই ফ্রেমটি অলস-লোড করবে কিনা তা নির্ধারণ করে।

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

নিম্নলিখিত কিছু উপায় রয়েছে যার মাধ্যমে আপনি বিভিন্ন ধরণের এম্বেডের জন্য আইফ্রেম লোড করতে পারেন।

YouTube ভিডিও: একটি YouTube ভিডিও প্লেয়ার iframe অলস-লোড করতে, YouTube দ্বারা প্রদত্ত এম্বেড কোডে loading বৈশিষ্ট্য অন্তর্ভুক্ত করুন। অলসভাবে YouTube এম্বেড লোড করা প্রাথমিক পৃষ্ঠা লোডে প্রায় 500 KB বাঁচাতে পারে।

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

Google মানচিত্র: একটি Google মানচিত্র আইফ্রেমকে অলস-লোড করতে, Google মানচিত্র এম্বেড এপিআই দ্বারা তৈরি আইফ্রেম এম্বেডের কোডে loading বৈশিষ্ট্য অন্তর্ভুক্ত করুন। গুগল ক্লাউড এপিআই কী-এর জন্য একটি স্থানধারক সহ কোডের একটি উদাহরণ নিচে দেওয়া হল।

<iframe src="https://www.google.com/maps/embed/v1/place?key=API_KEY&q=PLACE_ID"
   width="600" height="450"
   style="border:0;"
   allowfullscreen=""
   loading="lazy">
</iframe>

lazysizes লাইব্রেরী

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

lazysizes হল একটি দ্রুত, এসইও-বান্ধব অলস লোডার ছবি এবং আইফ্রেম উভয়ের জন্য। একবার আপনি কম্পোনেন্টটি ডাউনলোড করে নিলে, এটি একটি YouTube এম্বেডের জন্য একটি আইফ্রেমের সাথে ব্যবহার করা যেতে পারে।

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

<iframe data-src="https://www.youtube.com/embed/aKydtOXW8mI"
   width="560" height="315"
   class="lazyload"
   title="YouTube video player"
   frameborder="0"
   allow="accelerometer; autoplay; clipboard-write;
        encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen>
</iframe>

একইভাবে, অন্যান্য থার্ড-পার্টি এম্বেডের জন্য আইফ্রেমের সাথে ল্যাজিসাইজ ব্যবহার করা যেতে পারে।

লক্ষ্য করুন যে lazysizes একটি উপাদান দৃশ্যমান হয়ে শনাক্ত করতে ইন্টারসেকশন অবজারভার API ব্যবহার করে।

ফেসবুকে ডেটা-অলস ব্যবহার করা

Facebook বিভিন্ন ধরনের সোশ্যাল প্লাগইন প্রদান করে যা এম্বেড করা যায়। এর মধ্যে রয়েছে পোস্ট, মন্তব্য, ভিডিও এবং সবচেয়ে জনপ্রিয় লাইক বোতাম। সমস্ত প্লাগইন data-lazy জন্য একটি সেটিং অন্তর্ভুক্ত করে। এটিকে true সেট করা নিশ্চিত করে যে প্লাগইনটি loading="lazy" iframe বৈশিষ্ট্য সেট করে ব্রাউজারের অলস-লোডিং প্রক্রিয়া ব্যবহার করবে।

অলস-লোডিং ইনস্টাগ্রাম ফিড

ইনস্টাগ্রাম মার্কআপের একটি ব্লক এবং এম্বেডের অংশ হিসাবে একটি স্ক্রিপ্ট সরবরাহ করে। স্ক্রিপ্ট পৃষ্ঠায় একটি <iframe> ইনজেক্ট করে। অলস-লোড করা এই <iframe> কর্মক্ষমতা উন্নত করতে পারে কারণ এম্বেড আকারে 100 KB জিজিপ করা হতে পারে। WPZoom এবং Elfsight এর মত ওয়ার্ডপ্রেস সাইটের জন্য অনেক Instagram প্লাগইন অলস-লোডিং বিকল্প প্রদান করে।

সম্মুখভাগের সাথে এম্বেডগুলি প্রতিস্থাপন করুন

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

জুম ইন এবং আউট বৈশিষ্ট্য সহ একটি মানচিত্র এম্বেড৷

একটি মানচিত্রের সম্মুখভাগ যা একটি চিত্র।

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

সম্মুখভাগ হিসাবে স্ট্যাটিক ছবি ব্যবহার করুন

মানচিত্র এম্বেডের পরিবর্তে স্ট্যাটিক চিত্রগুলি ব্যবহার করা যেতে পারে যেখানে আপনাকে মানচিত্রটিকে ইন্টারেক্টিভ করার প্রয়োজন নাও হতে পারে। আপনি মানচিত্রের আগ্রহের এলাকায় জুম করতে পারেন, একটি চিত্র ক্যাপচার করতে পারেন এবং ইন্টারেক্টিভ মানচিত্র এম্বেডের পরিবর্তে এটি ব্যবহার করতে পারেন। আপনি এম্বেড করা iframe উপাদানের একটি স্ক্রিনশট ক্যাপচার করতে DevTools ক্যাপচার নোড স্ক্রিনশট বৈশিষ্ট্যটিও ব্যবহার করতে পারেন।

নোড স্ক্রিনশট ক্যাপচার করুন

DevTools ছবিটিকে একটি png হিসাবে ক্যাপচার করে, কিন্তু আপনি আরও ভাল পারফরম্যান্সের জন্য এটিকে WebP ফর্ম্যাটে রূপান্তর করার কথাও বিবেচনা করতে পারেন৷

সম্মুখভাগ হিসাবে গতিশীল ছবি ব্যবহার করুন

এই কৌশলটি আপনাকে রান টাইমে একটি ইন্টারেক্টিভ এম্বেডের সাথে সম্পর্কিত ছবি তৈরি করতে দেয়। নীচে এমন কিছু সরঞ্জাম রয়েছে যা আপনাকে আপনার পৃষ্ঠাগুলিতে এম্বেডগুলির স্ট্যাটিক সংস্করণ তৈরি করতে দেয়৷

মানচিত্র স্ট্যাটিক API : Google মানচিত্র স্ট্যাটিক API পরিষেবা একটি মানক HTTP অনুরোধে অন্তর্ভুক্ত URL প্যারামিটারের উপর ভিত্তি করে একটি মানচিত্র তৈরি করে এবং মানচিত্রটিকে এমন একটি চিত্র হিসাবে ফিরিয়ে দেয় যা আপনি আপনার ওয়েব পৃষ্ঠায় প্রদর্শন করতে পারেন। URL-এ Google Maps API কী অন্তর্ভুক্ত করতে হবে এবং পৃষ্ঠার <img> ট্যাগে src অ্যাট্রিবিউট হিসেবে রাখতে হবে।
স্ট্যাটিক ম্যাপ মেকার টুল ইউআরএল-এর জন্য প্রয়োজনীয় প্যারামিটার কনফিগার করতে সাহায্য করে এবং আপনাকে রিয়েল-টাইমে ইমেজ এলিমেন্টের কোড দেয়।
নিম্নলিখিত স্নিপেটটি একটি ম্যাপ স্ট্যাটিক এপিআই ইউআরএলে সেট করা উৎস সহ একটি ছবির জন্য কোড দেখায়। এটি একটি লিঙ্ক ট্যাগে অন্তর্ভুক্ত করা হয়েছে যা নিশ্চিত করে যে ছবিটিতে ক্লিক করে প্রকৃত মানচিত্রটি অ্যাক্সেস করা যেতে পারে। (দ্রষ্টব্য: API কী বৈশিষ্ট্যটি url-এ অন্তর্ভুক্ত নয়)
```
<a href="https://www.google.com/maps/place/Albany,+NY/">
<img src="https://maps.googleapis.com/maps/api/staticmap?center=Albany,+NY&zoom=13&scale=1&size=600x300&maptype=roadmap&format=png&visual_refresh=true" alt="Google Map of Albany, NY">
</a>
```
টুইটার স্ক্রিনশট : ম্যাপ স্ক্রিনশটগুলির অনুরূপ, এই ধারণাটি আপনাকে লাইভ ফিডের পরিবর্তে গতিশীলভাবে একটি টুইটার স্ক্রিনশট এম্বেড করতে দেয়। টুইটপিক এমন একটি টুল যা টুইটের স্ক্রিনশট নিতে ব্যবহার করা যেতে পারে। Tweetpik API টুইটের URL গ্রহণ করে এবং এর বিষয়বস্তু সহ একটি চিত্র ফেরত দেয়। এপিআই চিত্রের পটভূমি, রঙ, সীমানা এবং মাত্রা কাস্টমাইজ করার জন্য পরামিতি গ্রহণ করে।

সম্মুখভাগ উন্নত করতে ক্লিক-টু-লোড ব্যবহার করুন

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

পৃষ্ঠা লোডের সময়: পৃষ্ঠায় সম্মুখভাগ বা স্ট্যাটিক উপাদান অন্তর্ভুক্ত করা হয়েছে।
মাউসওভারে: সম্মুখভাগটি তৃতীয় পক্ষের এম্বেড প্রদানকারীর সাথে প্রি-কানেক্ট করে।
ক্লিক করলে: সম্মুখভাগটি তৃতীয় পক্ষের পণ্য দ্বারা প্রতিস্থাপিত হয়।

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

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

YouTube সম্মুখভাগ
লাইট-ইউটিউব-এম্বেড হল YouTube প্লেয়ারের জন্য একটি প্রস্তাবিত সম্মুখভাগ, যা দেখতে আসল প্লেয়ারের মতো কিন্তু 224 গুণ দ্রুত। এটি স্ক্রিপ্ট এবং স্টাইলশীট ডাউনলোড করে এবং তারপর HTML বা জাভাস্ক্রিপ্টে <lite-youtube> ট্যাগ ব্যবহার করে ব্যবহার করা যেতে পারে। YouTube দ্বারা সমর্থিত কাস্টম প্লেয়ার প্যারামিটারগুলি params অ্যাট্রিবিউটের মাধ্যমে অন্তর্ভুক্ত করা যেতে পারে।
```
<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
```
নিচে লাইট-ইউটিউব-এম্বেড এবং প্রকৃত এম্বেডের মধ্যে তুলনা করা হল।
একটি লাইট-ইউটিউব এম্বেড
একটি YouTube এম্বেড
ইউটিউব এবং ভিমিও প্লেয়ারের জন্য উপলব্ধ অন্যান্য অনুরূপ ফ্যাকেডগুলি হল লাইট-ইউটিউব , লাইট-ভিমিও-এম্বেড , এবং লাইট-ভিমিও ৷
চ্যাট উইজেট সম্মুখভাগ
প্রতিক্রিয়া লাইভ চ্যাট লোডার একটি বোতাম লোড করে যা এম্বেডের পরিবর্তে একটি চ্যাট এম্বেডের মতো দেখায়। এটি বিভিন্ন চ্যাট প্রদানকারী প্ল্যাটফর্মের সাথে ব্যবহার করা যেতে পারে যেমন ইন্টারকম, হেল্প স্কাউট, মেসেঞ্জার। লুক-অ্যালাইক উইজেট চ্যাট-উইজেটের তুলনায় অনেক হালকা এবং দ্রুত লোড হয়। ব্যবহারকারী যখন বোতামটি ঘোরায় বা ক্লিক করে বা পৃষ্ঠাটি দীর্ঘ সময়ের জন্য নিষ্ক্রিয় থাকে তখন এটি প্রকৃত চ্যাট উইজেট দ্বারা প্রতিস্থাপিত হতে পারে। পোস্টমার্ক কেস স্টাডি ব্যাখ্যা করে যে তারা কীভাবে react-live-chat-loader প্রয়োগ করেছে এবং তারা অর্জন করেছে কর্মক্ষমতা উন্নতি করেছে।

লিঙ্কগুলির সাথে এম্বেডগুলি সরান বা প্রতিস্থাপন করুন

আপনি যদি দেখেন যে কিছু তৃতীয় পক্ষের এম্বেডের ফলে লোডিং কার্যকারিতা খারাপ হয় এবং পূর্বে বর্ণিত কোনো কৌশল ব্যবহার করা কোনো বিকল্প নয়, তাহলে আপনি যা করতে পারেন তা হল সম্পূর্ণরূপে এম্বেডটি সরিয়ে ফেলা। আপনি যদি এখনও চান যে আপনার ব্যবহারকারীরা এম্বেডের বিষয়বস্তু অ্যাক্সেস করতে সক্ষম হোক, আপনি target="_blank" এর সাথে এটির একটি লিঙ্ক প্রদান করতে পারেন যাতে ব্যবহারকারী এটিকে অন্য ট্যাবে ক্লিক করতে এবং দেখতে পারে৷

লেআউট স্থায়িত্ব

যদিও গতিশীলভাবে এমবেড করা সামগ্রী লোড করা একটি পৃষ্ঠার লোডিং কর্মক্ষমতা উন্নত করতে পারে, এটি কখনও কখনও পৃষ্ঠার সামগ্রীর অপ্রত্যাশিত চলাচলের কারণ হতে পারে। এটি লেআউট শিফট হিসাবে পরিচিত।

যেহেতু ভিজ্যুয়াল স্থিতিশীলতা একটি মসৃণ ব্যবহারকারীর অভিজ্ঞতার জন্য গুরুত্বপূর্ণ, তাই ক্রমবর্ধমান লেআউট শিফট (CLS) পরিমাপ করে যে এই শিফটগুলি কত ঘন ঘন ঘটবে এবং সেগুলি কতটা ব্যাঘাতমূলক।

পরবর্তীতে গতিশীলভাবে লোড হতে চলেছে এমন উপাদানগুলির জন্য পৃষ্ঠা লোডের সময় স্থান সংরক্ষণ করে লেআউট শিফটগুলি এড়ানো যেতে পারে। ব্রাউজারটি উপাদানগুলির প্রস্থ এবং উচ্চতা জানলে সংরক্ষিত স্থান নির্ধারণ করতে পারে। আপনি iframes এর width এবং height বৈশিষ্ট্যগুলি নির্দিষ্ট করে বা স্থির উপাদানগুলির জন্য একটি নির্দিষ্ট আকার সেট করে যেখানে তৃতীয় পক্ষের এম্বেড লোড করা হবে তা নিশ্চিত করতে পারেন৷ উদাহরণস্বরূপ, একটি YouTube এম্বেডের জন্য একটি আইফ্রেমের প্রস্থ এবং উচ্চতা নিম্নরূপ উল্লেখ করা উচিত।

<iframe src="https://www.youtube.com/embed/aKydtOXW8mI" width="560" height="315">
</iframe>

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

<a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

এই পৃষ্ঠাটি রেন্ডার হওয়ার পরে আপনি ইনজেকশন করা iframe পরিদর্শন করতে DevTools ব্যবহার করতে পারেন। নিচের স্নিপেটে যেমন দেখা যাচ্ছে, ইনজেকশন করা আইফ্রেমের উচ্চতা স্থির করা হয়েছে যখন প্রস্থ শতাংশে নির্দিষ্ট করা আছে।

<iframe id="twitter-widget-0" scrolling="no" frameborder="0" allowtransparency="true" allowfullscreen="true" class="twitter-timeline twitter-timeline-rendered" style="position: static; visibility: visible; display: inline-block; width: 100%; padding: 0px; border: none; max-width: 1000px; min-width: 180px; margin-top: 0px; margin-bottom: 0px; min-height: 200px; height: 6238.31px;" data-widget-id="profile:ChannelNewsAsia" title="Twitter Timeline">
</iframe>

ফিড লোড করার সময় কনটেইনারটি প্রসারিত না হয় এবং কোন লেআউট শিফ্ট নেই তা নিশ্চিত করার জন্য এই তথ্যটি ধারণকারী উপাদানের আকার সেট করতে ব্যবহার করা যেতে পারে। পূর্বে অন্তর্ভুক্ত এমবেডের আকার ঠিক করতে নিম্নলিখিত স্নিপেট ব্যবহার করা যেতে পারে।

<style>
    .twitterfeed { display: table-cell;  vertical-align: top; width: 100vw; }
    .twitter-timeline {height: 400px !important; }
</style>
<div class=twitterfeed>
       <a class="twitter-timeline" href="https://twitter.com/ChannelNewsAsia?ref_src=twsrc%5Etfw" data-tweet-limit="1">Tweets by ChannelNewsAsia</a>
       <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
</div>

লেআউট শিফট টার্মিনেটর

যেহেতু তৃতীয় পক্ষের এম্বেডগুলি প্রায়শই তাদের রেন্ডার করা চূড়ান্ত বিষয়বস্তুর মাত্রা (প্রস্থ, উচ্চতা) বাদ দেয়, তাই তারা একটি পৃষ্ঠায় উল্লেখযোগ্য লেআউট পরিবর্তন ঘটাতে পারে। বিভিন্ন ভিউপোর্ট আকারে DevTools ব্যবহার করে ম্যানুয়ালি চূড়ান্ত আকারগুলি পরিদর্শন না করে এই সমস্যাটি সমাধান করা কঠিন হতে পারে।

এখন একটি স্বয়ংক্রিয় টুল রয়েছে, লেআউট শিফট টার্মিনেটর , যা আপনাকে জনপ্রিয় এম্বেড যেমন টুইটার, ফেসবুক এবং অন্যান্য প্রদানকারীদের থেকে লেআউট শিফট কমাতে সাহায্য করতে পারে।

লেআউট শিফট টার্মিনেটর:

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

লেআউট শিফট টার্মিনেটর ব্যবহার করে দেখুন, এবং GitHub- এ কোনো প্রতিক্রিয়া জানাতে নির্দ্বিধায়। টুলটি একটি বিটা অবস্থায় রয়েছে এবং আরও পরিমার্জনার সাথে সময়ের সাথে উন্নতি করার লক্ষ্য রাখে।

উপসংহার

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