কম্পিউটার টিউটোরিয়াল

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান

দ্রুত লোড হওয়া ওয়ার্ডপ্রেস সাইট দর্শকদের ব্যবহারকারীর অভিজ্ঞতা উন্নত করতে, সার্চ ইঞ্জিনে ওয়েবসাইটের দৃশ্যমানতা বাড়াতে এবং সাইটের জৈব ট্রাফিক বৃদ্ধি করতে গুরুত্বপূর্ণ ভূমিকা পালন করে।

একটি ওয়েব পেজে HTML, CSS, জাভাস্ক্রিপ্ট এবং ছবি থাকে এবং পেজ লোডের সময় কমাতে এগুলো সবাই অপ্টিমাইজ করা জরুরি। ছবিগুলো পেজের আকারে সবচেয়ে বেশি প্রভাব ফেলে তাই ওয়ার্ডপ্রেস ছবি অপ্টিমাইজেশন প্লাগইন ব্যবহার করে ছবির ফাইল সাইজ কমাতে হয়।

কোডের ধরনব্যবহার
HTMLপেজের কন্টেন্ট ও কাঠামোর জন্য ব্যবহৃত হয়
CSSফন্ট, রঙ, স্পেসিং এবং অন্যান্য স্টাইলিং-এর জন্য ব্যবহৃত হয়
জাভাস্ক্রিপ্টবাটন, ফর্ম, ভিডিও, স্লাইডার এবং আরও অনেক কিছুর জন্য ব্যবহৃত হয়
ওয়েব পেজের মৌলিক উপাদান।

পেজের পারফরম্যান্স আরও উন্নত করতে আপনি ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট পারসিং ডিফার করতে পারেন, অর্থাৎ ব্রাউজারকে জানাতে পারেন যে জাভাস্ক্রিপ্ট লোড করার আগে পেজের কন্টেন্ট এবং ছবি লোড করুক। এই পদক্ষেপ নিলে জাভাস্ক্রিপ্ট এলিমেন্ট যেমন ফর্ম ও স্লাইডার লোড হতে কিছু সেকেন্ড বেশি সময় নিতে পারে, কিন্তু পেজ লোডিং টাইম উল্লেখযোগ্যভাবে উন্নত হয় তাই এটি একটি ছোট মূল্য।

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
১৯৯০-এর দশকে ওয়েবসাইট কেবল স্ট্যাটিক তথ্য যেমন টেক্সট এবং ছবি প্রদর্শন করত। ১৯৯৫ সালে নেটস্কেপের জনপ্রিয় ব্রাউজার নেটস্কেপ নেভিগেটর একটি নতুন স্ক্রিপ্টিং ভাষা যাভাস্ক্রিপ্টের জন্য সাপোর্ট যোগ করলে সবকিছু পরিবর্তন হয়।

জাভাস্ক্রিপ্ট কোড দুটি টেকনিক ব্যবহার করে পরবর্তীতে এক্সিকিউট করা যায়: ডিফার (Defer) এবং অ্যাসিঙ্ক (Async)। জনপ্রিয় ওয়ার্ডপ্রেস ক্যাশিং প্লাগইন দুটি মেথডই সাপোর্ট করে, যদিও ডেডিকেটেড সমাধান আপনাকে আরও বেশি নিয়ন্ত্রণ দেবে যে কোন জাভাস্ক্রিপ্ট ফাইল পরবর্তীতে লোড হবে।

এই আর্টিকেলে আমি ব্যাখ্যা করব কেন জাভাস্ক্রিপ্ট ফাইল ডিফার লোড করার ফায়দা আছে এবং আপনার জন্য প্রক্রিয়াটি সহজ করতে পাঁচটি উপযোগী ওয়ার্ডপ্রেস প্লাগইন দেখাব।

আপনাকে পুরো আর্টিকেল পড়তে উৎসাহিত করছি যাতে বিষয়টি সম্পূর্ণভাবে বুঝতে পারেন, কিন্তু আপনি যদি নতুন হন তবে এই আর্টিকেল থেকে একটি জিনিস মনে রাখুন: ডিফার (Defer) এবং অ্যাসিঙ্ক (Async) আপনার ওয়েবসাইটের পেজ লোডিং টাইম উল্লেখযোগ্যভাবে উন্নত করতে পারে।

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট পারসিং ডিফার করার বিভিন্ন উপায় (ডিফার ও অ্যাসিঙ্ক সহ)

