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

এই ঝগড়া মেটানোর জন্যই Google তিনটি মাপকাঠি ঠিক করে দিয়েছে, যেগুলোকে একসাথে বলা হয় Core Web Vitals। এগুলো অনুমান নয়, বাস্তব ব্যবহারকারীর ব্রাউজার থেকে জমা হওয়া তথ্য।

এই টিউনে আমি বাস্তব রিপোর্টের আসল স্ক্রিনশট ধরে ধরে দেখাবো কোন সংখ্যাটি কী বলছে, কোন সমস্যা আগে ধরতে হবে এবং কোড লেভেলে ঠিক কী বদলালে সংখ্যাগুলো নামতে শুরু করে।

➡ Core Web Vitals আসলে কোন তিনটি জিনিস মাপে

নামগুলো ভয় দেখায়, কিন্তু ভেতরের প্রশ্নগুলো একেবারে সাধারণ। পাঠক পাতা খোলার পর তিনটি জিনিস অনুভব করে, কত দ্রুত বড় জিনিসটা দেখা গেল, ছোঁয়ার পর কত দ্রুত সাড়া পাওয়া গেল, আর পড়তে গিয়ে লেখা কতবার লাফ দিল।

• LCP মাপে পাতার সবচেয়ে বড় দৃশ্যমান অংশটি কত সময়ে আঁকা হলো।
• INP মাপে ক্লিক বা ট্যাপের পর ব্রাউজার কত সময়ে সাড়া দিল।
• CLS মাপে লোড হওয়ার মাঝপথে লেআউট কতটা লাফ দিল।
• তিনটিই মাপা হয় বাস্তব ব্যবহারকারীর ৭৫ শতাংশ অংশ ধরে, গড় ধরে নয়।
• এই তিনটির যেকোনো একটি খারাপ হলেই পুরো অ্যাসেসমেন্ট ফেল দেখায়।

➡ ধাপ ১: প্রথমে আসল রিপোর্টটি বের করুন

কাজ শুরু হয় মাপা দিয়ে, অনুমান দিয়ে নয়। PageSpeed Insights এ নিজের সাইটের ঠিকানা বসিয়ে দিলে দুইটি অংশ আসে। উপরের অংশটি বাস্তব ব্যবহারকারীর তথ্য আর নিচের অংশটি ল্যাব টেস্ট।

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

➡ ধাপ ২: কোন মান পর্যন্ত ভালো তা মুখস্থ করে ফেলুন

সীমাগুলো জানা না থাকলে রিপোর্ট দেখে বোঝা যায় না অবস্থা আসলে কেমন। নিচের সংখ্যাগুলো Google এর ঠিক করে দেওয়া সীমা, যেগুলো ধরেই রঙ বদলায়।

• LCP ২.৫ সেকেন্ড বা কম হলে ভালো, ৪ সেকেন্ডের বেশি হলে খারাপ।
• INP ২০০ মিলিসেকেন্ড বা কম হলে ভালো, ৫০০ মিলিসেকেন্ডের বেশি হলে খারাপ।
• CLS ০.১ বা কম হলে ভালো, ০.২৫ এর বেশি হলে খারাপ।
• মাঝামাঝি অবস্থাকে কমলা রঙে উন্নতি প্রয়োজন হিসেবে দেখানো হয়।
• মোবাইল আর ডেস্কটপের ফল আলাদা, তাই দুইটি আলাদা করে দেখুন।

➡ ধাপ ৩: ফেল করা রিপোর্ট চিনে রাখুন

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

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

➡ ধাপ ৪: ফিল্ড ডেটা আর ল্যাব ডেটার তফাত বুঝুন

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

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

➡ TTFB আর FCP কেন আলাদা করে দেখা দরকার

তিনটি মূল মেট্রিকের নিচে আরও দুইটি সংখ্যা থাকে, যেগুলো অনেকে পাশ কাটিয়ে যান। অথচ LCP কেন খারাপ তার প্রথম সূত্র প্রায়ই এই দুইটিতেই লুকিয়ে থাকে।

• TTFB মানে অনুরোধ পাঠানোর পর সার্ভার থেকে প্রথম বাইট আসতে কত সময় লাগল।
• FCP মানে পর্দায় প্রথম কোনো লেখা বা ছবি দেখা যেতে কত সময় লাগল।
• TTFB বেশি হলে সমস্যা সার্ভারে, হোস্টিং বা ক্যাশে হাত দিতে হবে।
• TTFB কম কিন্তু FCP বেশি হলে সমস্যা CSS বা ফন্ট আটকে রাখায়।
• দুইটিই ভালো অথচ LCP খারাপ হলে সমস্যা বড় ছবিটিতে।

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

➡ ধাপ ৫: Lighthouse স্কোর কীভাবে পড়বেন

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

• ৯০ থেকে ১০০ সবুজ, ৫০ থেকে ৮৯ কমলা, ৫০ এর নিচে লাল।
• পারফরম্যান্স স্কোর প্রতি বার সামান্য বদলাতে পারে, তাই তিন বার চালিয়ে দেখুন।
• স্কোরের পেছনে ছোটা বাদ দিয়ে ফিল্ড ডেটার তিনটি মেট্রিকে মন দিন।
• Accessibility আর SEO স্কোর ঠিক করা সাধারণত সবচেয়ে সহজ কাজ।

