Next-Gen Formats: Lighthouse আসলে কী চায়
এই অডিটের অর্থ হলো WebP বা AVIF ব্যবহার করা। এখানে এমন মার্কআপ দেওয়া হলো যা এটিকে সন্তুষ্ট করে এবং পুরোনো ব্রাউজারগুলোকেও সচল রাখে।
Lighthouse-এর এই সতর্কবার্তার অর্থ হলো আপনার JPEG এবং PNG ফাইলগুলোকে WebP বা AVIF-এ রূপান্তর করা, তারপর একটি picture এলিমেন্টের মাধ্যমে মূল ফাইলটিকে ফলব্যাক হিসেবে রেখে সেগুলো পরিবেশন করা। এই অডিটটি সমাধান করা তুলনামূলক সহজ, কারণ এর সমাধানটি কাঠামোগত পরিবর্তনের চেয়ে যান্ত্রিক প্রক্রিয়াকরণ বেশি।
Lighthouse তখনই এই সতর্কবার্তা দেয় যখন এটি এমন কিছু ছবি খুঁজে পায় যা আধুনিক ফরম্যাটে রূপান্তর করলে আকারে উল্লেখযোগ্যভাবে ছোট হতো। এই হিসাবটি ডাউনলোড করা ফাইলের ওপর ভিত্তি করে করা হয়, তাই এটি যে পরিমাণ সাশ্রয়ের কথা বলে তা সাধারণত অর্জন করা সম্ভব এবং কখনো কখনো তা অনুমানের চেয়েও বেশি হতে পারে।
Lighthouse কী পরিমাপ করছে
Lighthouse অভ্যন্তরীণভাবে প্রতিটি ছবিকে WebP-তে রি-এনকোড করে এবং সাশ্রয়ের পরিমাণ একটি নির্দিষ্ট সীমা অতিক্রম করলে সেই পার্থক্যটি রিপোর্ট করে। রিপোর্টের এই সংখ্যাটি কোনো সাধারণ পরামর্শ নয়, বরং একটি প্রকৃত অনুমান।
নির্দিষ্ট সীমার নিচের ছবিগুলোকে উপেক্ষা করা হয়, যার কারণে ৩০টি ছবি থাকা একটি পৃষ্ঠায় অডিটে কেবল ৪টি ছবি দেখাতে পারে। তালিকায় থাকা ফাইলগুলোই প্রথমে ঠিক করা উচিত। এগুলো সমাধান করলেই সাধারণত সতর্কবার্তাটি পুরোপুরি চলে যায়, যদিও পৃষ্ঠার অন্যান্য ছবিগুলো পুরোনো ফরম্যাটেই থেকে যায়।
যে মার্কআপ অডিটটিকে সন্তুষ্ট করে
একটি picture এলিমেন্ট ব্যবহার করুন যেখানে প্রথমে AVIF, দ্বিতীয়ত WebP এবং img ট্যাগে মূল JPEG থাকবে। ব্রাউজারটি তার সমর্থনযোগ্য প্রথম সোর্সটি বেছে নেয়, ফলে নতুন ব্রাউজারগুলো ছোট ফাইল পায় এবং পুরোনো ব্রাউজারগুলোও ছবি দেখতে পায়।
img ট্যাগটি অবশ্যই থাকতে হবে, কারণ এটি alt টেক্সট, ডাইমেনশন এবং ফলব্যাক বহন করে। width এবং height অ্যাট্রিবিউট বাদ দিলে ছবি লোড হওয়ার সময় লেআউট শিফট হয়, যা এই সমস্যাটি সমাধান করলেও অন্য একটি Core Web Vitals পরিমাপকে ক্ষতিগ্রস্ত করে। উভয় অ্যাট্রিবিউটই ফলব্যাক ছবির প্রকৃত পিক্সেল সাইজে সেট করুন।
কীভাবে অডিটটি সমাধান করবেন
সতর্কবার্তাটি সঠিকভাবে সমাধান করতে এই ৬টি ধাপ অনুসরণ করুন।
- Lighthouse রিপোর্টটি খুলুন এবং এটি যে ছবিগুলোর নাম উল্লেখ করেছে তার তালিকা তৈরি করুন, যেগুলোতে পরিমাপযোগ্য সাশ্রয় সম্ভব।
- প্রতিটি ছবির ডিসপ্লে সাইজ পরীক্ষা করুন, কারণ অনেক ছবি ভুল ফরম্যাটের পাশাপাশি প্রয়োজনের চেয়ে বড় আকারের হয়ে থাকে।
- প্রতিটি ছবিকে তার প্রকৃত ডিসপ্লে উইডথ অনুযায়ী রিসাইজ করুন, হাই-ডেনসিটি স্ক্রিনের জন্য এটি দ্বিগুণ করুন।
- WebP-তে quality ৮০ এবং পৃষ্ঠার সবচেয়ে বড় ছবিগুলোর জন্য AVIF-এ quality ৬৫-তে রূপান্তর করুন।
- ফলাফলগুলো একটি picture এলিমেন্টের মাধ্যমে পরিবেশন করুন যেখানে মূল ছবিটি img ফলব্যাক হিসেবে থাকবে।
- সতর্কবার্তাটি চলে গেছে কিনা এবং কোনো লেআউট শিফট হচ্ছে না কিনা তা নিশ্চিত করতে আবার Lighthouse রান করুন।
ধাপ ৪-এর চেয়ে ধাপ ৩ বেশি গুরুত্বপূর্ণ। ডাইমেনশন ফাইলের আকারের সিংহভাগ নিয়ন্ত্রণ করে এবং একটি বড় আকারের WebP ছবিও আসলে একটি বড় আকারের ছবিই থেকে যায়। বাল্ক কনভার্ট করতে কয়েক মিনিট সময় লাগে, যেখানে মার্কআপ লিখতে সাধারণত বেশি সময় লাগে।
কোন ছবির জন্য কোন ফরম্যাট
| ছবি | সুপারিশকৃত ফরম্যাট | কোয়ালিটি | কারণ |
|---|---|---|---|
| Hero banner | WebP ফলব্যাকসহ AVIF | 60 থেকে 70 | সবচেয়ে বড় ফাইল, সবচেয়ে বেশি সাশ্রয় |
| In article photograph | WebP | 75 থেকে 80 | এনকোড করা দ্রুত, চমৎকার সাপোর্ট |
| Product photograph | WebP | 80 | ক্রেতাদের জন্য ডিটেইলস গুরুত্বপূর্ণ |
| Logo or icon with transparency | WebP lossless | Lossless | PNG-এর চেয়ে ২০ থেকে ৩০ শতাংশ ভালো |
| Icon under 5 KB | PNG বা SVG | প্রযোজ্য নয় | আধুনিক ফরম্যাটগুলো অতিরিক্ত ওভারহেড যোগ করে |
আপনার প্ল্যাটফর্ম কি ইতিমধ্যেই এটি করছে
অনেক কনটেন্ট সিস্টেম এবং হোস্ট ছবিগুলো স্বয়ংক্রিয়ভাবে রূপান্তর করে, তাই ম্যানুয়ালি কিছু করার আগে তা পরীক্ষা করে নিন। একই কাজ দুইবার করা সাধারণ এবং অপচয়।
২ মিনিটে পরীক্ষা করুন। প্রকাশিত পৃষ্ঠাটি খুলুন, একটি ছবির ওপর রাইট ক্লিক করে নতুন ট্যাবে ওপেন করুন, তারপর অ্যাড্রেস বারে ফাইল এক্সটেনশনটি দেখুন। আপনার আপলোড করা JPEG ফাইলে .webp এক্সটেনশন থাকার অর্থ হলো প্ল্যাটফর্মটি ইতিমধ্যেই এটি রূপান্তর করছে। Shopify, বেশিরভাগ ম্যানেজড WordPress হোস্ট এবং বেশ কয়েকটি সাইট বিল্ডার ডিফল্টভাবেই এটি করে থাকে।
কেন সতর্কবার্তাটি মাঝে মাঝে ফিরে আসে
রূপান্তরের ধাপটি স্বয়ংক্রিয় না হয়ে ম্যানুয়াল হলে নতুন আপলোডের কারণে সমস্যাটি আবার ফিরে আসে। জানুয়ারিতে ঠিক করা একটি সাইটে জুনের মধ্যে আবার সতর্কবার্তা দেখাতে পারে যদি এডিটররা সরাসরি ক্যামেরা থেকে ছবি আপলোড করেন।
কেবল ফাইলগুলো ঠিক না করে পুরো প্রক্রিয়াটি ঠিক করুন। হয় প্ল্যাটফর্ম লেভেলে স্বয়ংক্রিয় রূপান্তর চালু করুন, অথবা একটি সহজ নিয়ম তৈরি করুন যে আপলোডের আগেই ছবিগুলো রিসাইজ এবং কনভার্ট করা হবে। একাধিক ব্যক্তি পাবলিশ করেন এমন যেকোনো সাইটে নিয়মটি লিখে রাখা গুরুত্বপূর্ণ, কারণ অডিটটি গড় ছবির পরিবর্তে সবচেয়ে খারাপ ছবিটিকে পরিমাপ করে।
আপনার কি AVIF, WebP নাকি উভয়ই ব্যবহার করা উচিত
বেশিরভাগ সাইটে কেবল WebP ব্যবহার করুন এবং পৃষ্ঠার সবচেয়ে বড় ছবিগুলোর জন্য AVIF যোগ করুন। উভয় ফরম্যাট সমর্থন করার অর্থ হলো জেনারেট, স্টোর এবং সিঙ্ক করে রাখার জন্য ফাইলের সংখ্যা দ্বিগুণ করা, যা সাধারণ ছবির ক্ষেত্রে খুব সামান্যই সাশ্রয় দেয়।
ফটোগ্রাফি-প্রধান সাইটগুলোর ক্ষেত্রে হিসাবটি বদলে যায়, যেখানে ইতিমধ্যেই কয়েকশ কিলোবাইট আকারের ফাইলে AVIF আরও ২০ থেকে ৩০ শতাংশ সাশ্রয় দেয়। একটি ৬০০ KB হিরো ইমেজ থাকা পৃষ্ঠার জন্য এটি একটি বড় সাশ্রয়। তবে ৪০ KB থাম্বনেইল থাকা পৃষ্ঠার ক্ষেত্রে অতিরিক্ত পাইপলাইনের জন্য যে পরিশ্রম করতে হয় তার চেয়ে প্রাপ্তি অনেক কম, এবং কেবল WebP ব্যবহার করলেই অডিটটি সফলভাবে পার হওয়া যায়।
ফলাফলটি সঠিকভাবে পরীক্ষা করা
এক্সটেনশন নিষ্ক্রিয় করে একটি প্রাইভেট উইন্ডোতে Lighthouse আবার রান করুন, কারণ ব্রাউজার এক্সটেনশনগুলো পরিমাপে বিভ্রান্তি তৈরি করে। প্রতিবার রান করার সময় স্কোরেও তারতম্য হতে পারে, তাই একটি সংখ্যার ওপর ভরসা না করে ৩ বার রান করে তুলনা করুন।
অনুমান করার চেয়ে ব্রাউজারটি নতুন ফরম্যাট পাচ্ছে কিনা তা নিশ্চিত করুন। ডেভেলপার টুলস খুলুন, Network ট্যাবে যান, ছবি অনুযায়ী ফিল্টার করুন এবং পৃষ্ঠাটি রিলোড করুন। Type কলামটি দেখাবে আসলে কী পরিবেশন করা হয়েছে। রূপান্তরের পরেও যদি পৃষ্ঠাটি JPEG পরিবেশন করে, তবে সাধারণত এর অর্থ হলো picture এলিমেন্ট মার্কআপটি ভুল আছে অথবা কোনো ক্যাশিং লেয়ার আগের সংস্করণটি ধরে রেখেছে।
এর সাথে সম্পর্কিত অন্যান্য অডিট যা একসাথে দেখা যায়
- Properly size images. ছবিটি যে স্থানে প্রদর্শিত হচ্ছে তার চেয়ে বড় আকারের। কম্প্রেস করার চেয়ে রিসাইজ করুন।
- Efficiently encode images. কম্প্রেশন খুব হালকা হয়েছে। কোয়ালিটি সেটিং কমিয়ে দিন।
- Defer offscreen images. স্ক্রিনের নিচের অংশের ছবিগুলোতে lazy loading যোগ করুন।
- Largest Contentful Paint element. সাধারণত আপনার হিরো ইমেজ, যা সবার আগে মনোযোগ পাওয়ার যোগ্য।
- Image elements do not have explicit width and height. লেআউট শিফট প্রতিরোধ করতে উভয় অ্যাট্রিবিউট যোগ করুন।
এই ৫টি অডিট সাধারণত একসাথেই আসে এবং রিপোর্টে নাম থাকা ছবিগুলো রিসাইজ ও কনভার্ট করলে একবারেই এগুলোর বেশিরভাগ সমাধান হয়ে যায়।
এটি আসলে একটি পৃষ্ঠাকে কতটা উন্নত করে
আধুনিক ফরম্যাটে রূপান্তর করলে সাধারণত ছবির সাইজ ২৫ থেকে ৩৫ শতাংশ কমে যায় এবং প্রথমে রিসাইজ করে নিলে প্রায়শই এর চেয়ে অনেক বেশি কমে। ছবি-প্রধান পৃষ্ঠার ক্ষেত্রে এই সম্মিলিত প্রভাব প্রায়শই ৭০ থেকে ৮০ শতাংশ পর্যন্ত হয়ে থাকে।
এই উন্নতিটি Largest Contentful Paint-এ প্রকাশ পায়, যা পরিমাপ করে মূল কনটেন্ট কত দ্রুত প্রদর্শিত হচ্ছে। এই পরিমাপটি সাধারণত একটি ছবির ওপর নির্ভর করে, তাই হিরো ফাইলটি ছোট করলে তা পৃষ্ঠার অন্যান্য অংশের তুলনায় অনেক বেশি প্রভাব ফেলে। ২০টি ছোট ছবি কমানোর চেয়ে ১টি বড় ছবি কমানো বেশি গুরুত্বপূর্ণ।
যা করা যাবে না
JPEG ফলব্যাকটি সরিয়ে ফেলবেন না এবং ভিজিটররা ডাউনলোড করবেন এমন ছবিগুলো রূপান্তর করবেন না। উভয় ভুলই সামান্য স্কোর বাড়ানোর জন্য একটি বড় কার্যকারিতা নষ্ট করে।
প্রেস কিট, প্রিন্ট করার যোগ্য গাইড, ডাউনলোডযোগ্য টেমপ্লেট এবং সরবরাহকারীর ফাইলগুলো JPEG বা PNG রাখাই উচিত, কারণ ব্রাউজারের বাইরে WebP সঠিকভাবে কাজ করে না। এগুলোকে আধুনিক ফরম্যাটে পরিবেশন করলে ব্যবহারকারীরা ফাইল খুলতে না পেরে সহায়তার অনুরোধ পাঠাবেন, যা সাশ্রয় হওয়া ব্যান্ডউইথের চেয়ে বেশি ব্যয়বহুল।
রিপোর্টে নাম থাকা ছবিগুলো রূপান্তর করা
ইতিমধ্যেই প্রকাশিত সংস্করণগুলোর পরিবর্তে মূল ফাইলগুলো থেকে রূপান্তর করুন, কারণ একটি সংকুচিত JPEG নতুন ফাইলে ত্রুটি বয়ে নিয়ে যায়। এনকোডারটি বিদ্যমান ত্রুটি এবং প্রকৃত ডিটেইলসের মধ্যে পার্থক্য করতে পারে না এবং সেগুলো সংরক্ষণ করতে গিয়ে অতিরিক্ত সাইজ নষ্ট করে।
একসাথে ৫০০টি পর্যন্ত ফাইল ড্রপ করুন, অথবা সরাসরি একটি ZIP আর্কাইভ ড্র্যাগ করে আনুন এবং পুরো সেটটি একবারে রূপান্তরিত হয়ে যাবে। সবকিছু আপনার নিজস্ব প্রসেসরে আপনার ব্রাউজারের ভেতরে চলে, তাই ক্লায়েন্ট সাইট, স্টেজিং অ্যাসেট এবং অপ্রকাশিত পৃষ্ঠাগুলো কখনই কোনো সার্ভারে পৌঁছায় না। নেটওয়ার্কে একটি ফাইলও না পাঠিয়ে কয়েক মিনিটের মধ্যে একটি সম্পূর্ণ সাইটের রূপান্তর শেষ হয়ে যায়।
রূপান্তরিত ফাইলগুলো মূল ফাইলগুলোর পাশাপাশি একই নাম দিয়ে রাখুন, যাতে প্রতিটি ছবির জন্য ম্যানুয়ালি এডিট না করে একটি অনুমানযোগ্য প্যাটার্ন দিয়ে picture এলিমেন্ট মার্কআপ তৈরি করা যায়। hero.jpg, hero.webp এবং hero.avif থাকা একটি ফোল্ডার টেমপ্লেট করা সহজ এবং এটি পরবর্তী ফরম্যাট মাইগ্রেশনকে প্রতিটি পৃষ্ঠা নতুন করে লেখার পরিবর্তে একটি ব্যাচ কনভারশনে পরিণত করে।