ভিডিও কর্মক্ষমতা

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

তবে, ছবিই একমাত্র মিডিয়া টাইপ নয় যা ওয়েবে সচরাচর দেখা যায়। ভিডিও হলো আরেকটি জনপ্রিয় মিডিয়া টাইপ যা প্রায়শই ওয়েব পেজে ব্যবহৃত হয়। কিছু সম্ভাব্য অপটিমাইজেশন দেখার আগে, <video> এলিমেন্টটি কীভাবে কাজ করে তা প্রথমে বোঝা জরুরি।

ভিডিও উৎস ফাইল

মিডিয়া ফাইল নিয়ে কাজ করার সময়, আপনার অপারেটিং সিস্টেমে পরিচিত ফাইলটিকে ( .mp4 , .webm এবং অন্যান্য) কন্টেইনার বলা হয়। একটি কন্টেইনারে এক বা একাধিক স্ট্রিম থাকে। বেশিরভাগ ক্ষেত্রে, এটি হলো ভিডিও এবং অডিও স্ট্রিম।

আপনি একটি কোডেক ব্যবহার করে প্রতিটি স্ট্রিমকে কম্প্রেস করতে পারেন। উদাহরণস্বরূপ, একটি video.webm হতে পারে একটি WebM কন্টেইনার, যার মধ্যে VP9 ব্যবহার করে কম্প্রেস করা একটি ভিডিও স্ট্রিম এবং Vorbis ব্যবহার করে কম্প্রেস করা একটি অডিও স্ট্রিম রয়েছে।

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

ভিডিও ফাইল কম্প্রেস করার একটি উপায় হলো FFmpeg ব্যবহার করা।

ffmpeg -i input.mov output.webm

পূর্ববর্তী কমান্ডটি—যদিও FFmpeg ব্যবহারের ক্ষেত্রে এটি খুবই সাধারণ— input.mov ফাইলটি গ্রহণ করে এবং ডিফল্ট FFmpeg অপশন ব্যবহার করে একটি output.webm ফাইল আউটপুট করে। পূর্ববর্তী কমান্ডটি একটি ছোট আকারের ভিডিও ফাইল আউটপুট করে যা সমস্ত আধুনিক ব্রাউজারে কাজ করে। FFmpeg-এর দেওয়া ভিডিও বা অডিও অপশনগুলো সামান্য পরিবর্তন করে আপনি একটি ভিডিওর ফাইলের আকার আরও কমাতে পারেন। উদাহরণস্বরূপ, যদি আপনি একটি GIF প্রতিস্থাপন করতে <video> এলিমেন্ট ব্যবহার করেন, তাহলে আপনার অডিও ট্র্যাকটি সরিয়ে ফেলা উচিত:

ffmpeg -i input.mov -an output.webm

আপনি যদি আরও কিছুটা সূক্ষ্ম পরিবর্তন করতে চান, তাহলে ভ্যারিয়েবল বিটরেট এনকোডিং ব্যবহার না করে ভিডিও কম্প্রেস করার জন্য FFmpeg-এ -crf ফ্ল্যাগটি রয়েছে। -crf পূর্ণরূপ হলো কনস্ট্যান্ট রেট ফ্যাক্টর (Constant Rate Factor )। এটি এমন একটি সেটিং যা কম্প্রেশনের মাত্রা সমন্বয় করে এবং একটি নির্দিষ্ট পরিসরের মধ্যে পূর্ণসংখ্যা গ্রহণ করে এই কাজটি করে থাকে।

H.264 এবং VP9-এর মতো কোডেকগুলো -crf ফ্ল্যাগ সমর্থন করে, কিন্তু এর ব্যবহার নির্ভর করে আপনি কোন কোডেক ব্যবহার করছেন তার উপর। আরও তথ্যের জন্য, H.264-এ ভিডিও এনকোড করার জন্য কনস্ট্যান্ট রেট ফ্যাক্টর এবং VP9-এ ভিডিও এনকোড করার সময় কনস্ট্যান্ট কোয়ালিটি সম্পর্কে পড়ুন।

