এইচটিএমএল কিভাবে কাজ করে এবং কেন আপনার এটি প্রয়োজন হতে পারে

এইচটিএমএল কিভাবে কাজ করে এবং কেন আপনার এটি প্রয়োজন হতে পারে

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





এই প্রবন্ধে, আমরা এইচটিএমএল ফাইল সঙ্কুচিত করার দুটি প্রধান পদ্ধতি, কেন এইচটিএমএল ফাইল সঙ্কুচিত হওয়া উচিত এবং কীভাবে এটি সম্পর্কে যেতে হবে তা নিয়ে আলোচনা করব।





কম্প্রেশন বনাম মিনিফিকেশন

যতদূর এইচটিএমএল ফাইল অপ্টিমাইজ করা হয়, তার জন্য দুটি প্রধান পদ্ধতি রয়েছে: সঙ্কোচন এবং ক্ষুদ্রীকরণ । তারা পৃষ্ঠের অনুরূপ শব্দ, কিন্তু আসলে দুটি স্বতন্ত্র কৌশল, তাই তাদের বিভ্রান্ত করবেন না।





ক্ষুদ্রীকরণ

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

নমুনা HTML পৃষ্ঠা:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

মূল আকার: 354. ছোট আকার: 272. সঞ্চয়: 82 (23.16%)।

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





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

সঙ্কোচন

যখন ব্যবহারকারীরা আপনার ওয়েবসাইটে যান, তারা HTTP প্রোটোকল ব্যবহার করে। ব্রাউজার একটি নির্দিষ্ট পৃষ্ঠার জন্য আপনার ওয়েব সার্ভারে একটি অনুরোধ পাঠায়, আপনার ওয়েব সার্ভার পৃষ্ঠাটি খুঁজে পায়, তারপর সেই পৃষ্ঠার বিষয়বস্তু ভিজিটর ব্রাউজারে ফেরত পাঠায়।





কিন্তু যেহেতু HTTP প্রোটোকল কম্প্রেশন সমর্থন করে, আপনার ওয়েব সার্ভারটি ভিজিটরকে পাঠানোর আগে পৃষ্ঠাটি সংকুচিত করতে পারে (আপনার সার্ভারের সেটিংসে কম্প্রেশন চালু আছে বলে মনে করা হচ্ছে), এবং তারপর ভিজিটর ব্রাউজার পৃষ্ঠাটিকে তার মূল অবস্থায় ফিরিয়ে আনতে পারে।

সবচেয়ে সাধারণ কম্প্রেশন স্কিম হল জিজেডআইপি , যা একটি ফাইল ফরম্যাট যা ব্যবহার করে a ক্ষতিহীন কম্প্রেশন অ্যালগরিদম DEFLATE বলা হয়।

অ্যালগরিদম এইচটিএমএল ফাইলে পাঠ্যের পুনরাবৃত্তি ঘটার জন্য সন্ধান করে, তারপর সেই পুনরাবৃত্তি ঘটনাগুলিকে পূর্ববর্তী ঘটনার রেফারেন্স দিয়ে প্রতিস্থাপন করে। প্রতিটি রেফারেন্স কেবল দুটি সংখ্যা: রেফারেন্স কতটা পিছনে এবং আমরা কতগুলি অক্ষর উল্লেখ করছি।

এই ধরনের পাঠ্যের একটি স্ট্রিং বিবেচনা করুন (উদাহরণ GZIP ওয়েবসাইট থেকে নেওয়া):

Blah blah blah blah blah.

অ্যালগরিদম নিম্নলিখিত পুনরাবৃত্তি স্বীকৃতি দেয়:

B{lah b}{lah b}{lah b}{lah b}lah.

প্রথম ঘটনাটি আমাদের রেফারেন্স, তাই এটিকে ছেড়ে দিন:

Blah b{lah b}{lah b}{lah b}lah.

দ্বিতীয় ঘটনাটি প্রথম ঘটনাকে বোঝায়, যা পাঁচটি অক্ষর পিছনে এবং পাঁচটি অক্ষর দীর্ঘ:

Blah b[5,5]{lah b}{lah b}lah.

