কীভাবে ওয়ার্ডপ্রেস সাইটে অব্যবহৃত CSS সরাতে (বা স্থগিত)

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

ওয়েবসাইট অপ্টিমাইজেশানের একটি মূল লক্ষ্য হল কোন অপ্রয়োজনীয় কোড অপসারণ করা। এটি আপনার ওয়েবসাইটের পৃষ্ঠাগুলির মোট আকারকে হ্রাস করে এবং দ্রুত পৃষ্ঠা লোড হওয়ার সময় এবং দর্শকদের জন্য একটি ভাল ব্যবহারকারীর অভিজ্ঞতার দিকে নিয়ে যায়৷

একটি ক্ষেত্র যেখানে আপনি ওয়েবসাইট পৃষ্ঠাগুলির আকার ব্যাপকভাবে হ্রাস করতে পারেন তা হল স্টাইলিং। ওয়েবসাইট স্টাইলিং ক্যাসকেডিং স্টাইল শীট নামে একটি নিয়ম-ভিত্তিক ভাষার মাধ্যমে নিয়ন্ত্রিত হয়, যা HTML এবং জাভাস্ক্রিপ্টের পাশাপাশি ওয়ার্ল্ড ওয়াইড ওয়েবের মূল বিল্ডিং ব্লকগুলির মধ্যে একটি।

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

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

}

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

ক্যাসকেডিং স্টাইল শীট পৃষ্ঠা লোড হওয়ার সময় বাড়াতে পারে যদি ফাইলগুলি খুব বড় হয় বা যদি অনেকগুলি CSS ফাইল কল করা হয়। এই সমস্যাটি মোকাবেলা করার জন্য বেশ কয়েকটি কৌশল নিযুক্ত করা যেতে পারে যেমন ডিফার, মিনিফাই এবং কম্বাইন।

নীচে এই কৌশলগুলির একটি সারসংক্ষেপ রয়েছে৷

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

চলুন অব্যবহৃত CSS-কে আরও ঘনিষ্ঠভাবে দেখি এবং পরীক্ষা করে দেখি কিভাবে আপনি আপনার WordPress ওয়েবসাইট থেকে অব্যবহৃত CSS কোড সরাতে পারেন।

ওয়ার্ডপ্রেস এ অব্যবহৃত CSS কি এবং কেন এটি ঘটে?

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

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

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

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

ওয়ার্ডপ্রেসে অব্যবহৃত সিএসএস অপসারণ করা ভালো অভ্যাস, কিন্তু আপনি যদি আপনার ওয়েবসাইটের ডিজাইনের জন্য গুরুত্বপূর্ণ কোনো সিএসএস কোড সরিয়ে দেন, তাহলে আপনার ওয়েবসাইট ডিজাইন ভেঙে যাবে।

সমালোচনামূলক CSS সম্পর্কে কি?

আরেকটি শব্দ যা আপনি প্রায়শই শুনতে পারেন তা হল সমালোচনামূলক CSS . এটি স্ক্রোল না করে অবিলম্বে ব্যবহারকারীদের কাছে বিষয়বস্তু প্রদর্শনের জন্য প্রয়োজনীয় যে কোনও স্টাইলিংকে বোঝায়। এই এলাকাটিকে ভাঁজের উপরে বলা হয় এবং ভাঁজের উপরে কন্টেন্ট লোড করতে ব্রাউজার যে সময় নেয় তাকে বলা হয় প্রথম কনটেন্টফুল পেইন্ট (এফসিপি)।

প্রথম কন্টেন্টফুল পেইন্ট দ্রুত লোড হয় তা নিশ্চিত করার জন্য Google CSS-এর নিষ্কাশন, ছোট করা এবং HEAD এলিমেন্টে ইনলাইন দেখানোর পরামর্শ দেয়। কম গুরুত্বপূর্ণ সিএসএস ফাইলগুলি প্রাথমিক পৃষ্ঠা লোডকে ধীর না করে তা নিশ্চিত করার জন্য পরে অ-সমালোচনামূলক CSS ফাইলগুলি লোড করতে Defer ব্যবহার করা যেতে পারে।

কিভাবে অব্যবহৃত CSS খুঁজে পাবেন

একটি পৃষ্ঠায় অব্যবহৃত CSS আবিষ্কার করার একটি দ্রুত উপায় হল এর URL একটি পারফরম্যান্স রিপোর্ট টুল যেমন GTmetrix, Google PageSpeed ​​Insights বা Pingdom ওয়েবসাইট স্পিড টেস্টে প্রবেশ করানো। প্রতিবেদনটি অব্যবহৃত CSS হাইলাইট করবে এবং সুপারিশ করবে যে অব্যবহৃত নিয়মগুলি সরানো বা পিছিয়ে দেওয়া হবে।