জাভাস্ক্রিপ্ট নিজেকে ওয়ার্ডপ্রেস ওয়েবসাইটের একটি গুরুত্বপূর্ণ bouw block হিসেবে প্রতিষ্ঠিত করেছে, যা বাটন, ফর্ম, মিডিয়া গ্যালারি, অডিও, ভিডিও, কাউন্টডাউন টাইমার, সোশ্যাল মিডিয়া টাইমলাইন এবং আরও অনেক কিছু প্রদর্শনে ব্যবহৃত হয়।

দুর্ভাগ্যবশত, জাভাস্ক্রিপ্ট ওয়েব পেজ ধীরে লোড হওয়ার একটি প্রধান কারণও, কারণ ব্রাউজারকে HTML মার্কআপ পার্স চালিয়ে যেতে পারার আগে প্রতিটি স্ক্রিপ্ট ডাউনলোড এবং এক্সিকিউট করতে বাধ্য হতে হয়।

পারসিং হলো ব্রাউজার পেজের কোড বিশ্লেষণ করে এবং এক্সিকিউট করার যোগ্য ফরম্যাটে রূপান্তর করার প্রক্রিয়া। যে কোনো কোড এই প্রক্রিয়াকে বাধা দেয় তাকে "রেন্ডার-ব্লকিং" বলা হয় কারণ এটি দর্শকদের জন্য পেজ রেন্ডার করার প্রক্রিয়াকে বিলম্বিত করে।

রেন্ডার-ব্লকিং রিসোর্স ওয়ার্ডপ্রেস ওয়েবসাইট ধীরে লোড হওয়ার একটি সাধারণ কারণ। ক্রিটিক্যাল CSS ইনলাইন প্রদর্শন করে রেন্ডার-ব্লকিং রোধ করা যায়, কিন্তু জাভাস্ক্রিপ্ট কোড পেজ রেন্ডারিং ব্লক না করে তার জন্য ডিফার (Defer) বা অ্যাসিঙ্ক (Async) ব্যবহার করে জাভাস্ক্রিপ্ট লোডিং পরে করা ভালো।

অনাবশ্য জাভাস্ক্রিপ্ট কোড সরিয়ে দেওয়া এবং জাভাস্ক্রিপ্ট এক্সিকিউশন টাইম কমানোও ভালো অভ্যাস। এর একটি উপায় হলো বড় জাভাস্ক্রিপ্ট ফাইলগুলোর আকার মিনিফিকেশন (Minification) প্রক্রিয়া দিয়ে কমানো, যা প্রতিটি জাভাস্ক্রিপ্ট ফাইল থেকে হোয়াইটস্পেস এবং অনাবশ্য কোড সরিয়ে দেয়।

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
ওয়েবসাইটে বাটন, ফর্ম, স্লাইডার এবং আরও অনেক কিছু প্রদর্শনে জাভাস্ক্রিপ্ট ব্যবহৃত হয়।

গুগল পেজস্পিড ইনসাইটস (Google PageSpeed Insights) এবং জিটমেট্রিক্স (GTmetrix) এর মতো ওয়েবসাইট বেঞ্চমার্কিং সার্ভিস যে সবচেয়ে গুরুত্বপূর্ণ মেট্রিক বিবেচনা করে সেটি হলো ফার্স্ট কন্টেন্টফুল পেইন্ট (First Contentful Paint), অর্থাৎ দর্শকদের কাছে প্রথম কন্টেন্ট প্রদর্শন হওয়ার সময়। গুগল অনুযায়ী ০ থেকে ১.৮ সেকেন্ড FCP টাইম ভালো, ১.৮ থেকে ৩ সেকেন্ড মাঝপথের এবং ৩ সেকেন্ডের উপরে ধীর বলে মনে করা হয়।

