ছবির কারণে ধীরগতির LCP ঠিক করার সহজ উপায়

একটি ধীরগতির লার্জেস্ট কনটেন্টফুল পেইন্ট (LCP) ইমেজ ৪টি ধাপে ঠিক করুন: এটিকে এর ডিসপ্লে সাইজে রিসাইজ করুন, WebP বা AVIF-এ কনভার্ট করুন, প্রিলোড করুন এবং fetchpriority-কে high হিসেবে সেট করুন। প্রথম ২টি ধাপেই সবচেয়ে বেশি উন্নতি লক্ষ্য করা যায় এবং এর জন্য আপনার পেজের মার্কআপে কোনো পরিবর্তন করার প্রয়োজন হয় না।

অধিকাংশ পেজে লার্জেস্ট কনটেন্টফুল পেইন্ট এলিমেন্টটি হলো একটি একক হিরো ইমেজ, যার অর্থ হলো LCP আসলে আপনার পুরো সাইটের চেয়ে বরং একটি নির্দিষ্ট ফাইল সম্পর্কিত বিষয়। সেই একটি ফাইল ঠিক করলেই সাধারণত অন্য যেকোনো অপ্টিমাইজেশনের চেয়ে পরিমাপে সবচেয়ে বেশি ইতিবাচক পরিবর্তন আসে।

LCP যা পরিমাপ করে

পেজ লোড হওয়া শুরু করার সময় থেকে পরিমাপ করে, সবচেয়ে বড় দৃশ্যমান এলিমেন্টটি রেন্ডার হতে কত সময় নেয় তা LCP রেকর্ড করে। Google ২.৫ সেকেন্ড বা তার কম সময়কে ভালো (good), ২.৫ থেকে ৪ সেকেন্ডকে উন্নতির প্রয়োজন (needing improvement) এবং ৪ সেকেন্ডের বেশি সময়কে দুর্বল (poor) হিসেবে বিবেচনা করে।

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

দায়ী এলিমেন্টটি খুঁজে বের করা

Lighthouse রান করুন এবং Largest Contentful Paint এলিমেন্ট এন্ট্রিটি দেখুন, যা পরিমাপ করা নির্দিষ্ট এলিমেন্টটির নাম দেখায়। অনুমান করে সময় নষ্ট করা ঠিক নয়, কারণ এলিমেন্টটি প্রায়শই এমন কিছু হয় যা মানুষ সাধারণত ভাবেন না।

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

প্রভাবের ক্রমানুসারে ইমেজ ঠিক করুন

একটি ইমেজে LCP উন্নত করতে, ক্রমানুসারে এই ৬টি ধাপ অনুসরণ করুন।

1. ইমেজটিকে তার প্রদর্শিত হতে যাওয়া সবচেয়ে বড় সাইজে রিসাইজ করুন, হাই-ডেনসিটি স্ক্রিনের জন্য এটি দ্বিগুণ করুন।
2. এটিকে WebP-তে কনভার্ট করুন, অথবা ইমেজটি যদি বড় এবং ফটোগ্রাফিক হয় তবে AVIF-এ কনভার্ট করুন।
3. একটি হিরো ইমেজের জন্য ২০০ KB-এর নিচের টার্গেটে কম্প্রেস করুন, যা বেশিরভাগ ডিজাইনে ফুল উইডথে অর্জন করা সম্ভব।
4. width এবং height অ্যাট্রিবিউট যোগ করুন যাতে ব্রাউজার জায়গা সংরক্ষণ করে এবং কোনো লেআউট শিফট না ঘটে।
5. পেজের হেডে ইমেজটি প্রিলোড করুন যাতে ব্রাউজার অবিলম্বে এটি ফেচ করা শুরু করে।
6. ইমেজ এলিমেন্টে fetchpriority-কে high হিসেবে সেট করুন, যা ব্রাউজারকে জানায় যে এই ফাইলটি সবচেয়ে বেশি গুরুত্বপূর্ণ।

