যদি আপনার ওয়ার্ডপ্রেস সাইট একটি পেইড ওয়ার্ডপ্রেস থিম ব্যবহার করে বা অফিসিয়াল ওয়ার্ডপ্রেস থিম রিপোজিটরি থেকে জনপ্রিয় একটি ব্যবহার করে, তাহলে থিমটি বিভিন্ন ব্যবহারের ক্ষেত্রে তৈরি হওয়ার সম্ভাবনা রয়েছে। এবং আপনি থিমে উপলব্ধ সমস্ত বৈশিষ্ট্যগুলির একটি ছোট সেট ব্যবহার করতে পারেন।
সেই ক্ষেত্রে, আপনার সাইটটি প্রচুর অব্যবহৃত CSS লোড করছে যা আপনার সাইটের পৃষ্ঠাগুলিকে স্টাইল করার জন্য প্রয়োজন হয় না। উদাহরণস্বরূপ, আপনি যে ওয়ার্ডপ্রেস থিমটি ব্যবহার করছেন তাতে WooCommerce পৃষ্ঠাগুলির জন্যও স্টাইল থাকতে পারে কিন্তু আপনি যদি আপনার ওয়ার্ডপ্রেস সাইটে শুধুমাত্র একটি ব্লগ চালান, তাহলে আপনি আপনার সাইটে WooCommerce পৃষ্ঠাগুলির জন্য অন্তর্ভুক্ত CSS ব্যবহার করছেন না এবং এইভাবে অব্যবহৃত পরিবেশন করছেন ব্যবহারকারীদের কাছে সিএসএস।
আপনি যদি Google Pagespeed টুলে আপনার ওয়েবসাইট পরীক্ষা করে থাকেন, তাহলে আপনি সম্ভবত ইতিমধ্যেই জানেন যে আপনার সাইটে অব্যবহৃত CSS সমস্যা রয়েছে। এই নির্দেশিকায়, আমরা আপনাকে দেখাব কিভাবে প্রথমে অব্যবহৃত CSS পরীক্ষা করবেন, তারপর আপনার ওয়ার্ডপ্রেস সাইট থেকে অব্যবহৃত CSS সরাতে একটি বিনামূল্যের টুল ব্যবহার করুন।
কিভাবে অব্যবহৃত CSS চেক করবেন
Google Chrome DevTools (আপনি যখন প্রসঙ্গ মেনুতে "পরিদর্শন" বিকল্পটি ক্লিক করেন তখন আপনি যেটিকে দেখতে পান) উত্স ট্যাবের ভিতরে একটি কভারেজ বৈশিষ্ট্য রয়েছে৷ আপনার ওয়েবসাইট লোড হওয়া অব্যবহৃত CSS এবং JS খুঁজে পেতে আপনি কভারেজ বিকল্পটি ব্যবহার করতে পারেন।
- ডেস্কটপে Chrome-এ আপনার ওয়েবসাইট খুলুন।
- আপনার সাইটের একটি খালি সাদা জায়গায় ডান-ক্লিক করুন এবং নির্বাচন করুন পরিদর্শন করুন প্রসঙ্গ মেনু থেকে।
- ক্লিক করুন সূত্র ট্যাব, টিপুন Ctrl + Shift + P একটি কমান্ড উইন্ডো খুলতে, তারপর টাইপ করুন কভারেজ এবং নির্বাচন করুন ইনস্ট্রুমেন্টিং কভারেজ শুরু করুন এবং পৃষ্ঠা পুনরায় লোড করুন উপলব্ধ কমান্ড থেকে।
- কভারেজ ট্যাবের অধীনে, ক্লিক করুন ইউআরএল ফিল্টার ক্ষেত্র এবং শুধুমাত্র অভ্যন্তরীণ CSS/JS ফাইলগুলি দেখানোর জন্য এখানে আপনার সাইটের রুট ডোমেন লিখুন।
└ চেক করুন অব্যবহৃত বাইট আপনার থিম থেকে CSS/JS ফাইলে কত শতাংশ ডেটা লোড হচ্ছে তা দেখতে কলাম।
- আপনার সাইট দ্বারা লোড করা অব্যবহৃত CSS (লাল বার দিয়ে চিহ্নিত) দেখতে একটি CSS ফাইলে ক্লিক করুন। বর্তমান পৃষ্ঠায় যে CSS ব্যবহার করা হচ্ছে তা সবুজ বার দিয়ে দেখানো হবে।
একবার আপনি আপনার ওয়েবসাইটে লোড হওয়া সমস্ত অব্যবহৃত CSS বিশ্লেষণ করলে, এটি সরানোর সময়। ওয়েবপেজ থেকে অব্যবহৃত CSS সরানোর জন্য বেশ কিছু বিনামূল্যের টুল উপলব্ধ রয়েছে। নীচে আমি আমার নিজের প্রকল্পগুলিতে পরীক্ষা এবং ব্যবহার করেছি এমন জনপ্রিয় সরঞ্জামগুলির মধ্যে একটি।
অব্যবহৃত CSS সরাতে PurifyCSS অনলাইন ব্যবহার করুন
সাধারণত, আপনি ওয়ার্ডপ্রেসে প্রায় সবকিছুর জন্য একটি প্লাগইন খুঁজে পেতে পারেন। কিন্তু অব্যবহৃত সিএসএস অপসারণের জন্য, দুর্ভাগ্যবশত, একটি একক প্লাগইন উপলব্ধ নেই। তাই আমরা আপনার সাইট থেকে অব্যবহৃত CSS সরাতে ম্যানুয়াল অ-ওয়ার্ডপ্রেস-নির্দিষ্ট টুল ব্যবহার করব।
PurifyCSS সবচেয়ে বেশি বন্ধুত্বপূর্ণ নন-ডেভেলপার টুল আপনি অব্যবহৃত CSS মোকাবেলা করতে পারেন। ব্যবহারকারীদের ওয়েবসাইট URL অথবা HTML এবং CSS কোড প্রদান করার জন্য টুলটিতে একটি সাধারণ UI রয়েছে। ওয়ার্ডপ্রেসের জন্য, আমরা ইউআরএল বিকল্পটি ব্যবহার করব এবং আপনার সাইটের সমস্ত ধরণের পৃষ্ঠার লিঙ্ক প্রদান করব যাতে টুলটি সবার থেকে CSS কেড়ে নেয় এবং অব্যবহৃত CSS-এর জন্য অপ্টিমাইজ করে।
এখানে পৃষ্ঠাগুলির একটি দ্রুত তালিকা রয়েছে যা আপনাকে টুলটিতে রাখতে হবে:
- হোমপেজ URL
- আপনার সাইটের প্রতিটি বিভাগ থেকে একাধিক পোস্ট পৃষ্ঠা URL
└ এটি নিশ্চিত করার জন্য যে সমস্ত পোস্ট উপাদানের জন্য CSS অন্তর্ভুক্ত রয়েছে।
- যোগাযোগ, সম্বন্ধে, গোপনীয়তা এবং আপনার সাইটে আপনার থাকতে পারে এমন সব ধরণের বিভিন্ন পৃষ্ঠা।
- আর্কাইভ পৃষ্ঠা, অনুসন্ধান পৃষ্ঠা, লেখক পৃষ্ঠা
- কাস্টম পোস্ট টাইপ পেজ
হট টিপ: আপনি ব্যবহার করেন বা ভবিষ্যতে ব্যবহার করতে পারেন এমন সমস্ত থিম উপাদানগুলির সাথে একটি 'বৈশিষ্ট্য' পোস্ট/পৃষ্ঠা তৈরি করুন যেমন একটি টেবিল, চিত্র গ্যালারি, কোড, প্রি, অর্ডার করা তালিকা, ক্রমবিহীন তালিকা, ফর্ম, ট্যাব, অ্যাকর্ডিয়ন, গুটেনবার্গ ব্লক যা আপনি সাধারণত ব্যবহার করেন , ইত্যাদি
PurifyCSS অনলাইন টুলে এই 'বৈশিষ্ট্য' পোস্টের URL ব্যবহার করুন যাতে সাধারণভাবে ব্যবহৃত উপাদানগুলির জন্য CSS অন্তর্ভুক্ত করা হয়।
আঘাত CSS পরিষ্কার করুন একবার আপনি আপনার সাইট থেকে PurifyCSS অনলাইন টুলে সমস্ত প্রাসঙ্গিক ইউআরএলের ধরন যোগ করলে বোতাম।
টুল দ্বারা তৈরি নতুন CSS কপি করুন এবং আপনার সাইটে এটি ব্যবহার করুন। নিশ্চিত হও মূল style.css ব্যাকআপ করুন এবং PurifyCSS দ্বারা জেনারেট করা নতুন CSS প্রতিস্থাপন করার আগে আপনার থিমের অন্যান্য CSS ফাইলগুলি।
টিপ: আপনি আপনার থিমের CSS ফাইলগুলি সম্পাদনা করতে অন্তর্নির্মিত ওয়ার্ডপ্রেস থিম সম্পাদক ব্যবহার করতে পারেন, অথবা আপনি সার্ভারের সাথে সংযোগ করতে এবং নোটপ্যাড সম্পাদক ব্যবহার করে আরামে ফাইলগুলি সম্পাদনা করতে একটি FTP/SFTP প্রোগ্রাম ব্যবহার করতে পারেন৷