আপনার করতে হবে শুধু একটি পেজের URL বেঞ্চমার্কিং সার্ভিসে দিন, সেটি আপনাকে দেখাবে কোন জাভাস্ক্রিপ্ট এবং CSS ফাইল পেজের রেন্ডার ব্লক করছে। নিচের স্ক্রিনশটে দেখুন, রেন্ডার-ব্লকিং CSS এবং জাভাস্ক্রিপ্ট ফাইল ডাউনলোড হতে সেকেন্ডখানা সময় নিতে পারে, তাই আপনি যদি এই রিসোর্সগুলো দূর করতে পারেন, আপনার পেজগুলো উল্লেখযোগ্যভাবে দ্রুত লোড হবে।

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
আপনার পেজগুলো বিশ্লেষণ করুন যে কোন জাভাস্ক্রিপ্ট এবং CSS ফাইল রেন্ডারিং ব্লক করছে।

রেন্ডার-ব্লকিং জাভাস্ক্রিপ্ট ফাইল দূর করার সবচেয়ে কার্যকর উপায় হলো defer এবং async অ্যাট্রিবিউট ব্যবহার করা। এই বুলিয়ান অ্যাট্রিবিউটগুলো শুধুমাত্র HTML script এলিমেন্টের সাথে ব্যবহার করা যায় যখন SRC অ্যাট্রিবিউট এক্সটার্নাল ফাইল কল করতে ব্যবহৃত হয়।

<script src="javascript.js"></script>

জাভাস্ক্রিপ্ট ফাইল

<script defer src="javascript.js"></script>

ডিফার (Defer) সহ জাভাস্ক্রিপ্ট ফাইল

<script async src="javascript.js"></script>

অ্যাসিঙ্ক (Async) সহ জাভাস্ক্রিপ্ট ফাইল

যখন আপনি HTML script এলিমেন্টে defer বা async অ্যাট্রিবিউট যোগ করেন, আপনি ব্রাউজারকে পরামর্শ দিচ্ছেন যে পেজ পার্স হওয়ার সময় ফাইলটি ডাউনলোড করুক। defer-এর ক্ষেত্রে, পেজ সম্পূর্ণ পার্স হলে ফাইলটি এক্সিকিউট হয়।

বিপরীতে, async অ্যাট্রিবিউট একটি অ্যাসিঙ্ক্রোনাস অপারেশন যা ফাইল ডাউনলোড होते ही এক্সিকিউট করে। ফলে, async দিয়ে পেজ পার্স করার মোট সময় কিছুটা বেশি হয় কারণ ব্রাউজার HTML পার্স করা সাময়িকভাবে বন্ধ করে ফাইলটি এক্সিকিউট করে।

আপনি যদি defer এবং async উভয়ই নির্দিষ্ট করেন, ব্রাউজার async ব্যবহার করবে।

DeferAsync
পেজ পার্স হওয়ার সময় ফাইল ডাউনলোড করুনপেজ পার্স হওয়ার সময় ফাইল ডাউনলোড করুন
পেজ পার্সিং শেষ হলে ফাইল এক্সিকিউট করুনফাইল উপলব্ধ होतेই এক্সিকিউট করুন
ফাইলগুলো ক্রমিকভাবে এক্সিকিউট হয়ফাইল এক্সিকিউট করার জন্য HTML পার্সিং বিরত রাখুন
Defer এবং Async-এর পার্থক্য।

একটি গুরুত্বপূর্ণ স্ট্যান্ডার্ড বুঝতে হবে ডকুমেন্ট অবজেক্ট মডেল (Document Object Model), যা প্রায়শই DOM বলা হয়। DOM একটি সম্পূর্ণ ডকুমেন্ট, যেমন XML ফাইল বা HTML পেজ,কে একটি একক অবজেক্ট হিসেবে উপস্থাপন করে। head, body এবং হেডার seperti গুরুত্বপূর্ণ এলিমেন্টগুলো DOM-এর শাখা হিসেবে বিবেচনা করা যেতে পারে।

যদি একটি জাভাস্ক্রিপ্ট ফাইল অন্য কোনো ফাইল বা DOM থেকে ইনফরমেশন নেয় না, তবে অ্যাসিঙ্ক মেথড ব্যবহার করা উপযুক্ত হতে পারে কারণ আপনার পেজের গুরুত্বপূর্ণ এলিমেন্টগুলো দ্রুত প্রদর্শিত হবে। बस জান রাখুন যে async আপনার ওয়েবসাইটে এরর করতে পারে যদি ফাইলটি এমন ইনফরমেশন চায় যা এখনো লোড হয়নি।

