Ads blocker detected!

We have detected that you are using an adblocking DNS or plugin in your browser.

While ads might be a little annoying, they help us keep the site running. We request you to disable Ad Block or use a different browser.

সহজ উপায়ে ফন্ট ওসাম বা অন্যান্য রেন্ডার ব্লকিং সিএসএস ঠিক করুন

রেন্ডার ব্লকিং সিএসএস কি?

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


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

রেন্ডার ব্লকিং সিএসএস



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

রেন্ডার সমস্যা এর প্রভাব

গুগল পেজ স্পিড ইনসাইট যা মূলতো লাইটহাউজ (Lighthouse V8, V9) এর অডিট অনুসারে পেজের স্কোর নির্ধারন করে, তা অনুসারে FCP (First Contentful Paint) ও LCP (Largest Contentful Paint) মোট স্কোরের ৩৫ শতাংশ স্কোর নির্ধারন করে। আর এই LCP, FCP আপনার সাইটের সার্চ কনসোলে কোর ওয়েব ভাইটাল ফেইলেরও কারন হতে পারে, যা র‍্যাংকিং ও বাউন্স রেটে প্রভাব ফেলবে।
সবার আগে আপনার থিমটির ব্যাকআপ ডাউনলোড করে নিন, তা নাহলে থিম এডিটের সময় কোনো সমস্যা হলে বিপদে পড়বেন।

রেন্ডার ব্লকিং সিএসএস: সমাধান ১


আপনার থিমে যদি একাধিক এক্সটারনাল সিএসএস থাকে সেক্ষেত্রে এই পদ্ধতি ব্যবহার করতে পারেন। প্রথমে আপনার ফন্ট-ওসামের এক্সটারনাল সিএসএস ফাইলগুলো চিহ্নিত করুন, বা চাইলে শুধু সিএসএস ফাইল যেগুলো রেন্ডার ব্লকিং হয় তা পেজস্পিড টুলের সাহায্যে খুঁজে বের করুন।
টিপ :সিএসএস লিংকটি <head>এর নিচে এবং </head>এর উপরে অবস্থান করে, সাধারনত এই সিএসএস ফাইলটির শেষে font-awesome.min.css (মিনিমাইজ বা ইউজার ভার্সন) বা font-awesome.css (ফুল বা ডেভেলপার ভার্সন) থাকে, তাই font-awesome.min.css (এটি থাকার সম্ভাবনা বেশি) বা font-awesome.css লিখে সার্চ দিলে আপনি সিএসএস লিংকটি পেয়ে যাবেন।
এটি নিচের কোডের মত করে যুক্ত থাকবে-

<link href='//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css' rel='stylesheet'/>

লিংকটি সংরক্ষন করে লাইনটি মুছে (Delete) ফেলুন। এবার ঐখানে নিচের কোডটি কপি করে পেস্ট করুন।

<script type="text/javascript">
//<![CDATA[
function loadCSS(e, t, n) { "use strict";
	var i = window.document.createElement("link");
	var o = t || window.document.getElementsByTagName("script")[0];
	i.rel = "stylesheet"; i.href = e;
	i.media = "only x";
	o.parentNode.insertBefore(i, o);
	setTimeout(function () { i.media = n || "all" }) }
	loadCSS("সিএসএস ফাইলের লিংক");
//]]>
</script>

সিএসএস ফাইলের লিংক এর জায়গায় আপনার সংরক্ষিত সিএসএস লিংকটি বসান।

একাধিক সিএসএস একসাথে লোড করতে চাইলে loadCSS("সিএসএস ফাইলের লিংক_১"); এর পর loadCSS("সিএসএস ফাইলের লিংক_২"); এইভাবে আবার যুক্ত করতে থাকুন (সেমিকোলন সহ)। উদাহরণ দেখতে নিচের কোডটি দেখুন

<script type="text/javascript">
//<![CDATA[
function loadCSS(e, t, n) { "use strict";
	var i = window.document.createElement("link");
	var o = t || window.document.getElementsByTagName("script")[0];
	i.rel = "stylesheet"; i.href = e;
	i.media = "only x";
	o.parentNode.insertBefore(i, o);
	setTimeout(function () { i.media = n || "all" }) }
	loadCSS("লিংক_১");loadCSS("লিংক_২");
//]]>
</script>

রেন্ডার ব্লকিং সিএসএস: সমাধান ২

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

<link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' media='print' onload='if(media!="all")media="all"' rel='stylesheet'/>

<noscript><link href='https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css' rel='stylesheet'/></noscript>

এখানে মার্ক করা দুই জায়গায় আপনার সিএসএস ফাইলের লিংকটি বসাবেন।

ফলাফল

উপরের ২ ধরনের সমাধানের যেকোনো একটা ব্যবহার করে বপনি খুব সহজে রেন্ডার ব্লকিং সিএসএস সমস্যা থেকে মুক্তি পেতে পারেন। নিচে পেজস্পিড টুলে এর ফলাফল চেক করে দেখুন, কোনে রেন্ডার ব্লকিং ওয়ার্নিং দেখাচ্ছে না।


নোট :এই পদ্ধতিতে আপনি শুধু ফন্ট-ওসামই নয় বরং যেকোন ধরনের সিএসএস ফাইল লোড করতে পারবেন, যেহুতু মোটামুটি সব ওয়েবসাইট ফন্ট-ওসাম ব্যবহার করে তাই আমি ফন্ট-ওসাম নিয়ে আলোচনা করলাম।

পোস্টটি কেমন লেগেছে তা কমেন্ট করে জানাবেন। আপনাদের লিখা টিউটোরিয়াল আমাদের ব্লগে পাবলিশ করতে আমাদের ফেসবুক পেজে যোগাযোগ করুন।
পরবর্তী পোষ্ট পূর্ববর্তী পোষ্ট
মন্তব্য নেই
মন্তব্য করুন
comment url
airdrop logo
Pi Coin Mainnet Is Almost There!!