ওয়ার্ডপ্রেস সাইটে অনইউজড CSS রিমুভ বা ডিফার করে দ্রুত লোডিং টাইম অর্জন করুন

আপনি কি চান ওয়ার্ডপ্রেসে অনইউজড CSS রিমুভ করা এবং আপনার ওয়েবসাইট দ্রুত করা?

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

একটি এলাকা যেখানে আপনি উল্লেখযোগ্যভাবে ওয়েবসাইট পেজের সাইজ কমানো পারেন সেটা স্টাইলিং। ওয়েবসাইট স্টাইলিং কন্ট্রোল হয় একটি রুল-বেজড ল্যাঙ্গুয়েজ দিয়ে যেটাকে Cascading Style Sheets বলে, যা HTML এবং JavaScript-র পাশাপাশি ওয়ার্ল্ড 와ইড ওয়েবের কোর বিল্ডিং ব্লক।

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

h1 { text-align: center; color: red; }

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

Cascading Style Sheets পেজ লোডিং টাইম বাড়াতে পারে যদি ফাইলগুলো খুব বড় হয় বা অনেক CSS ফাইল কল হয়। এই সমস্যা সমাধানের জন্য Defer, Minify, এবং Combine যেনে টেকনিক ব্যবহার করা যায়।

নিচে এই টেকনিকগুলোর সারাংশ।

আপনি যদি CSS-এর ওয়েট আরও কমানো চান, আমি সুপারিশ করি ওয়ার্ডপ্রেসে অনইউজড CSS রুল সরানো যাতে শুধু প্রয়োজনীয় স্টাইলিংই ভিজিটর ডাউনলোড করে। ব্রাউজারকে অনাবশ্যক CSS কোড লোড করতে না দিয়ে আপনি পেজ লোডিং স্পিড আপ করতে পারেন এবং ভিজিটরদের ভালো ইউজার এক্সপেরিয়েন্স দিতে পারেন।

চলুন অনইউজড CSS-র ওপর গভীরে নজর দেই এবং দেখি কিভাবে আপনার ওয়ার্ডপ্রেস ওয়েবসাইট থেকে অনইউজড CSS কোড সরাবেন।

ওয়ার্ডপ্রেসে অনইউজড CSS কী এবং কেন হয়?

অনইউজড CSS বলতে বর্তমান পেজে কল না হওয়া যেকোনো CSS রুলকে বোঝায়। এটা ঘন ঘন হয় কারণ পেজগুলো কখনো সব CSS রুল কল করে না একটি স্টাইলশীট থেকে। উদাহরণস্বরূপ, আপনার স্টাইলশীতে হেডলাইন লাল রঙে ডিসপ্লে করার CSS রুল থাকতে পারে, কিন্তু সেটা যদি একচুড়ো রিকোয়েস্ট না হয়, তবে সেটা অনইউজড CSS বলে বোঝানো হবে।

ব্রাউজাররা অনইউজড CSS রুল প্রয়োজন করে না, তাই কোড বিনা কারণেই CSS ফাইল সাইজ বাড়ায়। আপনি অনইউজড CSS কোড ওয়ার্ডপ্রেসে সরিয়ে পেজ লোডিং টাইম উন্নত করতে পারেন।

ওয়ার্ডপ্রেস থিমরা styles.css ফাইল ব্যবহার করতে বাধ্য মূল স্টাইলশীট হিসেবে, لكن থিমরা সাধারণত অতিরিক্ত স্টাইলশীট ব্যবহার করে ফন্ট, থিম স্কিন, এবং অন্যান্য ডিজাইন এলিমেন্টের জন্য। থিম CSS ফাইলে থাকা অনেক CSS রুল শুধু নির্দিষ্ট পরিস্থিতিতে প্রয়োজনীয়। কিন্তু এই CSS ফাইলগুলো সাধারণত আপনার ওয়েবসাইটের প্রতিটি পেজে লোড হয়।

ওয়ার্ডপ্রেস প্লাগইনগুলো অনইউজড CSS পেজে ইনসার্ট করার জন্য বিশেষ করে খারাপ কারণ ডেভেলপাররা প্রায়শই ডিফল্টরূপে সব পেজে স্টাইলশীট লোড করে।