ধাপ ১ এবং ২ সাধারণত উন্নতির সিংহভাগ প্রদান করে এবং এই দুটি ধাপের জন্য পেজের মার্কআপ স্পর্শ করার কোনো প্রয়োজন হয় না।

কেন কম্প্রেস করার চেয়ে রিসাইজ করা বেশি কার্যকর

ডাইমেনশন একটি ফাইলের সাইজের বেশিরভাগ অংশ নিয়ন্ত্রণ করে, তাই রিসাইজ করা যেকোনো কোয়ালিটি সেটিংয়ের চেয়ে বেশি ওজন হ্রাস করে। ১২০০ পিক্সেলে প্রদর্শিত একটি ৪০০০ পিক্সেলের ছবি পেজে যা দেখানো সম্ভব তার চেয়ে ১১ গুণ বেশি পিক্সেল ডেটা বহন করে।

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

প্রিলোড এবং fetchpriority

প্রিলোডিং ব্রাউজারকে পেজ পার্স করা শেষ করার আগেই হিরো ইমেজটি ফেচ করতে বলে, যা সাধারণত ২০০ থেকে ৫০০ মিলিসেকেন্ড সাশ্রয় করে। এই সেটিংটি গুরুত্বপূর্ণ কারণ ব্রাউজারগুলো পার্সিং প্রক্রিয়ার শেষের দিকে ইমেজগুলো সনাক্ত করে।

শুধুমাত্র একটি ইমেজ প্রিলোড করুন। বেশ কয়েকটি প্রিলোড করলে এর সুবিধা নষ্ট হয়ে যায়, কারণ ব্রাউজার তখন তার মনোযোগ ঠিক সেভাবেই ভাগ করে নেয় যেভাবে সে স্বাভাবিকভাবে করত। fetchpriority-কে high হিসেবে সেট করলে কম মার্কআপের মাধ্যমে একই রকম ফলাফল পাওয়া যায় এবং প্রাথমিক HTML-এ ইতিমধ্যে উপস্থিত থাকা ইমেজের জন্য এটি প্রায়শই একাই যথেষ্ট।

যেসব ভুল LCP-কে আরও খারাপ করে তোলে

• হিরো ইমেজ লেজি লোড করা। লেজি লোডিং আপনার প্রথমে প্রয়োজন এমন ফাইলটিকেই বিলম্বিত করে। এটি শুধুমাত্র স্ক্রল না করে দেখা যায় না এমন অংশে (below the fold) প্রয়োগ করুন।
• JavaScript-এর মাধ্যমে হিরো লোড করা। স্ক্রিপ্ট দ্বারা ইনসার্ট করা ইমেজ স্ক্রিপ্ট রান না হওয়া পর্যন্ত ডাউনলোড শুরু করতে পারে না।
• CSS ব্যাকগ্রাউন্ড ইমেজ ব্যবহার করা। ব্যাকগ্রাউন্ড ইমেজগুলো img এলিমেন্টের চেয়ে দেরিতে সনাক্ত হয় এবং এগুলোকে সহজে অগ্রাধিকার দেওয়া যায় না।
• বেশ কয়েকটি ইমেজ প্রিলোড করা। প্রতিযোগিতামূলক অগ্রাধিকার সুবিধাটিকে সম্পূর্ণরূপে নষ্ট করে দেয়।
• width এবং height বাদ দেওয়া। লেআউট শিফট একটি ভিন্ন পরিমাপকে ক্ষতিগ্রস্ত করে যখন এটি উন্নত হয়।

যখন LCP এলিমেন্টটি টেক্সট হয়

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

