আপনার লাইটহাউস রিপোর্টের সুযোগ বিভাগে আপনার পৃষ্ঠার প্রথম রঙ ব্লক করে এমন সমস্ত URL তালিকাভুক্ত করা হয়েছে। লক্ষ্য হল গুরুত্বপূর্ণ রিসোর্সগুলি ইনলাইন করে, অ-গুরুত্বপূর্ণ রিসোর্সগুলি স্থগিত করে এবং অব্যবহৃত যেকোনো কিছু সরিয়ে এই রেন্ডার-ব্লকিং URLগুলির প্রভাব কমানো।
কোন URL গুলিকে রেন্ডার-ব্লকিং রিসোর্স হিসেবে চিহ্নিত করা হয়?
লাইটহাউস দুই ধরণের রেন্ডার-ব্লকিং URL চিহ্নিত করে: স্ক্রিপ্ট এবং স্টাইলশিট।
একটি <script> ট্যাগ যা:
- ডকুমেন্টের
<head>এ আছে। - এর কোন
deferঅ্যাট্রিবিউট নেই। - এর কোন
asyncঅ্যাট্রিবিউট নেই।
একটি <link rel="stylesheet"> ট্যাগ যা:
- এর কোন
disabledঅ্যাট্রিবিউট নেই। যখন এই অ্যাট্রিবিউটটি উপস্থিত থাকে, তখন ব্রাউজার স্টাইলশিট ডাউনলোড করে না। - ব্যবহারকারীর ডিভাইসের সাথে বিশেষভাবে মেলে এমন কোনও
mediaঅ্যাট্রিবিউট নেই।media="all"রেন্ডার-ব্লকিং হিসাবে বিবেচিত হয়।
গুরুত্বপূর্ণ সম্পদ কীভাবে চিহ্নিত করবেন
রেন্ডার-ব্লকিং রিসোর্সের প্রভাব কমানোর প্রথম ধাপ হল কোনটি গুরুত্বপূর্ণ এবং কোনটি নয় তা চিহ্নিত করা। ক্রোম ডেভটুলস-এ কভারেজ ট্যাব ব্যবহার করে অ-গুরুত্বপূর্ণ CSS এবং JS সনাক্ত করুন। যখন আপনি একটি পৃষ্ঠা লোড বা চালান, তখন ট্যাবটি আপনাকে বলে যে কত কোড ব্যবহার করা হয়েছে, বনাম কত লোড করা হয়েছে:
আপনার প্রয়োজনীয় কোড এবং স্টাইলগুলি পাঠিয়ে আপনি আপনার পৃষ্ঠাগুলির আকার কমাতে পারেন। সোর্স প্যানেলে সেই ফাইলটি পরীক্ষা করতে একটি URL-এ ক্লিক করুন। CSS ফাইলের স্টাইল এবং জাভাস্ক্রিপ্ট ফাইলের কোড দুটি রঙে চিহ্নিত করা হয়েছে:
- সবুজ (গুরুত্বপূর্ণ): প্রথম রঙের জন্য প্রয়োজনীয় স্টাইল; পৃষ্ঠার মূল কার্যকারিতার জন্য গুরুত্বপূর্ণ কোড।
- লাল (সমালোচনামূলক নয়): কন্টেন্টের ক্ষেত্রে প্রযোজ্য স্টাইলগুলি তাৎক্ষণিকভাবে দৃশ্যমান নয়; পৃষ্ঠার মূল কার্যকারিতায় কোড ব্যবহার করা হচ্ছে না।
রেন্ডার-ব্লকিং স্ক্রিপ্টগুলি কীভাবে বাদ দেবেন
একবার আপনি গুরুত্বপূর্ণ কোডটি শনাক্ত করার পরে, সেই কোডটি রেন্ডার-ব্লকিং URL থেকে আপনার HTML পৃষ্ঠার একটি ইনলাইন script ট্যাগে সরান। পৃষ্ঠাটি লোড হয়ে গেলে, পৃষ্ঠার মূল কার্যকারিতা পরিচালনা করার জন্য প্রয়োজনীয় সবকিছু এতে থাকবে।
যদি রেন্ডার-ব্লকিং URL-এ এমন কোনও কোড থাকে যা গুরুত্বপূর্ণ নয়, তাহলে আপনি এটি URL-এ রাখতে পারেন, এবং তারপর async বা defer বৈশিষ্ট্য দিয়ে URL চিহ্নিত করতে পারেন ( Adding Interactivity with JavaScript আরও দেখুন)।
যে কোডটি একেবারেই ব্যবহার করা হচ্ছে না তা সরিয়ে ফেলা উচিত ( অব্যবহৃত কোডটি সরান দেখুন)।
রেন্ডার-ব্লকিং স্টাইলশিটগুলি কীভাবে বাদ দেওয়া যায়
<script> ট্যাগে কোড ইনলাইন করার মতো, HTML পৃষ্ঠার head একটি <style> ব্লকের ভিতরে প্রথম পেইন্টের জন্য ইনলাইন ক্রিটিক্যাল স্টাইল প্রয়োজন। তারপর preload লিঙ্ক ব্যবহার করে বাকি স্টাইলগুলি অ্যাসিঙ্ক্রোনাসভাবে লোড করুন ( অব্যবহৃত CSS ডিফার দেখুন)।
Critical টুল ব্যবহার করে "Above the Fold" CSS এক্সট্র্যাক্ট এবং ইনলাইন করার প্রক্রিয়াটি স্বয়ংক্রিয় করার কথা বিবেচনা করুন।
রেন্ডার-ব্লকিং স্টাইল বাদ দেওয়ার আরেকটি পদ্ধতি হল মিডিয়া কোয়েরি অনুসারে সাজানো স্টাইলগুলিকে বিভিন্ন ফাইলে বিভক্ত করা। তারপর প্রতিটি স্টাইলশিট লিঙ্কে একটি মিডিয়া অ্যাট্রিবিউট যোগ করুন। একটি পৃষ্ঠা লোড করার সময়, ব্রাউজার শুধুমাত্র ব্যবহারকারীর ডিভাইসের সাথে মেলে এমন স্টাইলশিটগুলি পুনরুদ্ধার করার জন্য প্রথম পেইন্টটি ব্লক করে ( রেন্ডার-ব্লকিং CSS দেখুন)।
অবশেষে, আপনার CSS-কে ছোট করে অতিরিক্ত স্পেস বা অক্ষর মুছে ফেলতে হবে ( Minify CSS দেখুন)। এটি নিশ্চিত করে যে আপনি আপনার ব্যবহারকারীদের কাছে সম্ভাব্য সবচেয়ে ছোট বান্ডিল পাঠাচ্ছেন।
স্ট্যাক-নির্দিষ্ট নির্দেশিকা
এএমপি
সার্ভার-সাইড এএমপি লেআউট রেন্ডার করতে এএমপি অপ্টিমাইজারের মতো টুল ব্যবহার করুন।
ড্রুপাল
সমালোচনামূলক CSS এবং জাভাস্ক্রিপ্ট ইনলাইন করার জন্য একটি মডিউল ব্যবহার করার কথা বিবেচনা করুন, এবং নন-ক্রিটিকাল CSS বা জাভাস্ক্রিপ্টের জন্য defer অ্যাট্রিবিউট ব্যবহার করুন।
জুমলা
জুমলা প্লাগইনের একটি সংখ্যা রয়েছে যা আপনাকে গুরুত্বপূর্ণ সম্পদ ইনলাইন করতে বা কম গুরুত্বপূর্ণ সম্পদ স্থগিত করতে সাহায্য করতে পারে।
ওয়ার্ডপ্রেস
বেশ কিছু ওয়ার্ডপ্রেস প্লাগইন রয়েছে যা আপনাকে গুরুত্বপূর্ণ সম্পদ ইনলাইন করতে বা কম গুরুত্বপূর্ণ সম্পদ স্থগিত করতে সাহায্য করতে পারে।