ওয়ার্ডপ্রেসে অনইউজড CSS রিমুভ করা ভালো প্র্যাকটিস, لكن আপনি যদি আপনার ওয়েবসাইট ডিজাইনের জন্য গুরুত্বপূর্ণ CSS কোড সরিয়ে দেন, তবে আপনার ওয়েবসাইট ডিজাইন ভাঙবে।

ক্রিটিক্যাল CSS কী?

আপনি যেটা ঘন ঘন শুনবেন সেটা ক্রিটিক্যাল CSS। এটা বোঝায় যেকোনো স্টাইলিং যা ইউজারকে কন্টেন্ট ত্বরান্বিতে ডিসপ্লে করতে প্রয়োজন স্ক্রোল ছাড়া। এই এলাকাকে Above the Fold বলা হয় এবং ব্রাউজারকে Above the Fold কন্টেন্ট লোড করার সময় First Contentful Paint (FCP) বলা হয়। 

গুগল সুপারিশ করে ক্রিটিক্যাল CSS এক্সট্র্যাক্ট, মিনিফাই, এবং HEAD এলিমেন্টে ইনলাইন ডিসপ্লে করা যাতে First Contentful Paint দ্রুত লোড হয়। Defer ব্যবহার করা যেতে পারে নন-ক্রিটিক্যাল CSS ফাইল পরে লোড করতে যাতে কম গুরুত্বপূর্ণ CSS ফাইল ইনিশিয়াল পেজ লোড স্লো না করে।

অনইউজড CSS কীভাবে খুঁজে বের করবেন

এক পেজের অনইউজড CSS দ্রুত খুঁজে বের করার উপায় হচ্ছে তার URL পারফরম্যান্স রিপোর্ট টুলে যেনে GTmetrix, Google PageSpeed Insights বা Pingdom Website Speed Test-এ দিয়ে। রিপোর্ট অনইউজড CSS হাইলাইট করবে এবং সুপারিশ করবে অনইউজড রুল রিমুভ বা ডিফার করার।

আধুনিক ব্রাউজার ডেভেলপার টুল দিয়ে ওয়েবসাইট ডিজাইন এবং কোড অ্যানালাইজ করতে সাহায্য করে। Google Chrome-এ ডেভেলপার অপশনকে Chrome DevTools বলা হয় এবং এর Coverage tab অনইউজড JavaScript এবং CSS কোড খুঁজে বের করতে ব্যবহার করা যায়। CSS ফাইল যেগুলো অনেক অনইউজড রুল دار তা খুঁজে বের করার দ্রুত এবং কার্যকর উপায়।

Chrome DevTools লোড করতে, পেজে রাইট-ক্লিক করুন এবং Inspect সিলেক্ট করুন। তারপর Coverage ট্যাবে ক্লিক করুন প্রতিটি ফাইলের URL এবং ফাইল JavaScript, CSS, বা উভয় কিনা দেখতে। ডানে ফাইল টোটাল সাইজ বাইটে এবং টোটাল অনইউজড বাইট দেখবেন। একটি ভিজ্যুয়ালাইজেশন বার অনইউজড কোড লাল এবং প্রয়োজনীয় কোড নীল-সবুজ রঙে দেখাবে। বটম প্যানেলে সারাংশ আছে, لكن নির্দিষ্ট ফাইল ক্লিক করলে উপরের প্যানেলে অনইউজড CSS রুল লাল রঙে হাইলাইট থাকবে।

Chrome Developers Coverage পেজ দেখুন আরও ইনফোর্মেশনের জন্য Coverage ট্যাব কীভাবে কাজ করে।

অনেক ফ্রি এবং প্রিমিয়াম অনইউজড CSS টুল অনলাইনে পাওয়া যায়।

• JitBit Unused CSS tool – একটি ফ্রি সার্ভিস যা আপনার সাইটের প্রতিটি পেজ ক্রল করে এবং CSS সিলেক্টর হাইলাইট করে যেগুলো কোথাও ব্যবহার হচ্ছে না
• PurifyCSS Online – একটি উপকারী ফ্রি টুল যা অনইউজড কোড হাইলাইট করে এবং ক্লিন CSS ফাইল দেয়
• UnusedCSS – একটি প্রিমিয়াম সার্ভিস যা পেজ URL স্ক্যান করে এবং ক্লিনার CSS ফাইল দেয় অনাবশ্যক কোড ছাড়া (প্রাইসিং $২৫ মাসিক থেকে শুরু)

