আপনি একটি UI লাইব্রেরি ব্যবহার করুন বা আপনার শৈলীগুলি হ্যান্ডক্রাফ্ট করুন না কেন, একটি উল্লেখযোগ্য পরিমাণে সিএসএস বিলম্বিত করে রেন্ডারিং কারণ ব্রাউজারটিকে অবশ্যই পৃষ্ঠাটি দেখানোর আগে CSS ফাইলগুলি ডাউনলোড এবং পার্স করতে হবে।
এই প্রতিক্রিয়াশীল আইসক্রিম গ্যালারিটি বুটস্ট্র্যাপ দিয়ে তৈরি করা হয়েছে। বুটস্ট্র্যাপের মতো UI লাইব্রেরিগুলি বিকাশের গতি বাড়ায়, তবে এটি প্রায়শই ফোলা এবং অপ্রয়োজনীয় CSS-এর খরচে আসে, যা আপনার লোডের সময়কে ধীর করে দিতে পারে। বুটস্ট্র্যাপ 4 হল 187 KB, অন্যদিকে Semantic UI , আরেকটি UI লাইব্রেরি, একটি সম্পূর্ণ 730 KB আনকম্প্রেসড। এমনকি ছোট করা এবং জিজিপ করা হলেও, বুটস্ট্র্যাপের ওজন এখনও প্রায় 20 KB, প্রথম রাউন্ডট্রিপের জন্য 14 KB থ্রেশহোল্ডেরও বেশি।
ক্রিটিকাল হল এমন একটি টুল যা CSS-এর উপরে CSS বের করে, ছোট করে এবং ইনলাইন করে। এটি পৃষ্ঠার অন্যান্য অংশের জন্য CSS এখনও লোড না হলেও যত তাড়াতাড়ি সম্ভব রেন্ডার করার জন্য উপরের-ভাঁজের সামগ্রীকে অনুমতি দেয়। এই কোডল্যাবে, আপনি শিখবেন কিভাবে Critical এর npm মডিউল ব্যবহার করতে হয়।
পরিমাপ
- সাইটের পূর্বরূপ দেখতে, অ্যাপ দেখুন টিপুন। তারপর ফুলস্ক্রিন টিপুন
.
এই সাইটে একটি বাতিঘর অডিট চালানোর জন্য:
- DevTools খুলতে `Control+Shift+J` (বা Mac এ `Command+Option+J`) টিপুন।
- লাইটহাউস ট্যাবে ক্লিক করুন।
- মোবাইলে ক্লিক করুন।
- পারফরম্যান্স চেকবক্স নির্বাচন করুন।
- অডিট বিভাগে বাকি চেকবক্সগুলি সাফ করুন।
- সিমুলেটেড ফাস্ট 3G, 4x CPU স্লোডাউন ক্লিক করুন।
- ক্লিয়ার স্টোরেজ চেকবক্স নির্বাচন করুন। এই বিকল্পটি নির্বাচিত হলে, লাইটহাউস ক্যাশে থেকে সংস্থানগুলি লোড করবে না, যা প্রথমবার দর্শকরা কীভাবে পৃষ্ঠাটি অনুভব করবে তা অনুকরণ করে৷
- রান অডিট ক্লিক করুন।
আপনি যখন আপনার মেশিনে একটি অডিট চালান, তখন সঠিক ফলাফলগুলি পরিবর্তিত হতে পারে, কিন্তু ফিল্মস্ট্রিপ ভিউতে, আপনি দেখতে পাবেন যে অ্যাপটি শেষ পর্যন্ত বিষয়বস্তু রেন্ডার করার আগে বেশ কিছুক্ষণের জন্য একটি ফাঁকা স্ক্রীন রয়েছে৷ এই কারণেই ফার্স্ট কনটেন্টফুল পেইন্ট (FCP) বেশি এবং কেন সামগ্রিক পারফরম্যান্স স্কোর দুর্দান্ত নয়।
পারফরম্যান্সের সমস্যাগুলি সমাধান করতে আপনাকে সাহায্য করার জন্য Lighthouse এখানে রয়েছে, তাই সুযোগ বিভাগে সমাধানগুলি সন্ধান করুন৷ রেন্ডার-ব্লকিং রিসোর্স বাদ দেওয়াকে একটি সুযোগ হিসেবে তালিকাভুক্ত করা হয়েছে এবং সেখানেই ক্রিটিকাল জ্বলজ্বল করে!
অপ্টিমাইজ করুন
- প্রকল্পটিকে সম্পাদনাযোগ্য করতে সম্পাদনা করতে রিমিক্সে ক্লিক করুন৷
জিনিসগুলিকে গতি বাড়ানোর জন্য, ক্রিটিক্যাল ইতিমধ্যেই ইনস্টল করা আছে এবং কোডল্যাবে একটি খালি কনফিগারেশন ফাইল অন্তর্ভুক্ত করা হয়েছে।
critical.js কনফিগারেশন ফাইলে, Critical-এ একটি রেফারেন্স যোগ করুন এবং তারপর critical.generate() ফাংশনটি চালু করুন। এই ফাংশন কনফিগারেশন ধারণকারী একটি বস্তু গ্রহণ করে।
const critical = require('critical');
critical.generate({
// configuration
},(err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
ত্রুটি হ্যান্ডলিং বাধ্যতামূলক নয়, তবে কনসোলে অপারেশন সাফল্যের পরিমাপ করার এটি একটি সহজ উপায়।
ক্রিটিক্যাল কনফিগার করুন
নীচের টেবিলে কিছু দরকারী জটিল বিকল্প রয়েছে। আপনি GitHub এ উপলব্ধ সমস্ত বিকল্পগুলি পরীক্ষা করতে পারেন।
| অপশন | টাইপ | ব্যাখ্যা |
|---|---|---|
base | স্ট্রিং | আপনার ফাইলের জন্য বেস ডিরেক্টরি. |
src | স্ট্রিং | এইচটিএমএল সোর্স ফাইল। |
dest | স্ট্রিং | আউটপুট ফাইলের লক্ষ্য। যদি CSS ইনলাইন করা হয় আউটপুট ফাইল HTML হয়. যদি না হয়, আউটপুট একটি CSS ফাইল. |
width , height | সংখ্যা | ভিউপোর্টের প্রস্থ এবং উচ্চতা পিক্সেলে। |
dimensions | অ্যারে | প্রস্থ এবং উচ্চতা বৈশিষ্ট্য সহ বস্তু রয়েছে। এই অবজেক্টগুলি সেই ভিউপোর্টগুলিকে প্রতিনিধিত্ব করে যা আপনি উপরের-ভাঁজের CSS দিয়ে লক্ষ্য করতে চান৷ যদি আপনার CSS-এ মিডিয়া প্রশ্ন থাকে, তাহলে এটি আপনাকে সমালোচনামূলক CSS তৈরি করতে দেয় যা একাধিক ভিউপোর্ট আকার কভার করে। |
inline | বুলিয়ান | সত্য হিসাবে সেট করা হলে, তৈরি করা সমালোচনামূলক CSS তে ইনলাইন করা হয় HTML উৎস ফাইলের। |
minify | বুলিয়ান | সত্য হিসাবে সেট করা হলে, ক্রিটিক্যাল জেনারেট করা সমালোচনামূলক CSS কে ছোট করে। একাধিক রেজোলিউশনের জন্য সমালোচনামূলক CSS বের করার সময় বাদ দেওয়া যেতে পারে কারণ ডুপ্লিকেট নিয়ম অন্তর্ভুক্তি এড়াতে ক্রিটিক্যাল স্বয়ংক্রিয়ভাবে এটিকে ছোট করে। |
একাধিক রেজোলিউশনের জন্য সমালোচনামূলক CSS বের করার জন্য নীচে একটি কনফিগারেশন উদাহরণ রয়েছে। এটি critical.js এ যোগ করুন বা চারপাশে খেলুন এবং বিকল্পগুলি পরিবর্তন করুন।
critical.generate({
base: 'public/',
src: './index.html',
dest: './index.html',
inline: true,
dimensions: [
{
height: 500,
width: 300,
},
{
height: 720,
width: 1280,
},
]
}, (err, output) => {
if (err) {
console.error(err);
} else if (output) {
console.log('Generated critical CSS');
}
});
এই উদাহরণে, index.html সোর্স ফাইল এবং গন্তব্য ফাইল উভয়ই কারণ inline বিকল্পটি সত্য হিসাবে সেট করা আছে। ক্রিটিকাল প্রথমে এইচটিএমএল সোর্স ফাইলটি পড়ে, ক্রিটিকাল সিএসএস বের করে এবং তারপরে <head> > এ ইনলাইন করা ক্রিটিক্যাল সিএসএস দিয়ে index.html ওভাররাইট করে।
dimensions অ্যারেতে দুটি ভিউপোর্ট সাইজ নির্দিষ্ট করা আছে: অতিরিক্ত ছোট স্ক্রিনের জন্য 300 x 500 এবং স্ট্যান্ডার্ড ল্যাপটপ স্ক্রিনের জন্য 1280 x 720।
minify বিকল্পটি বাদ দেওয়া হয়েছে কারণ যখন একাধিক ভিউপোর্ট আকার নির্দিষ্ট করা থাকে তখন ক্রিটিক্যাল স্বয়ংক্রিয়ভাবে নিষ্কাশিত CSSকে ছোট করে।
ক্রিটিক্যাল চালান
package.json এ আপনার স্ক্রিপ্টে ক্রিটিকাল যোগ করুন:
scripts: {
"start": "node server.js",
"critical": "node critical.js"
}
- টার্মিনাল ক্লিক করুন (দ্রষ্টব্য: যদি টার্মিনাল বোতামটি না দেখায় তাহলে আপনাকে ফুলস্ক্রিন বিকল্প ব্যবহার করতে হতে পারে)।
সমালোচনামূলক CSS তৈরি করতে, কনসোলে, চালান:
npm run critical
refresh
এখন index.html এর <head> ট্যাগে, জেনারেট করা ক্রিটিকাল CSSকে <style> ট্যাগের মধ্যে ইনলাইন করা হয়েছে, তারপরে একটি স্ক্রিপ্ট যা বাকি CSSকে অ্যাসিঙ্ক্রোনাসভাবে লোড করে।
আবার পরিমাপ করুন
আবার লাইটহাউস পারফরম্যান্স অডিট চালানোর জন্য কোডল্যাবের শুরু থেকে ধাপগুলি অনুসরণ করুন৷ আপনি যে ফলাফলগুলি পাবেন তা এর মতো দেখাবে:
