ওয়েব ডেভেলপমেন্ট এর সাধারন ভুল – একটু দয়া মায়া করেন !

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

ফাইল কই গেলো?

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

 

[ ফুল ভার্সন – ক্লিক করে দেখেন / দেখা জরুরী ]

আপনি আপনার সাধের ডিজাইনে ফাইল ইনক্লুড করেছেন অ্যাবসলিউট ইউ আর এল দিয়ে, ফলে ফাইলটা এখনো কল হচ্ছে লোকালহোষ্ট দিয়েই !

 যদিও আমি ঠিক জানি না এই ব্যাক্তি কেন ওয়ার্ডপ্রেস এর আপলোড ডিরেক্টইরীতে জাভাক্স্রিপ্ট ফাইল আপলোড করেছেন !  

 

সাইট এত্তো স্লো কেন? 

লোকালহোষ্টে যখন কাজ করছেন, তখন ফাইল সব আছে লোকালী, রিকোয়েষ্ট লোকালসার্ভারেই যাচ্ছে, ফাইল সেখান থেকেই আসছে । আর প্রোডাকশনে যখন যাচ্ছেন, তখন প্রতিটার জন্য সার্ভারে রিকোয়েষ্ট পাঠাতে হচ্ছে, সেটার রেসপন্স আসছে, এরপর ফাইল আসছে, আর এতে আপনার নেট কানেকশন ব্যবহৃত হচ্ছে। ফলে ফাইল আসতে তো সময় লাগবেই।

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

সাইট এত্তো ভারী লাগে কিলাই? 

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

এই সকল কোড খুঁজে খুঁজে রিমুভ করুন !

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

আর ইমেজ প্রপার সাইজে নিয়ে আসার পর, একবার স্ম্যাশ করে নেবেন। [ স্ম্যাশ . ইট ]

  • জেকোয়ারীর কোন ভার্সন দিয়েছেন জনাব? জেকোয়ারীর দুইটি ভার্সন রয়েছে, একটা ডেভেলপার ভার্সন, অন্যটা প্রডাকশন এডিশন। ডেভেলপার ভার্সনটা হলো তাদের জন্য, যাদের মাথায় পর্যাপ্ত পরিমান মাল রয়েছে, যারা জেকোয়ারীর মুল লাইব্রেরীতে নতুন কিছু সংযোজন করতে পারবে, তাদের জন্য। আর প্রডাকশন ভার্সনটা হলো প্রডাকশন সাইটে ব্যবহারের জন্য। দুইটির ব্যবহারের মধ্যে অনেক পার্থক্য রয়েছে। আপনি আমি, আমরা হলাম ভোক্তা, আমরা ব্যবহার করি, পরিবর্ধন করি না। তাই ডেভেলপমেন্ট এর সময় যদিও বা জেকোয়ারীর ডেভেলপার ভার্সন ব্যবহার করে থাকেন, প্রডাকশনের সময় করবেন না। প্রডাকশন ভার্সন ডেভেলপার ভার্সনের চেয়ে প্রায় ১৫০ কিলোবাইট ছোট !

দেশে থ্রিজি আসছে, তবে এখনো অনেকের কাছে ১৫০ কিলোবাইট বিশাল ব্যাপার। একটু তো দয়া মায়া করেন !

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

 

10 Comments

  1. tanvir

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

    • oritromax

      রিসোর্স কমপ্রেস করার ক্ষেত্রে কিছু জিনিস একটু ট্রিকি / কারন ষ্ট্যাটিক ওয়েবসাইট আর ওয়ার্ডপ্রেস এর ক্ষেত্রে দুইটার অ্যাপ্রোচ দুইরকম। ওয়ার্ডপ্রেস নিয়ে আগেও আমার একটা লেখা আছে। আর্কাইভে খুঁজলেই পাবেন। ষ্ট্যাটিক সাইট নিয়ে লিখবো ভাবছি।

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

      • tanvir

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

    • যেকোনো ফাইল dreamweaver এ ওপেন করে ctrl+f প্রেস করে সার্চ বক্স খুলে তাতে স্পেস কে null ভ্যালু দিয়ে replace all করুন। সুন্দর compressed version তৈরি হবে আপনার জন্য । 🙂

      • oritromax

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

  2. Rupok Chowdhury

    If you use photoshop, you don’t need to use “Smush.it”

    When you are done with editing, Press Ctrl+Alt+Shift+S [In Windows]. Or from “File > Save For Web & Devices”. You can control the compressing so that you can balance the quality and compression.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.