Chrome DevTools এবং PurifyCSS Online যেনে টুলগুলো ওয়েবসাইটে অনইউজড CSS রুল ভিউ করার জন্য উপকারী, কিন্তু ওয়ার্ডপ্রেস যেনে ডাইনামিক প্ল্যাটফর্মে সবসময় প্র্যাকটিক্যাল নয় অনইউজড CSS সমস্যা সমাধানে।

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

চলুন কিছু উপকারী ওয়ার্ডপ্রেস প্লাগইন দেখি যা আপনার ওয়ার্ডপ্রেস ওয়েবসাইট থেকে অনইউজড CSS রিমুভ (বা ডিফার) করতে সাহায্য করে।

WP Rocket ব্যবহার করে ওয়ার্ডপ্রেসে অনইউজড CSS রিমুভ করুন

WP Rocket বাজারে সবচেয়ে জনপ্রিয় ওয়ার্ডপ্রেস পারফরম্যান্স সমাধানগুলোর একটি। WP Rocket-এর লাইসেন্স বছরে $৪৯-এ উপলব্ধ।

প্লাগইনটিতে একটি টুল আছে যা এক ক্লিকে আপনার ওয়েবসাইট থেকে সব অনইউজড CSS রিমুভ করতে পারে। ব্যাকগ্রাউন্ডে, WP Rocket কী করছে: প্রতিটি পেজে সব স্টাইলশীট এবং স্ক্রিপ্ট রিভিউ করছে এবং CSS রুল ম্যাচ করছে HTML কোডে পাওয়া CSS সিলেক্টরের সাথে। এই প্রক্রিয়া এক্সটার্নালি WP Rocket-এর সার্ভারে হয়, তাই আপনার ওয়ার্ডপ্রেস সিকিউরিটি প্লাগইন তাদের সার্ভার IP অ্যাড্রেস হোয়াইটলিস্ট করেছে কিনা নিশ্চিত করুন।

WP Rocket অটোমেটিক্যালি সব অনইউজড CSS কোড রিমুভ করে, তাই আপনি এমন পরিস্থিতি মুখোমুখি হতে পারেন যেখানে এই টুল আপনার ওয়েবসাইট ডিজাইনের একটি অংশ ভাঙতে পারে যেনে কন্ট্যাক্ট ফর্ম। এটা হলে, প্রাসঙ্গিক CSS ফাইল, ID বা ক্লাস WP Rocket CSS সেফলিস্টে যোগ করুন।

সুপারিশকৃত পড়ুন: ওয়ার্ডপ্রেস ডেটাবেস কীভাবে ক্লিন আপ করবেন

Perfmatters ব্যবহার করে ওয়ার্ডপ্রেসে অনইউজড CSS রিমুভ করুন

Perfmatters হলো আমার ওয়েবসাইটে আমি যা অপ্টিমাইজেশন সমাধান ব্যবহার করি অনইউজড CSS কোড রিমুভ করার জন্য। এটি একটি প্রিমিয়াম ওয়ার্ডপ্রেস প্লাগইন যা বছরে মাত্র $২৪.৯৫-এ উপলব্ধ।

Perfmatters Script Manager দিয়ে, আপনি CSS ফাইল এবং JavaScript ফাইল আপনার ওয়েবসাইটের নির্দিষ্ট পোস্ট ও পেজে এনাবল এবং ডিজেবল করতে পারেন। রেগুলার এক্সপ্রেশন, ইউজার লগইন স্ট্যাটাস, এবং তাদের ডিভাইস টাইপের ভিত্তিতে স্ক্রিপ্ট এক্সক্লুশনে এক্সসেপশন করা যায়।

আমি প্লাগইনটি খুব ইফেক্টিভ পেলাম খারাপ অপ্টিমাইজড ওয়ার্ডপ্রেস প্লাগইন ট্যাকল করতে। Jetpack উদাহরণ হিসেবে। আপনি যদি কোনো Jetpack মডিউল ফ্রন্টএন্ডে ব্যবহার না করন, তবে এটি যেনে ৮৫.১ KB CSS ফাইল লোড করবে আপনার সাইটের প্রতিটি পেজে। নিচে দেখুন, Perfmatters আমাকে এই অনাবশ্যক CSS ফাইল কখনো লোড না হওয়া দেয়।

Asset CleanUp ব্যবহার করে ওয়ার্ডপ্রেসে অনইউজড CSS রিমুভ করুন