যদি একটি জাভাস্ক্রিপ্ট ফাইল ইনফরমেশন প্রয়োজন হয়, তবে defer পছন্দের অপশন কারণ এটি নিশ্চিত করে যে সব কন্টেন্ট সঠিকভাবে রিট্রিভ হয়েছে তারপর ফাইলটি এক্সিকিউট হবে।

defer এবং async-এর লক্ষ্য হলো পেজ রেন্ডারিং ব্লকিং কমানো এবং আপনি যেকোনো মেথড ব্যবহার করুন, পেজ লোডিং টাইমে বড় উন্নতি দেখবেন।

আমি জেল লিউ (Zell Liew) এর আর্টিকেল "How and when to use Async and Defer attributes" পড়তে পরামর্শ দিচ্ছি defer এবং async কখন ব্যবহার করতে হবে তার আরও বিস্তারিত ব্যাখ্যা পাওয়ার জন্য।

ওয়ার্ডপ্রেস প্লাগইন ব্যবহার করে জাভাস্ক্রিপ্ট পারসিং ডিফার করার উপায়

আপনার ওয়েবসাইটের অধিকাংশ জাভাস্ক্রিপ্ট কল আপনার ওয়ার্ডপ্রেস থিম এবং এক্টিভেট করা প্লাগইন থেকে আসে, তাই ম্যানুয়ালি script এলিমেন্টে defer এবং async অ্যাট্রিবিউট যোগ করা অলоги칼।

পারফরম্যান্স ওয়ার্ডপ্রেস প্লাগইন ব্যবহার করে ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট পারসিং ডিফার করা এবং আপনার সারাসরি ওয়ার্ডপ্রেস সাইটে defer বা async প্রয়োগ করার প্রক্রিয়া সহজ করা ভালো।

ভুল কনফিগারেশন সেটিং আপনার ওয়েবসাইট ডিজাইন ভাঙতে পারে তার কথা মনে রাখুন। উদাহরণস্বরূপ, কন্ট্যাক্ট ফর্ম সঠিকভাবে প্রদর্শিত নাও হতে পারে যদি আপনি সঠিক কনফিগারেশন সেটিং না বেছে নেন বা কন্ট্যাক্ট ফর্মের ফাইলগুলো অপ্টিমাইজেশন থেকে বাদ দেন।

তাই আপনার ওয়েবসাইটের জন্য সঠিক কনফিগারেশন সেটিং এবং সেরা পারফরম্যান্স পেতে ট্রায়াল অ্যান্ড এরর (trial and error) প্রয়োজন।

  • ওয়েবসাইট ব্যাকআপ – অপ্টিমাইজেশন ওয়ার্ডপ্রেস প্লাগইন এক্টিভেট করার আগে আপনার ওয়েবসাইট ব্যাকআপ নিন
  • পারফরম্যান্স টেস্ট – আপনার ওয়েবসাইটের মূল পেজগুলোর পারফরম্যান্স টেস্ট করুন এবং প্রতিবার অপ্টিমাইজেশন কনফিগারেশন সেটিং পরিবর্তন করলে
  • ওয়েবসাইট রিভিউ – কনফিগারেশন পরিবর্তনের পর আপনার ওয়েবসাইটের কোনো অংশ ভাঙা আছে কিনা চেক করুন

যদি জাভাস্ক্রিপ্ট পারসিং ডিফার করার সময় কোনো বড় সমস্যায় পড়েন, প্লাগইনের ডিফল্ট সেটিংসে ফিরে যান। প্লাগইনটি আনইনস্টলও করা যাবে যদি এটি আপনার ওয়েবসাইটের সাথে সামঞ্জস্যপূর্ণভাবে কাজ না করে।

১. Autoptimize

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
Autoptimize ১ মিলিয়নেরও বেশি ওয়ার্ডপ্রেস ওয়েবসাইটে এক্টিভ।

Autoptimize একটি বহুমুখী ওয়ার্ডপ্রেস অপ্টিমাইজেশন সমাধান যা আপনাকে জাভাস্ক্রিপ্ট, CSS এবং HTML অ্যাগ্রিগেট এবং মিনিফাই করতে দেয়। অপ্টিমাইজড কন্টেন্ট ক্যাশ হয়ে পারফরম্যান্স উন্নত করে। এই ক্যাশ দ্রুত বড় হতে পারে, তাই আমি Autoclear Autoptimize Cache ব্যবহার করে অটোমেটিক্যালি ক্যাশ ক্লিয়ার করার পরামর্শ দিচ্ছি।

