 |
| JS and CSS Render Blocking |
যারা ওয়ার্ডপ্রেস বা ব্লগারের কাস্টম টেমপ্লেট ব্যবহার করেন তাদের জন্য বলছি, যদি এ সম্পর্কে কিছুই না জানেন তবে প্রথমেই আপনার ওয়েবসাইটের স্পিড বা গতি পরিক্ষা করুন। Google PageSpeed Insights এই লিংক থেকে পরিক্ষা করুন। এবার রেজাল্ট -এ দেখবেন হয়তো আসছে-
Eliminate render-blocking JavaScript and CSS in above-the-fold content এবং এর নিচে আসবে কোন লিংক গুলো রেন্ডার করতে সমস্যা হচ্ছে।
এর সবচেয়ে সহজ সমাধান হলো ব্লগার বা ওয়ার্ডপ্রেসের কাস্টম টেমপ্লেট গুলো ব্যবহার না করা। তবুও আপনি যদি চান সমস্যাটি সমাধান করতে সেক্ষেত্রে ব্যবহার করতে পারেন Defer.js স্ক্রিপ্ট। যার মাধ্যমে আপনার সম্পূর্ণ পেজটি লোড হওয়ার পর স্ক্রিপ্ট রেন্ডার হবে। নিচের স্ক্রিপ্টটি কপি করে আপনার ওয়েবসাইটের </body> এন্ডিং বডি ট্যাগ এর আগে পেস্ট করুন।
<script type="text/javascript">
function downloadJSAtOnload() {
var element = document.createElement("script");
element.src = "defer.js";
document.body.appendChild(element);
}
if (window.addEventListener)
window.addEventListener("load", downloadJSAtOnload, false);
else if (window.attachEvent)
window.attachEvent("onload", downloadJSAtOnload);
else window.onload = downloadJSAtOnload;
</script>
এখান থেকে defer.js এর পরিবর্তে আপনার স্ক্রিপ্ট এর সোর্স দিন।
- Find </body>
- before this tag paste the code above
- change the red 'difer.js' with the source of your Js
- Save and test again from Google PageSpeed Insights
এখন সিএসএস এর জন্য আপনাকে যা করতে হবে, তা হলো
Blogger এর জন্য:
- Change the <head> to <head>
- Change the closing tag </head> to </head><!--</head> -->
আর ব্লগার না হলে আপনি চেষ্টা করুন যেকোনো একটি CSS framework ব্যবহার করতে এবং দুই বা ততোধিক ফ্রেমওয়ার্ক এর ক্ষেত্রে অবশ্যই যেন সামঞ্জস্যপূর্ণ হয়। তাছাড়া অনেকগুলো CSS এক্সটার্নাল লিংক ব্যবহার না করে সবগুলো ডাউনলোড করে একত্র করে ব্যবহার করুন।
ধন্যবাদ, যদি আপনি ব্লগটি পড়ে উপকৃত হয়ে থাকেন তবে নতুন আপডেট পেতে সাবস্ক্রাইব করুন। কিছু জানার থাকলে কমেন্ট করুন। আমরা আপনার সহায়তায় সচেষ্ট থাকব।
Post a Comment