কীভাবে আপনার ওয়েবসাইটের এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্টকে মিনিফাই করবেন

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

সার্চ ইঞ্জিন অপটিমাইজেশনের জন্য এই লোডিং স্পিড খুব গুরুত্বপূর্ণ। অনেক ক্ষেত্রে লোডিং স্পিডের উপর আপনার সাইটের সার্চ ইঞ্জিন র‍্যাঙ্ক নির্ভর করে।
“মিনিফাই” শব্দটি প্রোগ্রামিং এর সাথে জড়িত। এর অর্থ হ’ল আপনার সাইটের কোড থেকে অপ্রয়োজনীয় অক্ষরগুলি অপসারণ করা। এই ক্যারেকটারগুলির মধ্যে ওয়াইটস্পেস, লাইন ব্রেক, কমেন্ট এবং ব্লক ডিলিমিটার অন্তর্ভুক্ত রয়েছে যা ভিজিটরের জন্য দরকারি কিন্তু মেশিনের জন্য নয়।
সিএসএস, এইচটিএমএল এবং জাভাস্ক্রিপ্ট কোডযুক্ত কোনও ওয়েবসাইটের ফাইলগুলি মিনিফাই করে রাখি যাতে আপনার ওয়েব ব্রাউজারটি কোডগুলি আরও দ্রুত পড়তে পারে।
সিএসএস মিনিফিকেশন কেমন লাগে তার একটি উদাহরণ এখানে।

মিনিফাই করার আগে সিএসএস কোড

 /* Layout helpers

 

----------------------------------*/

.ui-helper-hidden {

display: none;

}

.ui-helper-hidden-accessible {

border: 0;

clip: rect(0 0 0 0);

height: 1px;

margin: -1px;

overflow: hidden;

padding: 0;

position: absolute;

width: 1px;

}

মিনিফাই করার পর সিএসএস কোড

.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}

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

ফাইলগুলি ম্যানুয়ালি মিনিফাই করার জন্য অনলাইন টুলস

ছবি: Elegantthemes

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

• Closure Compiler (জাভাস্ক্রিপ্ট) – Closure Compiler, Closure Tools এর একটি অংশ, গুগল ডেভেলপারদের টুলসগুলির একটি স্যুট। এটি আপনাকে অন্যান্য সহায়ক অপটিমাইজেশনের পাশাপাশি আপনার জাভাস্ক্রিপ্টকে মিনিফাই করতে সহায়তা করে। আপনি নিজের জাভাস্ক্রিপ্ট জেএস ফাইলের লোকেশনের URL এন্টার করতে পারেন এবং তারপরে আপনি কীভাবে কোডটি অনুকূলিতকরণ এবং ফর্ম্যাট করতে চান তা চয়ন করতে পারেন। উদাহরণস্বরূপ, আপনি যদি চান তবেই আপনি হোয়াইটস্পেসের জন্য আপনার কোডটি অপ্টিমাইজ করতে বেছে নিয়েছেন। আপনি একবার কম্পাইল বাটনটি চাপলে, এটি আপনার জন্য কোডকে ছোট করে (বা সংকলন) করার পাশাপাশি কোনও error এর জন্য আপনার কোডটি চেক করতে পারেন।
• cssminifier.com এবং javascript-minifier.com (CSS এবং JS) – Andrew Chilton এর এই দুটি মিনিফায়ার ব্যবহার করা সহজ। শুধু আপনার কোড পেস্ট করুন এবং তারপরে মিনাইফাইড কোডটি আউটপুট করতে মিনিফাই বাটনে ক্লিক করুন। এমনকি আপনার সুবিধার্থে আপনি আউটপুট কোডটি ফাইল হিসাবে ডাউনলোড করতে পারবেন।
• csscompressor.net (শুধু CSS) – এই অনলাইন সিএসএস কম্প্রেসার দ্রুত, সহজ এবং ফ্রি সিএসএস কম্প্রেসার।
• jscompress.com (শুধু জাভাস্ক্রিপ্ট) – এই জাভাস্ক্রিপ্ট কম্প্রেসার টুলসটি আপনাকে কপি এবং পেস্টের মাধ্যমে জাভাস্ক্রিপ্ট কোড কম্প্রেস করতে দেয় এবং আপনি একসাথে একাধিক জাভাস্ক্রিপ্ট ফাইল আপলোড করতে পারেন। ভাল পেইজ লোডিং স্পিডের জন্য জাভাস্ক্রিপ্ট ফাইলগুলিকে একটি ফাইলে একত্রিত করার জন্য এটি দুর্দান্ত।
• refresh-sf.com (এইচটিএমএল, সিএসএস এবং জেএস) – এই কম্প্রেসারটি জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএল কোড প্রকারকে মিনিফাই করে দেবে। এতে আপনার প্রতিটি কোড টাইপের জন্য সব কম্প্রেসার অপশন অন্তর্ভুক্ত রয়েছে।
• htmlcompressor.com (এইচটিএমএল, সিএসএস এবং জেএস) – এই অনলাইন কম্প্রেসার/মিনিফায়ার টুলসটি এইচটিএমএল, সিএসএস এবং জেএস কোড মিনিফাই করতে দেয়। এমনকি এটি সিএসএস + পিএইচপি এবং জাভাস্ক্রিপ্ট + পিএইচপি জাতীয় বিভিন্ন সংমিশ্রিত কোডও সমর্থন করে। এমনকি আপনি error এর জন্য কম্প্রেস করা কোডও পরীক্ষা করতে পারেন।
• minifycode.com (এইচটিএমএল, সিএসএস এবং জেএস) – এই সাইটটি জাভাস্ক্রিপ্ট, সিএসএস এবং এইচটিএমএলকে একটি সাধারণ এবং পরিষ্কার ইউআই সহ মিনিফায়ার সরবরাহ করে যা একটি বাটনে এক ক্লিকের সাহায্যে আপনার কোডকে মিনিফাই করে দেয়। এটি পড়তে সহজ করার জন্য মিনিফাইড কোডকে কম্প্রেস করার জন্য একটি “বিউটিফায়ার” টুলসও অন্তর্ভুক্ত রয়েছে।