কিন্তু এই ক্ষেত্রে, অ্যালগরিদম স্বীকার করে যে পরবর্তী ঘটনাটি একই অক্ষরের ক্রম, তাই এটি রেফারেন্সের দৈর্ঘ্য আরও পাঁচটি বাড়িয়ে দেয়:

Blah b[5,10]{lah b}lah.

এবং আবার:

Blah b[5,15]lah.

এবং অ্যালগরিদম যথেষ্ট স্মার্ট যে বুঝতে পারে যে পরবর্তী তিনটি অক্ষর রেফারেন্সের প্রথম তিনটি অক্ষর, তাই এটি তিনটি দ্বারা প্রসারিত:

Blah b[5,18].

এখন একটি সাধারণ এইচটিএমএল ফাইল সম্পর্কে চিন্তা করুন এবং এর মধ্যে কতটা পুনরাবৃত্তি বিদ্যমান। প্রায় প্রতিটি ট্যাগ, যেমন

, একটি অনুরূপ সমাপ্তি ট্যাগ আছে, যেমন

। উপরন্তু, অনেক ট্যাগ জুড়ে পুনরাবৃত্তি করা হয়, যেমন

,

,

,

  • , ইত্যাদি বৈশিষ্ট্যগুলিও প্রায়ই পুনরাবৃত্তি করা হয়, সহ

    class

    ,

    href

    , এবং

    src

    । GZIP কম্প্রেশন এইচটিএমএল এর সাথে এত কার্যকর কেন তা দেখা সহজ।

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

    কেন আপনি কমপ্রেস এবং ছোট করা উচিত

    দুটি প্রধান সুবিধা রয়েছে, যা উভয়ই আজকের মোবাইল-ভারী ওয়েব ল্যান্ডস্কেপে গুরুত্বপূর্ণ।

    দ্রুত পৃষ্ঠা লোড

    গড়, একটি HTML মিনিফায়ার মৌলিক সেটিংস সহ একটি ফাইলের আকার প্রায় 3 শতাংশ কমাতে পারে। Advancedচ্ছিক উন্নত সেটিংসের সাহায্যে, একটি এইচটিএমএল ফাইলকে আরো 3 থেকে 7 শতাংশ কমিয়ে 10 শতাংশ পর্যন্ত সম্ভাব্য হ্রাস করা যেতে পারে। এটি সরাসরি দ্রুত পৃষ্ঠা লোডের সময়ে অনুবাদ করে।

    কম ব্যান্ডউইথ ব্যবহার করা হয়

    ধরুন আপনার 10 টি ফাইল আছে, প্রতিটি 50 KB থেকে মোট KB থেকে 45 KB পর্যন্ত মোট 50 KB এর সংকোচনের জন্য। এবং ধরা যাক আপনার ওয়েবসাইট প্রতিদিন গড়ে 1,000 দর্শক পরিবেশন করে, যেখানে প্রতিটি ভিজিটের গড় দশ পৃষ্ঠা। শুধুমাত্র HTML মিনিফিকেশন আপনার ব্যান্ডউইথ ব্যবহার প্রতিদিন 50 MB (প্রতি মাসে 1.5 GB) কমিয়ে দেয়।

    কম্প্রেশন + মিনিফিকেশন

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

    কিভাবে আপনার কম্পিউটারকে দ্রুত উইন্ডোজ ১০ বানাবেন

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

    গড়, আপনি আশা করতে পারেন যে GZIP কম্প্রেশন একটি HTML ফাইল 70 থেকে 90 শতাংশ সঙ্কুচিত করবে। একটি রক্ষণশীল সংকোচনের অনুমানের সাথে উপরের উদাহরণটি ব্যবহার করে, ছোট করা এইচটিএমএল ফাইলগুলি K৫ কেবি থেকে মোট সংকোচনের জন্য K৫ কেবি থেকে ১.5.৫ কেবি পর্যন্ত হবে। অসম্পূর্ণ/অসম্পূর্ণতার তুলনায়, আপনার সাইটের ব্যান্ডউইথ এখন প্রতিদিন 365 এমবি (প্রতি মাসে 11 জিবি) হ্রাস পেয়েছে।

    এবং ব্যান্ডউইথ সঞ্চয়ের শীর্ষে, প্রতিটি পৃষ্ঠা নাটকীয়ভাবে দ্রুত লোড হয় কারণ শেষ ব্যবহারকারীর ব্রাউজারে শুধুমাত্র 13.5 কেবি বনাম 50 কেবি প্রতি পৃষ্ঠা ডাউনলোড করতে হবে।

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

    সৌভাগ্যবশত, এই দিনগুলি খুব কঠিন নয়, এবং সেগুলি সেট আপ করার জন্য আপনার অনেক প্রযুক্তিগত জ্ঞানের প্রয়োজন নেই।

    ওয়ার্ডপ্রেস প্লাগইন

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

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

    আপনি যদি কেবল ছোট করা চাই, আমরা সুপারিশ করি HTML ছোট করুন প্লাগ লাগানো. এটি সহজ, এইচটিএমএল/সিএসএস/জেএস সমর্থন করে এবং আপনাকে মিনিফিকেশন পদ্ধতিতে কিছুটা পরিবর্তন করতে দেয় (উদা অপসারণ করা

    http:

    এবং

    https:

    ইউআরএল থেকে)।

    স্ট্যাটিক এইচটিএমএল মিনিফায়ার

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

    ছোট করার জন্য, এই সরঞ্জামগুলির মধ্যে একটি ব্যবহার করুন:

    আপনি যদি ওয়ার্ডপ্রেসের মতো CMSes থেকে দূরে সরে যান এবং এখন স্ট্যাটিক সাইট জেনারেটর ব্যবহার করেন তবে এটি একটি কার্যকর কৌশল।

    GZIP কম্প্রেশন সক্ষম করুন

    আপনি কোন ওয়েব সার্ভার সফটওয়্যার ব্যবহার করছেন তার উপর নির্ভর করে GZIP কম্প্রেশন সক্ষম করার ধাপগুলি ভিন্ন হতে পারে। যেহেতু অ্যাপাচি হল সবচেয়ে জনপ্রিয় বিকল্প, আমরা এটি .htaccess ব্যবহার করে কীভাবে এটি সক্ষম করব তা কভার করব।

    FTP ব্যবহার করে আপনার ওয়েব সার্ভারে সংযোগ করুন, তারপরে একটি ফাইল তৈরি করুন

    .htaccess

    রুট ডিরেক্টরিতে। নিম্নলিখিত সেটিংস পেতে .htaccess ফাইলটি সম্পাদনা করুন:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*


    SetOutputFilter DEFLATE

    আপনার ওয়েবসাইটে কম্প্রেশন কাজ করছে কিনা নিশ্চিত নন? এই টুল দিয়ে এটি পরীক্ষা করুন

    চূড়ান্ত দক্ষতার জন্য, আপনারও উচিত কিভাবে আপনার CSS চেক, পরিষ্কার এবং অপ্টিমাইজ করা যায় সে সম্পর্কে জানুন

    শেয়ার করুন শেয়ার করুন টুইট ইমেইল আপনার কি অবিলম্বে উইন্ডোজ 11 এ আপগ্রেড করা উচিত?

    উইন্ডোজ 11 শীঘ্রই আসছে, কিন্তু আপনার যত তাড়াতাড়ি সম্ভব আপডেট করা উচিত বা কয়েক সপ্তাহ অপেক্ষা করা উচিত? খুঁজে বের কর.

    পরবর্তী পড়ুন
    সম্পর্কিত বিষয়
    • প্রোগ্রামিং
    • এইচটিএমএল
    • ওয়েব ডেভেলপমেন্ট
    লেখক সম্পর্কে জোয়েল লি(1524 নিবন্ধ প্রকাশিত)

    জোয়েল লি 2018 সাল থেকে MakeUseOf এর প্রধান সম্পাদক। তার একটি বি.এস. কম্পিউটার বিজ্ঞানে এবং নয় বছরেরও বেশি পেশাদারী লেখালেখি এবং সম্পাদনার অভিজ্ঞতা।

    জোয়েল লি থেকে আরো

    আমাদের নিউজলেটার সদস্যতা

    প্রযুক্তি টিপস, রিভিউ, ফ্রি ইবুক এবং এক্সক্লুসিভ ডিলের জন্য আমাদের নিউজলেটারে যোগ দিন!

    সাবস্ক্রাইব করতে এখানে ক্লিক করুন