একাধিক ফরম্যাট

ভিডিও ফাইল নিয়ে কাজ করার সময়, একাধিক ফরম্যাট নির্দিষ্ট করা এমন ব্রাউজারগুলোর জন্য একটি বিকল্প ব্যবস্থা হিসেবে কাজ করে, যেগুলো সব আধুনিক ফরম্যাট সমর্থন করে না।

<video>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

যেহেতু সমস্ত আধুনিক ব্রাউজার H.264 কোডেক সমর্থন করে , তাই পুরোনো ব্রাউজারগুলোর জন্য ফলব্যাক হিসেবে MP4 ব্যবহার করা যেতে পারে। WebM সংস্করণটি নতুন AV1 কোডেক ব্যবহার করতে পারে, যা এখনও ততটা ব্যাপকভাবে সমর্থিত নয় , অথবা পুরোনো VP9 কোডেক ব্যবহার করতে পারে, যা AV1-এর চেয়ে ভালোভাবে সমর্থিত হলেও সাধারণত AV1-এর মতো ভালোভাবে কম্প্রেস করে না।

poster বৈশিষ্ট্য

<video> এলিমেন্টে poster অ্যাট্রিবিউট ব্যবহার করে একটি ভিডিওর পোস্টার ইমেজ যোগ করা হয়, যা প্লেব্যাক শুরু হওয়ার আগেই ভিডিওর বিষয়বস্তু কী হতে পারে সে সম্পর্কে ব্যবহারকারীদের একটি ধারণা দেয়।

<video poster="poster.jpg">
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

অটোপ্লে

HTTP আর্কাইভ অনুসারে, ওয়েব জুড়ে থাকা ২০% ভিডিওতে autoplay অ্যাট্রিবিউট অন্তর্ভুক্ত থাকে। যখন কোনো ভিডিও অবিলম্বে প্লে করা প্রয়োজন হয়, তখন autoplay ব্যবহার করা হয়—যেমন ভিডিওর ব্যাকগ্রাউন্ড হিসেবে বা অ্যানিমেটেড জিআইএফ-এর বিকল্প হিসেবে ব্যবহারের ক্ষেত্রে।

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

আপনার ওয়েবসাইটের জন্য যদি স্বয়ংক্রিয়ভাবে ভিডিও চালু করার প্রয়োজন হয়, তাহলে আপনি সরাসরি <video> এলিমেন্টে autoplay অ্যাট্রিবিউটটি ব্যবহার করতে পারেন:

<!-- This will automatically play a video, but
     it will loop continuously and be muted: -->
<video autoplay muted loop playsinline>
  <source src="video.webm" type="video/webm">
  <source src="video.mp4" type="video/mp4">
</video>

poster অ্যাট্রিবিউটকে ইন্টারসেকশন অবজারভার এপিআই-এর সাথে একত্রিত করে আপনি আপনার পেজকে এমনভাবে কনফিগার করতে পারেন, যাতে ভিডিও শুধুমাত্র ভিউপোর্টের মধ্যে এলেই ডাউনলোড হয় । poster ইমেজটি একটি নিম্ন-মানের ইমেজ প্লেসহোল্ডার হতে পারে, যেমন ভিডিওটির প্রথম ফ্রেম। ভিডিওটি ভিউপোর্টে প্রদর্শিত হওয়ার সাথে সাথে ব্রাউজার ভিডিওটি ডাউনলোড করা শুরু করে। এটি প্রাথমিক ভিউপোর্টের মধ্যে থাকা কন্টেন্টের লোড টাইম উন্নত করতে পারে। এর একটি অসুবিধা হলো, autoplay জন্য poster ইমেজ ব্যবহার করলে, ভিডিওটি লোড হয়ে প্লে হওয়া শুরু না হওয়া পর্যন্ত আপনার ব্যবহারকারীরা এমন একটি ইমেজ দেখতে পান যা শুধুমাত্র অল্প সময়ের জন্য প্রদর্শিত হয়।

ব্যবহারকারী-প্রবর্তিত প্লেব্যাক

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

