কিভাবে আপনার ওয়েবসাইট থেকে রেন্ডার ব্লকিং সিএসএস দূর করবেন

  • by
কিভাবে রেন্ডার ব্লকিং সিএসএস ঠিক করতে হয়

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

কিভাবে রেন্ডার ব্লকিং সিএসএস ঠিক করতে হয়
কিভাবে রেন্ডার ব্লকিং সিএসএস ঠিক করবেন

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

কিভাবে রেন্ডার ব্লকিং সিএসএস দূর করবেন:

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

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

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

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

পদ্ধতি-১:

সিএসএস সাধারণত তিনটি উপায়ে বাস্তবায়ন করা যায়, এগুলো হচ্ছে অভ্যন্তরীণ(Internal), বাহ্যিক(External), এবং ইনলাইন(Inline)। আপনার CSS ফাইলটি যদি ছোট হয়, তাহলে আপনি সহজেই অভ্যন্তরীণ পদ্ধতি ব্যবহার করতে পারেন. এই পদ্ধতি ব্যবহার করতে আপনি আপনার CSS ফাইল মিনিফাই করতে পারেন এবং এটি </head> সেকশনের আগে স্থাপন করতে পারেন। উদাহরণস্বরূপ:

<html>
<head>
<style>
Your CSS Script will be pasted here…
</style>
<body>
Your content will go here…
</body>
</html>

যদি আপনার CSS ফাইল খুব বড় হয়, তাহলে আপনি পুরো ডকুমেন্টটি হেড সেকশনে রাখতে পারবেন না। আপনি শুধুমাত্র আপনার CSS স্টাইলের জটিল অংশটুকু এখানে রাখতে পারেন এবং তারপর বাকি স্টাইলের জন্য ধীরে ধীরে লোড হওয়ার প্যারামিটার () সেট করতে পারেন।

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

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

h1{margin:0 padding : 2 px;}
ol {color: green;}
li{color: pink; background: purple}
li:hover{color: purple}
li:first-child{color: green; background-color:yellow;}
@media (max-width: 512px){li:first-child{ color: pink; background-color: lime;}}
li:last-child{color:pink; background color: blue}

তাহলে আপনাকে খুঁজে বের করতে হবে জটিল বা ক্রিটিকাল সিএসএস স্টাইল কোনগুলো। চলুন, আমরা হোভার এবং মিডিয়া স্টাইল কেটে দেই এবং বাকিগুলো প্রত্যেক সিলেক্টরের জন্য একবার করে রাখি। তাই আমাদের জটিল সিএসএস নিচের মত হবে:

h1{padding : 2 px;}
ol {color: green ;}
li{color: pink; background: purple}
li:first-child{color: (RGB velue) of pink; background-color: lime;}

এছাড়াও কোনও ওয়েবপেইজের জটিল সিএসএস খুঁজে বের করতে আপনি ওয়েব ব্রাইজার কনসোলের সাহায্য নিতে পারেন। সিএসএস এর ক্রিটিক্যাল পাথ কোড করার সময় আপনাকে অবশ্যই ওয়েবসাইটটি কেমন দেখাচ্ছে ও কি অনুভুত হচ্ছে সেদিকে খেয়াল রাখতে হবে।

পদ্ধতি-২:

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

পদ্ধতি-৩:

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

#main-menu: display none;

কিন্তু মেইন মেনু একটি ওয়েবসাইটের জন্য একটি অপরিহার্য উপাদান। সুতরাং, আপনি মেনুর জন্য div id এর অধীনে আরেকটি div class সাথে নেস্ট করে দিতে পারেন এবং মিডিয়া কোয়েরি দ্বারা এটাকে সংজ্ঞায়িত করতে পারেন। উদাহরণস্বরূপ:

@media (max-width: 512px)
#main-menu{display: none}
#main-menu .mob-menu {the design for mobile menu will described here}

আপনি আপনার ওয়েবসাইটকে jQuery বা মেটা ট্যাগ দ্বারা রেস্পন্সিভ করতে পারেন, কিন্তু এক্ষেত্রে, সিএসএস মিডিয়া রুলস রেন্ডার-ব্লকিং সমস্যা বাইপাস করার জন্য অত্যন্ত কার্যকর । আপনি একটি রেস্পন্সিভ ওয়েব ডিজাইন নকশা তৈরি করতে সম্ভব হলে স্ট্যান্ডার্ড জাভাস্ক্রিপ্ট ব্যবহার করতে পারেন।

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

কোন প্লাগ-ইন ছাড়াই রেন্ডার ব্লকিং সিএসএস ঠিক করতে চান? আপনার প্রকল্পের সম্পূর্ণ বিবরণ সহ আমাদের সাথে যোগাযোগ করুন।  আমরা আপনার ওয়েবসাইটকে দ্রুততর করতে সাহায্য করবো।

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.