জাভাস্ক্রিপ্ট প্রোগ্রামিং ভাষা ওয়েব পৃষ্ঠাগুলিকে গতিশীল সামগ্রী প্রদর্শন করতে সহায়তা করে। ওয়ার্ডপ্রেস ওয়েবসাইটগুলিতে, উদাহরণস্বরূপ, জাভাস্ক্রিপ্ট অডিও এবং ভিডিও এম্বেড করতে ব্যবহৃত হয়। এটি চিত্র গ্যালারী, ইন্টারেক্টিভ মেনু, কাউন্টডাউন টাইমার এবং আরও অনেক কিছু প্রদর্শন করতেও ব্যবহৃত হয়৷
জাভাস্ক্রিপ্ট ফাইলগুলি ফাইল এক্সটেনশন .js ব্যবহার করে এবং একটি সাধারণ ওয়ার্ডপ্রেস ওয়েবসাইটে, জাভাস্ক্রিপ্ট ফাইলগুলি ওয়ার্ডপ্রেস থিম এবং ওয়ার্ডপ্রেস প্লাগইনগুলির দ্বারা পৃষ্ঠাগুলিতে প্রবেশ করানো হয় যা সক্রিয় করা হয়৷ উদাহরণস্বরূপ, আপনার থিমের হোম পেজ স্লাইডারের সঠিকভাবে কাজ করার জন্য slider.js নামক একটি ফাইলের প্রয়োজন হতে পারে, যেখানে আপনার যোগাযোগ ফর্ম পৃষ্ঠায় form.js নামে একটি ফাইলের প্রয়োজন হতে পারে৷
আমি বিশ্বাস করি জাভাস্ক্রিপ্ট আধুনিক ওয়ার্ডপ্রেস ওয়েবসাইটের জন্য অপরিহার্য। দুর্ভাগ্যবশত, এটি সঠিকভাবে অপ্টিমাইজ করা না হলে এটি একটি ওয়েবসাইটকেও ধীর করে দিতে পারে৷
৷হাইপারটেক্সট ট্রান্সফার প্রোটোকলের প্রথম সংস্করণগুলিতে, জাভাস্ক্রিপ্ট ওয়েবসাইটগুলিকে ধীর করে দিতে পারে কারণ প্রতিটি জাভাস্ক্রিপ্ট ফাইল ডাউনলোড করতে হবে এবং সঠিকভাবে পৃষ্ঠাটি প্রদর্শন করতে হবে। এই সমস্যাটি মোকাবেলা করার জন্য একটি জনপ্রিয় অপ্টিমাইজেশান কৌশল হল একাধিক জাভাস্ক্রিপ্ট ফাইল একত্রিত করা যাতে একটি ব্রাউজারকে HTTP অনুরোধের সংখ্যা কমাতে হয়। কৌশলটিকে কখনও কখনও জাভাস্ক্রিপ্ট একত্রীকরণ হিসাবে উল্লেখ করা হয়।
এই নিবন্ধে, আমি ব্যাখ্যা করব কেন অনেক ওয়েবসাইটের মালিকরা ওয়ার্ডপ্রেসে বহিরাগত জাভাস্ক্রিপ্ট একত্রিত করে এবং কিছু দরকারী ওয়ার্ডপ্রেস প্লাগইন শেয়ার করুন যা এই কাজটি সম্পাদন করতে ব্যবহার করা যেতে পারে। বাহ্যিক জাভাস্ক্রিপ্ট ফাইলগুলিকে একত্রিত করা কেন বেশিরভাগ ওয়েবসাইটের মালিকদের জন্য আর প্রয়োজনীয় নয় সে সম্পর্কেও আমি কথা বলব৷
কেন ওয়ার্ডপ্রেসে বহিরাগত জাভাস্ক্রিপ্ট ফাইল একত্রিত করবেন?
যদিও জাভাস্ক্রিপ্ট ফাংশনগুলি SCRIPT ট্যাগ ব্যবহার করে সরাসরি HTML এ যোগ করা যেতে পারে, এর পরিবর্তে একটি বহিরাগত ফাইলে Javascript কোড সংরক্ষণ করা সাধারণ অভ্যাস। এটি করা আরও ব্যবহারিক কারণ এটি কোডকে আলাদা করে এবং জাভাস্ক্রিপ্ট ফাংশনগুলিকে অনেক পৃষ্ঠায় কল করার অনুমতি দেয়৷
ওয়েব পেজের জন্য প্রয়োজনীয় প্রতিটি জাভাস্ক্রিপ্ট ফাইল পৃষ্ঠা রেন্ডারিং প্রক্রিয়া চলাকালীন ব্রাউজার দ্বারা ডাউনলোড করতে হবে।
| পৃষ্ঠা রেন্ডারিং৷ | যখন কেউ একটি ওয়েব পৃষ্ঠা দেখে, ব্রাউজার প্রতিটি কোডের লাইনকে ক্রমানুসারে প্রক্রিয়া করে পৃষ্ঠাটি তৈরি করে। এটি পেজ রেন্ডারিং নামে পরিচিত৷ | ৷
| HTTP অনুরোধ | একটি সার্ভারে একটি ফাইল অ্যাক্সেস করার অনুরোধকে একটি HTTP অনুরোধ বলা হয়। তাই ব্রাউজারটিকে প্রতিটি জাভাস্ক্রিপ্ট ফাইলের জন্য একটি HTTP অনুরোধ করতে হবে যা পৃষ্ঠার জন্য প্রয়োজনীয়৷ | ৷
যখন ফাইলগুলি ক্রমানুসারে ডাউনলোড করা হয়, তখন একটি উচ্চ সংখ্যক HTTP অনুরোধ একটি ওয়েব পৃষ্ঠা লোড হতে সময় বাড়াতে পারে। সুতরাং ওয়ার্ডপ্রেসে বহিরাগত জাভাস্ক্রিপ্ট ফাইলগুলিকে একত্রিত করে, আপনি পৃষ্ঠা রেন্ডারিংয়ের সময় করা HTTP অনুরোধের সংখ্যা অনেক কমিয়ে দিতে পারেন৷
কিছু সার্চ ইঞ্জিন বাহ্যিক জাভাস্ক্রিপ্ট দুটি ফাইলে একত্রিত করার পরামর্শ দেয়।
| গুরুত্বপূর্ণ জাভাস্ক্রিপ্ট ফাংশন (ফাইল 1) | প্রথম জাভাস্ক্রিপ্ট ফাইলে গুরুত্বপূর্ণ ফাংশন রয়েছে যা প্রাথমিক পৃষ্ঠা লোড সঠিকভাবে রেন্ডার করার জন্য প্রয়োজন। |
| কম গুরুত্বপূর্ণ জাভাস্ক্রিপ্ট ফাংশন (ফাইল 2) | দ্বিতীয় জাভাস্ক্রিপ্ট ফাইলটিতে কম গুরুত্বপূর্ণ ফাংশন রয়েছে যা একবার পৃষ্ঠা লোড হয়ে গেলে কল করা যেতে পারে। |
যদি একটি ওয়েব পেজ সঠিকভাবে প্রদর্শনের জন্য নয়টি জাভাস্ক্রিপ্ট ফাইলের প্রয়োজন হয়, ওয়ার্ডপ্রেসে বহিরাগত JS ফাইলগুলিকে একত্রিত করা আপনাকে জাভাস্ক্রিপ্ট কোডের জন্য HTTP অনুরোধের সংখ্যা নয় থেকে মাত্র দুটিতে কমাতে সাহায্য করতে পারে। বহিরাগত CSS ফাইলগুলিও একত্রিত করা যেতে পারে, একটি পৃষ্ঠার HTTP অনুরোধের সংখ্যা আরও কমিয়ে দেয়৷
আমি যদি বাহ্যিক জাভাস্ক্রিপ্ট ফাইলগুলি একত্রিত করি তাহলে কি আমার ওয়ার্ডপ্রেস সাইট দ্রুততর হবে?
হাইপারটেক্সট ট্রান্সফার প্রোটোকলের উন্নতির কারণে, জাভাস্ক্রিপ্ট ফাইল এবং CSS ফাইলগুলিকে একত্রিত করা আর অপরিহার্য নয় যদি না আপনার ওয়েব হোস্টিং কোম্পানির HTTP/2 এর জন্য সমর্থন না থাকে৷
HTTP/1.0 এবং HTTP/1.1-এ, প্রতিটি জাভাস্ক্রিপ্ট এবং CSS ফাইল ক্রমানুসারে ডাউনলোড করতে হতো। এর মানে হল যে পরবর্তী ফাইলটি ডাউনলোড শুরু করার আগে একটি ফাইল সম্পূর্ণরূপে ডাউনলোড করতে হবে। HTTP/2 প্রোটোকল, যা 2015 সালে চালু হয়েছিল, সমান্তরাল ডাউনলোডের অনুমতি দিয়ে এই সমস্যার সমাধান করেছে। যেহেতু সমস্ত বাহ্যিক সংস্থান একই সময়ে ডাউনলোড করা যায়, তাই HTTP/2 উপলব্ধ থাকলে ফাইলগুলিকে একত্রিত করার আর কোন সুবিধা নেই৷
HTTP/2 বর্তমানে 95.6% ইন্টারনেট ব্রাউজার দ্বারা সমর্থিত। 6 জানুয়ারী 2022 পর্যন্ত, HTTP/2 সমস্ত অনলাইন ওয়েবসাইটের 46.9% দ্বারা ব্যবহৃত হয়, যদিও আপনি নীচের গ্রাফ থেকে দেখতে পাচ্ছেন যে এই সংখ্যাটি ইন্টারনেটের সবচেয়ে জনপ্রিয় ওয়েবসাইটগুলির মধ্যে উল্লেখযোগ্যভাবে বেশি৷
দুটি কৌশল যা আমি জাভাস্ক্রিপ্টের সাথে ব্যবহার করার পরামর্শ দিই তা হল মিনিফিকেশন এবং ডিফার পার্সিং।
| মিনিফাই করুন | মিনিফিকেশন হোয়াইটস্পেস এবং মন্তব্যের মতো অপ্রয়োজনীয় অক্ষরগুলি সরানো জড়িত। এর ফলে জাভাস্ক্রিপ্ট ফাইল ছোট হয়। |
| পার্সিং বিলম্বিত করুন | জাভাস্ক্রিপ্ট কোড পৃষ্ঠা রেন্ডারিং প্রক্রিয়াকে ধীর করে দেয়। ডিফার নামে দুটি কৌশল এবং অসিঙ্ক এই সমস্যাটি সমাধান করতে ব্যবহার করা যেতে পারে৷ | ৷
জাভাস্ক্রিপ্ট কেন পৃষ্ঠা রেন্ডারিং প্রক্রিয়াকে ধীর করে দেয় তা আরও ভালভাবে বোঝার জন্য দয়া করে ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট পার্সিং স্থগিত করার বিষয়ে আমার নিবন্ধটি পড়ুন৷
কিভাবে ওয়ার্ডপ্রেসে বহিরাগত জাভাস্ক্রিপ্ট একত্রিত করবেন
যদি আপনার ওয়েব হোস্টিং কোম্পানি এখনও HTTP 1.1 ব্যবহার করে, তবে এটি এখনও ওয়ার্ডপ্রেসে বহিরাগত জাভাস্ক্রিপ্ট ফাইল এবং CSS ফাইলগুলিকে একত্রিত করার সুপারিশ করা হয়।
ফাইলগুলিকে একত্রিত করার আগে এবং পরে পারফরম্যান্স পরীক্ষা চালানোর বিষয়ে নিশ্চিত হন যাতে আপনি জানতে পারেন কীভাবে পৃষ্ঠা লোড হওয়ার সময়গুলি প্রভাবিত হয়েছে৷ আপনি GTmetrix, Google PageSpeed Insights এবং Pingdom ওয়েবসাইট স্পিড টেস্ট ব্যবহার করে এটি করতে পারেন।
অটোপটিমাইজ করুন
ওয়ার্ডপ্রেস ব্যবহারকারীদের জন্য উপলব্ধ সবচেয়ে কার্যকর অপ্টিমাইজেশন প্লাগইনগুলির মধ্যে একটি অটোঅপ্টিমাইজ। এটি জাভাস্ক্রিপ্ট এবং সিএসএসের জন্য এইচটিএমএল এবং ফাইল সংমিশ্রণ এবং মিনিফিকেশনের জন্য মিনিফিকেশন সমর্থন করে। রেন্ডার-ব্লকিং রোধ করতে জাভাস্ক্রিপ্ট ফাইলগুলিকে একত্রিত করার পরিবর্তে স্থগিত করা যেতে পারে এবং Google ফন্টগুলির জন্যও অপ্টিমাইজেশন বিকল্প রয়েছে৷
আমি অনেক ওয়ার্ডপ্রেস ওয়েবসাইটে অটোঅপ্টিমাইজ ব্যবহার করেছি কারণ এটি সবসময় পৃষ্ঠা লোড করার সময়কে উন্নত করে।
অ্যাসেট ক্লিনআপ
অ্যাসেট ক্লিনআপ হল একটি উচ্চ-কনফিগারযোগ্য অপ্টিমাইজেশান ওয়ার্ডপ্রেস প্লাগইন যা জাভাস্ক্রিপ্ট এবং সিএসএসের মিনিফিকেশন, সংমিশ্রণ এবং স্থগিতকরণকে সমর্থন করে। এটি আপনাকে এইচটিএমএল পরিষ্কার করতে দেয় এবং ফন্টগুলি পরিচালনা করার জন্য এবং পৃষ্ঠা লোড হওয়ার সময়গুলিতে তাদের প্রভাব হ্রাস করার জন্য অনেক সরঞ্জাম সরবরাহ করে৷
অ্যাসেট ক্লিনআপের একটি বৈশিষ্ট্য যা দাঁড়িয়েছে তা হল জাভাস্ক্রিপ্ট এবং সিএসএস ম্যানেজার। এটি আপনাকে নির্দিষ্ট করতে দেয় যে আপনার ওয়েবসাইট জুড়ে জাভাস্ক্রিপ্ট এবং CSS ফাইলগুলি কোন পৃষ্ঠাগুলিতে লোড করা হয়েছে৷
WP সুপার মিনিফাই
WP সুপার মিনিফাই আপনাকে জাভাস্ক্রিপ্ট কম্প্রেস এবং CSS কম্প্রেস করার বিকল্প দিয়ে একটু ভিন্নভাবে কাজ করে। নির্বাচিত হলে, WP সুপার মিনিফাই আপনার ফাইলগুলিকে একত্রিত করবে, ছোট করবে এবং ক্যাশে করবে৷
৷আপনি যদি একটি সহজ অপ্টিমাইজেশান সমাধান খুঁজছেন যা ঠিক কাজ করে, এটি আপনার জন্য প্লাগইন হতে পারে৷
একটি ওয়ার্ডপ্রেস ক্যাশে প্লাগইন ব্যবহার করে বহিরাগত জাভাস্ক্রিপ্ট ফাইল একত্রিত করা
সেরা ওয়ার্ডপ্রেস ক্যাশিং প্লাগইনগুলিতে আপনাকে ওয়েবসাইটের কর্মক্ষমতা উন্নত করতে সাহায্য করার জন্য অনেকগুলি অতিরিক্ত অপ্টিমাইজেশান টুল রয়েছে। তাই আপনার বিদ্যমান ওয়ার্ডপ্রেস ক্যাশিং সলিউশন আপনাকে বাহ্যিক জাভাস্ক্রিপ্ট এবং CSS ফাইলগুলিকে একত্রিত করার অনুমতি দেয় এমন একটি উচ্চ সম্ভাবনা রয়েছে৷
WP রকেটে, উদাহরণস্বরূপ, জাভাস্ক্রিপ্ট এবং CSS ফাইলগুলিকে ছোট করার এবং একত্রিত করার বিকল্প রয়েছে। রেন্ডার-ব্লকিং প্রতিরোধ করতে জাভাস্ক্রিপ্ট ফাইলগুলিও পিছিয়ে দেওয়া যেতে পারে৷
আমার সুপারিশ হল আপনার পছন্দের ওয়ার্ডপ্রেস ক্যাশিং প্লাগইন ব্যবহার করে ফাইল কম্বিনেশন ব্যবহার করে পৃষ্ঠা লোড করার সময় পরীক্ষা করা এবং তারপর ফলাফলগুলিকে স্বতন্ত্র জাভাস্ক্রিপ্ট অপ্টিমাইজেশান সমাধানগুলির সাথে তুলনা করা যেমন অটোঅপ্টিমাইজ এবং অ্যাসেট ক্লিনআপ৷
চূড়ান্ত চিন্তা
আমি আশা করি আপনি বাহ্যিক জাভাস্ক্রিপ্ট ফাইলগুলিকে একত্রিত করার জন্য এই চেহারাটি উপভোগ করেছেন। আপনি যেমন দেখেছেন, আপনার ওয়েব হোস্ট যদি HTTP/2 সমর্থন করে তাহলে ফাইলগুলি সমান্তরালভাবে ডাউনলোড করা আরও কার্যকর হলে জাভাস্ক্রিপ্ট ফাইলগুলিকে একত্রিত করার আর প্রয়োজন নেই৷
যদি আপনার ওয়েব হোস্ট শুধুমাত্র HTTP/1.1-এর জন্য সমর্থন দেয়, তাহলে আপনি পৃষ্ঠা লোড করার সময় কমাতে ওয়ার্ডপ্রেসে বহিরাগত জাভাস্ক্রিপ্ট একত্রিত করতে পারেন।
প্রস্তাবিত পড়ুন:ওয়ার্ডপ্রেসে অব্যবহৃত CSS সরান
পড়ার জন্য ধন্যবাদ।
কেভিন
