TechBlogSD - ওয়ার্ডপ্রেস এবং ওয়েব ডেভেলপমেন্টের জন্য সবকিছু
ওয়েব এবং ওয়ার্ডপ্রেস নির্দেশাবলী, খবর, থিম এবং প্লাগইনগুলির পর্যালোচনা

কিভাবে ওয়ার্ডপ্রেস সাইটে সমালোচনামূলক CSS তৈরি করতে হয়?

4

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

বুনিয়াদি বোঝা

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

ভাঁজ বিষয়বস্তু উপরে

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

কন্টেন্ট ডেলিভারি অপ্টিমাইজেশন

গুগল পেজস্পিড ইনসাইটের মতো অনেক স্পিড টুলস পরিমাপ করে যে ওয়েবসাইটটি কীভাবে ভাঁজ করা সামগ্রী সরবরাহ করে। আপনি এটিকে প্রথম সামগ্রিক রঙের (FCP) পরিমাপ হিসাবে দেখতে পারেন। যদি তারা একটি ব্লকিং সনাক্ত করে, আপনি ব্লকিং উপাদানটি সরানোর জন্য একটি সতর্কতা দেখতে পাবেন। গুগল পেজস্পিড ইনসাইট টুলে আপনি যে জনপ্রিয় পরামর্শগুলি দেখতে পাবেন তার মধ্যে একটি হল রেন্ডার-ব্লকিং রিসোর্স দূর করা। আপনি যদি সেই পরামর্শে ক্লিক করেন, গুগল আপনাকে সমালোচনামূলক CSS/JS এর ​​ডেলিভারি অপ্টিমাইজ করা দেখাবে এবং সমস্ত অ-সমালোচনামূলক CSS/JS স্থগিত করবে।

কিভাবে ওয়ার্ডপ্রেস সাইটে সমালোচনামূলক CSS তৈরি করতে হয়?

সমালোচনামূলক CSS এবং JS সাজেশন

রেন্ডার-ব্লকিং জাভাস্ক্রিপ্ট (jQuery) ফিক্স করা বেশ সহজ কারণ থিম/প্লাগইন ডিফল্টভাবে ফুটার বিভাগে স্ক্রিপ্ট লোড করে। jQueryই একমাত্র সমস্যা, যা অনেক সাইটের উপর-ভাঁজ বিষয়বস্তু লোড করার জন্য প্রয়োজন হতে পারে। যেহেতু, ওয়ার্ডপ্রেস jQuery ব্যবহার করে, তাই আপনি এই ত্রুটিটি উপেক্ষা করতে পারেন যদি এটি শুধুমাত্র jQuery এর কারণে হয়। অন্যথায়, WP রকেটের মতো প্লাগইনগুলি ব্যবহার করুন এবং সমস্ত স্ক্রিপ্টগুলি বিতরণ করুন যদি এটি আপনার সাইটের লেআউট না ভেঙ্গে।

যাইহোক, সমস্যা হল সমালোচনামূলক CSS তৈরি করা এবং প্রথমে এটি লোড করা। এই প্রবন্ধে, আমরা ব্যাখ্যা করব কিভাবে পৃষ্ঠার গতির স্কোর উন্নত করতে CSS অপ্টিমাইজেশান মোকাবেলা করতে হয়।

সম্পর্কিত: আপনার সাইটের গতি বাড়ানোর জন্য সঠিক WP রকেট প্লাগইন সেটিংস

ওয়েবসাইটগুলিতে CSS লোড হচ্ছে

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

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

ওয়ার্ডপ্রেসে CSS লোড হচ্ছে

ওয়ার্ডপ্রেস থিমের শৈলী সরবরাহের জন্য বহিরাগত ফাইল হিসেবে style.css ব্যবহার করে। ওয়ার্ডপ্রেস ওয়েবসাইট চালানোর জন্য এটি একটি বাধ্যতামূলক ফাইল (functions.php ছাড়াও)। উপরন্তু, আপনার সাইটে প্রতিটি প্লাগইন অতিরিক্ত CSS দায়ের করতে পারে। ক্রোম ব্রাউজারে আপনার ওয়েবসাইট খুলুন এবং সোর্স কোডটি দেখুন (নিশ্চিত করুন যে আপনার কাছে কোনও ক্যাশিং প্লাগইন ইনস্টল করা নেই বা পৃষ্ঠার জন্য ক্যাশিং অক্ষম)।

কিভাবে ওয়ার্ডপ্রেস সাইটে সমালোচনামূলক CSS তৈরি করতে হয়?

হেডারে স্টাইলশীট

আপনি পৃষ্ঠার হেডার বিভাগের অধীনে সমস্ত বহিরাগত স্টাইলশীটের ওয়ার্ডপ্রেস লিঙ্ক দেখতে পারেন। এটি অপ্টিমাইজেশন দৃষ্টিকোণ থেকে একাধিক সমস্যা সৃষ্টি করতে পারে:

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

আপনার সাইটের প্রতিটি পৃষ্ঠার উপরে ভাঁজ বিষয়বস্তু লোড করার জন্য একটি ন্যূনতম CSS প্রয়োজন। পৃষ্ঠা লোডিংয়ের জন্য প্রয়োজনীয় এই সর্বনিম্ন CSS কে প্রযুক্তিগত পরিভাষায় সমালোচনামূলক CSS বলা হয়। উপরের সমস্ত ক্ষেত্রে, গুগল পেজস্পিড ইনসাইটস এবং অন্যান্য সরঞ্জামগুলি আপনাকে সিএসএস ডেলিভারি অপ্টিমাইজ করার জন্য একটি সতর্কতা দেখাবে।

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

কিভাবে ওয়ার্ডপ্রেসে সমালোচনামূলক CSS তৈরি করা যায়?

এখন আপনি জানেন যে পৃষ্ঠাটি লোড করার গতি উন্নত করতে সমালোচনামূলক CSS কতটা গুরুত্বপূর্ণ। আপনার সাইটের জন্য সমালোচনামূলক CSS তৈরির দুটি উপায় রয়েছে।

  • ম্যানুয়ালি সমালোচনামূলক CSS তৈরি করুন এবং আপনার সাইটে োকান
  • কন্টেন্ট ডেলিভারি অপ্টিমাইজ করার জন্য WP Rocket প্লাগইন ব্যবহার করুন

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

সম্পর্কিত: WP রকেট কি সাইটগ্রাউন্ড হোস্টিংয়ের সাথে কাজ করবে?

ম্যানুয়াল ক্রিটিক্যাল সিএসএস জেনারেশন

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

  • Sitelocity ওয়েবসাইটে যান এবং আপনার পৃষ্ঠার URL লিখুন।
  • "জেনারেট ক্রিটিক্যাল পাথ সিএসএস" বোতামে ক্লিক করুন।
  • আপনি আপনার পৃষ্ঠার জন্য মিনিফাইড ক্রিটিক্যাল CSS পেতে পারেন।

কিভাবে ওয়ার্ডপ্রেস সাইটে সমালোচনামূলক CSS তৈরি করতে হয়?

সমালোচনামূলক CSS তৈরি করুন

এখন যেহেতু আপনি সমালোচনামূলক CSS তৈরি করেছেন এবং পরবর্তী কাজটি আপনার সাইটের শিরোনাম বিভাগে সন্নিবেশ করানো। তত্ত্বগতভাবে, আপনি আপনার header.php ফাইলে এবং ট্যাগের মধ্যে শৈলী সন্নিবেশ করতে পারেন। টেমপ্লেট ফাইল পরিবর্তন না করে হেডার বিভাগে শৈলী সন্নিবেশ করতে সাহায্য করার জন্য প্লাগইন রয়েছে। অটোপটাইমাইজ হল এমন একটি প্লাগইন যা আমরা এই উদ্দেশ্যে সুপারিশ করতে পারি। আপনি যদি ইতিমধ্যেই ক্যাশিংয়ের উদ্দেশ্যে অটোপটাইমাইজ ব্যবহার করে থাকেন, আপনি সমালোচনামূলক CSS সন্নিবেশ করার জন্য একই প্লাগইন ব্যবহার করতে পারেন।

