জনপ্রিয় থার্ড-পার্টি এমবেডগুলো দক্ষতার সাথে লোড করার কৌশলগুলোর একটি সংক্ষিপ্ত বিবরণ।
অনেক সাইট একটি ওয়েব পেজের কিছু অংশ অন্য কোনো কন্টেন্ট প্রোভাইডারের ওপর অর্পণ করে আকর্ষণীয় ইউজার এক্সপেরিয়েন্স তৈরি করার জন্য থার্ড-পার্টি এমবেড ব্যবহার করে। থার্ড-পার্টি কন্টেন্ট এমবেডের সবচেয়ে সাধারণ উদাহরণগুলো হলো ভিডিও প্লেয়ার, সোশ্যাল-মিডিয়া ফিড, মানচিত্র এবং বিজ্ঞাপন।
থার্ড-পার্টি কন্টেন্ট একটি পেজের পারফরম্যান্সকে নানাভাবে প্রভাবিত করতে পারে। এটি রেন্ডার-ব্লক করতে পারে, নেটওয়ার্ক ও ব্যান্ডউইথের জন্য অন্যান্য গুরুত্বপূর্ণ রিসোর্সের সাথে প্রতিযোগিতা করতে পারে, অথবা কোর ওয়েব ভাইটালস মেট্রিকসকে প্রভাবিত করতে পারে। থার্ড-পার্টি এমবেড লোড হওয়ার সময় লেআউটে পরিবর্তনও ঘটাতে পারে। এই আর্টিকেলে থার্ড-পার্টি এমবেড লোড করার জন্য ব্যবহারযোগ্য পারফরম্যান্স সংক্রান্ত সেরা অনুশীলন, কার্যকর লোডিং কৌশল এবং লেআউট শিফট টার্মিনেটর টুল নিয়ে আলোচনা করা হয়েছে, যা জনপ্রিয় এমবেডগুলোর লেআউট পরিবর্তন কমাতে সাহায্য করে।
এমবেড কী?
তৃতীয় পক্ষের এমবেড হলো আপনার সাইটে প্রদর্শিত এমন যেকোনো কন্টেন্ট যা:
- আপনার দ্বারা রচিত নয়
- তৃতীয় পক্ষের সার্ভার থেকে পরিবেশিত
নিম্নলিখিত ক্ষেত্রগুলিতে এমবেড প্রায়শই ব্যবহৃত হয়:
- খেলাধুলা, সংবাদ, বিনোদন এবং ফ্যাশন সম্পর্কিত ওয়েবসাইটগুলো লিখিত বিষয়বস্তুকে আরও সমৃদ্ধ করতে ভিডিও ব্যবহার করে।
- যেসব প্রতিষ্ঠানের সক্রিয় টুইটার বা সোশ্যাল মিডিয়া অ্যাকাউন্ট রয়েছে, তারা আরও বেশি মানুষের সম্পৃক্ত করতে ও তাদের কাছে পৌঁছানোর জন্য নিজেদের ওয়েব পেজে সেই অ্যাকাউন্টগুলোর ফিড যুক্ত করে দেয়।
- রেস্তোরাঁ, পার্ক এবং অনুষ্ঠানস্থলের পেজগুলোতে প্রায়শই মানচিত্র যুক্ত থাকে।
থার্ড-পার্টি এমবেডগুলো সাধারণত পেজের <iframe> এলিমেন্টের মধ্যে লোড করা হয়। থার্ড-পার্টি প্রোভাইডাররা প্রায়শই একটি <iframe> সম্বলিত HTML স্নিপেট অফার করে, যা মার্কআপ, স্ক্রিপ্ট এবং স্টাইলশিট দিয়ে গঠিত একটি পেজ নিয়ে আসে। কিছু প্রোভাইডার একটি স্ক্রিপ্ট স্নিপেটও ব্যবহার করে, যা অন্য কন্টেন্ট নিয়ে আসার জন্য ডাইনামিকভাবে একটি <iframe> ইনজেক্ট করে। এর ফলে থার্ড-পার্টি এমবেডগুলো ভারী হয়ে যেতে পারে এবং পেজের ফার্স্ট-পার্টি কন্টেন্টের লোড হতে দেরি করিয়ে এর পারফরম্যান্সকে প্রভাবিত করতে পারে।
তৃতীয় পক্ষের এমবেডের কর্মক্ষমতার প্রভাব
অনেক জনপ্রিয় এমবেডে ১০০ কেবি-র বেশি জাভাস্ক্রিপ্ট থাকে, যা কখনও কখনও ২ এমবি পর্যন্তও হয়ে থাকে। এগুলো লোড হতে বেশি সময় নেয় এবং চলার সময় মেইন থ্রেডকে ব্যস্ত রাখে। লাইটহাউস এবং ক্রোম ডেভটুলস-এর মতো পারফরম্যান্স মনিটরিং টুলগুলো পারফরম্যান্সের উপর থার্ড-পার্টি এমবেডের প্রভাব পরিমাপ করতে সাহায্য করে।
" তৃতীয় পক্ষের কোডের প্রভাব কমানো " লাইটহাউস অডিটটি একটি পেজ দ্বারা ব্যবহৃত তৃতীয় পক্ষের প্রোভাইডারদের তালিকা, তাদের আকার এবং মেইন-থ্রেড ব্লকিং টাইম সহ দেখায়। এই অডিটটি ক্রোম ডেভটুলস-এর লাইটহাউস ট্যাবের অধীনে পাওয়া যায়।
আপনার এমবেড এবং থার্ড-পার্টি কোডের পারফরম্যান্সের উপর প্রভাব পর্যায়ক্রমে নিরীক্ষা করা একটি ভালো অভ্যাস, কারণ এমবেড সোর্স কোড পরিবর্তিত হতে পারে। এই সুযোগটি কাজে লাগিয়ে আপনি যেকোনো অপ্রয়োজনীয় কোড অপসারণ করতে পারেন।
সেরা অনুশীলন লোড করা
থার্ড-পার্টি এমবেড পারফরম্যান্সে নেতিবাচক প্রভাব ফেলতে পারে, কিন্তু এগুলি গুরুত্বপূর্ণ কার্যকারিতাও প্রদান করে। থার্ড-পার্টি এমবেডগুলি দক্ষতার সাথে ব্যবহার করতে এবং পারফরম্যান্সের উপর তাদের প্রভাব কমাতে, এই নির্দেশিকাগুলি অনুসরণ করুন।
স্ক্রিপ্ট অর্ডারিং
একটি সু-পরিকল্পিত পৃষ্ঠায়, মূল ফার্স্ট-পার্টি কন্টেন্টই হবে পৃষ্ঠার কেন্দ্রবিন্দু, আর থার্ড-পার্টি এমবেডগুলো সাইড-বারে থাকবে অথবা ফার্স্ট-পার্টি কন্টেন্টের পরে প্রদর্শিত হবে।
সর্বোত্তম ব্যবহারকারী অভিজ্ঞতার জন্য, মূল বিষয়বস্তু দ্রুত এবং অন্য যেকোনো সহায়ক বিষয়বস্তুর আগে লোড হওয়া উচিত। উদাহরণস্বরূপ, একটি সংবাদ পৃষ্ঠার খবরের লেখাটি টুইটার ফিডের এমবেড বা বিজ্ঞাপনের আগে লোড হওয়া উচিত।
থার্ড-পার্টি এমবেডের অনুরোধ ফার্স্ট-পার্টি কন্টেন্ট লোড হওয়ার পথে বাধা সৃষ্টি করতে পারে, তাই থার্ড-পার্টি স্ক্রিপ্ট ট্যাগের অবস্থান গুরুত্বপূর্ণ। স্ক্রিপ্টগুলো লোড হওয়ার ক্রমকে প্রভাবিত করতে পারে, কারণ স্ক্রিপ্ট চলার সময় 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> এর জন্য loading অ্যাট্রিবিউটটি সমস্ত আধুনিক ব্রাউজারে উপলব্ধ।
<iframe src="https://example.com"
loading="lazy"
width="600"
height="400">
</iframe>
লোডিং অ্যাট্রিবিউটটি নিম্নলিখিত মানগুলি সমর্থন করে:
-
lazy: এটি নির্দেশ করে যে ব্রাউজার যেন আইফ্রেমটি লোড করা স্থগিত রাখে। আইফ্রেমটি যখন ভিউপোর্টের কাছাকাছি আসবে, তখন ব্রাউজার সেটি লোড করবে। যদি আইফ্রেমটি লেজি-লোডিংয়ের জন্য উপযুক্ত হয়, তবে এটি ব্যবহার করুন। -
eager: আইফ্রেমটি অবিলম্বে লোড করে। যদি আইফ্রেমটি লেজি-লোডিংয়ের জন্য উপযুক্ত না হয়, তবে এটি ব্যবহার করুন। যদিloadingঅ্যাট্রিবিউটটি নির্দিষ্ট করা না থাকে, তবে এটিই ডিফল্ট আচরণ—তবে Lite মোড এর ব্যতিক্রম। -
auto: এই ফ্রেমটি লেজি-লোড করা হবে কিনা তা ব্রাউজার নির্ধারণ করে।
যেসব ব্রাউজার loading অ্যাট্রিবিউট সমর্থন করে না, তারা এটিকে উপেক্ষা করে, তাই আপনি প্রগ্রেসিভ এনহ্যান্সমেন্ট হিসেবে ব্রাউজার-স্তরের লেজি-লোডিং প্রয়োগ করতে পারেন। যেসব ব্রাউজার এই অ্যাট্রিবিউটটি সমর্থন করে , তাদের ডিস্টেন্স-ফ্রম-ভিউপোর্ট থ্রেশহোল্ড (যে দূরত্ব থেকে আইফ্রেম লোড হওয়া শুরু হয়) এর জন্য ভিন্ন ভিন্ন ইমপ্লিমেন্টেশন থাকতে পারে।
বিভিন্ন ধরনের এমবেডের জন্য আইফ্রেম লেজি লোড করার কয়েকটি উপায় নিচে দেওয়া হলো।
- ইউটিউব ভিডিও: একটি ইউটিউব ভিডিও প্লেয়ার আইফ্রেম লেজি-লোড করতে, ইউটিউবের দেওয়া এমবেড কোডে `
loadingঅ্যাট্রিবিউটটি অন্তর্ভুক্ত করুন। ইউটিউব এমবেড লেজি-লোড করার মাধ্যমে প্রাথমিক পেজ লোডের সময় প্রায় ৫০০ কেবি সাশ্রয় করা যায়।
<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 Maps Embed API) দ্বারা জেনারেট করা আইফ্রেম এমবেডের কোডে
loadingঅ্যাট্রিবিউট (loading attribute) অন্তর্ভুক্ত করুন। নিচে গুগল ক্লাউড এপিআই কী (Google Cloud API key)-এর জন্য একটি প্লেসহোল্ডারসহ কোডের একটি উদাহরণ দেওয়া হলো।
<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 হলো ইমেজ এবং আইফ্রেম উভয়ের জন্য একটি দ্রুত ও এসইও-বান্ধব লেজি লোডার। কম্পোনেন্টটি ডাউনলোড করার পর, এটিকে নিম্নোক্তভাবে একটি আইফ্রেমের সাথে ইউটিউব এমবেডের জন্য ব্যবহার করা যেতে পারে।
<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, Intersection Observer API ব্যবহার করে।
ফেসবুকে ডেটা-লেজি ব্যবহার করা
ফেসবুক বিভিন্ন ধরনের সোশ্যাল প্লাগইন সরবরাহ করে যা এমবেড করা যায়। এর মধ্যে রয়েছে পোস্ট, কমেন্ট, ভিডিও এবং সবচেয়ে জনপ্রিয় লাইক বাটন। সব প্লাগইনেই data-lazy নামের একটি সেটিং থাকে। এটিকে ' true সেট করলে, প্লাগইনটি ' loading="lazy" iframe অ্যাট্রিবিউট সেট করার মাধ্যমে ব্রাউজারের লেজি-লোডিং মেকানিজম ব্যবহার করবে।
ইনস্টাগ্রাম ফিড অলসভাবে লোড করা
ইনস্টাগ্রাম এমবেডের অংশ হিসেবে একটি মার্কআপ ব্লক এবং একটি স্ক্রিপ্ট প্রদান করে। স্ক্রিপ্টটি পেজে একটি <iframe> যুক্ত করে। এই <iframe> -টিকে লেজি-লোড করলে পারফরম্যান্স উন্নত হতে পারে, কারণ জিপড অবস্থায় এমবেডটির সাইজ ১০০ কেবি-র বেশি হতে পারে। ওয়ার্ডপ্রেস সাইটের জন্য WPZoom এবং Elfsight- এর মতো অনেক ইনস্টাগ্রাম প্লাগইনে লেজি-লোডিং-এর সুবিধা রয়েছে।
এমবেডগুলিকে ফেসেড দিয়ে প্রতিস্থাপন করুন
যদিও ইন্টারেক্টিভ এমবেডগুলো পেজের মান বাড়ায়, অনেক ব্যবহারকারী হয়তো সেগুলোর সাথে ইন্টারঅ্যাক্ট করেন না। উদাহরণস্বরূপ, একটি রেস্তোরাঁর পেজ ব্রাউজ করা প্রত্যেক ব্যবহারকারীই ম্যাপ এমবেডটিতে ক্লিক, এক্সপ্যান্ড, স্ক্রল এবং নেভিগেট করবেন না। একইভাবে, একটি টেলিকম পরিষেবা প্রদানকারীর পেজের প্রত্যেক ব্যবহারকারীই চ্যাটবটের সাথে ইন্টারঅ্যাক্ট করবেন না। এইসব ক্ষেত্রে, আপনি এর পরিবর্তে একটি ফেসাড প্রদর্শন করে এমবেডটি লোড বা লেজি-লোড করা পুরোপুরি এড়িয়ে যেতে পারেন।
ফ্যাসাড হলো একটি স্ট্যাটিক এলিমেন্ট যা দেখতে আসল এমবেডেড থার্ড-পার্টির মতোই, কিন্তু এটি কার্যকরী নয় এবং সেই কারণে পেজ লোডের উপর এর চাপ অনেক কম পড়ে। ব্যবহারকারীকে কিছু সুবিধা দেওয়ার পাশাপাশি এই ধরনের এমবেডগুলোকে সর্বোত্তমভাবে লোড করার জন্য নিচে কয়েকটি কৌশল দেওয়া হলো।
সম্মুখভাগ হিসেবে স্থির চিত্র ব্যবহার করুন
যেখানে ম্যাপকে ইন্টারেক্টিভ করার প্রয়োজন নেই, সেখানে ম্যাপ এমবেডের পরিবর্তে স্ট্যাটিক ইমেজ ব্যবহার করা যেতে পারে। আপনি ম্যাপের কাঙ্ক্ষিত অংশে জুম ইন করে একটি ছবি তুলতে পারেন এবং ইন্টারেক্টিভ ম্যাপ এমবেডের পরিবর্তে এটি ব্যবহার করতে পারেন। এছাড়াও, এমবেড করা iframe এলিমেন্টের স্ক্রিনশট নেওয়ার জন্য আপনি ডেভটুলস- এর ক্যাপচার নোডের স্ক্রিনশট ফিচারটি ব্যবহার করতে পারেন।
DevTools ছবিটি png হিসেবে ধারণ করে, কিন্তু আরও ভালো পারফরম্যান্সের জন্য আপনি এটিকে WebP ফরম্যাটে রূপান্তর করার কথাও বিবেচনা করতে পারেন।
ডাইনামিক ইমেজকে ফ্যাসাড হিসেবে ব্যবহার করুন
এই কৌশলটি আপনাকে রান টাইমে একটি ইন্টারেক্টিভ এমবেডের সাথে সঙ্গতিপূর্ণ ছবি তৈরি করতে দেয়। নিচে এমন কিছু টুলের নাম দেওয়া হলো, যা ব্যবহার করে আপনি আপনার পেজগুলিতে এমবেডের স্ট্যাটিক সংস্করণ তৈরি করতে পারবেন।
ম্যাপস স্ট্যাটিক এপিআই : গুগল ম্যাপস স্ট্যাটিক এপিআই পরিষেবাটি একটি সাধারণ HTTP অনুরোধে অন্তর্ভুক্ত URL প্যারামিটারগুলির উপর ভিত্তি করে একটি মানচিত্র তৈরি করে এবং মানচিত্রটিকে একটি ছবি হিসাবে ফেরত দেয় যা আপনি আপনার ওয়েব পৃষ্ঠায় প্রদর্শন করতে পারেন। URL-টিতে গুগল ম্যাপস এপিআই কী অন্তর্ভুক্ত থাকতে হবে এবং এটিকে পৃষ্ঠার
<img>ট্যাগের মধ্যেsrcঅ্যাট্রিবিউট হিসাবে স্থাপন করতে হবে।স্ট্যাটিক ম্যাপ মেকার টুলটি ইউআরএল-এর জন্য প্রয়োজনীয় প্যারামিটারগুলো কনফিগার করতে সাহায্য করে এবং রিয়েল-টাইমে ইমেজ এলিমেন্টের জন্য কোড প্রদান করে।
নিম্নলিখিত কোড স্নিপেটটিতে এমন একটি ছবির কোড দেখানো হয়েছে, যার সোর্স হিসেবে একটি ম্যাপস স্ট্যাটিক এপিআই ইউআরএল (Maps Static API URL) সেট করা আছে। এটিকে একটি লিঙ্ক ট্যাগের মধ্যে রাখা হয়েছে, যা নিশ্চিত করে যে ছবিটিতে ক্লিক করে আসল ম্যাপটি অ্যাক্সেস করা যাবে। (দ্রষ্টব্য: ইউআরএল-এ এপিআই কী অ্যাট্রিবিউট (API key attribute) অন্তর্ভুক্ত করা হয়নি)
<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>টুইটার স্ক্রিনশট : ম্যাপ স্ক্রিনশটের মতোই, এই ধারণাটি আপনাকে লাইভ ফিডের পরিবর্তে ডায়নামিকভাবে একটি টুইটার স্ক্রিনশট এম্বেড করার সুযোগ দেয়। টুইটপিক হলো এমন একটি টুল যা টুইটের স্ক্রিনশট নিতে ব্যবহার করা যেতে পারে। টুইটপিক এপিআই টুইটের ইউআরএল গ্রহণ করে এবং এর বিষয়বস্তুসহ একটি ছবি ফেরত দেয়। ছবিটির ব্যাকগ্রাউন্ড, রং, বর্ডার এবং ডাইমেনশন কাস্টমাইজ করার জন্য এপিআইটি প্যারামিটারও গ্রহণ করে।
সম্মুখভাগ উন্নত করতে ক্লিক-টু-লোড ব্যবহার করুন।
ক্লিক-টু-লোড ধারণাটি লেজি-লোডিং এবং ফেসাড-এর সমন্বয়ে গঠিত। পেজটি প্রাথমিকভাবে ফেসাড সহ লোড হয়। যখন ব্যবহারকারী স্ট্যাটিক প্লেসহোল্ডারটিতে ক্লিক করে সেটির সাথে ইন্টারঅ্যাক্ট করেন, তখন থার্ড-পার্টি এমবেডটি লোড হয়। এটি ‘ইম্পোর্ট অন ইন্টারঅ্যাকশন প্যাটার্ন’ নামেও পরিচিত এবং নিম্নলিখিত ধাপগুলো অনুসরণ করে এটি বাস্তবায়ন করা যায়।
- পৃষ্ঠা লোড হওয়ার সময়: পৃষ্ঠায় ফেসেড বা স্ট্যাটিক এলিমেন্ট অন্তর্ভুক্ত করা হয়।
- মাউস ওভার করলে: ফেসাডটি তৃতীয় পক্ষের এমবেড প্রোভাইডারের সাথে পূর্ব-সংযুক্ত হয়।
- ক্লিক করলে: সম্মুখভাগটি তৃতীয় পক্ষের পণ্য দ্বারা প্রতিস্থাপিত হয়।
ভিডিও প্লেয়ার, চ্যাট উইজেট, অথেনটিকেশন সার্ভিস এবং সোশ্যাল মিডিয়া উইজেটের জন্য থার্ড-পার্টি এমবেডের সাথে ফেসাড ব্যবহার করা যেতে পারে। ইউটিউব ভিডিও এমবেড, যেগুলো কেবল একটি প্লে বাটনসহ ছবি, সেগুলোও এক ধরনের ফেসাড যা আমরা প্রায়শই দেখতে পাই। আসল ভিডিওটি কেবল তখনই লোড হয় যখন আপনি ছবিটিতে ক্লিক করেন।
আপনি ‘ইম্পোর্ট অন ইন্টার্যাকশন’ প্যাটার্ন ব্যবহার করে একটি কাস্টম ক্লিক-টু-লোড ফ্যাসাড তৈরি করতে পারেন অথবা বিভিন্ন ধরণের এমবেডের জন্য উপলব্ধ নিম্নলিখিত ওপেন সোর্স ফ্যাসাডগুলির মধ্যে একটি ব্যবহার করতে পারেন।
ইউটিউবের বাহ্যিক আবরণ
Lite-youtube-embed হলো ইউটিউব প্লেয়ারের জন্য একটি প্রস্তাবিত ফেসাড, যা দেখতে আসল প্লেয়ারের মতোই কিন্তু ২২৪ গুণ দ্রুততর। এর জন্য স্ক্রিপ্ট ও স্টাইলশিট ডাউনলোড করে HTML বা জাভাস্ক্রিপ্টে
<lite-youtube>ট্যাগটি ব্যবহার করতে হবে। ইউটিউব দ্বারা সমর্থিত কাস্টম প্লেয়ার প্যারামিটারগুলোparamsঅ্যাট্রিবিউটের মাধ্যমে অন্তর্ভুক্ত করা যেতে পারে।<lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>নিচে lite-youtube-embed এবং আসল এমবেডের মধ্যে একটি তুলনা দেওয়া হলো।
একটি লাইট-ইউটিউব এমবেড 
একটি ইউটিউব এমবেড ইউটিউব এবং ভিমিও প্লেয়ারের জন্য উপলব্ধ অন্যান্য অনুরূপ ফেসাডগুলো হলো lite-youtube , lite-vimeo-embed এবং lite-vimeo ।
চ্যাট উইজেটের সম্মুখভাগ
রিঅ্যাক্ট লাইভ চ্যাট লোডার আসল চ্যাট এমবেডের পরিবর্তে, এমবেডের মতো দেখতে একটি বাটন লোড করে। এটি ইন্টারকম, হেল্প স্কাউট, মেসেঞ্জারের মতো বিভিন্ন চ্যাট প্রোভাইডার প্ল্যাটফর্মের সাথে ব্যবহার করা যায়। এই সাদৃশ্যপূর্ণ উইজেটটি চ্যাট-উইজেটের চেয়ে অনেক হালকা এবং দ্রুত লোড হয়। ব্যবহারকারী যখন বাটনটির উপর মাউস হোভার করেন বা ক্লিক করেন, অথবা পেজটি দীর্ঘ সময় ধরে নিষ্ক্রিয় থাকলে, এটিকে আসল চ্যাট উইজেট দিয়ে প্রতিস্থাপন করা যায়। পোস্টমার্ক কেস স্টাডিতে ব্যাখ্যা করা হয়েছে যে, তারা কীভাবে
react-live-chat-loaderপ্রয়োগ করেছে এবং এর মাধ্যমে কী ধরনের পারফরম্যান্সের উন্নতি সাধন করেছে।
এমবেডগুলি সরান অথবা লিঙ্ক দিয়ে প্রতিস্থাপন করুন
যদি আপনি দেখেন যে কিছু থার্ড-পার্টি এমবেডের কারণে লোডিং পারফরম্যান্স খারাপ হচ্ছে এবং পূর্বে বর্ণিত কোনো কৌশল ব্যবহার করা সম্ভব হচ্ছে না, তাহলে সবচেয়ে সহজ উপায় হলো এমবেডটি পুরোপুরি সরিয়ে ফেলা। এরপরও যদি আপনি চান যে আপনার ব্যবহারকারীরা এমবেডের ভেতরের কন্টেন্টটি দেখতে পারুক, তাহলে আপনি target="_blank" সহ সেটির একটি লিঙ্ক দিতে পারেন, যাতে ব্যবহারকারী ক্লিক করে অন্য একটি ট্যাবে তা দেখতে পারে।
লেআউট স্থিতিশীলতা
যদিও ডায়নামিকভাবে এমবেডেড কন্টেন্ট লোড করা একটি পেজের লোডিং পারফরম্যান্স উন্নত করতে পারে, তবে এটি কখনও কখনও পেজের কন্টেন্টের অপ্রত্যাশিত স্থান পরিবর্তনের কারণ হতে পারে। এটি লেআউট শিফট নামে পরিচিত।
যেহেতু একটি মসৃণ ব্যবহারকারী অভিজ্ঞতার জন্য ভিজ্যুয়াল স্থিতিশীলতা গুরুত্বপূর্ণ, তাই কিউমুলেটিভ লেআউট শিফট (CLS) পরিমাপ করে যে এই পরিবর্তনগুলো কত ঘন ঘন ঘটে এবং সেগুলো কতটা বিঘ্নকারী।
পেজ লোডের সময় যেসব এলিমেন্ট পরে ডাইনামিকভাবে লোড হবে, সেগুলোর জন্য জায়গা সংরক্ষণ করে রাখলে লেআউটের পরিবর্তন এড়ানো যায়। ব্রাউজার যদি এলিমেন্টগুলোর প্রস্থ এবং উচ্চতা জানে, তবে এটি সংরক্ষিতব্য জায়গাটি নির্ধারণ করতে পারে। আপনি আইফ্রেমের width এবং height অ্যাট্রিবিউট নির্দিষ্ট করে অথবা যেখানে থার্ড-পার্টি এমবেড লোড হবে, সেই স্ট্যাটিক এলিমেন্টগুলোর জন্য একটি নির্দিষ্ট আকার নির্ধারণ করে এটি নিশ্চিত করতে পারেন। উদাহরণস্বরূপ, একটি ইউটিউব এমবেডের জন্য আইফ্রেমের প্রস্থ এবং উচ্চতা নিম্নরূপভাবে নির্দিষ্ট করা উচিত।
<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>
এই পৃষ্ঠাটি রেন্ডার হওয়ার পরে আপনি DevTools ব্যবহার করে ইনজেক্ট করা iframe পরিদর্শন করতে পারেন। নিম্নলিখিত কোড স্নিপেটে যেমন দেখা যাচ্ছে, ইনজেক্ট করা আইফ্রেমটির উচ্চতা স্থির, কিন্তু এর প্রস্থ শতাংশে নির্দিষ্ট করা আছে।
<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>
লেআউট শিফট টার্মিনেটর
যেহেতু থার্ড-পার্টি এমবেডগুলো প্রায়শই তাদের রেন্ডার করা চূড়ান্ত কন্টেন্টের মাত্রা (প্রস্থ, উচ্চতা) উল্লেখ করে না, তাই এগুলো একটি পৃষ্ঠার লেআউটে উল্লেখযোগ্য পরিবর্তন ঘটাতে পারে। বিভিন্ন ভিউপোর্ট সাইজে ডেভটুলস ব্যবহার করে চূড়ান্ত আকারগুলো ম্যানুয়ালি পরীক্ষা না করে এই সমস্যার সমাধান করা বেশ কঠিন হতে পারে।
এখন লেআউট শিফট টার্মিনেটর নামে একটি স্বয়ংক্রিয় টুল রয়েছে, যা আপনাকে টুইটার, ফেসবুক এবং অন্যান্য প্রোভাইডারদের মতো জনপ্রিয় এমবেডগুলোর লেআউট শিফট কমাতে সাহায্য করতে পারে।
লেআউট শিফট টার্মিনেটর:
- এমবেডটি ক্লায়েন্ট-সাইডে একটি আইফ্রেমে লোড করে।
- আইফ্রেমটিকে বিভিন্ন জনপ্রিয় ভিউপোর্ট আকারে পরিবর্তন করে।
- প্রতিটি জনপ্রিয় ভিউপোর্টের জন্য, এমবেডের মাত্রাগুলো সংগ্রহ করা হয়, যা পরবর্তীতে মিডিয়া কোয়েরি এবং কন্টেইনার কোয়েরি তৈরি করতে ব্যবহৃত হয়।
- এমবেড ইনিশিয়ালাইজ না হওয়া পর্যন্ত মিডিয়া কোয়েরি (এবং কন্টেইনার কোয়েরি) ব্যবহার করে এমবেড মার্কআপের চারপাশে একটি ন্যূনতম-উচ্চতার র্যাপারের আকার নির্ধারণ করা হয় (এর পরে ন্যূনতম-উচ্চতার স্টাইলগুলি সরিয়ে ফেলা হয়)।
একটি অপ্টিমাইজ করা এমবেড স্নিপেট তৈরি করে, যা আপনার পৃষ্ঠার যে কোনো স্থানে এমবেড করার জন্য কপি ও পেস্ট করা যায়।
লেআউট শিফট টার্মিনেটর ব্যবহার করে দেখুন, এবং লেআউট শিফট টার্মিনেটর গিটহাব প্রজেক্টে আপনার যেকোনো মতামত জানাতে পারেন। টুলটি বর্তমানে বিটা পর্যায়ে রয়েছে এবং সময়ের সাথে সাথে আরও পরিমার্জনের মাধ্যমে এর উন্নতি করার লক্ষ্য রয়েছে।
উপসংহার
থার্ড-পার্টি এমবেড ব্যবহারকারীদের জন্য অনেক মূল্যবান হতে পারে, কিন্তু একটি পেজে এমবেডের সংখ্যা ও আকার বাড়ার সাথে সাথে পারফরম্যান্স ক্ষতিগ্রস্ত হতে পারে। একারণে, এমবেডের অবস্থান, প্রাসঙ্গিকতা এবং সম্ভাব্য ব্যবহারকারীদের চাহিদার ওপর ভিত্তি করে সেগুলোর জন্য উপযুক্ত লোডিং কৌশল পরিমাপ, বিচার এবং ব্যবহার করা প্রয়োজন।