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

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

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

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

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

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

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

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

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

<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>

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

ফলাফল

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