HTML মিনিফায়ার

HTML মিনিফিকেশন কী?

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

ব্রাউজার HTML-কে একটি DOM ট্রিতে পার্স করে এবং সেই প্রক্রিয়ায় বেশিরভাগ হোয়াইটস্পেস বাতিল করে দেয়। দুটি div ট্যাগের মাঝে স্পেস ও লাইন ব্রেকের ক্রম রেন্ডার করা পৃষ্ঠায় কোনো দৃশ্যমান প্রভাব ফেলে না। কমেন্টও পার্সার উপেক্ষা করে। মিনিফিকেশন এই নিয়মগুলো ব্যবহার করে, পার্সার যা বাতিল করত তা ছেঁটে ফেলে, যাতে তা কখনো নেটওয়ার্কে পাঠাতে না হয়।

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

এই HTML মিনিফায়ার কেন ব্যবহার করবেন?

আপনার HTML পেস্ট করুন এবং তাৎক্ষণিকভাবে মিনিফাইড আউটপুট পান। কোনো বিল্ড টুল ইনস্টল করতে হবে না, কোনো কনফিগারেশন ফাইল নেই, কোনো অ্যাকাউন্ট নেই।

HTML মিনিফায়ারের ব্যবহারের ক্ষেত্র

HTML মিনিফিকেশনে কী সরানো হয়

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

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

ডেভেলপাররা মাঝেমাঝে জিজ্ঞাসা করেন যে সার্ভার ইতিমধ্যে Gzip বা Brotli কম্প্রেশন প্রয়োগ করলে মিনিফিকেশন এখনো প্রয়োজনীয় কিনা। সংক্ষিপ্ত উত্তর: হ্যাঁ, এবং তারা একসাথে সবচেয়ে ভালো কাজ করে।

মিনিফিকেশন Gzip যে ইনপুট প্রসেস করে তা কমিয়ে দেয়, ফলে কম্প্রেস করা আউটপুটও ছোট হয়। Google-এর PageSpeed গাইডলাইন উভয় প্রয়োগের সুপারিশ করে। একটি সাধারণ পৃষ্ঠায়, মিনিফিকেশন কাঁচা আকারের ১৫-২৫% সাশ্রয় করে এবং Gzip ফলাফলকে আরো ৬০-৮০% কম্প্রেস করে। একত্রে, মোট ট্রান্সফার আকার মিনিফাই না করা, কম্প্রেস না করা মূল ডকুমেন্টের ১০-২০%-এ নেমে আসতে পারে।

কোড উদাহরণ

নিচে চারটি পরিবেশে HTML মিনিফিকেশনের কার্যকরী উদাহরণ দেওয়া হয়েছে। প্রতিটি উদাহরণ কমেন্ট সরায় এবং হোয়াইটস্পেস সংকুচিত করে।

import { minify } from 'html-minifier-terser'

const html = `
  <div class="card">
    <!-- user profile -->
    <p>  Hello, world!  </p>
  </div>
`

const result = await minify(html, {
  collapseWhitespace: true,
  removeComments: true,
  removeRedundantAttributes: true,
  removeEmptyAttributes: true,
})
// → '<div class="card"><p>Hello, world!</p></div>'

import htmlmin

html = """
<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>
"""

result = htmlmin.minify(html, remove_comments=True, remove_empty_space=True)
# → '<div class="card"><p>Hello, world!</p></div>'

package main

import (
    "fmt"
    "github.com/tdewolff/minify/v2"
    "github.com/tdewolff/minify/v2/html"
)

func main() {
    m := minify.New()
    m.AddFunc("text/html", html.Minify)

    input := `<div class="card">
  <!-- user profile -->
  <p>  Hello, world!  </p>
</div>`

    result, _ := m.String("text/html", input)
    fmt.Println(result)
    // → <div class=card><p>Hello, world!</div>
}

# Install globally
npm install -g html-minifier-terser

# Minify a file
html-minifier-terser --collapse-whitespace --remove-comments input.html -o output.html

# Pipe from stdin
cat index.html | html-minifier-terser --collapse-whitespace --remove-comments

# With all common optimizations
html-minifier-terser \
  --collapse-whitespace \
  --remove-comments \
  --remove-redundant-attributes \
  --remove-empty-attributes \
  --minify-css true \
  --minify-js true \
  input.html -o output.min.html

সচরাচর জিজ্ঞাসিত প্রশ্ন