আপনি অটোপটাইম প্লাগইন এর "CSS Options" এর অধীনে গুরুত্বপূর্ণ CSS সন্নিবেশ করতে পারেন। প্রথমে "ইনলাইন এবং ডিফার সিএসএস" চেকবক্সটি সক্ষম করুন এবং প্রদর্শিত টেক্সটবক্সে সমালোচনামূলক সিএসএস পেস্ট করুন।

কিভাবে ওয়ার্ডপ্রেস সাইটে সমালোচনামূলক CSS তৈরি করতে হয়?

CSS অপশন

যেমন আপনি দেখতে পাচ্ছেন, অটোপ্টাইজ প্লাগইন অন্যান্য স্টাইলগুলিকে পিছিয়ে দেওয়ার সময় স্বয়ংক্রিয়ভাবে উপরের-সিএসএস-এ ইনলাইন করতে পারে। যাইহোক, এটি দ্রুত ক্যাশের আকার 100% বাড়িয়ে দেবে এবং ক্যাশেটি স্বয়ংক্রিয়ভাবে পরিষ্কার করার জন্য আপনার প্লাগইনটিতে কোন বিকল্প নেই। উপরন্তু, এটি বেশিরভাগ ক্ষেত্রে সাইটটি ভেঙে দেবে। আপনি অটোপটাইম ক্রিটিক্যাল সিএসএস পাওয়ার-আপ অ্যাড-অনের জন্য যেতে পারেন যা আপনাকে আরও ভাল উপায়ে সাহায্য করবে। এই অ্যাড-অন ব্যবহার করার জন্য, আপনাকে Criticalcss.com থেকে প্রতি মাসে $ 10 এর জন্য API পেতে হবে।

কেন ম্যানুয়াল ক্রিটিক্যাল CSS জেনারেশন কাজ করবে না?

যদিও উপরের ম্যানুয়াল সন্নিবেশ প্রক্রিয়া সহজ দেখায়, এটি একটি সহজ কাজ নয়। আপনার সমালোচনামূলক CSS কাজ করবে না তার কয়েকটি কারণ নিচে দেওয়া হল।

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

এই সমস্ত সমস্যাগুলির সাথে, একমাত্র প্লাগইন ব্যবহার করা কেবলমাত্র কিছু প্লাগইন ব্যবহার করা যা এইগুলি যত্ন নেবে এবং গতিশীল এবং স্বয়ংক্রিয়ভাবে সমালোচনামূলক CSS তৈরি করবে।

WP রকেট দিয়ে ওয়ার্ডপ্রেস এর জন্য ক্রিটিক্যাল CSS তৈরি করুন

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

  • প্রথমে আপনাকে WP Rocket প্রিমিয়াম প্লাগইন কিনতে হবে
  • WP রকেট ইনস্টল এবং সক্রিয় করার পরে, "সেটিংস> WP রকেট" এ যান এবং "ফাইল অপ্টিমাইজেশন" বিভাগে যান।
  • নিচে স্ক্রোল করুন এবং "অপটিমাইজ সিএসএস ডেলিভারি" চেকবক্স সক্ষম করুন।

কিভাবে ওয়ার্ডপ্রেস সাইটে সমালোচনামূলক CSS তৈরি করতে হয়?

WP রকেটে সমালোচনামূলক CSS সক্ষম করুন

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

