আপনি যদি WordPress ইউজার হন, আমি দৃঢ়ভাবে সুপারিশ করছি ওয়েবসাইট পারফরম্যান্সকে প্রাॅയরিটি দিতে। দ্রুত লোড হওয়া পেজ দিয়ে ভিজিটরদের সার্ভ করলে আপনার সার্চ ইঞ্জিন র্যাঙ্কিং উন্নত হবে, ওয়েবসাইট ট্রাফিক বাড়বে এবং পাঠকদের একটি চমৎকার ইউজার এক্সপেরিয়েন্স দেবে।
ওয়েবসাইট অপ্টিমাইজেশনের একটি মূল অংশ হল পারফরম্যান্স বেঞ্চмар্কিং টুলস যেমন Google PageSpeed Insights, GTmetrix এবং Pingdom Website Speed Test ব্যবহার করে ওয়েব পেজগুলো বিশ্লেষণ করা। এই সার্ভিসগুলো একটি URL-এর পারফরম্যান্স রেট করে, পেজের সাইজ কনফার্ম করে এবং পেজ লোড হতে কতক্ষণ লাগে সেটা কনফার্ম করে।
পারফরম্যান্স বেঞ্চмар্কিং টুলস শুধু আপনার ওয়েব পেজগুলো বিশ্লেষণ করে না, সেগুলো পেজ লোডিং টাইম উন্নত করার জন্য কী ঠিক করতে হবে সেটাও দেখায়। উদাহরণস্বরূপ, আপনাকে অনইউজড CSS কোড রিমুভ করতে বা আপনার ওয়েবসাইটে ইমেজের ওজন কমাতে বলা হয়তে পারে।
একটি সুপারিশ যা আপনি বারবার দেখবেন সেটি হল WordPress-এ রেন্ডার-ব্লকিং রিসোর্স দূর করুন। এই আর্টিকেলে, আমি ব্যাখ্যা করব রেন্ডার-ব্লকিং রিসোর্স WordPress-এ কী এবং কীভাবে সেগুলো দূর করে আপনার ওয়েবসাইটের পেজ লোডিং টাইম উন্নত করতে পারেন।
WordPress-এ রেন্ডার-ব্লকিং রিসোর্স কী?
ওয়েবসাইট অপ্টিমাইজেশন হল আপনার ওয়েবসাইট পেজগুলো ভিজিটরদের কাছে দ্রুতম সম্ভব সময়ে ডেলিভার করা। একটি টিপিক্যাল পেজে অনেক ধরনের এলিমেন্ট থাকে।
| স্ট্রাকচার ও ডিজাইন | HTML এবং CSS ব্যবহার করে নির্মিত |
| কন্টেন্ট | টেক্সট এবং ইমেজ |
| ডাইনামিক কন্টেন্ট | ভিডিও এবং স্লাইডার ব্যবহৃত JavaScript-এ প্রদর্শিত হয় |
কেউ আপনার ওয়েবসাইটের একটি পেজ ভিজিট করলে, তাদের ব্রাউজার পেজের কোড টপ থেকে বটম পর্যন্ত প্রসেস করে। এটাকে সাধারণত "পেজ রেন্ডারিং" বলা হয়।
যদি ব্রাউজার এক্সটার্নাল CSS বা JavaScript ফাইল কল করতে পায়, তবে এটি পেজ রেন্ডারিং বন্ধ করে দিতে হয় এবং সেই CSS এবং JavaScript ফাইলগুলো ডাউনলোড করার আগে সেগুলো প্রসেস করতে পারে। এই রিসোর্সগুলো তাই "রেন্ডার-ব্লকিং" বলে বিবেচিত হয় কারণ সেগুলো পেজ রেন্ডারিং প্রসেস বন্ধ করে দেয়।
রেন্ডার-ব্লকিং রিসোর্স ব্রাউজারের প্রাইমারি কন্টেন্ট ইউজারকে দেখাতে পারতে যে সময় লাগে সেটা বাড়িয়ে দেয়, যা একটি গুরুত্বপূর্ণ পারফরম্যান্স এবং সার্চ ইঞ্জিন র্যাঙ্কিং মেট্রিক যা Google ফার্স্ট মেনিংফুল পেইন্ট (FMP) বলে।
জানতে থাকুন যে টেক্সট এবং ইমেজ রেন্ডার-ব্লকিং নয় এবং সকল CSS এবং JavaScript ফাইলও রেন্ডার-ব্লকিং নয়। বড় CSS এবং JavaScript ফাইলগুলোই সাধারণত পেজ রেন্ডারিং স্লো করে।
WordPress-এ রেন্ডার-ব্লকিং রিসোর্স কীভাবে আইডেন্টিফাই করবেন
WordPress-এ রেন্ডার-ব্লকিং রিসোর্স সহজে পারফরম্যান্স বেঞ্চмар্কিং টুলস দিয়ে আইডেন্টিফাই করা যায়। আপনার যা পেজ টেস্ট করতে চান তার URL দিয়ে দিলেই হবে।
Google PageSpeed Insights আপনার পেজের ফার্স্ট পেইন্টে রেন্ডার-ব্লকিং রিসোর্স কতটুকু টাইম যোগ করে সেটা হাইলাইট করে। তার নিচে একটি ব্রেকডাউন থাকে যা প্রতিটি রেন্ডার-ব্লকিং রিসোর্সের URL এবং ফাইলের সাইজ দেখায়। এছাড়া যদি রেন্ডার-ব্লকিং রিসোর্স দূর করা হয় তবে পেজ কতটুকু দ্রুত লোড হতে পারে সেটাও দেখায়।
GTmetrix-ও প্রতিটি রেন্ডার-ব্লকিং রিসোর্স, ফাইলের সাইজ এবং ফাইল ডাউনলোড হতে কতক্ষণ লাগে সেটা লিস্ট করে।
যদিও Pingdom Website Speed Test-এ রেন্ডার-ব্লকিং রিসোর্স হাইলাইট করার জন্য কোনো স্পেসিফিক সেকশন নেই, "ফাইল রিকোয়েস্ট" এরিয়া থেকে পেজ কী কারণে স্লো হচ্ছে সেটা দেখা যায়।
এখানে আইকন, ফন্ট এবং JavaScript ফাইল مثل রেন্ডার-ব্লকিং রিসোর্স হাইলাইট হয়। প্রতিটি রিসোর্সের ফাইল URL, ফাইল সাইজ এবং ডাউনলোড টাইম ডিসপ্লে হয়। ফাইল রিকোয়েস্ট এরিয়াটি কোনো ইমেজ পেজ লোডিং টাইম বাড়াচ্ছে সেটা দেখার জন্যও উপকারী।
WordPress আপনার ওয়েবসাইট জুড়ে আলাদা আলাদা CSS এবং JavaScript ফাইল কল করে, তাই একাধিক পেজের জন্য পারফরম্যান্স টেস্ট রান করা গুরুত্বপূর্ণ যাতে সকল রেন্ডার-ব্লকিং রিসোর্স ডিটেক্ট হয়। উদাহরণস্বরূপ, আপনার হোম পেজ, ব্লগ ইনডেক্স, ব্লগ পোস্ট, এবাউট পেজ এবং কন্টাক্ট পেজের মতো কি-এরিয়াগুলোর জন্য পারফরম্যান্স টেস্ট রান করতে পারেন।
ক্রিটিক্যাল রিসোর্স আইডেন্টিফাই করা
একটি রিসোর্স ক্রিটিক্যাল বলে ধরা হয় যদি সেটা একটি ওয়েব পেজের ফার্স্ট পেইন্ট ডিসপ্লে করার জন্য আবশ্যক হয়। বাকি সব রিসোর্স নন-ক্রিটিক্যাল বলে ধরা হয়।
ক্রোম DevTools-এ Coverage ট্যাব ব্যবহার করে ক্রিটিক্যাল রিসোর্স আইডেন্টিফাই করা সবচেয়ে সহজ পদ্ধতির একটি। এটা স্পষ্ট করে কোনো ফাইলগুলোর কতটুকু পার্সেন্টেজ ইніশিয়াল পেজ লোড সঠিকভাবে ডিসপ্লে করার জন্য আবশ্যক ছিল। ক্রিটিক্যাল স্টাইলিং গ্রিনে দেখানো হয়, আর নন-ক্রিটিক্যাল স্টাইলিং রেডে।
নিচের স্ক্রিনশটে দেখতে পাবেন WordPress.org-এ, রেন্ডার-ব্লকিং CSS এবং JavaScript ফাইলগুলোর কোডের বড় অংশ ইউটিলাইজড হয় নি। এই পরিস্থিতি অনেক WordPress ওয়েবসাইটে আরও খারাপ, কভারেজ টেস্ট অনেক ফাইল হাইলাইট করে যেগুলোর ১০০% অনুইজড।
ইনলাইন কল ব্যবহার করে WordPress-এ রেন্ডার-ব্লকিং CSS দূর করা
Google সুপারিশ করে রেন্ডার-ব্লকিং রিসোর্স থেকে সকল ক্রিটিক্যাল কোড আপনার HTML পেজ থেকে একটি ইনলাইন কল-এ সরিয়ে আনতে। পেজের ফার্স্ট পেইন্টের জন্য ক্রিটিক্যাল স্টাইলিং আপনার পেজের head সেকশনে style ব্লক ব্যবহার করে ডিফাইন করা যেতে পারে, আর ক্রিটিক্যাল JavaScript ফাংশনগুলো Script ট্যাগ ব্যবহার করে আপনার পেজে ইনলাইন কল করা যেতে পারে।
WordPress এর মতো ডাইনামিক প্ল্যাটফর্মে যেখানে থিম এবং প্লাগইন ಮೂಲಕ CSS এবং JavaScript কোড ওয়েবসাইটে যোগ হয়, সেখানে ক্রিটিক্যাল স্টাইলিং ম্যানুয়ালি সরিয়ে আনা অসম্ভব হতে পারে। তাই অনেক WordPress ইউজার NitroPack এবং Critical CSS এর মতো সার্ভিস ব্যবহার করে যাতে ক্রিটিক্যাল স্টাইলশিটস অটোমেটিক্যালি এক্সট্রাক্ট হয় এবং head সেকশনে ইনলাইন ডিসপ্লে হয়।
যদি ওয়েবসাইট স্টাইলিং ছোট CSS ফাইলগুলতে থাকে, তবে পারফরম্যান্স WordPress প্লাগইন Asset Cleanup ব্যবহার করে ছোট স্টাইলশিটস থেকে স্টাইলিং অটোমেটিক্যালি ইনলাইন করা যায়।
Async এবং Defer ব্যবহার করে WordPress-এ রেন্ডার-ব্লকিং JavaScript দূর করা
WordPress-এ রেন্ডার-ব্লকিং JavaScript রিসোর্স দুটি টেকনিক Async এবং Defer ব্যবহার করে দূর করা যায়। উভয় মেথড ব্রাউজারকে পেজ রেন্ডার করা চালিয়ে যাওয়ার অনুমতি দেয় যখন রেন্ডার-ব্লকিং CSS এবং JavaScript ফাইল আভাভ-দ-ফোল্ড কন্টেন্টে ব্যাকগ্রাউন্ডে ডাউনলোড হয়।
একটি পেজে Async বা Defer ব্যবহার করা পেতে পারে সেটা জানতে উভয় টেস্ট করা উচিত এবং কোন টেকনিক ভালো রেজাল্ট দেয় সেটা দেখতে হবে। যাইহোক, আপনি যেকোনো মেথড ব্যবহার করলেই পেজ লোডিং টাইমে রিডাকশন দেখবেন।
| Async | পেজ রেন্ডার হওয়ার সময় ফাইল ডাউনলোড করুন এবং ফাইলগুলো যেন দ্রুত উপলব্ধ হয় ততক্ষণায় এক্সিকিউট করুন |
| Defer | পেজ রেন্ডার হওয়ার সময় ফাইল ডাউনলোড করুন এবং পেজ রেন্ডারিং শেষ হলে সিকোয়েনশিয়াল অর্ডারে ফাইল এক্সিকিউট করুন |
Async এবং Defer আপনার পুরো ওয়েবসাইটে একটি WordPress পারফরম্যান্স প্লাগইন ব্যবহার করে অ্যাপ্লাই করা যায়।
আমার পারসোনাল ব্লগে, আমি Async JavaScript প্লাগইন ব্যবহার করি পেজগুলোর JavaScript ডিফার করার জন্য। Autoptimize তৈরিক Frank Goossens ডেভেলপ করা Async JavaScript নন-ক্রিটিক্যাল JavaScript ফাইলগুলতে Async এবং Defer অ্যাপ্লাই করতে দেয় এবং jQuery ফাইলগুলোর জন্য আলাদা সেটিংস অ্যাপ্লাই করার অপশন দেয়।
প্লাগইনটির সেটআপ উইজার্ড GTmetrix-এ মাল্টিপল টেস্ট রান করে আপনার ওয়েবসাইটের জন্য সেরা সেটিংস নির্ধারণ করতে।
আমি Async JavaScript বাছাই করেছিলাম কারণ এটি অটোমেটিক্যালি আমার পুরো ওয়েবসাইটে Async বা Defer অ্যাপ্লাই করে। এটি নিঃসন্দেহে WordPress-এ রেন্ডার-ব্লকিং রিসোর্স দূর করার সবচেয়ে সিম্পল পদ্ধতি, কিন্তু HTTP/2 Push Preload WordPress প্লাগইন দিয়ে আপনি আরও ভালো রেজাল্ট পেতে পারেন।
Chrome-এর কভারেজ টুল বা GTmetrix বা Google PageSpeed Insights এর মতো পারফরম্যান্স বেঞ্চмар্কিং সার্ভিস ব্যবহার করে আপনার WordPress ওয়েবসাইটে রেন্ডার-ব্লকিং রিসোর্স আইডেন্টিফাই করার পর, আপনি HTTP/2 Push Preload ব্যবহার করে ফাইল বাই ফাইল বেসিসে Async এবং Defer অ্যাপ্লাই করতে পারেন।
আপনি যদি প্রতিটি ফাইলের Async এবং Defer পারফরম্যান্স টেস্ট করার ইচ্ছুক হন, তবে প্রতিটি রিসোর্সের জন্য সেরা টেকনিক খুঁজে পাবেন। এটি পেজ লোডিং টাইমে আরও বড় রিডাকশন আনতে পারে।
আপনি যেকোনো WordPress প্লাগইন ব্যবহার করে Async এবং Defer অ্যাপ্লাই করুন, আপনার ওয়েবসাইট ডিজাইন পরে চেক করুন যেন কিছু ব্রেক হয়নি।
এই বিষয়ের আরও কম্প্রিহেনসিভ ওভারভিউ পাওয়ার জন্য, আমার আর্টিকেল "How to Defer Parsing of Javascript in WordPress Using Defer and Async" পড়ুন।
চূড়ান্ত চিন্তা
WordPress-এ রেন্ডার-ব্লকিং রিসোর্স পেজ লোডিং টাইম উল্লেখযোগ্যভাবে বাড়িয়ে দেয়। এছাড়া আপনার ওয়েবসাইটের ইউজার এক্সপেরিয়েন্সও এফেক্ট করে কারণ ভিজিটররা একটি ব্ল্যাঙ্ক পেজ দেখেন যতক্ষণ না সকল রেন্ডার-ব্লকিং রিসোর্স ডাউনলোড এবং এক্সিকিউট হয়।
Chrome-এর কভারেজ টুল এবং Google PageSpeed Insights এবং GTmetrix এর মতো সার্ভিসগুলো রেন্ডার-ব্লকিং রিসোর্স আইডেন্টিফাই করা সহজ করে দেয়। আপনি তারপর Async JavaScript এবং HTTP/2 Push Preload এর মতো WordPress প্লাগইন ব্যবহার করে রেন্ডার-ব্লকিং রিসোর্স দূর করতে পারেন।
পড়ার জন্য ধন্যবাদ।
Kevin