আপনি <video> এলিমেন্টের preload অ্যাট্রিবিউট ব্যবহার করে ভিডিও রিসোর্সের জন্য কী ডাউনলোড হবে তা প্রভাবিত করতে পারেন:

• preload="none" সেট করলে ব্রাউজারকে জানানো হয় যে ভিডিওর কোনো অংশই আগে থেকে লোড করা হবে না।
• preload="metadata" সেট করলে শুধুমাত্র ভিডিওর মেটাডেটা সংগ্রহ করা হয়, যেমন ভিডিওর সময়কাল এবং সম্ভবত অন্যান্য সাধারণ তথ্য।

যদি আপনি এমন ভিডিও লোড করেন যেগুলোর প্লেব্যাক ব্যবহারকারীদের নিজেদেরই শুরু করতে হয়, preload="none" সেট করাই সম্ভবত সবচেয়ে বাঞ্ছনীয়।

এক্ষেত্রে একটি poster ইমেজ যোগ করে আপনি ইউজার এক্সপেরিয়েন্স উন্নত করতে পারেন। এটি ব্যবহারকারীকে ভিডিওটি কী সম্পর্কে, সে বিষয়ে একটি ধারণা দেয়। এছাড়াও, যদি পোস্টার ইমেজটি আপনার LCP এলিমেন্ট হয়, তাহলে আপনি <link rel="preload"> ` হিন্টের সাথে fetchpriority="high" ব্যবহার করে poster ইমেজের প্রায়োরিটি বাড়াতে পারেন।

<link rel="preload" as="image" href="poster.jpg" fetchpriority="high">

লেজি-লোডিং

ভিডিও পারফরম্যান্সে তুলনামূলকভাবে নতুন একটি সংযোজন হলো loading=lazy অ্যাট্রিবিউট। ব্রাউজার-স্তরের ইমেজ লেজি লোডিং এবং আইফ্রেমের মতো, এই অ্যাট্রিবিউটটি ভিডিওর poster এবং preload ডাউনলোডের ক্ষেত্রেও একই সুবিধা নিয়ে আসে।

preload="none" বা preload="metadata" এর সাথে poster অ্যাট্রিবিউট ব্যবহার করলে ডিফল্টভাবে ভিডিও ডাউনলোড এড়ানো যায়, আর loading=lazy অ্যাট্রিবিউটটি ভিডিও ভিউপোর্টে আসা পর্যন্ত বা আসার কাছাকাছি না আসা পর্যন্ত পোস্টার ইমেজ এবং মেটাডেটা ডাউনলোড করাও স্থগিত রাখে।

এমবেড

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

এই বাস্তবতার পরিপ্রেক্ষিতে, থার্ড-পার্টি ভিডিও এমবেড পেজের পারফরম্যান্সে উল্লেখযোগ্যভাবে প্রভাব ফেলতে পারে। HTTP Archive-এর তথ্য অনুযায়ী, গড়পড়তা ওয়েবসাইটের ক্ষেত্রে ইউটিউব এমবেড ১.৭ সেকেন্ডের বেশি সময় ধরে মেইন থ্রেডকে ব্লক করে রাখে। দীর্ঘ সময় ধরে মেইন থ্রেড ব্লক হয়ে থাকা একটি গুরুতর ইউজার এক্সপেরিয়েন্সের সমস্যা, যা একটি পেজের Interaction to Next Paint (INP)-কে প্রভাবিত করতে পারে। তবে, আপনি একটি সমঝোতায় আসতে পারেন। পেজ লোড হওয়ার সময় এমবেডটি সঙ্গে সঙ্গে লোড না করে , এর পরিবর্তে এমবেডের জন্য একটি প্লেসহোল্ডার তৈরি করতে পারেন, যা ব্যবহারকারী সেটির সাথে ইন্টারঅ্যাক্ট করলে আসল ভিডিও এমবেড দ্বারা প্রতিস্থাপিত হবে।

ভিডিও ডেমো

আপনার জ্ঞান পরীক্ষা করুন

এরপরে: ওয়েব ফন্ট অপ্টিমাইজ করুন

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