উল্লেখ্য যে WP রকেট হল একটি প্রিমিয়াম প্লাগইন যার একক সাইট লাইসেন্স $ 49 এর জন্য উপলব্ধ। আমাদের মতে, এই প্লাগইনটি কেনা মূল্যবান কারণ এটি গতি অপ্টিমাইজেশনের জন্য এন্ড-টু-এন্ড ক্যাশিং সমাধান প্রদান করে। প্লাগইনটি এক বছরের সমর্থন এবং আপডেটের সাথে আসে। এর পরে, এটি কাজ চালিয়ে যাবে এবং আপনি পুনর্নবীকরণ ছাড়াই সমালোচনামূলক CSS এবং অন্যান্য বৈশিষ্ট্যগুলি ব্যবহার করতে পারেন। সাপোর্ট পেতে এবং অতিরিক্ত কোন ফিচার পেতে আপনি 30% ছাড়ের সাথে নবায়ন করতে পারেন। অটোপটাইমাইজ এর সাথে ব্যবহার করার জন্য Criticalcss API এর জন্য প্রতি মাসে $ 10 এর তুলনায় এটি অনেক ভাল বিকল্প।

সমালোচনামূলক CSS পুনর্জন্ম

যখন আপনি থিম/প্লাগইন/ওয়ার্ডপ্রেস কোর আপডেট করেন বা আপনার সাইটে কাস্টম পোস্টের ধরন যোগ করেন, তখন সমালোচনামূলক CSS পুনর্জন্ম করা প্রয়োজন। অন্যথায়, WP রকেট পুরানো সমালোচনামূলক CSS ব্যবহার করবে এবং আপনার সাইটের বিন্যাস ভেঙ্গে দেবে। অতএব, ভুলে যাওয়া ছাড়া সমালোচনামূলক CSS পুনর্জন্ম নিশ্চিত করুন।

  • উপরের বারের "ডব্লিউপি রকেট" মেনুতে ক্লিক করুন এবং "পুনর্জন্ম সমালোচনামূলক সিএসএস" বিকল্পটি নির্বাচন করুন।
  • বিকল্পভাবে, আপনি প্লাগইন এর ড্যাশবোর্ডে যেতে পারেন এবং "পুনরুজ্জীবিত সমালোচনামূলক CSS" বোতামে ক্লিক করতে পারেন।

কিভাবে ওয়ার্ডপ্রেস সাইটে সমালোচনামূলক CSS তৈরি করতে হয়?

সমালোচনামূলক CSS পুনর্জন্ম

নির্দিষ্ট পৃষ্ঠার জন্য কাস্টম ক্রিটিক্যাল সিএসএস

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

  • আপনি যে পৃষ্ঠার জন্য আলাদা সমালোচনামূলক CSS তৈরি করতে চান সেই পৃষ্ঠার / পোস্ট সম্পাদকের কাছে যান।
  • সাইডবার ডকুমেন্ট প্যানেলে, "WP Rocket Options" প্যানেল খুঁজুন। যদি আপনি খুঁজে না পান, উপরের ডান কোণে তিনটি বিন্দু বোতামে ক্লিক করুন এবং "পছন্দগুলি" নির্বাচন করুন। পপ-আপে, আপনি আপনার সাইটে উপলব্ধ নথি প্যানেলগুলি সক্ষম করতে পারেন।
  • "অপটিমাইজ সিএসএস ডেলিভারি" চেকবক্সটি নির্বাচন করুন এবং "জেনারেট স্পেসিফিক সিপিসিএসএস" বোতামে ক্লিক করুন।
  • এটি সেই পৃষ্ঠার জন্য নির্দিষ্ট সমালোচনামূলক CSS উৎপন্ন করবে এবং ব্যবহারকারীরা যখন পৃষ্ঠাটি পরিদর্শন করবে তখন প্লাগইন এই সমালোচনামূলক CSS লোড করবে।

কিভাবে ওয়ার্ডপ্রেস সাইটে সমালোচনামূলক CSS তৈরি করতে হয়?

নির্দিষ্ট পৃষ্ঠার জন্য সমালোচনামূলক CSS তৈরি করুন

সম্পর্কিত: WP রকেট ক্যাশিং প্লাগিনের পর্যালোচনা।

সমালোচনামূলক CSS পরীক্ষা করা

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

কিভাবে ওয়ার্ডপ্রেস সাইটে সমালোচনামূলক CSS তৈরি করতে হয়?

WP রকেট সমালোচনামূলক CSS

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

চূড়ান্ত শব্দ

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

রেকর্ডিং উত্স: www.webnots.com
Leave A Reply

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