যদিও Autoptimize ফাইল অ্যাগ্রিগেশনের জন্য পরিচিত, এটি জাভাস্ক্রিপ্ট ফাইল পারসিং ডিফার করতেও ব্যবহার করা যায় যাতে সেগুলো রেন্ডার-ব্লকিং না হয়। জাভাস্ক্রিপ্ট এবং CSS কোড ইনলাইন প্রদর্শন করা যাবে এবং ছবি, গুগল ফন্ট, ইমোজি এবং আরও অনেক কিছুর জন্য অতিরিক্ত অপ্টিমাইজেশন অপশন রয়েছে।

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
Autoptimize ওয়ার্ডপ্রেস ক্যাশিং প্লাগইনসহ সাদৃশ্যে কাজ করে।

AUTOPTIMIZE ডাউনলোড করুন

২. Async JavaScript Plugin

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
Async JavaScript আপনাকে স্ক্রিপ্টের পুরো নিয়ন্ত্রণ দেয়।

Autoptimize-এর সৃষ্টিকর্তা দ্বারা বিকশিত, Async JavaScript আপনাকে আপনার পুরো ওয়েবসাইটে জাভাস্ক্রিপ্ট ফাইলগুলিতে async এবং defer প্রয়োগ করতে দেয়। এটি প্রতিটি জাভাস্ক্রিপ্ট ফাইলের ওপর পুরো নিয়ন্ত্রণ দেয়, jQuery, নির্দিষ্ট জাভাস্ক্রিপ্ট ফাইল, ওয়ার্ডপ্রেস প্লাগইন এবং থিম বাদ দেওয়া যায়। আপনি চাইলে নির্দিষ্ট করে বলতে পারেন কোন জাভাস্ক্রিপ্ট ফাইল async হবে এবং কোনটি defer।

Async JavaScript-এর সবচেয়ে কুল ফিচার হলো সেটআপ উইজার্ড যা আপনার ওয়েবসাইটের জন্য সম্ভাব্য সব কনফিগারেশন সেটিং-এ GTmetrix-এ পারফরম্যান্স টেস্ট চালায়। এটি সময় বাঁচায় কারণ ফলাফল দেখায় আপনার ওয়েবসাইট প্রতিটি কনফিগারেশনে কত দ্রুত হবে, কিন্তু প্রতিবার আপনার ওয়েবসাইট চেক করুন যাতে কোনো অংশ ভাঙা নেই।

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
Async JavaScript-এর উইজার্ড সেরা কনফিগারেশন সেটিং নির্ধারণে সাহায্য করে।

ASYNC JAVASCRIPT ডাউনলোড করুন

৩. Perfmatters

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
Perfmatters-এ অনেক উপযোগী পারফরম্যান্স টুল এবং ফিচার রয়েছে।

Perfmatters একটি প্রিমিয়াম ওয়ার্ডপ্রেস পারফরম্যান্স টুলবক্স যাতে দশকগুলি уника পারফরম্যান্স ফিচার রয়েছে। سالানা $24.95 থেকে শুরু করে, প্লাগইনটি আপনাকে আপনার ওয়েবসাইটের জাভাস্ক্রিপ্ট ফাইলগুলোর পারসিং ডিফার (সব JS ফাইল) করতে দেয়। jQuery ফাইলগুলো ডিফারেলে অন্তর্ভুক্ত করা যায় এবং আপনি নির্দিষ্ট জাভাস্ক্রিপ্ট ফাইল বাদ দিতে পারেন। আরেকটি কুল অপশন হলো জাভাস্ক্রিপ্ট ডিলে (Javascript Delay), যা শুধুমাত্র ব্যবহারকারীর ইন্টারঅ্যাকশন হলে জাভাস্ক্রিপ্ট ফাইল লোড করবে।