Perfmatters-এর একটি চমৎকার অল্টারনেটিভ হলো Asset CleanUp। প্লাগইনটি ফ্রি ব্যবহার করা যায়, لكن প্রিমিয়াম ভার্সন €৪২.০৮-এ উপলব্ধ যা অনেক অ্যাডিশনাল ফিচার আনলক করে।

Asset CleanUp-এর CSS & JavaScript ম্যানেজার আপনাকে ফাইল প্রিলোড করতে দেয় এবং নির্দিষ্ট পেজে ফাইল ডিজেবল করতে দেয় সার্ভসাইটে। লগইনড ইউজারের জন্য এক্সসেপশন করা যায়।

Asset CleanUp Pro-এ আপগ্রেড করলে, আপনি আরও কন্ট্রোল পাবেন আপনার ওয়েবসাইটের কোন এলিয়ায় CSS এবং JavaScript ফাইল লোড হবে এবং স্ক্রিন সাইজ এবং রেগুলার এক্সপ্রেশনের জন্য অ্যাডিশনাল এক্সসেপশন যোগ করতে পারবেন।

RapidLoad ব্যবহার করে অনইউজড CSS ফাইল রিমুভ করুন

Autoptimize একটি ইফেক্টিভ অপ্টিমাইজেশন ওয়ার্ডপ্রেস প্লাগইন যা CSS, JavaScript এবং HTML ফাইল এগريغেট, মিনিফাই এবং ক্যাশ করতে দেয়। ওয়ার্ডপ্রেস প্লাগইন RapidLoad Power-Up Autoptimize-কে আরও এক্সটেন্ড করে অনইউজড CSS ওয়ার্ডপ্রেসে রিমুভ করতে সাহায্য করে।

WP Rocket-এর CSS অপ্টিমাইজেশন টুলের মত, RapidLoad Power-Up পেজ লোডিং টাইম কমানোকে সাহায্য করে যেনে যাচাই করে কোন CSS রুল আসলে প্রয়োজনীয়।

নাম অনুযায়ী, প্লাগইন RapidLoad সার্ভিস ব্যবহার করে CSS ফাইল সাইজ কমানো। তাই RapidLoad Power-Up ব্যবহার করতে RapidLoad সার্ভিসে সাইন আপ করতে হবে। RapidLoad-এর মাসিক প্ল্যান $৫.৮৩ মাসিক থেকে শুরু।

চূড়ান্ত মতামত

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

আপনার নিজের ওয়েবসাইটে কতটুকু অনইউজড CSS কোড আছে তা দেখতে, আমি সুপারিশ করি কিছু বেঞ্চмар্ক রান করা পারফরম্যান্স রিপোর্ট টুলে যেনে GTmetrix, Google PageSpeed Insights বা Pingdom Website Speed Test। ডেভেলপার টুল যেনে Chrome DevTools এবং PurifyCSS Onlineও ব্যবহার করা যায় দেখতে CSS পেজে কতটুকু অনাবশ্যক ওয়েট যোগ করছে।

খুশির খবর, আমরা ওয়ার্ডপ্রেসে অনইউজড CSS রিমুভ (বা ডিফার) করতে পারি অনেক ওয়ার্ডপ্রেস পারফরম্যান্স সমাধান দিয়ে। আপনি যদি প্রক্রিয়া অটোমেট করতে চান, আমি WP Rocket বা RapidLoad Power-Up সুপারিশ করি। যারা ওয়ার্ডপ্রেস মেইনটেনেনসে হ্যান্ডস-অন অ্যাপ্রোচ পছন্দ করেন, তারা Perfmatters এবং Asset CleanUp পছন্দ করবেন কারণ এগুলো পূর্ণ কন্ট্রোল দেয় আপনার ওয়েবসাইটের কোন এলিয়ায় CSS এবং JavaScript ফাইল লোড হবে।

সতর্ক থাকবেন যে গুরুত্বপূর্ণ CSS কোড রিমুভ করলে আপনার ওয়েবসাইট ডিজাইন ভাঙবে, তাই নিয়মিত সাইটের পেজ চেক করুন নিশ্চিত করতে সব কিছু ঠিক কাজ করছে।

সুপারিশকৃত পড়ুন: ওয়ার্ডপ্রেসে JavaScript পারসিং ডিফার কিভাবে করবেন

শুভকামনা।

Kevin