JavaScript প্রোগ্রামিং ভাষা ওয়েব পেজগুলোর ডাইনামিক কন্টেন্ট প্রদর্শনে সাহায্য করে। WordPress ওয়েবসাইটগুলোর উদাহরণস্বরূপ, JavaScript ব্যবহার হয় অডিও এবং ভিডিও এমবেড করার জন্য। এছাড়া ইমেজ গ্যালারি, ইন্টারেক্টিভ মেনু, কাউন্টডাউন টাইমার এবং আরও অনেক কিছু প্রদর্শনের জন্য এটি ব্যবহৃত হয়।
JavaScript ফাইলগুলো .js এক্সটেনশন ব্যবহার করে এবং একটি সাধারণ WordPress ওয়েবসাইটে, JavaScript ফাইলগুলো WordPress থিম এবং এক্টিভেট করা WordPress প্লাগইনগুলো দ্বারা পেজগুলোর মধ্যে ইনসার্ট করা হয়। উদাহরণস্বরূপ, আপনার থিমের হোম পেজ স্লাইডার হতে পারে slider.js ফাইলটি প্রয়োজন সঠিকভাবে কাজ করার জন্য, আর আপনার কন্ট্যাক্ট ফর্ম পেজ হতে পারে form.js ফাইলটি প্রয়োজন।
আমি মনে করি JavaScript আধুনিক WordPress ওয়েবসাইটের জন্য অপরিহার্য। দুর্ভাগ্যক্রমে, এটি সঠিকভাবে অপ্টিমাইজ না করলে ওয়েবসাইট স্লো করতে পারে।
Hypertext Transfer Protocol-এর প্রথম ভার্সনগুলোতে, JavaScript ওয়েবসাইট স্লো করতে পারে কারণ প্রতিটি JavaScript ফাইলকে পেজ সঠিকভাবে প্রদর্শনের জন্য ডাউনলোড এবং এক্সিকিউট করতে হতো। এই সমস্যা সমাধানের জন্য একটি জনপ্রিয় অপ্টিমাইজেশন টেকনিক হলো একাধিক JavaScript ফাইল কম্বাইন করা যাতে ব্রাউজারের HTTP রিকোয়েস্টের সংখ্যা কমানো যায়। এই টেকনিক কখনো কখনো JavaScript aggregation-ও বলা হয়।
এই আর্টিকেলে, আমি ব্যাখ্যা করব কেন অনেক ওয়েবসাইট মালিক WordPress-এ এক্সটার্নাল JavaScript কম্বাইন করে এবং কিছু উপকারী WordPress প্লাগইন শেয়ার করব যেগুলো এই কাজটি করতে ব্যবহার করা যায়। আমি এছাড়া বলব কেন এক্সটার্নাল JavaScript ফাইলগুলো কম্বাইন করা অধিকাংশ ওয়েবসাইট মালিকের জন্য আর প্রয়োজনীয় নয়।
WordPress-এ এক্সটার্নাল JavaScript ফাইলগুলো কেন কম্বাইন করা হয়?
যদিও JavaScript ফাংশনগুলো SCRIPT ট্যাগ ব্যবহার করে সরাসরি HTML-এ যোগ করা যায়, তবে সাধারণ অনুশীলন হলো JavaScript কোড একটি এক্সটার্নাল ফাইলে সংরক্ষণ করা। এটি আরও প্র্যাকটিক্যাল কারণ এটি কোডকে আলাদা করে এবং JavaScript ফাংশনগুলোকে অনেক পেজ থেকে কল করার সুযোগ দেয়।
এক ওয়েব পেজের জন্য প্রয়োজনীয় প্রতিটি JavaScript ফাইল পেজ রেন্ডারিং প্রসেসের সময় ব্রাউজার দ্বারা ডাউনলোড করা হয়।
| পেজ রেন্ডারিং | কেউ ওয়েব পেজ দেখে, ব্রাউজার পেজটি বিল্ড করে কোডের প্রতিটি লাইন ক্রমাগত প্রসেস করে। এটিকে পেজ রেন্ডারিং বলে। |
| HTTP রিকোয়েস্ট | সার্ভারে একটি ফাইল অ্যাক্সেস করার রিকোয়েস্টকে HTTP রিকোয়েস্ট বলে। তাই ব্রাউজারকে পেজের জন্য প্রয়োজনীয় প্রতিটি JavaScript ফাইলের জন্য একটি HTTP রিকোয়েস্ট করতে হয়। |
যখন ফাইলগুলো ক্রমাগত ডাউনলোড হয়, HTTP রিকোয়েস্টের বেশি সংখ্যা ওয়েব পেজ লোড হওয়ার সময় বড়াতে পারে। তাই WordPress-এ এক্সটার্নাল JavaScript ফাইলগুলো কম্বাইন করলে পেজ রেন্ডারিং-এর সময় HTTP রিকোয়েস্টের সংখ্যা ভাটিয়ে কমাতে পারেন।
কিছু সার্চ ইঞ্জিন এক্সটার্নাল JavaScript দুটি ফাইলে কম্বাইন করার পরামর্শ দেয়।
| গুরুত্বপূর্ণ JavaScript ফাংশন (ফাইল ১) | প্রথম JavaScript ফাইলটিতে গুরুত্বপূর্ণ ফাংশনগুলো থাকে যা ইনিশিয়াল পেজ লোড সঠিকভাবে রেন্ডার করার জন্য প্রয়োজন। |
| কম গুরুত্বপূর্ণ JavaScript ফাংশন (ফাইল ২) | দ্বিতীয় JavaScript ফাইলটিতে কম গুরুত্বপূর্ণ ফাংশনগুলো থাকে যা পেজ লোড হওয়ার পর কল করা যায়। |
যদি একটি ওয়েব পেজ নয়টি JavaScript ফাইল প্রয়োজন হয় সঠিকভাবে প্রদর্শনের জন্য, WordPress-এ এক্সটার্নাল JS ফাইলগুলো কম্বাইন করলে JavaScript কোডের জন্য টোটাল HTTP রিকোয়েস্ট নয় থেকে শুধু দুটি করতে পারেন। এক্সটার্নাল CSS ফাইলগুলোও কম্বাইন করা যায়, পেজের HTTP রিকোয়েস্ট আরও কমানো যায়।
কি আমার WordPress সাইট দ্রুত হবে এক্সটার্নাল JavaScript ফাইলগুলো কম্বাইন করলে?
Hypertext Transfer Protocol-এ উন্নতির কারণে, JavaScript ফাইল এবং CSS ফাইল কম্বাইন করা আর অপরিহার্য নয় যদি না আপনার ওয়েব হোস্টিং কোম্পানি HTTP/2 সাপোর্ট করে না।
HTTP/1.0 এবং HTTP/1.1-এ, প্রতিটি JavaScript এবং CSS ফাইল ক্রমাগত ডাউনলোড হতো। এর মানে এক ফাইল পুরোপুরি ডাউনলোড হওয়ার পরেই পরবর্তী ফাইল ডাউনলোড শুরু হতো। ২০১৫ সালে লঞ্চ হওয়া HTTP/2 প্রোটোকল এই সমস্যাটি সমাধান করলো প্যারালেল ডাউনলোডের সুযোগ দিয়ে। যেহেতু সব এক্সটার্নাল রিসোর্স একসাথে ডাউনলোড হতে পারে, HTTP/2 উপলব্ধ থাকলে ফাইল কম্বাইন করার আর কোনো সুবিধা নেই।
HTTP/2 বর্তমানে ৯৫.৬% ইন্টারনেট ব্রাউজার দ্বারা সাপোর্টেড। ৬ জানুয়ারি ২০২২ পর্যন্ত, HTTP/2 ইন্টারনেটের সব ওয়েবসাইটের ৪৬.৯% দ্বারা ব্যবহৃত হচ্ছে, যদিও নিচের গ্রাফ থেকে দেখবেন যে ইন্টারনেটের সবচেয়ে জনপ্রিয় ওয়েবসাইটগুলোর মধ্যে এই आँকড়া বহুত বেশি।
যদি আপনার ওয়েব হোস্ট HTTP/2 সাপোর্ট করে, ফাইল কম্বাইন করা আপনার ওয়েবসাইট স্লো করতে পারে কারণ কম্বাইন করা JavaScript ফাইলগুলো যেগুলো অগরিগেট করা হয়েছে তাদের চেয়ে বড়। কারণ ব্রাউজারের জন্য দুটি বড় JavaScript ফাইল ডাউনলোড করতে বেশি সময় লাগে চেয়ে অনেক ছোট JavaScript ফাইল যেগুলো একসাথে ডাউনলোড হয়।
JavaScript-এ আমি যে দুটি টেকনিক রিকমেন্ড করি সেগুলো হলো minification এবং defer parsing।
| Minify | Minification মানে অনাবশ্যক ক্যারেক্টার যেমন হোয়াইটস্পেস এবং কমেন্ট রিমুভ করা। ফলে JavaScript ফাইল ছোট হয়। |
| Defer Parsing | JavaScript কোড পেজ রেন্ডারিং প্রসেস স্লো করে। Defer এবং Async নামের দুটি টেকনিক এই সমস্যা সমাধান করতে ব্যবহার করা যায়। |
WordPress-এ JavaScript parsing defer করার বিষয়ে আমার আর্টিকেল পড়ুন আরও ভালো বুঝতে কেন JavaScript পেজ রেন্ডারিং প্রসেস স্লো করে।
WordPress-এ এক্সটার্নাল JavaScript কম্বাইন করার উপায়
আপনার ওয়েব হোস্টিং কোম্পানি এখনো HTTP 1.1 ব্যবহার করলে, WordPress-এ এক্সটার্নাল JavaScript ফাইল এবং CSS ফাইল কম্বাইন করা এখনো রিকমেন্ডেড।
ফাইল কম্বাইন করার আগে এবং পরে পারফরম্যান্স টেস্ট চালাতে ভুলবেন না যাতে পেজ লোডিং টাইম কতটুকু প্রভাবিত হয়েছে সেটি জানতে পারেন। আপনি এটি GTmetrix, Google PageSpeed Insights এবং Pingdom Website Speed Test ব্যবহার করে করতে পারেন।
Autoptimize
Autoptimize WordPress ব্যবহারকারীদের জন্য উপলব্ধ সবচেয়ে কার্যকর অপ্টিমাইজেশন প্লাগইনগুলোর একটি। এটি HTML-এ minification সাপোর্ট করে এবং JavaScript এবং CSS-এ ফাইল কম্বিনেশন এবং minification। JavaScript ফাইলগুলো অগরিগেট করার বদলে defer করা যায় রেন্ডার-ব্লকিং প্রতিরোধ করতে এবং Google Fonts-এর জন্যও অপ্টিমাইজেশন অপশন রয়েছে।
আমি অনেক WordPress ওয়েবসাইটে Autoptimize ব্যবহার করেছি কারণ এটি সবসময় পেজ লোডিং টাইম উন্নত করে।
OFFICIAL WEBSITE DOWNLOAD AUTOPTIMIZE
Asset CleanUp
Asset CleanUp একটি হাইলি-কনফিগারেবল অপ্টিমাইজেশন WordPress প্লাগইন যা minification, কম্বিনেশন এবং JavaScript এবং CSS-এর deferring সাপোর্ট করে। এটি HTML ক্লিন আপ করতে দেয় এবং ফন্ট ম্যানেজ করার এবং পেজ লোডিং টাইমে তাদের প্রভাব কমানোর জন্য অনেক টুল প্রদান করে।
Asset CleanUp-র একটি চমৎকার ফিচার হলো JavaScript এবং CSS ম্যানেজার। এটি আপনাকে নিখুঁতভাবে নির্দিষ্ট করতে দেয় আপনার ওয়েবসাইট জুড়ে কোন পেজগুলোর জন্য কোন JavaScript এবং CSS ফাইলগুলো লোড হবে।
OFFICIAL WEBSITE DOWNLOAD ASSET CLEANUP
WP Super Minify
WP Super Minify কিছুটা ভিন্নভাবে কাজ করে শুধু JavaScript কমপ্রেস এবং CSS কমপ্রেস করার অপশন দিয়ে। সিলেক্ট করলে, WP Super Minify ফাইলগুলো কম্বাইন, minify এবং ক্যাশ করবে।
আপনি যদি একটি সিম্পল অপ্টিমাইজেশন সমাধান খুঁজেন যা শুধু কাজ করে, তবে এটি আপনার জন্য উপযুক্ত হতে পারে।
OFFICIAL WEBSITE DOWNLOAD WP SUPER MINIFY
WordPress ক্যাশ প্লাগইন ব্যবহার করে এক্সটার্নাল JavaScript ফাইলগুলো কম্বাইন করা
সেরা WordPress ক্যাশিং প্লাগইনগুলোর মধ্যে অনেক অতিরিক্ত অপ্টিমাইজেশন টুল রয়েছে যেগুলো আপনার ওয়েবসাইট পারফরম্যান্স উন্নত করতে সাহায্য করে। তাই আপনার বিদ্যমান WordPress ক্যাশিং সমাধানটিও সম্ভবত আপনাকে এক্সটার্নাল JavaScript এবং CSS ফাইলগুলো কম্বাইন করার সুযোগ দেয়।
WP Rocket-এ, উদাহরণস্বরূপ, JavaScript এবং CSS ফাইল minify এবং কম্বাইন করার অপশন রয়েছে। JavaScript ফাইলগুলো defer করা যাবে রেন্ডার-ব্লকিং প্রতিরোধ করতে।
আমার পরামর্শ হলো আপনার পছন্দের WordPress ক্যাশিং প্লাগইন ব্যবহার করে ফাইল কম্বিনেশন দিয়ে পেজ লোডিং টাইম টেস্ট করুন এবং তারপর ফলাফলগুলো স্ট্যান্ডঅ্যালোন JavaScript অপ্টিমাইজেশন সমাধান যেমন Autoptimize এবং Asset CleanUp-এর সাথে তুলনা করুন।
শেষ কথা
আশা করি এক্সটার্নাল JavaScript ফাইল কম্বাইন করার এই আলোচনা আপনার ভালো লেগেছে। আপনি দেখেছেন, আপনার ওয়েব হোস্ট HTTP/2 সাপোর্ট করলে JavaScript ফাইল অগরিগেট করা আর প্রয়োজন নয় কারণ প্যারালেলে ফাইল ডাউনলোড করা আরও কার্যকর।
আপনার ওয়েব হোস্ট যদি শুধু HTTP/1.1 সাপোর্ট করে, তবে WordPress-এ এক্সটার্নাল JavaScript কম্বাইন করে পেজ লোডিং টাইম কমানো যায়।
সুপারিশকৃত পড়া: WordPress-এ অনইউজড CSS রিমুভ করা
পড়ার জন্য ধন্যবাদ।
Kevin
