ওয়েব ডিজাইনারদের জন্য কোড অপটিমাইজেশন টিপস

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

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

এক, দুই কিলোবাইটও অনেক বড় বলে মনে করতে হয়। মিলিসেকেন্ড দ্রুত কাজ হলে সেটা কম কিছু না। সাইটের কোড অপটিমাইজেশনের মাধ্যমে ৩০% এর মতো ছোট করে ফেলা যায় একটা সাইট। তার মানে লোডও হবে দ্রুত। আপনার সাইটে যদি প্রতি দিন ৫০০০ পাঠক আসে এবং সাইটের কোড অপটিমাইজ করে যদি ২০ কিলোবাইট কমাতে পারেন তাহলে ৫০০০*২০=১০০০০০ কিলোবাইট বা প্রতিদিন ১০০ মেগাবাইট ব্যান্ডউইথ বাঁচানো যায়, মাসে ৩ গিগাবাইট।

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

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

সিএসএস অপটিমাইজেশনঃ

ওয়েবসাইটের সিএসএস ফাইলটি সাধারনত ছোট আকারেরই (সাধারনতঃ ২০ কিলোবাইটের নিচে) হয়ে থাকে। কোন সিএমএসের থিমের কোড একটু বড়ও হতে পারে। কোড লেখার সুবিধার জন্য অনেক কিছু করা প্রয়োজন হয় যেমন- সাইড নোট দেওয়া, প্রতিটি আইডি ও ক্লাসের অবজেক্টগুলো (এন্টার,ট্যাব ও স্প্যাস দিয়ে) আলাদাভাবে দেখানো ইত্যাদি। কোড বোঝার ও লেখার সুবিধার্থে যেভাবেই রাখেন না কেন এন্টার, ট্যাব ও স্প্যাসগুলোও একটা নিদিষ্ট জায়গা দখল করে আছে।

কয়েকটি অপটিমাইজেশন টিপস আছে যেগুলো অনুসরন করলে পরবর্তিতে কোডিং করতে অসুবিধা হতে পারে। তাই ডিজাইনের কাজটি শেষে বেশ কিছু পদ্ধতি অবলম্বন করা যেতে পারে।

১. সাইড নোট মুছে দেওয়া।

২. গ্রুপ সিলেক্ট ব্যবহার করা। এখানে একসাথে তিনটি সিলেক্টরের কাজ একসাথে করা হয়েছে। যেমন-

h2, p, .block {
	font-size: 1.5em;
	padding: 10px 10px 10px 25px;
	margin: 10px 0;
	border: 1px solid #ddd;
	background: #f0f0f0 url(crown.gif) no-repeat 5px 10px;
}

৩. শর্ট কোড  ব্যবহার করা যেমন- #000000 এর পরিবর্তে #000

৪. কোডগুলো অপটিমাইজ করার জন্য অনলাইন অপটিমাইজ সার্ভিস ব্যবহার করতে পারেন। সেখানে শুধু কোড গুলো জমা দিলে সেগুলো অপটিমাইজ কোড তৈরী করে দেবে।

জাভাস্ক্রিপ্ট অপটিমাইজ

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

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

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