➡ ধাপ ৬: LCP ভেঙে দেখে আসল কারণ বের করুন

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

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

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

➡ ধাপ ৭: LCP নামানোর কাজের তালিকা

LCP সাধারণত একটি বড় ছবি বা একটি বড় লেখার অংশ হয়। ছবি হলে কাজটি অনেক সহজ। নিচের দুইটি লাইন যোগ করলেই বড় পার্থক্য দেখা যায়।

<link rel="preload" as="image" href="/img/hero.webp" fetchpriority="high">
<img src="/img/hero.webp" width="1200" height="630" alt="প্রধান ছবি" fetchpriority="high">

কেন এই দুইটি লাইন কাজ করে

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

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

➡ ধাপ ৮: INP ভালো করার উপায়

INP খারাপ হয় তখনই যখন ব্রাউজারের মূল থ্রেড লম্বা সময় ধরে একটি কাজে আটকে থাকে। ব্যবহারকারী ক্লিক করে ফেলেছেন, কিন্তু ব্রাউজার তখনো আগের হিসাব শেষ করতে পারেনি।

function pause(ms){return new Promise(function(r){setTimeout(r, ms)})}
button.addEventListener("click", async function(){showSpinner() ; await pause(0) ; heavyWork()})

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

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

➡ ধাপ ৯: CLS বন্ধ করার উপায়

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

img, video {aspect-ratio: 1200 / 630}
img, video {width: 100%}
img, video {height: auto}
.notice-bar {min-height: 48px}

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

➡ ধাপ ১০: কোন কাজটি আগে করবেন তা রিপোর্টই বলে দেয়

রিপোর্টের নিচের দিকে একটি তালিকা থাকে, যেখানে প্রতিটি সমস্যার পাশে লেখা থাকে ঠিক করলে কত জায়গা বা কত সময় বাঁচবে। এই সংখ্যাগুলো ধরেই কাজের ক্রম ঠিক করা সবচেয়ে বুদ্ধিমানের কাজ।

• যেখানে সবচেয়ে বেশি কিলোবাইট বাঁচার কথা লেখা, সেখান থেকে শুরু করুন।
• লাল ত্রিভুজ আগে, তারপর কমলা বর্গ, শেষে সাদা গোল।
• একবারে দশটি জিনিস বদলাবেন না, একটি বদলে আবার মাপুন।
• প্রতিটি বদলের আগে সাইটের একটি ব্যাকআপ রাখুন।

➡ ধাপ ১১: ঠিক করার পর কতদিন অপেক্ষা করতে হবে

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

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

➡ কম খরচে সবচেয়ে বেশি কাজে দেয় যে পাঁচটি বদল

সব কিছু একসাথে করার দরকার নেই। অভিজ্ঞতায় দেখা যায় নিচের পাঁচটি কাজ করলেই বেশির ভাগ ছোট ও মাঝারি সাইটের ফল সবুজে চলে আসে।

• প্রথম পর্দার বড় ছবিটিকে ছোট করে WebP ফরম্যাটে বদলে নিন।
• প্রতিটি ছবিতে মাপ লিখে দিন, এতে CLS প্রায় শূন্যে নামে।
• যে স্ক্রিপ্ট প্রথমে দরকার নেই সেটির লোড পরে ঠেলে দিন।
• পুরো পাতার জন্য একটি ক্যাশ ব্যবস্থা চালু করুন।
• যে প্লাগিন বা স্ক্রিপ্ট ব্যবহার হচ্ছে না সেটি একেবারে বাদ দিন।

এই পাঁচটির মধ্যে প্রথম দুইটি কোনো টাকা খরচ ছাড়াই করা যায়, শুধু কিছু সময় দিতে হয়। তাই শুরুটা ওখান থেকেই করুন, তারপর বাকিগুলোতে হাত দিন।

➡ যেসব ভুল রিপোর্ট দেখেও মানুষ করে বসে

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

➡ শেষে যা মনে রাখবেন

সাইট দ্রুত করার কাজটি জাদু নয়, এটি একটি চক্র। মাপুন, সবচেয়ে বড় সমস্যাটি খুঁজুন, একটি করে ঠিক করুন, আবার মাপুন। এই চক্রটি তিন চার বার ঘোরালেই সংখ্যাগুলো নামতে শুরু করে।

উপরের প্রতিটি ছবি বাস্তব রিপোর্ট থেকে নেওয়া আসল স্ক্রিনশট, শুধু বোঝার সুবিধার জন্য আমি লাল ঘর আর বাংলা ব্যাখ্যা বসিয়ে দিয়েছি। আপনি নিজের সাইটের ঠিকানা বসিয়ে ঠিক একই রিপোর্ট বের করতে পারবেন।

আপনার সাইটে কোন মেট্রিকটি আটকে আছে তা টিউমেন্টে লিখে জানাতে পারেন। পরের টিউনে ছবি অপটিমাইজ আর ক্যাশিং নিয়ে হাতে কলমে আলোচনা করার ইচ্ছা আছে।