নিবন্ধ ডিরেক্টরি
W3 Total Cache Minify-এর জন্য সঠিক এমবেডিং টাইপ বেছে নিতে হিমশিম খাচ্ছেন? এই আর্টিকেলে একজন ওয়েবমাস্টারের বাস্তব অভিজ্ঞতা তুলে ধরা হয়েছে এবং ওয়েবসাইটের স্টাইল সংক্রান্ত ভুল ও লোডিং ক্র্যাশ এড়িয়ে নির্ভুলভাবে সঠিক Minify এমবেডিং টাইপ নির্বাচন করার জন্য একটি ধাপে ধাপে নির্দেশিকা দেওয়া হয়েছে। এতে একটি নির্ভুল সেটআপ সমাধানও রয়েছে যা নতুনরাও সহজেই প্রয়োগ করতে পারবেন।ওয়ার্ডপ্রেস দুর্ঘটনা ছাড়াই গতি বাড়ান!
আমি একটি ওয়েবসাইট অপ্টিমাইজ করছিলাম এবং যখন W3 Total Cache-এর Minify সেটিংস খুললাম, আমি পুরোপুরি হতবাক হয়ে গেলাম। এমবেডেড টাইপের ড্রপডাউন মেনুতে চারটি অপশন ছিল: ডিফল্ট (ব্লক), নন-ব্লকিংয়ের জন্য JS ব্যবহার করুন, নন-ব্লকিংয়ের জন্য "অ্যাসিঙ্ক্রোনাস" ব্যবহার করুন, এবং নন-ব্লকিংয়ের জন্য "ডিলেইড" ব্যবহার করুন।
আমি এক মুহূর্ত ভাবলাম, এসব কী হচ্ছে?
বিশ্বাস করুন, আপনি একা নন। এই চারটি বিকল্প সম্ভবত একজন অনভিজ্ঞ ব্যক্তিকেও হতবাক করে দেবে, বছরের পর বছর ধরে ওয়ার্ডপ্রেস ব্যবহার করে আসা কাউকে তো বাদই দিন। এই নিবন্ধে আমি সরাসরি সেই সমস্যাগুলো তুলে ধরেছি যেগুলোর সম্মুখীন হয়েছি এবং যে শিক্ষাগুলো লাভ করেছি। আপনার ডকুমেন্টেশন দেখার কোনো প্রয়োজন নেই; শুধু আমার নির্দেশনাগুলো অনুসরণ করুন।
এই চার ধরনের এমবেডিং আসলে কী?
প্রথমে আলোচনা করা যাক এই চারটি বিকল্প কী ধরনের চরিত্র।
ডিফল্ট (ব্লক করা)একে ডিফল্ট ব্লকিং বলা হয়। এটি সবচেয়ে সহজ পদ্ধতি: ব্রাউজার কোনো স্ক্রিপ্টের সম্মুখীন হলে থেমে যায়, সেটিকে সম্পূর্ণভাবে ডাউনলোড ও এক্সিকিউট করে এবং তারপর পেজটি রেন্ডার করা চালিয়ে যায়। বেশ নির্ভরযোগ্য মনে হচ্ছে, তাই না? কিন্তু এর অসুবিধা হলো, আপনার পেজের প্রাথমিক লোড আটকে যাবে; ব্যবহারকারীদের কিছু দেখার আগে স্ক্রিপ্টটির রান শেষ হওয়া পর্যন্ত অপেক্ষা করতে হবে।
নন-ব্লকিংয়ের জন্য JS ব্যবহার করাএটা বেশ আকর্ষণীয়। পেজে সরাসরি `<script>` ট্যাগ লেখার পরিবর্তে, এটি প্রথমে একটি ছোট স্ক্রিপ্ট আউটপুট করে এবং তারপর পেজটি চালু হওয়ার পর জাভাস্ক্রিপ্টের মাধ্যমে লোড করার জন্য প্রয়োজনীয় স্ক্রিপ্টগুলোকে ডাইনামিকভাবে ইনজেক্ট করে। এভাবে, পেজটি প্রথমে রেন্ডার করা যায় এবং স্ক্রিপ্টগুলো ক্রমান্বয়ে লোড হতে পারে। শুনতে দারুণ লাগছে, তাই না? তবে, সমস্যা হলো এই ডাইনামিক ইনজেকশন প্রক্রিয়াটি স্ক্রিপ্টগুলোর মূল এক্সিকিউশন অর্ডারকে ব্যাহত করতে পারে। যদি আপনার পেজের কিছু স্ক্রিপ্ট এক্সিকিউশন অর্ডারের উপর ব্যাপকভাবে নির্ভরশীল হয়, তাহলে সমস্যা দেখা দিতে পারে।
নন-ব্লকিংয়ের জন্য 'asynchronous' ব্যবহার করুন।এর জন্য `<script>` ট্যাগে `async` অ্যাট্রিবিউটটি যোগ করতে হয়। স্ক্রিপ্টটি ব্যাকগ্রাউন্ডে অ্যাসিঙ্ক্রোনাসভাবে ডাউনলোড হবে এবং ডাউনলোড শেষ হওয়ার সাথে সাথেই এক্সিকিউট হবে, যার জন্য পেজটিকে অপেক্ষা করতে হবে না। তবে, এর অসুবিধা হলো এক্সিকিউশনের ক্রম সম্পূর্ণভাবে অনিয়ন্ত্রণযোগ্য; কোডে আপনি যে ক্রমই নির্দিষ্ট করুন না কেন, যে স্ক্রিপ্টটির ডাউনলোড আগে শেষ হবে, সেটিই প্রথমে এক্সিকিউট হবে।
নন-ব্লকিংয়ের জন্য 'ডিলে' ব্যবহার করা`defer` অ্যাট্রিবিউট যোগ করার অর্থ এটাই। স্ক্রিপ্টটি কার্যকর হওয়ার আগে পুরো পৃষ্ঠাটি পার্স হওয়া পর্যন্ত অপেক্ষা করবে এবং গুরুত্বপূর্ণভাবে, এটি আপনার লেখা মূল ক্রমটি বজায় রাখবে। এটি বেশ ব্যবহারকারী-বান্ধব, কারণ এটি প্রথম স্ক্রিনটিকে ব্লক করে না বা ক্রমটিকেও ব্যাহত করে না।
আমি কোনটা বেছে নেব?
সহজ কথায় বলতে গেলে, এই চারটি বিকল্প একটি বহুনির্বাচনী প্রশ্নের মতো:আপনি কি দ্রুততা চান নাকি শৃঙ্খলা?
আমার পরামর্শটি নিম্নরূপ:
যদি আপনার ওয়েবসাইটটি ছোট হয়, এতে স্ক্রিপ্ট কম থাকে এবং লোডিং স্পিড নিয়ে আপনার খুব বেশি চাহিদা না থাকে, তাহলে ডিফল্ট (ব্লক করা) সেটিং ব্যবহার করাই সবচেয়ে সহজ বিকল্প। যদিও এটি কিছুটা ধীরগতির, তবে এতে কোনো সমস্যা হবে না।
আপনি যদি প্রথম স্ক্রিনে আসার গতি উন্নত করতে চান এবং আপনার স্ক্রিপ্টগুলোর মধ্যে "A অবশ্যই B-এর আগে চলতে হবে"-এর মতো কোনো দৃঢ় নির্ভরশীলতা না থাকে, তাহলে অগ্রাধিকার দিন...নন-ব্লকিংয়ের জন্য 'ডিলে' ব্যবহার করা(স্থগিত করা)। বর্তমানে এটিই প্রায় সবচেয়ে আদর্শ সমাধান, কারণ এটি রেন্ডারিংকেও বাধা দেয় না এবং ক্রমকেও ব্যাহত করে না।
যদি আপনি স্থগিত করার চেষ্টা করার পরেও দেখেন যে কিছু ফাংশনে সমস্যা হচ্ছে, তাহলে বিবেচনা করুন...নন-ব্লকিংয়ের জন্য JS ব্যবহার করাএই সমাধানটি আরও আমূল পরিবর্তনকারী, কিন্তু এর সামঞ্জস্যতা কিছুটা খারাপ।
নন-ব্লকিংয়ের জন্য 'asynchronous' ব্যবহার করুন।(async) বিকল্পটি আমি সবচেয়ে কম সুপারিশ করি। কারণ এতে এক্সিকিউশনের ক্রম পুরোপুরি এলোমেলো হয়ে যায়, ফলে প্রোগ্রাম ক্র্যাশ করার সম্ভাবনা থাকে, যদি না আপনি এ ব্যাপারে সম্পূর্ণ নিশ্চিত হন যে আপনার স্ক্রিপ্টগুলো সব স্বাধীনভাবে চলছে।
আমি দুটি বড় ফাঁদে পড়েছিলাম
কথার কোনো মূল্য নেই। আমি আমার করা দুটো ভুল লিখে রেখেছি; আপনি নিজের অভিজ্ঞতার সাথে মিলিয়ে দেখতে পারেন যে সেগুলো এড়ানো সম্ভব কি না।
প্রথম অসুবিধা: কাস্টম ওয়ার্ডপ্রেস থিম রিয়েল টাইমে প্রিভিউ করা যায় না।
কিছুদিন ধরে, থিম কাস্টমাইজ করার সময় সেভ করার পর প্রিভিউটি রিফ্রেশ হচ্ছিল না। আমি কিছু পরিবর্তন করে পেজটা রিফ্রেশ করলেও, ফলাফল একই থাকতো।
কিছু অনুসন্ধানের পর আমি জানতে পারলাম যে, মিনিফাই-এর কম্প্রেশন ফাংশনটিই ছিল এর জন্য দায়ী। সমাধানটি খুবই সহজ:
W3 টোটাল ক্যাশ প্লাগইন অ্যাক্সেস করুনসাধারণ সেটিংসহাজির"সংকোচন"ওই অপশনটি আনচেক করুন। তারপর উপরের ডান কোণায় "সেটিংস সংরক্ষণ করুন"-এর নিচে থাকা ছোট তীরচিহ্নটিতে ক্লিক করুন এবং "..." নির্বাচন করুন।সেটিংস সংরক্ষণ করুন এবং ক্যাশে পরিষ্কার করুনএই ধাপটি অত্যন্ত গুরুত্বপূর্ণ; যদি আপনি ক্যাশে পরিষ্কার না করেন, তাহলে আপনি পুরানো সংস্করণটিই দেখতে পাবেন।
আপনার কাজ শেষ হলে, থিম কাস্টমাইজেশনে ফিরে যান, এবং লাইভ প্রিভিউ স্বাভাবিক অবস্থায় ফিরে আসবে।
দ্বিতীয় সমস্যা: অ্যাস্ট্রা থিমের সার্চ বক্সে ক্লিক করলে কোনো সাড়া পাওয়া যায় না।
আমি বেশ কিছুদিন আগে এই সমস্যার সম্মুখীন হয়েছিলাম। আমি অ্যাস্ট্রা থিম ব্যবহার করছিলাম, এবং একদিন হঠাৎ দেখলাম যে সার্চ বক্সটি কোনোভাবেই কাজ করছে না। প্রথমে আমি ভেবেছিলাম এটি থিমটিরই কোনো সমস্যা, কিন্তু পরে জানতে পারলাম যে এর কারণ ছিল W3TC-এর মিনিফাই সেটিংস।
সমাধানটি নিম্নরূপ:
W3 Total Cache → General Settings → Advanced Compression Settings → JS → Minify Engine Settings → Locale Settings-এ যান এবং এমবেডিং টাইপটি এই দুটির মধ্যে একটিতে পরিবর্তন করুন:
- পূর্বে, জাভাস্ক্রিপ্ট ব্যবহার করে নন-ব্লকিং অর্জন করা হতো।
- এরপরে, নন-ব্লকিংয়ের জন্য JS ব্যবহার করুন।
একইভাবে, ক্যাশে ক্লিয়ার করে পেজটি রিফ্রেশ করলে সার্চ বক্সটি সঠিকভাবে কাজ করবে।
অন্যান্য বিকল্পের পরিবর্তে কেন এই দুটি বেছে নেওয়া হয়েছিল, সে বিষয়ে আমি কিছু গবেষণা করেছি। সহজ কথায়, অ্যাস্ট্রা থিমের ফ্রন্ট-এন্ড কম্পোনেন্টগুলো স্ক্রিপ্ট এক্সিকিউশনের সময়ের প্রতি বেশ সংবেদনশীল, এবং কিছু নির্দিষ্ট নন-ব্লকিং পদ্ধতির কারণে ইভেন্ট বাইন্ডিং ব্যর্থ হতে পারে। 'নন-ব্লকিং উইথ জেএস' মোড ব্যবহার করলে এটি নিশ্চিত হয় যে, পেজ লোড হওয়া শেষ হওয়ার পরেই স্ক্রিপ্টটি এক্সিকিউট হবে, এবং এর মাধ্যমে অ্যাসিঙ্ক (async) ব্যবহারের ফলে দেখা যাওয়া বিশৃঙ্খল এক্সিকিউশন এড়ানো যায়।
ঘুরে দেখার জায়গার তালিকা
অবশেষে, এখানে একটি চেকলিস্ট দেওয়া হলো যা আপনি সরাসরি অনুসরণ করতে পারেন:
প্রথম ধাপ হলো আপনার লক্ষ্য স্পষ্ট করা। আপনি কি দ্রুততম সময়ে পৃষ্ঠা লোড হওয়া চান, নাকি স্থিতিশীলতা এবং ত্রুটিমুক্ত কার্যক্রমকে অগ্রাধিকার দেন? এর ওপর ভিত্তি করেই নির্ধারিত হবে আপনার কোন ধরনের এমবেডিং ব্যবহার করা উচিত।
দ্বিতীয় ধাপটি হলো একবারে সবকিছু পরিবর্তন না করা। প্রথমে, পরীক্ষা করার জন্য একটি কম গুরুত্বপূর্ণ পৃষ্ঠা খুঁজে বের করুন, এক বা দুই দিন পর্যবেক্ষণ করুন এবং কোনো সমস্যা নেই বলে নিশ্চিত হলেই কেবল পুরো সাইটে এটি প্রয়োগ করুন।
তৃতীয়ত, প্রতিটি পরিবর্তনের পর সর্বদা ক্যাশে পরিষ্কার করুন। W3TC-এর ক্যাশিং ব্যবস্থা আপনাকে সর্বশেষ পরিবর্তনগুলো দেখতে বাধা দেবে, তাই 'ক্যাশে পরিষ্কার করে আবার পরীক্ষা করুন' ধাপটি অত্যন্ত জরুরি।
চতুর্থত, আগের ও পরের লোডিং স্পিড তুলনা করার জন্য আপনার ব্রাউজারের ডেভেলপার টুলস অথবা PageSpeed Insights-এর মতো টুল ব্যবহার করুন। শুধু আপনার অনুমানের উপর নির্ভর না করে, ডেটাকেই কথা বলতে দিন।
শেষে লিখুন
সত্যি বলতে, আমি যখন প্রথম এই এমবেডেড টাইপ সেটিংটি দেখলাম, তখন বেশ কিছুক্ষণ হতবাক হয়ে ছিলাম। ডিফল্ট ব্লকিং মোডটি খুব ধীরগতির মনে হচ্ছিল, অন্যদিকে অ্যাসিঙ্ক্রোনাস মোড ক্রমের নিশ্চয়তা দিচ্ছিল না, এবং ডিফারিং করলে সামঞ্জস্যের সমস্যা হতে পারত। কোন বিকল্পটি বেছে নেব, তা নিয়ে আমি দ্বিধায় ছিলাম।
কিন্তু পরে আমি বুঝতে পারলাম যে এটা একটা আপস। আপনি একই সাথে সবচেয়ে দ্রুত এবং সবচেয়ে স্থিতিশীল—দুটোই পেতে পারেন না; আপনাকে সবসময় যেকোনো একটিকে বিসর্জন দিতে হয়। আমার অভিজ্ঞতা হলো, প্রথমে ডিফার (defer) ব্যবহার করা, যা বর্তমানে সবচেয়ে নিরাপদ নন-ব্লকিং সমাধান, এবং তারপর কোনো সমস্যা দেখা দিলে একটি কলব্যাক (callback) ব্যবহার করা।
আপনি যদি একই ধরনের সমস্যার সম্মুখীন হন, অথবা আমার পদ্ধতি অনুসরণ করার পরেও আপনার অন্য কোনো সমস্যা থেকে যায়, তাহলে নির্দ্বিধায় আলোচনা করুন। ওয়েবসাইট তৈরি মানেই হলো ভুল করতে করতে শেখা; এর ব্যতিক্রম কেউ নয়।
আমার লেখাটি পড়ার জন্য ধন্যবাদ। আবার দেখা হবে।
হোপ চেন উইলিয়াং ব্লগ ( https://www.chenweiliang.com/ আমার শেয়ার করা "W3 Total Cache Minify Plugin Settings: How to Choose the Embedding Type? My Pitfalls and Lifesaving Tips" আর্টিকেলটি আপনার জন্য সহায়ক হতে পারে।
এই নিবন্ধটির লিঙ্ক শেয়ার করতে স্বাগতম:https://www.chenweiliang.com/cwl-34003.html