অনলাইন টুলসের মাধ্যমে ওয়েবসাইটের এইচটিএমএল, সিএসএস এবং জাভাস্ক্রিপ্ট মিনিফাই

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

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

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

Autoptimize (FREE)

ছবি: Elegantthemes

অটোপটিমাইজ সম্ভবত ওয়ার্ডপ্রেসের সর্বাধিক জনপ্রিয় মিনিফাই প্লাগইন। এটি জনপ্রিয় কারণ এটি ব্যবহার করা সহজ এবং শক্তিশালী পারফরম্যান্স বৈশিষ্ট্যে পূর্ণ। এটি আপনার কোডকে একত্রিত করে (স্ক্রিপ্টগুলি একত্রিত করতে পারে), মাইনাইফ করতে এবং কোড ক্যাশে করতে পারে। বোনাস হিসাবে আপনার কাছে গুগল ফন্ট, ইমেজ এবং আরও অনেক কিছু অনুকূল করার জন্য অতিরিক্ত অপশন রয়েছে।
অটোপটিমাইজ ব্যবহার করতে, আপনি ওয়ার্ডপ্রেস ড্যাশবোর্ডে গিয়ে Plugin>Add New এবং সার্চ করে ইনস্টল করে একটিভ করতে পারেন।

ছবি: Elegantthemes

প্লাগইনটি একটিভ হয়ে গেলে Settings>Autoptimize এ নেভিগেট করুন। তারপরে মূল সেটিংস ট্যাবের অধীনে আপনি যে কোডটি অপটিমাইজ করতে চান তা চেক করুন (এইচটিএমএল, সিএসএস, এবং/অথবা জাভাস্ক্রিপ্ট) এবং Save Changes ক্লিক করুন।

ছবি: Elegantthemes

আপনি কীভাবে আপনার কোডটি অপটিমাইজ করতে চান তা আরও কাস্টমাইজ করতে আপনি পেইজের উপরের Show Advanced Settings বাটনটিতেও ক্লিক করতে পারেন।

ছবি: Elegantthemes

Fast Velocity Minify (FREE)

ছবি: Elegantthemes

ফাস্ট ভেলোসিটি মিনিফাই হ’ল আরেকটি জনপ্রিয়, ফ্রি এবং শক্তিশালী ওয়ার্ডপ্রেস প্লাগইন যা কেবল মিনিফাই করা ছাড়াও বেশি কিছু করে। এটি আপনার সার্ভারের এইচটিটিপি অনুরোধগুলি হ্রাস করতে আপনার সিএসএস এবং জাভাস্ক্রিপ্টকে সংশোধন করে এবং সংযুক্ত করে, এভাবে আপনার পেইজ লোডিং স্পিড কমাতে সহায়তা করে। অতিরিক্ত অপ্টিমাইজেশন বিকল্পগুলি উপলব্ধ রয়েছে তবে বেশিরভাগ সাইটের জন্য ডিফল্ট সেটিংস সুন্দরভাবে কাজ করে।
প্লাগইনটি ব্যবহার করতে আগের মতো Plugin>Add New থেকে সার্চ করে ইন্সটল করুণ এবং একটিভেট করুণ।

ছবি: Elegantthemes

একবার প্লাগইনটি একটিভ হয়ে গেলে, আপনার ফাইলগুলি স্বয়ংক্রিয়ভাবে মিনিফাইড হয়ে যায় এবং সর্বোত্তম পারফরম্যান্সের জন্য অপটিমাইজ হয়।
উপলভ্য সমস্ত বিকল্প দেখতে প্লাগইন সেটিংস পেইজে (সেটিংস> ফাস্ট ভেলোসিটি মিনিফাই) যান। স্ট্যাটাস ট্যাব এর অধীনে, আপনি আপনার জাভাস্ক্রিপ্ট এবং সিএসএস ফাইলগুলি প্রক্রিয়া করা হয়েছে তার একটি সহায়ক তালিকা দেখতে পাবেন।

ছবি: Elegantthemes

এর ভিতরে Google Fonts এবং Font Awesome অপটিমাইজ করার অপশনও রয়েছে।

ছবি: Elegantthemes

W3 Total Cache (FREE)

ছবি: Elegantthemes

W3 Total Cache একটি দুর্দান্ত ক্যাচিং প্লাগইন যাতে আপনার এইচটিএমএল, জেএস এবং সিএসএসকে মিনিফাই করার অপশনও অন্তর্ভুক্ত করে।

ছবি: Elegantthemes

WP Fastest Cache (FREE)

ছবি: Elegantthemes

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

ছবি: Elegantthemes

সর্বশেষ ভাবনা

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