Perfmatters কোর ওয়ার্ডপ্রেস ফিচার ডিজেবল করতে পারে সিকিউরিটি এবং পারফরম্যান্স উন্নত করতে। এছাড়া কাস্টম লগইন URL ডিফাইন করা, কন্টেন্ট প্রीलোড করা, ইমেজ লেজি লোড করা, গুগল অ্যানালিটিক্স ইন্টিগ্রেট করা, গুগল ফন্ট অপ্টিমাইজ করা এবং আরও অনেক কিছু করা যায়।

আমার পছন্দের ফিচার হলো স্ক্রিপ্ট ম্যানেজার কারণ এটি আপনাকে আপনার ওয়েবসাইটের প্রতিটি পেজের জন্য জাভাস্ক্রিপ্ট এবং CSS ফাইল এনেবল এবং ডিজেবল করতে দেয়। এটি পেজের আকার 상당히 কমিয়ে দেয় কারণ ওয়ার্ডপ্রেস ডেভেলপারদের বुरी অভ্যাস থাকে পুরো ওয়েবসাইটে জাভাস্ক্রিপ্ট এবং CSS ফাইল লোড করার, এমনকি সেগুলো কেবল কিছু পেজে প্রয়োজন হলেও।

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
Perfmatters আপনাকে জাভাস্ক্রিপ্ট ফাইল ডিফার এবং ডিলে করতে দেয়।

অফিসিয়াল ওয়েবসাইট

৪. Asset CleanUp

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
Asset CleanUp পেজের আকার কমাতে অনেক টুল প্রদান করে।

Asset CleanUp একটি ফিচার-রিচ অপ্টিমাইজেশন ওয়ার্ডপ্রেস প্লাগইন যা আপনাকে জাভাস্ক্রিপ্ট এবং CSS ফাইল মিনিফাই, কম্বাইন এবং পারসিং ডিফার করতে দেয়। এর CSS এবং JS ম্যানেজার Perfmatters-এর স্ক্রিপ্ট ম্যানেজারের মতো কাজ করে, আপনাকে নির্দিষ্ট করতে দেয় কোন ফাইল কোন পেজে লোড হবে। আপনি কোর ওয়ার্ডপ্রেস সেটিং ডিজেবল করতে পারেন, HTML কোড ক্লিন আপ করতে পারেন, গুগল ফন্ট অপ্টিমাইজ করতে পারেন এবং আরও অনেক কিছু।

Asset CleanUp Pro-এর একটি লাইসেন্স سالানা €42.36। আপগ্রেড করলে আপনি কোড ইনলাইন রাখতে পারেন এবং পেজ অনুযায়ী জাভাস্ক্রিপ্ট ফাইলের জন্য async এবং defer নির্দিষ্ট করতে পারেন। এছাড়া প্লাগইন ম্যানেজার আনলক হয় এবং আপনার ওয়েবসাইট জুড়ে অ্যাসেট কীভাবে লোড হবে সেটির ওপর বেশি নিয়ন্ত্রণ পান।

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
প্রতিটি জাভাস্ক্রিপ্ট ফাইল আলাদাভাবে কনফিগার করা যায়।

ASSET CLEANUP ডাউনলোড করুন | ASSET CLEANUP PRO

৫. HTTP/2 Push Preload

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
HTTP/2 Push Preload-ও কন্টেন্ট প্রিলোড করতে পারে।

HTTP/2 Push Preload আপনাকে আপনার HTTP2 সাপোর্টেড সার্ভারে enqueue লোডিং ফাংশন ব্যবহার করে জাভাস্ক্রিপ্ট এবং CSS ফাইল পুশ এবং প্রিলোড করতে দেয়। এটি সব ফাইলে প্রয়োগ করা যাবে অথবা আপনি প্রতিটি রিসোর্স আলাদাভাবে কনফিগার করতে পারেন। রিসোর্স টাইপ অন্তর্ভুক্ত: script, style, audio, embed, fetch, font, image, object এবং video।