আধুনিক ব্রাউজারগুলি আপনাকে একটি ওয়েবসাইটের নকশা এবং কোড বিশ্লেষণ করতে সহায়তা করার জন্য বিকাশকারী সরঞ্জাম সরবরাহ করে। Google Chrome-এ বিকাশকারী বিকল্পগুলিকে Chrome DevTools এবং এর কভারেজ ট্যাব বলা হয় অব্যবহৃত জাভাস্ক্রিপ্ট এবং CSS কোড খুঁজে পেতে ব্যবহার করা যেতে পারে। এটি অনেক অব্যবহৃত নিয়ম আছে এমন CSS ফাইল খুঁজে বের করার একটি দ্রুত এবং কার্যকর উপায়।

Chrome DevTools লোড করতে, আপনাকে যা করতে হবে তা হল একটি পৃষ্ঠায় ডান-ক্লিক করুন এবং পরিদর্শন করুন নির্বাচন করুন . তারপর আপনি প্রতিটি ফাইলের URL দেখতে এবং ফাইলটি Javascript, CSS, বা উভয়ই দেখতে কভারেজ ট্যাবে ক্লিক করতে পারেন। ডানদিকে, আপনি বাইটে ফাইলের মোট আকার এবং মোট অব্যবহৃত বাইট দেখতে পারেন। একটি ভিজ্যুয়ালাইজেশন বার অব্যবহৃত কোড লাল এবং প্রয়োজনীয় কোড একটি নীল-সবুজ রঙে প্রদর্শন করে। এটি নীচের প্যানেলে সংক্ষিপ্ত করা হয়েছে, তবে আপনি যদি একটি নির্দিষ্ট ফাইলে ক্লিক করেন, আপনি উপরের প্যানেলে লাল রঙে হাইলাইট করা অব্যবহৃত CSS নিয়মগুলি দেখতে পাবেন৷

কভারেজ ট্যাব কীভাবে কাজ করে সে সম্পর্কে আরও তথ্যের জন্য Chrome বিকাশকারী কভারেজ পৃষ্ঠাটি দেখুন৷

অন্যান্য অনেক বিনামূল্যের এবং প্রিমিয়াম অব্যবহৃত CSS টুল অনলাইনে পাওয়া যাবে।

• JitBit অব্যবহৃত CSS টুল – একটি বিনামূল্যের পরিষেবা যা আপনার ওয়েবসাইটের প্রতিটি পৃষ্ঠা ক্রল করে এবং CSS নির্বাচকদের হাইলাইট করে যেগুলি কোথাও ব্যবহার করা হচ্ছে না
• PurifyCSS অনলাইন – একটি দরকারী বিনামূল্যের টুল যা অব্যবহৃত কোড হাইলাইট করে এবং আপনাকে পরিষ্কার CSS ফাইল সরবরাহ করে
• UusedCSS - একটি প্রিমিয়াম পরিষেবা যা পৃষ্ঠার URL স্ক্যান করে এবং কোন অপ্রয়োজনীয় কোড ছাড়াই ক্লিনার CSS ফাইল প্রদান করে (মূল্য প্রতি মাসে $25 থেকে শুরু হয়)

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

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

আসুন কিছু দরকারী ওয়ার্ডপ্রেস প্লাগইনগুলিকে ঘনিষ্ঠভাবে দেখে নেওয়া যাক যা আপনার ওয়ার্ডপ্রেস ওয়েবসাইট থেকে অব্যবহৃত CSS সরাতে সাহায্য করে।

WP রকেট ব্যবহার করে ওয়ার্ডপ্রেসে অব্যবহৃত CSS সরান

WP Rocket হল বাজারে সবচেয়ে জনপ্রিয় ওয়ার্ডপ্রেস পারফরম্যান্স সলিউশন। WP রকেটের জন্য একটি লাইসেন্স প্রতি বছর $49 এর জন্য উপলব্ধ।

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

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

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

পারফম্যাটার ব্যবহার করে ওয়ার্ডপ্রেসে অব্যবহৃত CSS সরান

অব্যবহৃত CSS কোড সরাতে আমি আমার ওয়েবসাইটে ব্যবহার করি অপ্টিমাইজেশন সমাধান। এটি একটি প্রিমিয়াম ওয়ার্ডপ্রেস প্লাগইন যা বছরে মাত্র 24.95 ডলারে পাওয়া যায়।

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

