হাই ফ্রি ফায়ার গেমারস্, ফ্রি ফায়ার নিয়ে আসলো আরও একটি OP ক্যারেক্টার ক্লু (Clu) এবং এই ক্যারেক্টারটা দেওয়া হচ্ছে একদম ফ্রিতে, মাত্র ৩০০ ডায়মন্ড টপআপ করলে। অনেকেই অলরেডি ক্যারেক্টারটি নিয়ে নিয়েছেন আবার অনেকে ক্যারেক্টারটি নিয়ে সংশয়ে আছেন। আসা করি এই পোস্টটি পড়লে আপনি মোটামুটি ধারনা পেয়ে যাবেন এই ক্লু (Clu) ক্যারেক্টার ব্যাপারে। নতুন এই ক্লু ক্যারেক্টারের স্কিল এক্টিভ স্কিল।আমরা OB22 প্যাচ আপডেটের পর দেখতে পেরেছিলাম একটি ক্যারেক্টারের এক্টিভ স্কিল অন্য ক্যারেক্টারে ইকুইপ করা যায়। মানে আপনি কেইলি বা হায়াতো-তে আলোকের স্কিল সেট করতে পারবেন। তবে আপনি এই ক্লু ক্যারেক্টারের স্কিল নিয়ে খেললে এর সাথে আলোক এর স্কিল নিয়ে খেলতে পারবেন না, যা আলোক নিয়ে খেলা প্লেয়ারদের জন্য অসুবিধার, কারন আলোক স্পিড আর হিলিং এর কাজে আসে। যাই হোক চলে যাচ্ছি ক্লু এর স্কিলের বিস্তারিতে। ক্লু এর স্কিল ক্লু এর স্কিল হচ্ছে এটি তার আশেপাশের সর্বোচ্চ ৫০ মিটার ব্যাসার্ধে থাকা এনিমিদের স্পট করবে এবং তা মিনি ম্যাপে শো করবে স্ক্যানারের মতো। এই স্কিল ৭ সেকেন্ড পর্যন্ত থাকে এবং কুলডাউন ৫০ সেকেন্ড অর্থাৎ ৫০ সেকেন্ড পরে আপনি...
The post page will automatically be centred or full and the sidebar will be hidden, this feature is useful for making readers focus more on the content as well as making posts more comfortable to read. Big platforms like medium.com also use this layout. Instead of providing space for the sidebar, the space on the page is more used as a break for the reader's eyes, as you know too many layouts can make the eyes tired faster. You can activate this feature by adding the 'Fullpage' label to the post, you can change this label later as you wish. Sample text to extend content Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui ...
সহজ উপায়ে ফন্ট ওসাম বা অন্যান্য রেন্ডার ব্লকিং সিএসএস ঠিক করুন
আমারা যারা নতুন ওয়েব ডিজাইনার বা ডেভেলপার তাদের জন্য নিসন্দহে এই পোস্টটি গুরুত্বপূর্ণ। অ্যাসিনক্রোনাস পদ্ধতিতে কিভাবে এক্সটারনাল সিএসএস লোড করে কিভাবে পেজকে ফাস্ট করা যায় সেটি দেখানোর চেষ্টা করলাম। প্রায় সব ওয়েবসাইটেই ফন্ট-ওসাম সিএসএস ব্যবহার করা হয় পেজকে আকর্ষনীয় রূপদান করার জন্য। ফন্ট-ওসাম মূলত একধরনের আইকন প্যাক, যেমন- কমেন্ট আইকন,লিংক আইকন,ইউজার আইকন। এর কিছু কিছু আইকন ইমোজি হিসেবে পাওয়া গেলেও বেশিরভাগই ব্যবহার উপযোগী নয়, তাছাড়া ফন্ট-ওসামকে সহজেই কাস্টমাইজ করা যায়।
এই ফন্ট-ওসাম আইকন গুলো ওয়েবপেজে প্রদর্শনের জন্য একটি এক্সটারনাল সিএসএস ফাইল যুক্ত করতে হয়। যার ফলে পেজের লোডিং টাইমে প্রভাব পড়ে এবং ওয়েব টেস্টিং টুল এটাকে রেন্ডার-ব্লকিং সিএসএস হিসেবে ধরে। ফলে পেজ স্পিড টেস্টের মান কমে যায়। কিভাবে এই সমস্যা সমাধান করা যায় সেটি এই পোস্টে দেখানো হয়েছে।
রেন্ডার ব্লকিং সিএসএস
রেন্ডার ব্লকিং সিএসএস হলো যেসব এক্সটারনাল সিএসএস আপনার ওয়েব পেজ শো হতে দেরি করায়। একজন ভিজিটর কোনো ওয়েবপেজে ভিজিট করলে যতটুকু অংশ ডিসপ্লেতে শো করে তাতে যেসব সিএসএস রুল ব্যবহৃত হয়েছে সেগুলো হলো ক্রিটিকাল সিএসএস। এই ক্রিটিকাল সিএসএসগুলো এক্সটারনাল সিএসএস ফাইলে থাকলে, এক্সটারনাল সিএসএস ফাইল লোড হওয়ার আগ পর্যন্ত ব্রাউজারে কোনো কিছু শো করবে না। তাই মূলতো একে রেন্ডার ব্লকিং বলা হয়। ক্রিটিকাল সিএসএসগুলো ইনলাইন স্টাইল ট্যাগে অর্থাৎ হেড ট্যাগের মাঝে স্টাইল ট্যাগ ব্যবহার করে লোড করালে রেন্ডার ব্লকিং হওয়া থেকে মুক্তি পাওয়া যায়। এছাড়াও প্লাগিনের সাহায্যেও রেন্ডার ব্লকিং সিএসএস আলাদা করা যায়। ব্লগার সাইটে যেহেতু প্লাগিন ব্যবহার করার সুবিধা নেই আর তাছাড়া ক্রিটিকাল সিএসএস আলাদা করা এবং হোস্ট করা ঝামেলার ব্যাপার তাই আমি দুটো জাভাস্ক্রিপ্ট মেথড আপনাদের দেখাবো যার সাহায্যে আপনারা রেন্ডার ব্লকিং সিএসএস ওয়ার্নিং থেকে মুক্তি পেতে পারবেন। এছাড়াও কিভাবে ফ্রিতে সিডিএন (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 লিখে সার্চ দিলে আপনি সিএসএস লিংকটি পেয়ে যাবেন।
লিংকটি সংরক্ষন করে লাইনটি মুছে (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>
রেন্ডার ব্লকিং সিএসএস: সমাধান ২
আপনি যদি একটি সিএসএস ফাইলের সমস্যা ঠিক করাতে চান বা প্রত্যেকটি আলাদাভাবে ফিক্স করতে চান তাহলে এই পদ্ধতি ব্যবহার করতে পারেন। তাছাড়া প্রথম পদ্ধতির একটি অসুবিধা হলো তা রেন্ডার ব্লকিং সিএসএস সমস্যার সমাধান করলেও, ইউজারের ব্রাউজারে যদি জাভাস্ক্রিপ্ট চালু না করা থাকে তাহলে সিএসএস ফাইল লোড হবে না। কিন্তু এই পদ্ধতিতে জাভাস্ক্রিপ্ট চালু না থাকলেও সিএসএস ফাইল লোড হবে। অর্থাৎ ব্রাউজারে জাভাস্ক্রিপ্ট চালু থাকলে তা জাভাস্ক্রিপ্ট মেথড ব্যবহার করে লোড হবে বা রেন্ডার ব্লকিং সিএসএসের সমাধান করবে। আর জাভাস্ক্রিপ্ট চালু না থাকলে তা সাধারনত নিয়মে লোড করবে। তো এর জন্য নিচের কোডটি আপনার এক্সটারনাল সিএসএস ফাইলের কোডের সাথে রিপ্লেস করুন।
এখানে মার্ক করা দুই জায়গায় আপনার সিএসএস ফাইলের লিংকটি বসাবেন।
ফলাফল
উপরের ২ ধরনের সমাধানের যেকোনো একটা ব্যবহার করে বপনি খুব সহজে রেন্ডার ব্লকিং সিএসএস সমস্যা থেকে মুক্তি পেতে পারেন। নিচে পেজস্পিড টুলে এর ফলাফল চেক করে দেখুন, কোনে রেন্ডার ব্লকিং ওয়ার্নিং দেখাচ্ছে না।
নোট :এই পদ্ধতিতে আপনি শুধু ফন্ট-ওসামই নয় বরং যেকোন ধরনের সিএসএস ফাইল লোড করতে পারবেন, যেহুতু মোটামুটি সব ওয়েবসাইট ফন্ট-ওসাম ব্যবহার করে তাই আমি ফন্ট-ওসাম নিয়ে আলোচনা করলাম।
পোস্টটি কেমন লেগেছে তা কমেন্ট করে জানাবেন। আপনাদের লিখা টিউটোরিয়াল আমাদের ব্লগে পাবলিশ করতে আমাদের ফেসবুক পেজে যোগাযোগ করুন।
About the Author
Hey there! I'm Munna, a Web Designer, Graphic Designer as well as a Content Creator. I love to Redesign and create interesting things.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser. The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.