যখন আপনি একটি জাভাস্ক্রিপ্ট ফাইলের URL দিবেন, আপনি async, defer বা রিমুভ বেছে নিতে পারেন। HTTP/2 Push Preload আপনাকে নিয়ম ডিফাইন করতে দেয় কবে এই সেটিং প্রয়োগ হবে। আপনি সব পেজ, মোবাইল বা ডেস্কটপ, নির্দিষ্ট পোস্ট ও পেজ, ক্যাটাগরি, সার্চ পেজ, WooCommerce পেজ এবং আরও অনেক কিছুর জন্য জাভাস্ক্রিপ্ট নিয়ম ডিফাইন করতে পারেন।

ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট দক্ষতার সাথে ডিফার করুন: ডিফার ও অ্যাসিঙ্ক টেকনিকlerle গতি বাড়ান
নির্দিষ্ট জাভাস্ক্রিপ্ট ফাইল রিমুভ করা যাবে বা defer বা async সেট করা যাবে।

HTTP/2 PUSH PRELOAD ডাউনলোড করুন

শেষ কথা

জাভাস্ক্রিপ্ট ওয়েবসাইটে ডাইনামিক কন্টেন্ট এবং ইন্টারেক্টিভ এলিমেন্ট যোগ করার পছন্দের পদ্ধতি বनी हुई है। যেহেতু অনেক ওয়ার্ডপ্রেস থিম এবং প্লাগইন জাভাস্ক্রিপ্ট ব্যবহার করে, তাই ওয়ার্ডপ্রেসে জাভাস্ক্রিপ্ট পারসিং ডিফার করা এবং defer ও async ব্যবহার করা জরুরি যাতে পেজ দ্রুত রেন্ডার হয় এবং পেজ রেন্ডারিং ব্লকিং কমে।

অনেক ওয়ার্ডপ্রেস প্লাগইনে defer এবং async প্রয়োগ করার ফাংশনালিটি পাবেন, যদিও এই আর্টিকেলে উল্লেখ করা সমাধানগুলো আপনাকে আপনার জাভাস্ক্রিপ্ট ফাইলের ওপর আরও বেশি নিয়ন্ত্রণ দেয়।

আমার নিজের ওয়েবসাইটে, আমি ফাইল অ্যাগ্রিগেশনের জন্য Autoptimize এবং জাভাস্ক্রিপ্ট ডিফারেলের জন্য Async JavaScript ব্যবহার করি। Async JavaScript-এ আমি খুশি, যদিও HTTP/2 Push Preload অনেক ওয়েবসাইট অনার জন্য আরও ভালো অপশন হতে পারে কারণ এটি আপনাকে আরও ভালো নিয়ন্ত্রণ দেয় অপ্টিমাইজেশন সেটিং কোথায় প্রয়োগ হবে সেটা নিয়ে।

Asset CleanUp এবং Perfmatters একই ধরনের ফিচার এবং ফাংশনালিটি অফার করে তাই আমি তাদের একসাথে ব্যবহার করার পরামর্শ দিচ্ছি না। Asset CleanUp Pro নিঃসন্দেহে আরও ভালো নিয়ন্ত্রণ এবং অ্যাডভান্সড ফিচার অফার করে, যদিও আমি আমার নিজের ওয়েবসাইটে ওয়ার্ডপ্রেস ক্লিন আপের জন্য Perfmatters ব্যবহার করি কারণ এটি ব্যবহার করা সহজ। উভয় সমাধানই যেকোনো ওয়ার্ডপ্রেস অপ্টিমাইজেশন সেটআপকে উন্নত করবে, এমনকি আপনি যদি জাভাস্ক্রিপ্ট পারসিং ডিফার করার জন্য অন্য প্লাগইন ব্যবহার করেও থাকেন।

আমি আপনাকে এই সব ওয়ার্ডপ্রেস প্লাগইন টেস্ট করতে উৎসাহিত করছি জাভাস্ক্রিপ্ট পারসিং ডিফার করার জন্য এবং একাধিক টেস্ট পারফর্ম করুন যাতে আপনার সেরা কনফিগারেশন পান।

শুভকামনা।

কেভিন


  1. ওয়ার্ডপ্রেস ক্যাশিং কীভাবে আপনার সাইট দ্রুত করে: একটি প্রফেশনাল গাইড

  2. WordPress-এ রেন্ডার-ব্লকিং CSS এবং JavaScript দূর করুন দ্রুত পেজ লোডের জন্য

  3. WordPress-এ এক্সটার্নাল JavaScript মার্জ করার উপায়: সেরা অনুশীলন ও টিপস

  4. ওয়ার্ডপ্রেস থেকে JavaScript ম্যালওয়ার রিমুভ করার ব্যাপক গাইড