font-display-কে swap হিসেবে সেট করুন যাতে টেক্সট একটি ফলব্যাক ফন্টে রেন্ডার হয় এবং ওয়েব ফন্ট আসার সাথে সাথে পরিবর্তিত হয়ে যায়। সবচেয়ে গুরুত্বপূর্ণ একক ফন্ট ফাইলটি প্রিলোড করুন এবং ফন্টটিকে আপনার পেজে ব্যবহৃত ক্যারেক্টারগুলোতে সাবসেট করুন, যা প্রায়শই একটি ফন্টকে ২০০ KB থেকে ৩০ KB-এর নিচে নামিয়ে আনে। আপনার নিজস্ব ডোমেন থেকে ফন্ট পরিবেশন করা একটি থার্ড-পার্টি অতিরিক্ত কানেকশন দূর করে।

সার্ভার রেসপন্স টাইম সর্বনিম্ন সীমা নির্ধারণ করে

আপনার সার্ভার প্রথম বাইট ফেরত দিতে যে সময় নেয়, LCP তার চেয়ে দ্রুত হতে পারে না, তাই একটি ধীরগতির সার্ভার অন্য প্রতিটি উন্নতিকে সীমিত করে দেয়। প্রথম বাইটের জন্য ৬০০ মিলিসেকেন্ডের কম সময় লক্ষ্য রাখুন।

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

থার্ড-পার্টি স্ক্রিপ্টও ইমেজকে বিলম্বিত করে

অ্যানালিটিক্স, কনসেন্ট ব্যানার, চ্যাট উইজেট এবং বিজ্ঞাপন স্ক্রিপ্টগুলো ব্যান্ডউইথ এবং প্রসেসিং টাইমের জন্য আপনার হিরো ইমেজের সাথে প্রতিযোগিতা করে। একটি নিখুঁতভাবে অপ্টিমাইজ করা ইমেজও দেরিতে রেন্ডার হয় যখন এর আগে ১২টি স্ক্রিপ্ট লোড হয়।

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

পরিবর্তনটি সঠিকভাবে পরীক্ষা করা

এক্সটেনশন নিষ্ক্রিয় করে একটি প্রাইভেট উইন্ডোতে পরীক্ষা করুন এবং একটি একক ফলাফলের ওপর বিশ্বাস না করে পরিমাপটি ৩ বার রান করুন। রানগুলোর মধ্যে স্কোর লক্ষণীয় ব্যবধানে পরিবর্তিত হতে পারে।

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

ঠিক করার পর LCP দ্রুত রাখা

হিরো ইমেজগুলো একে একে ঠিক করার চেয়ে বরং সেগুলোর জন্য একটি নিয়ম সেট করুন, কারণ নতুন পেজগুলো সমস্যাটি আবার ফিরিয়ে আনে। এডিটররা সরাসরি ক্যামেরা থেকে আপলোড করলে একবার ঠিক করা সাইটও কয়েক মাসের মধ্যে আগের অবস্থায় ফিরে যাবে।

হিরো ইমেজের জন্য একটি সর্বোচ্চ উইডথ এবং একটি সর্বোচ্চ ফাইল সাইজ নির্ধারণ করুন, এটি লিখে রাখুন এবং প্রতিটি নতুন পেজে প্রয়োগ করুন। ১৯২০ পিক্সেল চওড়া এবং ২০০ KB-এর নিচে থাকার মতো একটি নিয়ম সহজেই চেক করা যায় এবং এটি প্রায় প্রতিটি ডিজাইনকে কভার করে। যেখানে বেশ কয়েকজন লোক প্রকাশ করেন, সেখানে লিখিত নিয়মটি কৌশলের চেয়ে বেশি গুরুত্বপূর্ণ, কারণ পরিমাপটি সেরা পেজের চেয়ে বরং সবচেয়ে খারাপ পেজটিকে প্রতিফলিত করে।

একবারে হিরো ইমেজ প্রস্তুত করা

সাইটের প্রতিটি হিরো ইমেজ একসাথে প্রসেস করুন, কারণ তারা একটি স্পেসিফিকেশন এবং একটি টার্গেট সাইজ শেয়ার করে। ল্যান্ডিং পেজ, ক্যাটাগরি পেজ এবং আর্টিকেল জুড়ে বেশিরভাগ সাইটে ১০ থেকে ১০০টি হিরো ইমেজ থাকে।

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