সিএসএসে সেরা বাস্তবায়ন মাইনাইফ কীভাবে করবেন?

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

• ম্যানিফিকেশন কী?
  
• কেন খাটো প্রয়োজন?
  
• আপনি কীভাবে সিএসএস, জেএস, এইচটিএমএল কোডটি মাইনাইফ করবেন?
  
• আপনি কখন এটি করা উচিত?
  
• ম্যানিফিকেশন সুবিধা?

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

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

তবে পুরো প্রক্রিয়াতে, আমরা আমাদের ফাইলের আকারটি যে স্ট্রিংগুলি বাড়িয়ে দিচ্ছি তা আলগা করার ঝোঁক রয়েছে যার ফলস্বরূপ ওয়েবসাইটের লোডিংয়ের সময় বাড়িয়ে দেয়। বিশেষত যে ওয়েবসাইটগুলিতে প্রধান কার্যকারিতা এবং অ্যাড-অন রয়েছে তাদের দীর্ঘতর কোড বেস কেবল ওয়েবসাইটকে আরও খারাপ করে।

গুগল যাইহোক ওয়েবসাইটগুলি সরবরাহ করে এমন সর্বোত্তম ব্যবহারকারীর অভিজ্ঞতার ভিত্তিতে তার অনুসন্ধান পৃষ্ঠায় ওয়েবসাইটগুলি র‌্যাঙ্ক করার জন্য একটি সীমিত ফর্ম্যাট রয়েছে has আপনার সাইটটি যত ভাল লোড হবে তত ভাল আপনার ওয়েবসাইট অনুসন্ধান পৃষ্ঠায় স্থান পাবে।

এতটা ঝুঁকির সাথে, আপনি চান না যে আপনার ব্যবহারকারীরা খারাপ সাইট লোড সময় কারণে ভুগতে হবে এবং পরেরটিতে যেতে পারে। সুতরাং, কোডের সংশোধন অত্যন্ত গুরুত্বপূর্ণ।

স্ট্রিং একাধিক সীমানা জাভা বিভক্ত

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

প্রবেশ, মিনিফিকেশন ..

মিনিফাইএস সিএসএসে এই নিবন্ধটি নিয়ে চলছে

কি সংক্ষিপ্তকরণ ?

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

• সাদা স্থানের অক্ষর
• নতুন রেখার অক্ষর
• ডিলিমিটারগুলিকে ব্লক করুন
• মন্তব্য
• পরিবর্তনশীল নামগুলি সংক্ষিপ্তকরণ

এই বিষয়গুলি আপনার ওয়েবসাইটটি চালিত করার পরিবর্তে কেবল ফাইলটিকে আরও ভারী করা এবং ওয়েবসাইটের লোডিংয়ের সময় বাড়ানোর সাথে জড়িত নয়।

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

আসুন একটি উদাহরণ নেওয়া যাক:

#myContent {হরফ-পরিবার: মন্টসারেট} #myContent {ফন্ট-আকার: 90%
আমার সিএসএস মিনিট করুন
 

মূল এবং সংশোধিত ফাইলে প্রায় 48% এর পার্থক্য। 178 বাইট দ্বারা হ্রাস পেয়েছে। মিনিফিকেশন পরে

#myContent {হরফ-পরিবার: আরিয়ালফন্ট-আকার: 90%
ওহে বিশ্ব!
 

মিনিফাইএস সিএসএসে এই নিবন্ধটি নিয়ে চলছে

কেন সংক্ষিপ্তকরণ দরকার?

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

মিনিফাইএস সিএসএসে এই নিবন্ধটি নিয়ে চলছে

তুমি কেমন করে ছোট করা সিএসএস, জেএস, এইচটিএমএল কোড?

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

CSSminifier.com: ব্যবহারের জন্য একটি অত্যন্ত সাধারণ সরঞ্জাম। কেবল বাম পাশের কোডটি অনুলিপি করুন, সংশোধিত ফাইল তৈরি করুন এবং এটি ডাউনলোড করুন। মিনিফাইড ফাইলটিতে একটি এক্সটেনশন .min থাকবে।

আপনার সংশোধিত সিএসএস ফাইলে এক্সটেনশন ডেমো.মিন.সিএসএস থাকবে।

Smallseotools.com: হয় আপনার কোডটি অনুলিপি করুন বা আপনার কোড ফাইল আপলোড করুন। এটি আপনার কোডকে ছোট করে দেবে এবং আপনাকে এটি অনুলিপি করতে বা ডাউনলোড করতে দেয়।

অটোপটিমাইজ করুন: এটি এমন একটি প্লাগইন যা আপনি আপনার ওয়ার্ডপ্রেস সরঞ্জামগুলিতে যুক্ত করতে পারেন। প্লাগইন হিসাবে, আপনি নিজের সিএসএস কোডটি সেখানে এবং পরে সংশোধন করতে বেছে নিতে পারেন।

কখন ফাইলটি মিনিমাইজ করা হয় এবং কখন না হয় তা বিকাশকারীদের পক্ষে বোঝা সহজ। একটি মিনিফাইড ফাইলে একটি এক্সটেনশন .min থাকবে।

মিনিফাইএস সিএসএসে এই নিবন্ধটি নিয়ে চলছে

আপনি কখন এটি করা উচিত?

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

সুবিধা সংক্ষিপ্তকরণ ?

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

মনে রাখার মতো ঘটনা:

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

এটি কি সংকোচনের অনুরূপ?

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

উদাহরণ:

মাইনাইফিকেশনের আগে:

পোর্টফোলিও
 
বাড়ি
 
 

ম্যানিফিকেশন পরে:

পোর্টফোলিও
বাড়ি

কোডটি অবশ্যই কোনও মানুষের পক্ষে পড়তে ও বুঝতে পারা শক্ত কিন্তু মেশিনের রেন্ডার করার জন্য এটি সমানভাবে প্রশংসনীয়। কোনও মেশিন কোড এবং ব্যবধানের সৌন্দর্যের বিষয়ে সত্যই চিন্তা করে না, এটি টুকরোটি বোঝে এবং সেই অনুযায়ী কাজ করে।

সংশোধন কৌশলটি দ্বারা যথেষ্ট প্রভাবিত?

তারপরে নিজের জন্য চেষ্টা করুন। আপনার ফাইলের বোঝা হ্রাস করুন এবং আপনার ওয়েবসাইটকে সমস্ত ব্যবহারকারীর জন্য অবাধে প্রবাহিত করুন!

এটি সিএসএসে মিনিফাইয়ে এই নিবন্ধটির শেষের দিকে নিয়ে আসে।

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

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