আমি প্লাগইনটিকে খারাপভাবে অপ্টিমাইজ করা ওয়ার্ডপ্রেস প্লাগইনগুলি মোকাবেলায় অত্যন্ত কার্যকর বলে খুঁজে পেয়েছি। উদাহরণস্বরূপ, Jetpack নিন। এমনকি আপনি যদি আপনার ওয়েবসাইটের ফ্রন্ট-এন্ডের জন্য কোনো Jetpack মডিউল ব্যবহার না করেন, তবুও এটি আপনার ওয়েবসাইটের প্রতিটি পৃষ্ঠায় একটি 85.1 KB CSS ফাইল লোড করবে। আপনি নীচে দেখতে পাচ্ছেন, Perfmatters আমাকে এই অপ্রয়োজনীয় CSS ফাইলটি লোড হওয়া থেকে বন্ধ করতে দেয়।

অ্যাসেট ক্লিনআপ ব্যবহার করে ওয়ার্ডপ্রেসে অব্যবহৃত CSS সরানো

পারফম্যাটারগুলির একটি দুর্দান্ত বিকল্প হল সম্পদ ক্লিনআপ। প্লাগইনটি ব্যবহার করার জন্য বিনামূল্যে, যদিও একটি প্রিমিয়াম সংস্করণ €42.08 এর জন্য উপলব্ধ যা অনেক অতিরিক্ত বৈশিষ্ট্য আনলক করে।

অ্যাসেট ক্লিনআপের CSS এবং জাভাস্ক্রিপ্ট ম্যানেজার আপনাকে আপনার ওয়েবসাইট জুড়ে নির্দিষ্ট পৃষ্ঠাগুলিতে ফাইলগুলি প্রিলোড করতে এবং ফাইলগুলি নিষ্ক্রিয় করতে দেয়। লগ ইন ব্যবহারকারীদের জন্য ব্যতিক্রম করা যেতে পারে.

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

অব্যবহৃত CSS ফাইলগুলি RapidLoad ব্যবহার করে সরানো

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

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

নাম অনুসারে, প্লাগইনটি CSS ফাইলের আকার কমাতে র‌্যাপিডলোড পরিষেবা ব্যবহার করে। তাই, RapidLoad পাওয়ার-আপ ব্যবহার করার জন্য আপনাকে RapidLoad পরিষেবাতে সাইন আপ করতে হবে। মাসিক প্ল্যান RapidLoad-এর জন্য প্রতি মাসে $5.83 এর জন্য উপলব্ধ।

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

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

আপনার নিজের ওয়েবসাইটে কতটা অব্যবহৃত CSS কোড আছে তা দেখতে, আমি GTmetrix, Google PageSpeed ​​Insights বা Pingdom ওয়েবসাইট স্পিড টেস্টের মতো পারফরম্যান্স রিপোর্ট টুলে কিছু বেঞ্চমার্ক চালানোর পরামর্শ দিই। Chrome DevTools এবং PurifyCSS অনলাইনের মতো বিকাশকারী সরঞ্জামগুলিও পৃষ্ঠাগুলিতে কতটা অপ্রয়োজনীয় ওজন CSS যোগ করছে তা দেখতে ব্যবহার করা যেতে পারে।

সৌভাগ্যক্রমে, আমরা বেশ কয়েকটি ওয়ার্ডপ্রেস পারফরম্যান্স সমাধান ব্যবহার করে ওয়ার্ডপ্রেসে অব্যবহৃত CSS মুছে ফেলতে পারি। আপনি যদি প্রক্রিয়াটি স্বয়ংক্রিয় করতে পছন্দ করেন তবে আমি WP রকেট বা RapidLoad Power-Up ব্যবহার করার পরামর্শ দিই। আপনার মধ্যে যাদের ওয়ার্ডপ্রেস রক্ষণাবেক্ষণের জন্য আরও বেশি হ্যান্ডস-অন পদ্ধতি রয়েছে তারা পারফম্যাটার্স এবং অ্যাসেট ক্লিনআপ পছন্দ করবে কারণ এই প্লাগইনগুলি আপনাকে আপনার ওয়েবসাইটের CSS এবং Javascript ফাইলগুলি লোড করা হয়েছে তার উপর সম্পূর্ণ নিয়ন্ত্রণ দেয়৷

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

প্রস্তাবিত পড়ুন:কিভাবে ওয়ার্ডপ্রেস এ জাভাস্ক্রিপ্ট পার্সিং স্থগিত করা যায়

শুভকামনা।

কেভিন